分享9点个人认为比较重要的javascript 编程技巧


Posted in Javascript onApril 27, 2015

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)();//一般不会这么写;

这么做的好处就是,在()外部无法访问到函数中变量,也就成了块级作用域,这种方式一般用在编写插件的时候,不会再全局 (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;

另外的一些性能优化话题,等有时间再更新。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
浅析js中2个等号与3个等号的区别
Aug 06 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
Dec 05 Javascript
js的匿名函数使用介绍
Dec 11 Javascript
js实现对table动态添加、删除和更新的方法
Feb 10 Javascript
js实现单击图片放大图片的方法
Feb 17 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
Dec 25 Javascript
jquery uploadify如何取消已上传成功文件
Feb 08 Javascript
详解vue跨组件通信的几种方法
Jun 15 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
Mar 17 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
Nov 27 Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 Javascript
javascript+html5实现仿flash滚动播放图片的方法
Apr 27 #Javascript
原生js和jQuery写的网页选项卡特效对比
Apr 27 #Javascript
javascript实现淘宝幻灯片广告展示效果
Apr 27 #Javascript
jquery实现标签上移、下移、置顶
Apr 26 #Javascript
jquery ui resize 中border-box的bug修正
Apr 26 #Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
Apr 26 #Javascript
jquery获取节点名称
Apr 26 #Javascript
You might like
php防止sql注入简单分析
2015/03/18 PHP
PHP结合Ffmpeg快速搭建流媒体服务的实践记录
2018/10/31 PHP
asp函数split()对应php函数explode()
2019/02/27 PHP
PHP封装请求类实例分析【基于Yii框架】
2019/10/17 PHP
关于laravel 日志写入失败问题汇总
2019/10/17 PHP
JavaScript闭包函数访问外部变量的方法
2014/08/27 Javascript
JavaScript更改原始对象valueOf的方法
2015/03/19 Javascript
使用AngularJS来实现HTML页面嵌套的方法
2015/06/17 Javascript
Ionic如何创建APP项目
2016/06/03 Javascript
js css+html实现简单的日历
2016/07/14 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
2017/09/25 Javascript
详解微信小程序审核不通过的解决方法
2018/01/17 Javascript
在vue项目中引入vue-beauty操作方法
2019/02/11 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[01:06:43]完美世界DOTA2联赛PWL S3 PXG vs GXR 第二场 12.19
2020/12/24 DOTA
python中PIL安装简单教程
2016/04/21 Python
Python使用内置json模块解析json格式数据的方法
2017/07/20 Python
浅谈Django的缓存机制
2018/08/23 Python
python中文分词库jieba使用方法详解
2020/02/11 Python
Python中的整除和取模实例
2020/06/03 Python
python判断all函数输出结果是否为true的方法
2020/12/03 Python
python 6种方法实现单例模式
2020/12/15 Python
AmazeUI的下载配置与Helloworld的实现
2020/08/19 HTML / CSS
英国、欧洲和全球租车服务:Avis英国
2016/08/29 全球购物
S’well Bottle保温杯官网:绝缘不锈钢水瓶
2018/05/09 全球购物
巴西体育用品商店:Lojão dos Esportes
2018/07/21 全球购物
澳大利亚运动鞋商店:Platypus Shoes
2019/09/27 全球购物
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
创意活动策划书
2014/01/15 职场文书
2014年百日安全生产活动总结
2014/05/04 职场文书
英文升职感谢信
2015/01/23 职场文书
财务经理岗位职责范本
2015/04/08 职场文书
python实现求纯色彩图像的边框
2021/04/08 Python
mybatis源码解读之executor包语句处理功能
2022/02/15 Java/Android