“JavaScript”的版本间的差异

来自tomtalk
跳转至: 导航搜索
红鸟面试题
Tom讨论 | 贡献
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基础

window.location.hash属性介绍

History of Ecma

javascript避免数字计算精度误差的方法之一

如何判断Javascript对象是否存在

JS中级

OOP

再谈javascript面向对象编程

JS高级

javascript代码片段

杂项

Fiddler自动响应AutoResponder正则匹配

用正则批量替换

regex:http://cc-t\.ied\.com/(.+)\.js

http://localhost/$1.js

JS模板引擎jSmart

写一段最短的代码,用上js所有关键字

实用Javascript代码高亮脚本

JS正则表达式

精通JavaScript需要注意的细节:变量

确保链接不依赖于javascript

javascript 框架功能大剖析

12种JavaScript MVC框架之比较

JavaScript框架

ArtTemplate高性能JavaScript模板引擎

JavaScript开发者值得收藏的 7 个资源

一个Web前端攻城狮的收藏夹

前端招聘与前端卖身的困境

基于Web的打印方案比较分析

浏览器的两种模式quirks 和strict

zebra-dialog

http://sourceforge.net/projects/zebra-dialog/

http://stefangabos.ro/jquery/zebra-dialog/#how-to-use

使用Chrome Console调试代码

javascript代码风格

google javascript styleguide

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对象