随笔分类 - js
摘要：出现的问题： 1、多次出现线上bug 2、多个项目同时进行时容易手忙脚乱 3、开发效率不高 4、设计思路不清晰原因分析： 线上bug：自测不够充分；对其它模块不了解，导致没有考虑到模块之间的相互影响； 手忙脚乱：规划不够合理 效率不高：经验不足；设计不充分
阅读全文
摘要：“abc”.replace(/b/, "$`") // $`将正则匹配到的字符替换为匹配到的字符左边的字符 aac“abc”.replace(/b/, "$'") //$'将正则匹配到的字符替换为匹配到的字符右边的字符 acc“abc”.replace(/b/, "{$&}") //$&将正则匹配到的字符替换为匹配到的字符 a{b}c“abc”.replace(/a(b)/, "$1") //将正则匹配到的字符替换为正则的第一个匹配组匹配到的字符 bc
阅读全文
摘要：1、由于使用“==”进行比较时，会对进行比较的值进行类型转换，这样可能会掩盖因类型而引发的错误。2、因此在项目中要尽量使用“===”进行比较。在进行比较之前将需要比较的值转换为相同类型之后再进行“===”的比较。3、（foo != 0）可以直接使用（foo），（foo == 0）可以用（！foo）代替。“==”操作符属于js的鸡肋部分，应该避免使用
阅读全文
摘要：1、typeof NaN === "number" //true2、NaN === NaN //false3、NaN ！== NaN //true4、 isNaN(NaN) //true isNaN(0) //false isNaN("oops") //true isNaN("0") //false isNaN("12str") //true判断是否是数字的最好办法function isNumber(value){return typeof value==="number" &&
阅读全文
摘要：1、合并js文件，减少http请求数量。2、对js文件进行压缩3、以gzip的形式提供js4、使js文件可缓存5、使用CDN
阅读全文
摘要：CDN是指内容分发网络，在网络各处架设节点服务器，当用户访问时，CDN系统会根据网络流量、到用户的距离等因素将请求导向离用户最近的节点上。访问过程是：1、用户向浏览器提供要访问的域名。2、浏览器调用域名解析库对域名进行解析，得到最近的缓存服务器的IP3、向缓存服务器发送请求4、缓存服务器接到请求向实际IP发送请求5、获取到内容之后一方面在本地进行保存，另一方面将内容返回给用户6、浏览器展示内容
阅读全文
摘要：对jQuery中的deferred对象的整体认识：Deferred是个工厂类，返回的是内部构建的deferred对象tuples 创建三个$.Callbacks对象，分别表示成功，失败，处理中三种状态创建了一个promise对象，具有state、always、then、primise方法扩展primise对象生成最终的Deferred对象，返回该对象
阅读全文
摘要：1、(function(){ $(window).on("testEvent", function(){ alert(1); }); })(); $(window).trigger("testEvent"); //1在局部作用域中绑定在全局对象上的事件，依然可以在全局作用域中触发2、(function(){ $(window).on("click.test", function(){ alert(1); }).on("click",function(){ alert(2); }); })();...
阅读全文
摘要：jQuery实例化对象的方法相比于普通方法优势：1、不需要出现大量的new关键字。2、可实现链式写法。3、书写更方便实例化的原因：1、实例化有利于管理程序中不同的DOM选择和处理（不同的选择产生不同的jQuery对象）2、面向过程的书写方式并不适合库级别的程序，所以它采用面向对象的写法，而面向对象的优势在于可以针对不同的需要实例化不同的对象3、实例化使对象既能拥有自己特殊的属性，又能使用公共的方法。解决的问题：1、书写方面，不必每次都new对象并赋值给局部变量。2、分类管理。（理解的不深刻。。。等再看一段时间jQuery再思考一次。）
阅读全文
摘要：var div1 = $("div"), div2 = $("div"); 1、 div1.data("key", "1"); div2.data("key", "2"); alert($.data(div1,"key")); //2 alert($.data(div2,"key")); //2 2、 $.data(div1, "key", "1"); $.data(div2, "key
阅读全文
摘要：jQuery引入数据缓存机制的原因： 1、储存更DOM节点相关的数据、事件、动画等信息 2、用一种低耦合的方式让DOM节点和数据联系起来实现原理：1、jQuery内部创建cache对象2、为需要缓存的DOM创建expando属性，该属性是DOM与cache对象联系的桥梁，其值为一个自增的变量ID，该ID保持全局唯一性。3、使用DOM的expando属性的值作为cache的键来存储数据（未完待续。。。）
阅读全文
摘要：正常面向对象的写法： var cJquery = function(){ //构造函数体 }; cJquery.prototype = { name : function(alert("chenliang");) age : function(alert(27);) } var c = new cJquery(); c.name();使用jQuery时，并不会使用new来创建jQuery对象，而是类似一个工厂，不断的根据不同的需求产出不同的jQuery对象。例如： var cJquery = function(){ new cJquery(); } 因...
阅读全文
摘要：1、for(var i=0; i<10; i++){ if(i%2){ doSomething(); }else{ doSomething(); }}2、for(var i=0; i<10; i++){ if(i&2){ doSomething(); }else{ doSomething(); }}第二种写法要比第一种写法快大约50%（取决于浏览器）
阅读全文
摘要：1、发送请求时必须使用get方法。2、服务器端设置响应报文的Expires为希望浏览器缓存的时间如果这两个条件都不满足时，也就是说无法通过浏览器缓存来缓存文件时：在js中设置一个localCache数组，将ajax返回的报文以url为键储存在localCache中。var localCache = [], url = "http://www.....";if(localCache[url]){ doSomething(localCache[url]);}else{ $.ajax({url});}
阅读全文
摘要：项目中观察到，通过ajax的形式读取信息并展现在页面的实现中，有的服务器端拼装好html传送给浏览器，有的只将数据和模板传送给浏览器的。这两种方法的优缺点比较：服务器端拼装 优点 1、拼装速度快 2、无需浏览器端对数据进行解析 3、无需浏览器端操作字符串拼装（字符串拼装是js最慢的操作之一） 缺点 1、由于拼装好的html会包含大量的数据结构方面的信息和相关的class等属性，大小要比直传数据要大很多。浏览器端拼装页面的优缺点跟服务器端相反在这两种方式的选择中需要权衡的是用户cpu的影响大还是用户带宽的影响大。
阅读全文
摘要：实现思路：1、通过js创建Image对象2、将Image对象的src设置为服务器端的api3、将需要传送给服务器端进行处理的数据以src参数的形式追加到api的后面4、每次需要发送时都执行一次前三个步骤示例：var url = "/givemesomething.php";var params = ["one=1","two=2"];(new Image()).src = url + "?" + params.join("&");优点：1、开销小2、速度快3、服务器端错误不会影响客户端缺
阅读全文
摘要：工人线程和UI线程： 现在的浏览器统一在UI线程中处理UI更新和js执行，也就是说，UI更新时js无法执行，js执行时UI无法更新。 工人线程引入一个接口，使js代码运行而不占用UI线程的时间。原生实现工人线程的浏览器: firefox3.5+,chrome3+,safari4+由于现在尚没有看到有人使用，不做深入研究。
阅读全文
摘要：当需要对数组中的每一项进行操作，但数组的length很长，或者对每一项进行操作的过程特别复杂时，就会导致页面长时间等待js执行完成。如果该处理过程满足两个条件：1、不是必须同步处理。2、不是必须按顺序处理。示例：同步的处理方法for(var i=0,len=items.length;i0){ setTimeout(arguments.callee,25); }else{ callback(items); } },25);}该方法的缺点： 每处理一个项都要间隔25ms。解决办法：var start = +new Date();do { process(tod...
阅读全文
摘要：setTimeout有两个参数，第一个是需要执行的函数，第二个是将该函数推入UI队列的时间。需要注意的两点：1、第二个参数中设置的时间，是从执行setTimeout开始计算，而不是从整个函数执行完开始计算2、推入到UI队列中该函数也不是立即执行，而是要等到队列里的其它函数执行完成之后再执行。setTimeout的用途：1、复位所有的浏览器限制，如：长运行脚本时间；调用栈。可以作为长运行脚本时间和栈溢出的跨浏览器解决方案。2、由于UI更新和js执行只能交替进行，为了不阻碍用户操作，可以通过setTimeout让出js的执行而进行UI的更新。定时器的精度：1、定时器在浏览器中并不是精确计算的，会有
阅读全文
摘要：1、总是从ID选择器开始继承2、class选择器之前使用tag3、将jQuery对象缓存起来4、使用链式操作5、使用子查询6、对直接的DOM操作进行限制7、当需要对dom进行多次操作时，使用先clone，再替换。8、事件代理，通过冒泡机制，实现事件的祖先元素触发9、消除无效查询10、有些js推迟到$(window).on("load");时执行，减轻$(document).on("ready")时的压力。
阅读全文