分享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 相关文章推荐
javascript中使用replaceAll()函数实现字符替换的方法
Dec 25 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
Jun 20 Javascript
js+JQuery返回顶部功能如何实现
Dec 03 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
Jan 14 Javascript
node.js正则表达式获取网页中所有链接的代码实例
Jun 03 Javascript
讲解JavaScript中for...in语句的使用方法
Jun 03 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
Aug 10 Javascript
Angularjs---项目搭建图文教程
Jul 08 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
Sep 18 Javascript
Node.js 中使用 async 函数的方法
Nov 20 Javascript
小程序绑定用户方案优化小结
May 15 Javascript
将RGB值转换为灰度值的简单算法
Oct 09 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 stream_get_meta_data返回值
2013/09/29 PHP
php中实现用数组妩媚地生成要执行的sql语句
2015/07/10 PHP
浅谈PHP中output_buffering
2015/07/13 PHP
PHP基于简单递归函数求一个数阶乘的方法示例
2017/04/26 PHP
在Laravel5中正确设置文件权限的方法
2019/05/22 PHP
文本链接逐个出现的js脚本
2007/12/12 Javascript
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
2016/05/23 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
2016/06/12 Javascript
深入浅析JavaScript的API设计原则
2016/06/14 Javascript
JS图片定时翻滚效果实现方法
2016/06/21 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
监听element-ui table滚动事件的方法
2019/03/26 Javascript
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
Python数据结构与算法之常见的分配排序法示例【桶排序与基数排序】
2017/12/15 Python
Python cookbook(数据结构与算法)字典相关计算问题示例
2018/02/18 Python
详解python中的装饰器
2018/07/10 Python
PyTorch基本数据类型(一)
2019/05/22 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
用Python实现二叉树、二叉树非递归遍历及绘制的例子
2019/08/09 Python
基于Python实现ComicReaper漫画自动爬取脚本过程解析
2019/11/11 Python
AUC计算方法与Python实现代码
2020/02/28 Python
pycharm 激活码及使用方式的详细教程
2020/05/12 Python
Bobbi Brown芭比波朗美国官网:化妆师专业彩妆保养品品牌
2016/08/18 全球购物
美国著名手表网站:Timepiece
2017/11/15 全球购物
英国优质家居用品网上品牌:URBANARA
2018/06/01 全球购物
求职信范文英文版
2014/01/05 职场文书
冬季安全检查方案
2014/05/23 职场文书
小学三好学生事迹材料
2014/08/15 职场文书
付款证明格式范文
2015/06/19 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书
Mysql数据库值的添加、修改、删除及清空操作实例
2021/06/20 MySQL
MySQL索引是啥?不懂就问
2021/07/21 MySQL
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB
python和C/C++混合编程之使用ctypes调用 C/C++的dll
2022/04/29 Python