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

上一篇:UWP中MarkupExtension的使用


下一篇:des加密delphi与c#