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 编程技巧的更多相关文章

  1. 15个提高编程技巧的JavaScript工具

    原文地址:http://www.imooc.com/wenda/detail/243523 JavaScript脚本库是一个预先用JavaScript语言写好的库,它方便了我们开发基于JavaScri ...

  2. javascript实用技巧、javascript高级技巧

    字号+作者:H5之家 来源:H5之家 2016-10-31 11:00 我要评论( ) 三零网提供网络编程. JavaScript 的技术文章javascript实用技巧.javascript高级技巧 ...

  3. JavaScript简写技巧总结

    在日常工作中,JavaScript一些常用的简写技巧,将直接影响到我们的开发效率,现将常用技巧整理如下: 1. 空(null, undefined)验证     当我们创建了一个新的变量,我们通常会去 ...

  4. javascript编程思想

    javascript编程开发修炼之道   提要文摘附注: 本文的核心内容是围绕javascript前端开发的编程技术要素,来深入地探讨编写高质量的javascript代码的方法.技巧.规范和最佳实践, ...

  5. 偏执却管用的10条Java编程技巧

    本文由 ImportNew - LynnShaw 翻译自 javacodegeeks.欢迎加入翻译小组.转载请见文末要求. 经过一段时间的编码(咦,我已经经历了将近20年的编程生涯,快乐的日子总是过得 ...

  6. [libgdx游戏开发教程]使用Libgdx进行游戏开发(11)-高级编程技巧 Box2d和Shader

    高级编程技巧只是相对的,其实主要是讲物理模拟和着色器程序的使用. 本章主要讲解利用Box2D并用它来实现萝卜雨,然后是使用单色着色器shader让画面呈现单色状态:http://files.cnblo ...

  7. 实用Javascript调试技巧

    摘要: 高效调试JS代码. 原文:实用Javascript调试技巧分享 作者:MudOnTire Fundebug经授权转载,版权归原作者所有. 见过太多同学调试Javascript只会用简单的con ...

  8. [技术翻译]您应该知道的13个有用的JavaScript数组技巧

    本次预计翻译三篇文章如下: 01.[译]9个可以让你在2020年成为前端专家的项目 02.[译]预加载响应式图像,从Chrome 73开始实现 03.[译]您应该知道的13个有用的JavaScript ...

  9. JavaScript的技巧45招

    JavaScript奇技淫巧45招 来自仲老师的分享: 原文地址[http://chensd.com/2015-01/45-useful-javascript-tips-tricks-and-best ...

随机推荐

  1. yii2.0 gii

    1.添加模型 ./yii-dev gii/model --tableName=tableName --generateLabelsFromComments --ns='app\models\base' ...

  2. zookeeper的安装和启动

    最近的手上一个项目要用到dubbo,顺便研究下zookeeper 1.下载 下载地址:http://www.apache.org/dyn/closer.cgi/zookeeper/,下载解压到D:\t ...

  3. （2）html文本格式化 解说

  4. Firefox 32 支持 Public Key Pinning 对抗中间人攻击。

    Firefox 32 支持 Public Key Pinning 对抗中间人攻击.8月28日消息,即将发布的Firefox 32将支持Public Key Pinning机制,以防止中间人攻击.Pub ...

  5. Flex Builder 开发语言切换问题

    1.Flex Builder 4.6切换语言 打开\Adobe\Adobe Flash Builder 4.6\FlashBuilder.ini -nlzh_CN-startupeclipse/plu ...

  6. Objective-C运行时编程 - 实现自动化description方法的思路及代码示例

    发布自米高 | Michael - 博客园,源地址:http://www.cnblogs.com/michaellfx/p/4232205.html,转载请注明. 本文结构 基础实现 性能优化 参考 ...

  7. 使用Machin公式计算

    使用Machin公式计算,并使用百亿进制+末项位数控制,这里可算出数万位(比最简PI快80倍),源代码约40行,在本网页中. 计算公式 PI=16arctg(1/5)-4arctg(1/239),其中 ...

  8. Codeforces Round #309 (Div. 1) B. Kyoya and Permutation 构造

    B. Kyoya and Permutation Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/ ...

  9. 《linux 内核全然剖析》 chapter 2 微型计算机组成结构

    微型计算机组成结构 系统的基本组成: 软件是一种控制硬件操作和动作的指令流. 2.1 微型计算机的组成原理 当中CPU通过地址线,数据线,和控制信号线组成的内部总线与系统其它部分进行数据通信.地址线用 ...

  10. WEB的相关知识总结

    JS-->OOP/Module, DOM, JSON, AJAX------------------><script>, script.js的内容 HTML/JS/CSS HT ...