本文用于说明本人在某些技术点学习和探索过程中,所遇到的一些常见的、不常见的、比较恶心人的坑,
搜索问题时找到的答案中比较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】
静态路径无法实现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的绑定,从而实现导出插件的效果。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上的解决办法