开发中的坑……

痛定思痛。 2022-08-07 06:50 208阅读 0赞

本文用于说明本人在某些技术点学习和探索过程中，所遇到的一些常见的、不常见的、比较恶心人的坑，
    搜索问题时找到的答案中比较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的问答][So_TableTools_CDN]  
2、[dt官网关于TableTools的问答][dt_TableTools]  
3、[TableTools的API说明][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循环值。  
![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异步问题][easyui jQuery JS_for_ajax]  
2、[使用递归算法将批量调用异步处理转化为同步调用][Link 1]  
3、[js异步加载的三种解决方案][js]  
4、[nodejs之async异步编程][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]  
> 附带[官方checkboxradio方法的扩展应用][checkboxradio 1]

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

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

> 具体使用方法参见———— [jquerymobile中各类标签的refresh][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][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_ Uncaught TypeError_ Cannot read property _jQuery_ of undefined]
 *  一些相似问题的解决见 [Jquery Mobile基础知识-样式更新][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上的解决办法][SO]

[So_TableTools_CDN]: http://stackoverflow.com/questions/24837595/jquery-datatables-tabletools-not-working?answertab=active#tab-top
[dt_TableTools]: https://datatables.net/forums/categories/tabletools
[TableTools_API]: http://www.datatables.net/extensions/tabletools/
[Add UTF-8 to fix PDF export problem]: http://www.datatables.net/forums/discussion/21535/add-utf-8-to-fix-pdf-export-problem
[for]: /images/20220805/c93d8961c3244c85a370d83ce881ad85.png
[easyui jQuery JS_for_ajax]: http://www.cnblogs.com/daxia/p/3824031.html
[Link 1]: http://blog.csdn.net/scorpio3k/article/details/7875895
[js]: http://www.jb51.net/article/34491.htm
[nodejs_async]: https://cnodejs.org/topic/54acfbb5ce87bace2444cbfb
[checkboxradio]: http://blog.csdn.net/handsometone1982/article/details/43524801
[checkboxradio 1]: http://www.w3cplus.com/blog/712.html
[jquerymobile_refresh]: http://blog.sina.com.cn/s/blog_60e01f400101fhry.html
[Uncaught Error_ cannot call methods on prior to initialization_ attempted to call method refresh]: http://www.gajotres.net/uncaught-error-cannot-call-methods-on-prior-to-initialization-attempted-to-call-method-refresh/
[jQuery Mobile_ Uncaught TypeError_ Cannot read property _jQuery_ of undefined]: http://stackoverflow.com/questions/14365415/jquery-mobile-uncaught-typeerror-cannot-read-property-jquery-of-undefined/14368001#14368001
[Jquery Mobile_-]: http://my.oschina.net/geomen/blog/60259
[SO]: http://stackoverflow.com/questions/17820080/function-select-all-and-icheck#