“JavaScript”的版本间的差异
(→红鸟面试题) |
(→jQuery中.bind() .live() .delegate() .on()的区别) |
||
第12行: | 第12行: | ||
* [http://bouncejs.com/ bounce.js] | * [http://bouncejs.com/ bounce.js] | ||
* [http://www.gruntjs.net grunt] | * [http://www.gruntjs.net grunt] | ||
+ | |||
+ | ==js浮点运算bug的解决办法== | ||
+ | <source lang="javascript"> | ||
+ | //除法函数,用来得到精确的除法结果 | ||
+ | //说明:javascript的除法结果会有误差,在两个浮点数相除的时候会比较明显。这个函数返回较为精确的除法结果。 | ||
+ | //调用:accDiv(arg1,arg2) | ||
+ | //返回值:arg1除以arg2的精确结果 | ||
+ | function accDiv(arg1,arg2){ | ||
+ | var t1=0,t2=0,r1,r2; | ||
+ | try{t1=arg1.toString().split(".")[1].length}catch(e){} | ||
+ | try{t2=arg2.toString().split(".")[1].length}catch(e){} | ||
+ | with(Math){ | ||
+ | r1=Number(arg1.toString().replace(".","")); | ||
+ | r2=Number(arg2.toString().replace(".","")); | ||
+ | return (r1/r2)*pow(10,t2-t1); | ||
+ | } | ||
+ | } | ||
+ | //给Number类型增加一个div方法,调用起来更加方便。 | ||
+ | Number.prototype.div = function (arg){ | ||
+ | return accDiv(this, arg); | ||
+ | }; | ||
+ | //乘法函数,用来得到精确的乘法结果 | ||
+ | //说明:javascript的乘法结果会有误差,在两个浮点数相乘的时候会比较明显。这个函数返回较为精确的乘法结果。 | ||
+ | //调用:accMul(arg1,arg2) | ||
+ | //返回值:arg1乘以arg2的精确结果 | ||
+ | function accMul(arg1,arg2) | ||
+ | { | ||
+ | var m=0,s1=arg1.toString(),s2=arg2.toString(); | ||
+ | try{m+=s1.split(".")[1].length}catch(e){} | ||
+ | try{m+=s2.split(".")[1].length}catch(e){} | ||
+ | return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m); | ||
+ | } | ||
+ | //给Number类型增加一个mul方法,调用起来更加方便。 | ||
+ | Number.prototype.mul = function (arg){ | ||
+ | return accMul(arg, this); | ||
+ | }; | ||
+ | //加法函数,用来得到精确的加法结果 | ||
+ | //说明:javascript的加法结果会有误差,在两个浮点数相加的时候会比较明显。这个函数返回较为精确的加法结果。 | ||
+ | //调用:accAdd(arg1,arg2) | ||
+ | //返回值:arg1加上arg2的精确结果 | ||
+ | function accAdd(arg1,arg2){ | ||
+ | var r1,r2,m; | ||
+ | try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0} | ||
+ | try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0} | ||
+ | m=Math.pow(10,Math.max(r1,r2)); | ||
+ | return (arg1*m+arg2*m)/m; | ||
+ | } | ||
+ | //给Number类型增加一个add方法,调用起来更加方便。 | ||
+ | Number.prototype.add = function (arg){ | ||
+ | return accAdd(arg,this); | ||
+ | } | ||
+ | //减法函数 | ||
+ | function accSub(arg1,arg2){ | ||
+ | var r1,r2,m,n; | ||
+ | try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0} | ||
+ | try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0} | ||
+ | m=Math.pow(10,Math.max(r1,r2)); | ||
+ | //last modify by deeka | ||
+ | //动态控制精度长度 | ||
+ | n=(r1>=r2)?r1:r2; | ||
+ | return ((arg2*m-arg1*m)/m).toFixed(n); | ||
+ | } | ||
+ | ///给number类增加一个sub方法,调用起来更加方便 | ||
+ | Number.prototype.sub = function (arg){ | ||
+ | return accSub(arg,this); | ||
+ | } | ||
+ | </source> | ||
==jQuery中.bind() .live() .delegate() .on()的区别== | ==jQuery中.bind() .live() .delegate() .on()的区别== |
2018年8月24日 (五) 08:50的版本
目录
库、框架
js浮点运算bug的解决办法
//除法函数,用来得到精确的除法结果 //说明:javascript的除法结果会有误差,在两个浮点数相除的时候会比较明显。这个函数返回较为精确的除法结果。 //调用:accDiv(arg1,arg2) //返回值:arg1除以arg2的精确结果 function accDiv(arg1,arg2){ var t1=0,t2=0,r1,r2; try{t1=arg1.toString().split(".")[1].length}catch(e){} try{t2=arg2.toString().split(".")[1].length}catch(e){} with(Math){ r1=Number(arg1.toString().replace(".","")); r2=Number(arg2.toString().replace(".","")); return (r1/r2)*pow(10,t2-t1); } } //给Number类型增加一个div方法,调用起来更加方便。 Number.prototype.div = function (arg){ return accDiv(this, arg); }; //乘法函数,用来得到精确的乘法结果 //说明:javascript的乘法结果会有误差,在两个浮点数相乘的时候会比较明显。这个函数返回较为精确的乘法结果。 //调用:accMul(arg1,arg2) //返回值:arg1乘以arg2的精确结果 function accMul(arg1,arg2) { var m=0,s1=arg1.toString(),s2=arg2.toString(); try{m+=s1.split(".")[1].length}catch(e){} try{m+=s2.split(".")[1].length}catch(e){} return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m); } //给Number类型增加一个mul方法,调用起来更加方便。 Number.prototype.mul = function (arg){ return accMul(arg, this); }; //加法函数,用来得到精确的加法结果 //说明:javascript的加法结果会有误差,在两个浮点数相加的时候会比较明显。这个函数返回较为精确的加法结果。 //调用:accAdd(arg1,arg2) //返回值:arg1加上arg2的精确结果 function accAdd(arg1,arg2){ var r1,r2,m; try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0} try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0} m=Math.pow(10,Math.max(r1,r2)); return (arg1*m+arg2*m)/m; } //给Number类型增加一个add方法,调用起来更加方便。 Number.prototype.add = function (arg){ return accAdd(arg,this); } //减法函数 function accSub(arg1,arg2){ var r1,r2,m,n; try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0} try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0} m=Math.pow(10,Math.max(r1,r2)); //last modify by deeka //动态控制精度长度 n=(r1>=r2)?r1:r2; return ((arg2*m-arg1*m)/m).toFixed(n); } ///给number类增加一个sub方法,调用起来更加方便 Number.prototype.sub = function (arg){ return accSub(arg,this); }
jQuery中.bind() .live() .delegate() .on()的区别
//为每个匹配元素的特定事件绑定事件处理函数 bind(type,[data],fn) $("a").bind("click",function(){alert("ok");}); //给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的 live(type,[data],fn) $("a").live("click",function(){alert("ok");}); //指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数 delegate(selector,[type],[data],fn) $("#container").delegate("a","click",function(){alert("ok");}) //在选择元素上绑定一个或多个事件的事件处理函数 on(events,[selector],[data],fn)
差别
- .bind()是直接绑定在元素上
- .live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的,绑定到document DOM节点上。和.bind()的优势是支持动态数据。
- .delegate()则是更精确的小范围使用事件代理,性能优于.live()
- .on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制
js 判断微信浏览器
//JS function isWeiXin(){ var ua = window.navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i) == 'micromessenger'){ return true; }else{ return false; } }
//PHP function is_weixin(){ if ( strpos($_SERVER['HTTP_USER_AGENT'], 'MicroMessenger') !== false ) { return true; } return false; }
script标签的async属性
一般的script标签(不带async等属性)加载时会阻塞浏览器,也就是说,浏览器在下载或执行该js代码块时,后面的标签不会被解析,例如在head中添加一个script,但这个script下载时网络不稳定,很长时间没有下载完成对应的js文件,那么浏览器此时一直等待这个js文件下载,此时页面不会被渲染,用户看到的就是白屏(网页文件已下载好,但浏览器不解析)
而使用async属性,浏览器会下载js文件,同时继续对后面的内容进行渲染
通常如果js不需要改变DOM结构时可以使用async进行异步加载(比如一些统计代码可以异步加载,因为此代码与页面执行逻辑无关,不会改变DOM结构)
IE8中trim方法报错的问题
//IE8下没有 str.trim() //替代方案 Ext.string.trim(str) //Extjs用法 $.trim(str) //jquery用法
JS基础
JS中级
- javascript的闭包 - 司徒正美
- js闭包
- JavaScript对象系统深入剖析-4.Scope和Closure
- js原型理解
- 原型和继承
- JavaScript 和文档对象模型(DOM)
- 那些相见恨晚的 JavaScript 技巧
- 回流与重绘:CSS性能让JavaScript变慢?
- 高性能WEB开发(8) - 页面呈现、重绘、回流
- Javascript中的陷阱大集合
- Javascript中的陷阱大集合
- js数组的操作
- JS刷新当前页面
- JS操作DOM节点实现网页更新
- 翻译:让网络更快一些——最小化浏览器中的回流(reflow) ? 张鑫旭-鑫空间-鑫生活
- 快速判断JavaScript对象是否存在的十个方法
- JavaScript重构深入剖析
JS高级
- 反向Ajax,第1部分:Comet介绍
- 提升 web 应用程序的性能
- 提高 web 应用性能之 JavaScript 性能调优
- 基于 Web 2.0 技术的网上银行前端架构及开发,第 2 部分: 前端创新型设计
- 基于 Web 2.0 技术的网上银行前端架构及开发,第 1 部分: 基本元素和架构
- Web开发前沿技术探索与实战
- 让您的 web 应用程序飞起来
- 一位反JavaScript主义者的觉醒
- 15款超棒的JavaScript开发工具推荐
- 如何快速成为javascript高手的思考
- Java Web 高性能开发,第 1 部分: 前端的高性能
- 性能优化:如何更快速加载你的JavaScript页面
- 从今天开始,调试脚本,远离alert
- JavaScript最让人费解的十件事
javascript代码片段
杂项
用正则批量替换
regex:http://cc-t\.ied\.com/(.+)\.js
zebra-dialog
http://sourceforge.net/projects/zebra-dialog/
http://stefangabos.ro/jquery/zebra-dialog/#how-to-use
使用Chrome Console调试代码
javascript代码风格
webstorm
- JSLint was used before it was defined
As Quentin says, there's a /*global*/ directive.Here is an example (put this at the top of the file):
/*global var1,var2,var3,var4,var5*/
- webstorm 如何设置显示代码的行数
file>setting>editor>appearance>show line nmbers
- 注释
Webstorm非常的知心,当你写好函数时候,输入“/**”加回车,会自动生成jsdoc格式的注释。
- combine this with the previous var statement
To avoid this JSLint errors you may
1、Define all variables together
var sGreeting = 'hello world', a, b, c;
2、Use JSLint directive Tolerate -> many var statements per function
- JSHint bad line breaking before '+'
Relaxing Options -> Supress warnings about unsafe line breaks laxbreak
webstorm快捷键
F2 向下错误或警告快速定位
Shift+F2 向上错误或警告快速定位
reformat code (cltr+alt+L)
structure (alt+7)
ctrl+shift+ +/- 展开/折叠
Alt+1 快速打开或隐藏工程面板
Ctrl+X 删除行
Ctrl+D 复制行
shift+enter 重新开始一行(无论光标在哪个位置)
Ctrl+Shift+Up/Down 代码向上
Ctrl + shift + j 合并行
Shift + F6 Refactor Rename
SHIFT+ALT+INSERT 竖编辑模式
JS定时器
在javascritp中,有两个关于定时器的专用函数,分别为:
//倒计定时器: timer = setTimeout(func_a, delaytime_ms); clearTimeout(timer); //清除已设置的setTimeout对象 //循环定时器: timer = setInterval(func_b, delaytime_ms); clearInterval(timer); //清除已设置的setInterval对象