开发中的坑……

本文用于说明本人在某些技术点学习和探索过程中，所遇到的一些常见的、不常见的、比较恶心人的坑，搜索问题时找到的答案中比较up的问答。

---

本文中，对以下内容进行声明:    1. 本文档为非盈利性文档，对文中所提到的遵循各个版本开源协议的作者不一一赘述，特此感谢。    同时，使用本文档中本人所独创的技术点（含代码）不需要任何声明。    但造成的一切问题本人不负责任何法律责任。    *****对本文中的一切观点或错误言论，敬请斧正，不胜感激~    2. 常用技术点或插件说明：    2.1、Stackoverflow简称为So。    2.2、DataTables简称dt。    2.3、JQueryMobile简称Jqm。

1. dataTables的excel导出插件——TableTools

【问题描述】：

使用DataTables中的TableTools扩展调用Excel的导出功能时，遇到无法获取swf文件的bug导致点击导出按钮后无反应。So上有此swf文件的CDN地址，未被墙。

【解决方法】：

1、使用CDN调用swf文件。
2、通过访问服务（tomcat、apache、或其他编译器搭载的环境）来实现导出功能。

【参考文档】：

1、So中TableTools引用CDN的问答
2、dt官网关于TableTools的问答
3、TableTools的API说明

【附带可能出现的技术点bug】

1. 静态路径无法实现click绑定事件
   @2015年4月16日16:30:50 Dt @version 1.10.4，TableTools @version 2.2.3。
   在使用官网提供的API中所使用的js+css文件创建tooltable实例后，发现若是使用静态路径访问网页，tooltable所对应的按钮未绑定click事件。经测试，可将对应实例搭载到任意一个web服务器下（nodejs、tomcat等均可），即可实现click的绑定，从而实现导出插件的效果。

2. TableTools导出pdf是乱码
   @2015年5月27日14:57:53 DT @version 1.10.6, TableTools @version 2.2.3。
   使用官方TableTools导出pdf时，会出现中文乱码的bug。此问题是dt的插件bug。暂时的解决方案是引入其他插件实现导出pdf。TableTools导出excel和csv格式的文件。
   此问题在dt官方网站上原作者有issues交流，详见Add UTF-8 to fix PDF export problem.

2. Javascript中for循环内的同步(串行)实现

【问题描述】：

在使用前端js或者后端js(如node)时，可能会遇到需要在for循环中调用一些方法来实现相对需要耗时的事件，诸如IO或者数据库操作，此时如果使用for循环，会因为for循环的速度过快，而异步事件相对缓慢造成for循环结束的时候异步才刚刚开始，从而导致异步接收的for循环有关传入值会出现大量的脏（多数都会为最后一个值）。如下图所示，输出会始终为最后一个for循环值。

【解决方案】：

1、在for循环中使用递归方法来调用对应的方法。

run();function run() {    out(1,10)}function out(i,n){    if(i<n){        setTimeout(function(){            console.info("循环值为———— "+i);        },100);        out(i+1,n)    }else{        return false;    }}

2、ajax可以使用async:false来实现同步。
3、使用Async模块（nodejs）或Async.js（前端）。

【参考文档】：

1、解决easyui jQuery JS的for循环调用ajax异步问题
2、使用递归算法将批量调用异步处理转化为同步调用
3、js异步加载的三种解决方案
4、nodejs之async异步编程

3.JQuery Mobile中的坑

在使用JQuery mobile开发手机端页面时，遇到一些比较奇葩的坑，令人发指！！简略总结下：

3.1、手机虚拟键盘触发form的提交事件

Jqm在手机端，form内有type=”submit”按钮时，点击”提交”按钮无法触发跳转，点击手机上的”开始”/”搜索”(反正就是手机虚拟键盘上那个替代提交的按键)无法触发跳转。
—————————————— 【解决方案】 ————————————————
在form中加入【 data-ajax=”false”】可实现type=”submit”的点击跳转，原因是jquery mobile默认使用ajax进行数据提交。

3.2、JQuerymobile无法操作checkbox的checked属性

页面初始化时，如果某个checkbox应该被选中，而此时无法使用拼装html方法去实现的时候。单纯的使用JQuery的$(this).checked=true,或者.attr()的方式可以为checkbox设置选中效果，但无法完成点击checkbox切换效果的事件。
—————————————— 【解决方案】 ————————————————
使用JQuerymobile自带的checkboxradio方法去refresh一下。
类似于$([选择器]).prop("checked",true).checkboxradio("refresh")
非常感谢此博客给的提示，官方checkboxradio方法
附带官方checkboxradio方法的扩展应用

3.3、JQuerymobile无法对ajax获取数据后拼装的页面增加样式

JQuerymobile中有大量的组件需要使用refresh来实现ajax拼装后的jquerymobile中css的效果加载。

具体使用方法参见———— jquerymobile中各类标签的refresh

在refresh中可能会遇到"**Uncaught cannot call methods on checkboxradio prior to initialization; attempted to call method 'refresh**"这个报错，其中的"checkboxradio"可能是其他的Jqm的组件。    

• 原因一般是refresh的元素未初始化或者说声明，使用$(selector).listview().listview("refresh");即可解决（不同的组件使用对应的初始化方法）
• 具体原因的说明见 Uncaught Error: cannot call methods on prior to initialization, attempted to call method refresh
• so上此类问题的解决 jQuery Mobile: Uncaught TypeError: Cannot read property ‘jQuery…’ of undefined
• 一些相似问题的解决见 Jquery Mobile基础知识-样式更新

3.4、JQuerymobile中有两个data-role=”page”时，在第二个页面进入时会再次执行pagebeforecreate、pagecreate、pageinit的问题

使用data-role=”page”来实现内页转场效果时，会出现某个在$(function(){…})中写的function()执行两次的问题，这个是不是bug尚未知晓，但是应该在执行对应function()时加以判断，尤其是页面初始化中有拼装页面的动作的时候，否则会拼装两个相同的元素到页面，影响页面效果和使用。

4.JQuery+Bootstrap 插件中的坑(“请叫我搬运工”系列)

4.1、使用bootstrap的icheck插件，可能会遇到“全选”按钮和checkbox按钮绑定，及与icheck绑定的事件冒泡和触发
推荐一个SO上的解决办法