javascript 编程技巧
1.巧用判断：
在js中，NaN,undefined,Null,0,"" 在转换为bool的时候，是false，所以，可以这样写。
if(!obj) {}
表示一个对象如果为false的时候所做的事情，因为如果obj为以上任何一个，那么就是false，!false即是true，这样，就不需要 if(obj==null || obj == NaN ....)。
2.巧用运算符:
有一个很经典的技巧，得到时间戳。
var dataspan = new Date()*1;
我们知道，js是弱类型语言，Date()会返回一个表示时间的字符串，用这个字符串进行算术运算，将得到转换，也就是结果的时间戳。
3.巧用正则表达式：
/.a/ig.exec('xsas')
//相当于创建一个reg对象，调用了exec方法，当然也能调用其他的方法，如：test(),match()等。
4.取数组最大值和最小值：
var values = [1,2,3,40,23];
var max = Math.Max.apply(Math,values);
调用Max.apply,设置对象的为Math，然后传递一个Values，就能确定最大值。
5.内存优化：
function p(){this.p='moersing'}; var p1 = new p();
p1.xx
p1.xx
.......
p1=null; //执行完操作之后，最后手动解除对p1的引用。
6.最受欢迎的创建对象方式（原型模式）：
function c(){
this.name ='moersing';
this.age=18;
this.books=['javascript develop','C# develop'];
}
c.prototype={
displayBookName:function (){
foreach(var t in this.books)
{
document.write(this.books[t]);
}
}
}
原型构造模式的最大缺点在于引用类型的共享，所以，将引用类型定义在构造函数中，而将通用方法定义在原型中，使用this引用。
7.块级作用域和私有变量
在javascript中,没有块级作用域和私有变量这一说，但是，利用一些特性，则能模仿这些效果。
7.1块级作用域：
(function(){
//块级作用域
}
)();
匿名函数外面加上一个括号，我管它叫"函数标准化",也就是说，可以像标准函数那样调用，如：
var name =function(){};
(name)();//一般不会这么写;</P>
这么做的好处就是，在()外部无法访问到函数中变量，也就成了块级作用域，这种方式一般用在编写插件的时候，不会再全局 (global)中添加额外的变量，而且，在函数执行完毕之后，其内部定义的变量就被销毁了，所以，也不会有闭包特性存在的问题。
7.2私有变量：
function private()
{
var name = 'moersing';
this.getName = function(){
return this.name;
}
}
私有变量实际上就是利用函数的作用域作为限制(外部无法访问),然后定义一个方法，这个方法返回相应的变量，仅此而已。
8.DOM之NodeList：
nodeList是一个动态的元素,这意味着，在文档中添加任何元素，nodeList都会实时更新，如：
var alldiv = document.getElementsByTagName('div');
for(var i=0;i<alldiv.length;i++)
{
var div = document.createElement('div');
div.innerHTML= i.toString();
document.body.appendChild(div);
}
这段代码会造成无限循环，在循环里面创建了一个div，然后appendChild方法将其添加到body中，那么，所有alldiv会立即就更新，所以，i<alldiv.length永远无法成立，要解决这个问题，可以使用下面方式：
var alldiv = document.getElementsByTagName('div');
var len,i;
for(i=0,len=alldiv.length;i<len;i++)
{
var div = document.createElement('div');
div.innerHTML= i.toString();
document.body.appendChild(div);
}
这里建议：最好不要频繁的对NodeList操作，因为每次操作都会执行一次DOM树的查询。
除了以上介绍的方法外，HTML5 新加入的API(selector API Level1)也能解决这个问题，它类似C#的linq及时查询，至于什么是linq及时查询，以后我会更新blog，敬请关注：
var allDiv= document.querySelectorAll('div');
for(var i=0;i<alldiv.length;i++)
{
var div = document.createElement('div');
div.innerHTML= i.toString();
document.body.appendChild(div);
}
querySelectorAll需要一个参数，一个CSS选择器，类似jquery中的$(),它返回的NodeList是一个及时的，非动态的DOM集合。
另外还有一个querySelector，返回匹配的第一个元素，有关HTML5 API 详 见
http://www.w3.org/standards/techs/dom#w3c_all
或者
https://developer.mozilla.org/zh-CN/docs/Web/API
另外，本人也在酝酿一篇blog，专门讲HTML5 API的，敬请关注。
9.DOM性能：
不要做这种傻事(我做过。。。)
for(var i=0;i<10;i++)
{
document.querySelector('ul').innerHTML="<li>"+i+"</li>";
}
给对象的innerHTML赋值，会调用内置的C++解析器解析这个字符串，虽然速度很快，但是最好不要这样操作，会有一定的性能流失。
最好这样做：
var ih=null; for(var i=0;i<10;i++)
{
ih+="<li>"+i+"</li>";
} document.querySelector('ul').innerHTML=ih;
10.DOM性能 ———— 委托处理技术：
好几天没写blog了,今天写下个人认为很不错的技巧。
在讲这个技术之前,我认为应该补充下基础知识,以免初学者感到很迷糊：
1.事件冒泡和事件捕获
假设有这样一张网页：
<body>
<div>
<span>
<button></button>
</span>
</div>
<body>
当我们点击页面的button按钮的时候，那么，根据冒泡规则，首先触发button的click(不提mousedown和mouseup),然后事件会依次向上冒泡,也就是:
button→span→div→body→html→document
也就是说,你如果在div和button定义了click事件,如:
document.querySelector('button').addEventListenner('click',function(){
alert('button');
},!1);
document.querySelector('div').addEventListenner('click',function(){
alert('div');
},!1);
那么,当你单击了button之后,会先弹出'button',然后接着是'div',span不会受到处理,因为没有事件监听它的click。
在IE6以下的版本冒泡会跳过html,从body直接到document,但这不是我们关心的,没人有会去处理IE5.5了。
好了,回到正题, "事件捕获":
在IE8及其之前的版本中,不支持事件捕获机制。
那么,什么是事件捕获呢？它的机制很简单,"目标元素最后接收到事件",还是根据上面的网页来做个例子,当我们单击button的时候,根据事件捕获机制,得出的结果就是:
document→html→body→div→span→button
到这里,有很多人可能会郁闷了,这两个机制有什么用？？我单击了button就是button,管其他元素干什么？这就是这一节要讨论的主题 "委托处理技术"：
抛开IE8及其以下的版本不说,标准的事件处理过程应该是这样的:
document→html→body→div→span→button //捕获阶段 button→span→div→body→html→document //冒泡阶段
尽管浏览器会透明化其他过程,但是,利用这两种机制,可以做到 "万法归一"。既然能够冒泡到父元素上面,那如果我们直接在document上绑定一个click事件,然后单击button,那么理论
上这个事件会被得到处理,当然,你单击span,div,都会的得到相同的结果,如:
document.addEventListenner('click',function(){
alert('document'); //不管单击单个元素,都会弹出,因为所有click事件都会冒泡document
},!1);
我们知道,每个function都是一个对象,如果在处理table之类的元素,你要为它的每一个td都加上click事件........,你得确认你的客户不会拍桌子,扯远了。
在冒泡阶段和捕获阶段,我们都能依次得到所有对象。HTML5 新增的addEventListenner方法接受三个参数,分别是:'事件类型'和处理函数以及是否在捕获阶段获取对象
类似这个样子:
element.addEventListenner('event type',handle,bool);
在冒泡阶段,你能获取任何你想要的元素:
document.addEventListenner('click',function(e){
if(e.targer.nodeName==='button')//是否冒泡到了button
{
alert('my button');
}
},!1);
首先解释下,addEventListenner会给handle都会传递一个event对象,利用这个对象,我们能获取很多的信息,下面列出常用的:
1. currentTarget element 绑定的元素
2. eventPhase int 目前整处于什么阶段:1为捕获阶段,2为目标阶段,3为冒泡阶段
3. preventDefault() Function 取消默认行为,如果form提交,a标签跳转。
4. stopPropagation() Function 阻止事件冒泡
5. target element 目标元素,这个元素是你单击的元素
6. type string 监听的事件类型,这里是click
这些属性和方法在IE9+都能用,IE8及其以下的有些不同:
IE8不支持事件捕获,使用attachEvent来监听事件,只有两个参数。如:
element.attachEvent('onclick',function(){});//IE8的evnet type 需要加上 on。
另外IE8中的event也有所不同:
1. returnValue string 与stopPropagation()方法作用相同,不过它是属性。
2. srcElement COM 与target一样,不过它是IE出的COM对象。
3. type string 事件类型。
这里我们只讨论标准下的委托技术,非标准的处理也是类似的：
设想以下情景:
一个ul,里面N多li,li还有可能包含ul,这是一个大家非常熟悉的树状结构:
我们要做的就是单击每个li的时候,显示其下的ul元素(我相信很多人都做过),类似下面这样:
<ul class="parent-ul">
<li>
<span class="one">1</span>
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
</li>
<li>
<span class="two">2</span>
<ul>
<li>2.1</li>
<li>2.2</li>
</ul>
</li>
</ul>
按照一般处理的方式,你可能想变量parent-ul中的每个span,然后注册事件,这样做的后果前面我已经提及了,现在,我们用冒泡机制来处理。
document.querySelector('.parent-ul').addEventListenner('click',function(e){
var curTarget = e.target;
if(curTarget.className==='one')
{
//执行操作,curTarget就是你单击的span元素,不要指望小墨给你做完.
}
},!1);
在这个demo中,我们看到,我们只是在 'parent-ul' 中注册了click事件,然后根据event对象来执行相应的操作,这样,所有的子元素都不需要注册事件,你只管在parent-ul中写判断就OK了,所以,在性能上有一定的提升,操作也简单,假设你的数据库很多数据需要显示到parent-ul中,那你只需要加上一个class或者id就能处理这个操作了,另外一个很容易让人忽视的就是,DOM元素是能够被移除的,当我们用removeChild或者replaceChild(特别是innerHTML)操作DOM的时候,元素是被移除/替换了,但是事件处理程序并不一定就被删除了,这个问题特别在IE8的GC计数回收显得特别明显。如果我们像上面那样操作,就能避免这种情况,因为li根本没有事件注册在上面。
目前为止,事件冒泡总算差不多了,小墨只是根据自己的知识写了点皮毛,不值一提。
上面还提到了事件捕获,呵呵,无非就是:
document.addEventListenner('click',function(){
if(e.target.nodeName==='button')
{
//捕获阶段执行的处理
}
},!!1); //!!1是true,也就是启用事件捕获。
一般来说,没有必要在捕获阶段处理事件,除非特殊情况。
顺便说一下:并不是所有事件都支持冒泡,还有,对于mouseMove,mouseEnter来说,要处理冒泡并不简单,所以,在处理这两个事件的时候,要格外小心。
另外的一些性能优化话题，等有时间再更新。
本人纯属菜鸟，如果有什么不对的地方，还请指正，原创文章，转载请注明地址。QQ：1261870167
javascript 编程技巧的更多相关文章
- 15个提高编程技巧的JavaScript工具
原文地址:http://www.imooc.com/wenda/detail/243523 JavaScript脚本库是一个预先用JavaScript语言写好的库,它方便了我们开发基于JavaScri ...
- javascript实用技巧、javascript高级技巧
字号+作者:H5之家 来源:H5之家 2016-10-31 11:00 我要评论( ) 三零网提供网络编程. JavaScript 的技术文章javascript实用技巧.javascript高级技巧 ...
- JavaScript简写技巧总结
在日常工作中,JavaScript一些常用的简写技巧,将直接影响到我们的开发效率,现将常用技巧整理如下: 1. 空(null, undefined)验证 当我们创建了一个新的变量,我们通常会去 ...
- javascript编程思想
javascript编程开发修炼之道 提要文摘附注: 本文的核心内容是围绕javascript前端开发的编程技术要素,来深入地探讨编写高质量的javascript代码的方法.技巧.规范和最佳实践, ...
- 偏执却管用的10条Java编程技巧
本文由 ImportNew - LynnShaw 翻译自 javacodegeeks.欢迎加入翻译小组.转载请见文末要求. 经过一段时间的编码(咦,我已经经历了将近20年的编程生涯,快乐的日子总是过得 ...
- [libgdx游戏开发教程]使用Libgdx进行游戏开发(11)-高级编程技巧 Box2d和Shader
高级编程技巧只是相对的,其实主要是讲物理模拟和着色器程序的使用. 本章主要讲解利用Box2D并用它来实现萝卜雨,然后是使用单色着色器shader让画面呈现单色状态:http://files.cnblo ...
- 实用Javascript调试技巧
摘要: 高效调试JS代码. 原文:实用Javascript调试技巧分享 作者:MudOnTire Fundebug经授权转载,版权归原作者所有. 见过太多同学调试Javascript只会用简单的con ...
- [技术翻译]您应该知道的13个有用的JavaScript数组技巧
本次预计翻译三篇文章如下: 01.[译]9个可以让你在2020年成为前端专家的项目 02.[译]预加载响应式图像,从Chrome 73开始实现 03.[译]您应该知道的13个有用的JavaScript ...
- JavaScript的技巧45招
JavaScript奇技淫巧45招 来自仲老师的分享: 原文地址[http://chensd.com/2015-01/45-useful-javascript-tips-tricks-and-best ...
随机推荐
- 无责任Windows Azure SDK .NET开发入门篇三[使用Azure AD 管理用户信息--3.1 Index用户列表]
3.1 Index用户列表 或许当前域下的用户列表 [Authorize] public async Task<ActionResult> Index() { var userList = ...
- contentWindow 和contentDocument区别 及iframe访问
a>contentWindow 兼容各个浏览器,可取得子窗口的 window 对象. b>contentDocument Firefox 支持,> ie8 的ie支持.可取得子窗口的 ...
- [前端引用] 利用ajax实现类似php include require 等命令的功能
利用ajax实现类似php中的include.require等命令的功能 最新文件下载: https://github.com/myfancy/ajaxInclude 建议去这里阅读readme-2. ...
- DIV+CSS规范命名大全集合
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-06-19) 网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DI ...
- 全代码实现ios-1
第一次接触ios开发时,就决定用代码开发,而不用ib.因为被ib的各种控件的联线弄得一头雾水,而且ib和storyboard变动太快了. 开始的时候真是麻烦,因为网上关于全代码开发的例子太少了,大多数 ...
- 【转】 解决IllegalStateException: Can not perform this action after onSaveInstanceState
今天使用Fragment的时候,出现了这个错误 IllegalStateException: Can not perform this action after onSaveInstanceState ...
- 分享一个客户端程序(winform)自动升级程序,思路+说明+源码
做winform的程序,不管用没用过自动更新,至少都想过自动更新是怎么实现的. 我这里共享一个自动更新的一套版本,给还没下手开始写的人一些帮助,也希望有大神来到,给指点优化意见. 本初我是通过sock ...
- jQuery操作checkbox选择
1.checkbox list选择 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- static使用方法小结
static使用方法小结 statickeyword是C, C++中都存在的keyword, 它主要有三种使用方式, 当中前两种仅仅指在C语言中使用, 第三种在C++中使用(C,C++中详细细微操作不 ...
- GPS原始经纬度转百度经纬度
protected void runTest() throws Throwable { try { BaiduLocation bl = new BaiduLocation(); bl.gpsx = ...