收录了一些个人觉得不错的网页开发插件。
由于插件更新频繁，本页如有错误请指正，也欢迎告知更多功能强大、使用方便的插件。
| 插件 | 简介 | 备注 |
| 框架 | ||
| jQuery | 最流行的 JS 框架 | 下载、中文文档、英文整合文档、中文整合文档，浏览器支持、来自 css88 的文档 官方建议 IE 6-8 使用 1.12.4 |
| Angular、中文版 AngularJS (version 1.x) | 一套框架，多种平台同时适用手机与桌面 | MVC 架构，使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易 |
| Vue.js | 是一套用于构建用户界面的渐进式框架。 | |
| Bootstrap、中文版 | 简洁、直观、强悍的前端开发框架 | 英文文档、v3中文文档、v2中文文档、视频教程，主题和模板 |
| jQuery UI | 为 jQuery 提供更丰富的功能 | 示例：Datepicker、Color Animation、Shake Effect |
| 功能 | ||
| jQuery File Upload | jQuery 文件上传 | 英文文档 |
| jQuery Cookie | 读取、写入和删除 cookie | 浏览器支持，文档 |
| json2.js | json 操作库 | 已弃用，旧 IE 用 jQuery 的 parseJSON，HTML 5 用 JSON.parse |
| Lightbox | 老牌图片浏览插件 推荐使用更强大的 Viewer.js | |
| Swiper、中文版 | 最现代的移动触摸滑块（Most Modern Mobile Touch Slider） | 英文文档，中文文档，旧浏览器支持版本：2.x.x，Swiper 2 英文文档，中文文档 |
| jquery-cropper | 图片裁剪 | |
| FastClick | 用于消除手机浏览器上触摸事件触发之间的 300 毫秒延迟 | 用法，不应用的场景 |
| PACE | 页面加载进度条 | 文档，IE8+ |
| toastr | jQuery 通知 | 文档 |
| Autosize | 一款小巧的，可自动调整 textarea 高度的独立脚本 | IE9+ |
| X-editable | 允许您在页面上创建可编辑元素 | 文档，Demo |
| select2 | 一款提供搜索过滤、自定义样式的下拉框插件 | |
| jQuery Tags Input | 标签输入框 | 用法 |
| Viewer.js | 图片浏览插件 | GitHub（viewerjs）、GitHub（jquery-viewer） jquery-viewer 是 viewerjs 的 jQuery 插件，即在 jQuery 环境中要同时引用这两个脚本。 |
| PDF.js | A general-purpose, web standards-based platform for parsing and rendering PDFs. | |
| 编辑器 | ||
| UEditor | 百度在线编辑器 | GitHub 下载、文档、ASP.NET 部署教程 |
| 日期时间 | ||
| bootstrap-datepicker | Bootstrap 日期选择器 | Online Demo |
| DateTimePicker | 日期时间选择 | |
| MultiDatesPicker | 多日期选择 | |
| FullCalendar | 日历日程事件工作表 | IE 9+, jQuery 2.0.0+ |
| TimeTo | 计时、倒计时 | |
| 图表 | ||
| D3.js | D3.js 是基于数据驱动文档工作方式的一款 JavaScript 函数库，主要用于网页作图、生成互动图形，是最流行的可视化库之一。 | |
| Highcharts、中文版 | 兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库 | 文档 |
| ECharts | 百度图表控件 | |
| AntV | 来自蚂蚁金服的专业、简单、无限可能的可视化解决方案 G2 - 专业易用的可视化类库 G2-mobile - 移动端高性能可视化类库 G6 - 关系图可视化类库 | 流程图, 关系图, 可视化规范, 地图, 河流图, 力导图, 网络图, UML图, 业务流程图, 时序图 |
| SyntaxHighlighter | 功能齐全的代码语法高亮插件（JS） | |
| 动态排名数据可视化 | 将历史数据排名转化为动态柱状图图表 开源代码，非插件，修改使用 | GitHub、视频教程、EV录屏、网页示例、视频效果 |
| 图标 | ||
| Font Awesome | 完美的图标字体 | IE 8+，v3.2.1 支持 IE 7，进阶用法（定宽/边框/动画/旋转/叠加） |
| Glyphicons | 图标字体 | 作为 Bootstrap 组件 |
| Iconfont | 阿里巴巴矢量图标库 | 用户可以自定义下载多种格式的 icon，也可将图标转换为字体，便于前端工程师自由调整与调用 |
| UI 框架 | ||
| WeUI | 同微信原生视觉体验一致的基础样式库 | Demo、Wiki |
| Apple UI Design Resources | 苹果用户界面设计资源 | |
若在谷歌浏览器中记住密码，再次打开时，表单中自动填充的文本框和下拉框都变成了黄色背景，影响界面美观，可以使用以下样式修正：
/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus
input:-webkit-autofill,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
border: 1px solid green;
-webkit-text-fill-color: green;
-webkit-box-shadow: 0 0 0px 1000px #000 inset;
transition: background-color 5000s ease-in-out 0s;
}
具体样式请自行修改。
参考资料：https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/
程序设计规范：
【推荐】上传的文件直接保存到文件存储服务（如阿里云 OSS），这样即使被上传了后门 shell，对网站服务器也不会有影响。
否则必须通过文件头来确定文件类型，检查文件十六进制的文件头和文件尾是否合法，并检查文件流中是否包含 php、evel 等字符。
不可直接使用客户端文件名来保存文件，特别是后缀名/扩展名。应生成随机文件名，并通过检验文件头来确定文件类型。必须由程序指定保存目录。
使用 OSS 的应直接上传，不要在 ECS 上临时存放或备份。如必须存放的，应按上述规范操作。
服务器安全设置
CentOS + nginx + PHP：
全站文件取消属性中的“执行”权限（chmod），因为这个“执行”与运行 PHP 无关。而需要上传文件的“目录”需要“执行”权限，原因是需要往该目录创建文件。
仅需要写入的目录或文件设置“写入”权限。如上传图片目录、ThinkPHP 的 Runtime 目录。
凡可写目录或文件均不允许运行 PHP / PY 等 除需要被直接访问的 PHP / PY 文件，其它动态文件均不允许被访问到，在 nginx 的配置文件中添加项，参：https://xoyozo.net/Blog/Details/nginx-location-if，若全站使用统一的入口文件访问，那么设置仅该文件允许运行 PHP 即可。通过 IO 方式被其它文件包含的文件，无需运行 PHP 权限。（“deny all”对 include 起作用，但对 IO 不起作用，因此 Runtime 目录可以继续为 ThinkPHP 提供缓存服务。）这一步非常有用。
使用与 nginx 网站用户不同的用户来部署网站文件，如宝塔面板 PHP 使用 www 用户，那么就使用 root 或其它新用户来上传文件，否则将导致全站目录和文件可写。有条件的建议不同网站使用不同的用户，可防止一个网站被入侵后导致其它网站文件或磁盘上的其它文件被泄露的风险（2022年10月2日从宝塔官方社区获悉，宝塔面板暂不支持使用非 www 用户创建并运行网站）。
Windows Server + IIS + ASP.NET：
配置每个磁盘的安全属性，拒绝“IIS_IUSRS”这个用户组的所有权限。只要设置驱动器即可，子文件夹和文件会自动继承。若运行 .NET Framework 项目，需要设置 C:\Windows\Microsoft.NET\Framework\v*.*.*****\Temporary ASP.NET Files\ 目录可修改写入权限，.NET Core 项目不需要此设置。
为每个网站创建一个新用户，仅隶属于“IIS_IUSRS”。网站根目录安全属性添加该用户，权限选择“读取”。（已测取消“读取与执行”不影响 PHP，“列出文件夹内容”视业务需求开启，建议关闭）。仅需要上传文件的目录或文件设置“修改”、“写入”权限。（修改对应修改文件，写入对应上传文件）
IIS 网站中设置“物理路径凭据”以及应用程序池的“标识”。
IIS 中设置写入目录的“处理程序映射”无脚本。
了解使用 Visual Studio 创建的模板项目
启动 VS，从菜单项打开：文件 - 新建 - 项目，在已安装的模板中选择 .NET Core，选择 ASP.NET Core Web Application(.NET Core)，给项目取个名称，确定。选择 Web 应用程序，确定。
· global.json: 你可以在这里放置解决方案的配置信息和工程之间的引用。作用类似于 *.sln 文件。
· Program.cs: 这个文件包含了 ASP.NET Core 应用的 Main 方法，负责配置和启动应用程序。
· src 文件夹: 包含组成你应用程序的全部项目代码。
· wwwroot: 你的静态文件将被放置在这个文件夹，它们都将作为资源直接提供给客户端，包含 HTML，CSS 和 JavaScript 文件。可以在 project.json 内重置。
· project.json: 包含项目设置。在 ASP.NET Core 中，你可以通过使用 NuGet 程序包管理工具（NPM）添加 NuGet 包或者编辑这个文件来管理从属。
· project.lock.json: 由 project.json 生成。
· Startup.cs 这个主要放置你 ASP.NET Core 的 stratup 和 configuration 代码。ConfigureServices 方法定义了你应用程序使用的服务，Configure 方法用来定义组成请求管道的中间件。
一些备注：
ASP.NET Core 项目中不能创建 Web 窗体页面（.aspx）
发布后的网站根目录是项目中的 /wwwroot 目录
路由在 Startup 的 Configure 方法中配置
当用户向 <input> 或 <textarea> 输入时执行事件。
可用于统计输入字数，判断输入内容是否规范等。
| 对比事件 | 对比事件特点 | oninput 事件特点 |
| onkeypress | 获得当前字符输入前的内容，不能在右键操作时执行 | 获得当前字符输入后的内容 |
| onkeyup | 不能在右键操作时执行 | 在任何情况的内容变化时执行 |
| onchange | 在失去焦点时执行，而且值有所改变，推荐用在 <select> 上 | 在输入时执行 |
但是通过 JS 来更改内容时不触发上述任何事件，不完美的解决方案是使用定时器。
IE8 及更早版本不支持 oninput，可以用 onpropertychange 代替。
BUG：在 IE9 的右键菜单剪切或删除中无效。
jQuery 例子：
$('#mytextarea').on('input propertychange', function () {
console.log($(this).val().length);
});
<input name="aaa" id="theinput" type="checkbox" />
// 选中它
$('input[name="aaa"]').prop("checked", true);// 取消它
$('input[name="aaa"]').prop("checked", false);// 顺便提一下将 select 选中首项
$("#ddl_types option:first").prop('selected', true);// 获取选中的项
$('input[name="aaa"]:checked').each(function(){ });// 获取项是否选中
$('#theinput').is(':checked')或
$('#theinput').prop('checked')或
theinput.checked
// 获取 radio 选中项的值
$('input[name="aaa"]:checked').val()
本文适用且不限于 iTunes 12.5，在 Windows 上实现。
iPhone / iPad 的铃声文件是 .m4r 格式的，可以通过 iTunes 将 .mp3 /.wav 等其它格式的音乐文件转换成 .m4r 文件。
打开 iTunes
菜单栏选择：文件 - 将文件添加到资料库 - 从文件资源管理器中选择要作为铃声的音乐文件
如果要截取其中一段音乐作为铃声，则在资料库中右键该音乐 - 显示简介 - 选项，设置开始和停止时间，长度不能超过 40 秒
在资料库中将其选中，菜单栏选择：文件 - 转换 - 创建 AAC 版本
此时在资料库中会多出一个音乐来，右键单击，在 Windows 资源管理器中显示，我们可以看到以原音乐文件名命名的 .m4a 文件（如果看不到扩展名，则在菜单上点击 查看，选中“文件扩展名”即可）
将该文件扩展名改为 .m4r
铃声做好了，怎样导入到手机上呢？简单的答案是用 iTools，其实上面制作铃声的过程也可以用 iTools 一键实现，哈~哈哈~哈哈哈~
我们的小窝，不用很大，
充满笑声，温馨就好。
我们的存款，不用很多，
父母老了，我们负担得起就好。
老公，不用很帅，
风雨一生，足够的包容和担当就好。
孩子，不用很优秀，
平安长大，懂得如何做人就好。
生活，不求一帆风顺，
磕磕绊绊，我们能共同面对就好。
工资，不求多高，
偶尔出游，偶尔庆祝，够开销就好。
当我们老去，回看这一生，
没有太多遗憾就好。
笑看风雨，平安知足，
步履蹒跚，有你，有我，有孩子，
仅仅如此，就好。
对于大型站点，庞大的主题和帖子数据，分表放到一个主题表和一个帖子表中，已经成为影响性能的一个因素。因此，急需进行分表操作来避免 MySQL 对于大数据表的频繁操作。
1、后台分表
Disucz! X2 后台重新调整了分表的机制，使得分表效率和后期站点性能得到提升。具体分表设置在 后台 -> 站长 -> 主题分表（帖子分表）。
1）主题分表
主题分表分为两种类型，一种为主表，一种为存档表。主表只有一个，存档表可以有多个。我们进行分表操作，首先进行创建存档表的操作，然后进行主题移动，将指定条件的主题移动到存档表中。
a、创建存档表
打开 source/admincp/admincp_threadsplit.php 文件，找到创建存档表的条件分支
- elseif($operation == 'addnewtable')
复制代码
首先获取当前最大的主题表 id ，然后根据 forum_thread 的建表语句，生成新的存档表（id + 1），最后更新缓存。
b、主题移动
存档表建好后，下一步就是将主题移动到这个存档表中。在选择主题的时候，可以根据提供的搜索条件，特别是“更多选项”中的搜索条件，来转移符合条件的主题。这里主要是一个搜索的过程，转移数据的过程使用 REPLACE INTO … SELECT...FROM... 语句，比较简单。
2）帖子分表
帖子分表也是要分成两步，第一步先创建帖子分表，第二步转移数据。
打开 source/admincp/admincp_postsplit.php 文件，找到帖子分表的条件分支
- elseif($operation == 'split')
复制代码
如果是对主表进行分表操作，主表必须要大于400M，见下面的条件判断
- if($status && ((!$tableid && $status['Data_length'] > 400 * 1048576) || ($tableid && $status['Data_length'])))
复制代码
在站长提交分表表单后，程序会先根据 getmaxposttableid 函数获取当前帖子表最大的 id ，然后根据已有的帖子表结构，创建新分表，并更新缓存等信息。创建成功后，开始转移数据的操作。找到条件分支
- elseif($operation == 'movepost')
复制代码
，开始转移数据的操作。当从主表中转移数据时，是根据主题表中最后回复时间正序排列的主题 tid 来获取帖子数据的。
- $query = DB::query("SELECT tid FROM ".DB::table($table)." WHERE posttableid='0' AND displayorder>='0' ORDER BY lastpost LIMIT 0, 1000");
复制代码
然后，利用 movedate 函数进行转移数据。
当从从表中转移数据时，是根据给定帖子表的 id，获取此表中first=1的帖子所属 tid，
- $query = DB::query("SELECT tid FROM ".DB::table(getposttable($fromtableid))." WHERE `first`='1' LIMIT 0, 1000")
复制代码
然后利用 movedate 函数进行转移数据。
在 movedate 函数中，根据获取到的 tid ，将属于此 tid 的帖子，利用 INSERT INTO … SELECT … FROM ...来转移数据。在此过程中，更新主题表中 posttableid 这个字段，来标识帖子的存储表。
2、主题列表页分表读取
在主题列表页，只能看到主题主表中的主题。存档表中的主题都在存档区。
在这部分的代码（source/module/forum/forum_forumdisplay.php）中，所有涉及到的主题表都以 $threadtable 这个变量代替，$threadtable 这个变量的获取，又是根据用户是否查看存档区的标识 archiveid 来判定。
- $threadtable = $_G['gp_archiveid'] && in_array($_G['gp_archiveid'], $threadtableids) ? "forum_thread_{$_G['gp_archiveid']}" : 'forum_thread';
复制代码
当用户选择非存档内容时，archiveid = 0 或者不存在，这时，直接从 forum_thread 主表来读取主题列表。当用户选择存档内容时，archiveid = 1（1 表示存档表的 id，如果查看 id 为 2 的存档表，archiveid = 2），程序会根据 archiveid 来判断从哪个存档表中去获取主题列表。
3、帖子内容页分表读取
当用户浏览帖子内容页时，程序首先利用 loadforum 函数来获取当前的主题信息。在 loadforum 函数中，
- $_G['thread'] = get_thread_by_tid($tid, '*', $addcondiction, $archiveid);
复制代码
根据提供的 tid，get_thread_by_tid 函数到主表和存档表中分表去查找，直到找到对应的主题信息。
在 source/module/forum/forum_viewthread.php 文件中，根据
- $thread = & $_G['forum_thread'];
复制代码
- $threadtable = $thread['threadtable'];
- $posttableid = $thread['posttableid'];
- $posttable = $thread['posttable'];
复制代码
这两句来判定该主题应该去哪个帖子表中去获取帖子内容列表。
4、发新主题
发表新主题时，直接往主题主表中插入数据，对应的 posttableid = 0。然后，当插入帖子数据时，通过 insertpost 函数将数据插入帖子表中。
在 insertpost 函数中，会先去判断所属主题的 posttableid 值，得到目标帖子表，然后再往该帖子表中插入帖子数据。
5、发新回复
只有在主表的主题才能回复，因此，直接根据传递的tid去获取目标帖子表，然后插入数据。这个跟发新主题时，插入帖子内容过程相同。
6、编辑帖子
同样，只有在主表中的主题的帖子才能被编辑，因此，主题都在 forum_thread 表中。需要获取的是该主题的帖子在哪个帖子表中。打开 source/include/post/post_editpost.php 文件，找到
- $posttable = getposttablebytid($_G['tid']);
复制代码
程序在开始，通过这条语句来获取目标帖子表。在 getposttablebytid 函数中，程序根据 tid ，逐个主题表进行查找，找到对应的主题信息，获取目标帖子表，然后指向后续的编辑帖子操作。
8、取消存档
存在存档区的主题，如果想取消存档，可以通过页面底部的“取消存档”来执行。
打开 source/include/topicadmin/topicadmin_restore.php 文件，可以看到取消存档，实际上仅是将放在存档表中的主题移动到了主表中。同样，存档表的获取还是通过 archiveid 这个参数来决定的。
- $threadtable = $archiveid ? "forum_thread_$archiveid" : 'forum_thread';
复制代码
从这可以看出，存档的概念仅限于主题，帖子无所谓存档的概念。