分享9点个人认为比较重要的javascript 编程技巧_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)();//一般不会这么写;

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

或者

 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;

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

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

时间: 2024-09-20 10:59:29

分享9点个人认为比较重要的javascript 编程技巧_javascript技巧的相关文章

微信分享的标题、缩略图、连接及描述设置方法_javascript技巧

微信分享的标题.缩略图.连接及描述该如何设置,使用微信分享过程中会遇到这个情况,无解的朋友可以看看下面的代码 <script> var imgUrl = 'yun_qi_img/banner.jpg'; var lineLink = 'http://topic.xcar.com.cn/201403/ad_q3/index.php'; var descContent = "http://topic.xcar.com.cn/201403/ad_q3/index.php"; va

值得分享的Bootstrap Ace模板实现菜单和Tab页效果_javascript技巧

本文分享了项目中使用Ace模板的菜单样式和基于iframe的Tab页效果. 一.效果展示 折腾了好久,终于将菜单样式和Tab页的效果从项目中抽出来了. 1.初始加载出来的效果 2.展开菜单(支持多级展开,后面代码介绍) 3.点击子菜单,以Tab页的形式打开对应的页面 4.支持菜单折叠 5.打开的菜单过多时自动换行显示,折叠后自适应 二.代码示例 有现成的东西用很方便的,总的来说Bootstrap Ace模板的功能还是比较强大的,并且支持各种终端设备.本文主要使用的它的菜单的效果,下面就来看看Ac

分享经典的JavaScript开发技巧_javascript技巧

JavaScript开发经典技巧分享给大家: 1.首次为变量赋值时务必使用var关键字 变量没有声明而直接赋值得话,默认会作为一个新的全局变量,要尽量避免使用全局变量.2.使用===取代== ==和!=操作符会在需要的情况下自动转换数据类型.但===和!==不会,它们会同时比较值和数据类型,这也使得它们要比==和!=快.[10] === 10    // is false [10]  == 10    // is true '10' == 10     // is true '10' === 1

分享12个非常实用的JavaScript小技巧_javascript技巧

在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值,如果存在就返回true值.为了做这样的验证,我们可以使用!!操作符来实现是非常的方便与简单.对于变量可以使用!!variable做检测,只要变量的值为:0.null." ".undefined或者NaN都将返回的是false,反之返回的是true.比如下面的示例: func

分享几种比较简单实用的JavaScript tabel切换_javascript技巧

闲着没事,随便写了个简单的JavaScript tabel切换,大家有兴趣的看看,有需要的就拿去吧.废话不说了,大家看代码吧 方法一:for循环+if判断当前点击与自定义数组是否匹配 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab切换</title> <style type="te

分享一则javascript 调试技巧_javascript技巧

不用alert,用console.log() 复制代码 代码如下: <!DOCTYPE html> <html> <head> <script type="text/javascript"> function showLog(message){     console.log(message); } function test(name){     showLog(name); } test("hello"); <

分享Javascript中最常用的55个经典小技巧_javascript技巧

1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键<table border oncontextmenu=return(false)><td>no</table> 可用于Table 2. <body onselectstart="return false"> 取消选取.防止复制 3. onpaste="return false" 不

分享一个自己写的简单的javascript分页组件_javascript技巧

自己写的一个简单的分页组件,主要功能还有实现都在JS中,html页面中只用增加一个放置生成分页的DIV,并给定容器的id. html结构如下: 复制代码 代码如下: <ul class="pagination" id="pageDIV"> </ul> class="pagination" 给定了分页的样式, id="pageDIV"用于放置JS生成的分页 CSS结构如下: 复制代码 代码如下: .pag

分享10个原生JavaScript技巧_javascript技巧

1.实现字符串长度截取 function cutstr(str, len) { var temp; var icount = 0; var patrn = /[^\x00-\xff]/; var strre = ""; for (var i = 0; i < str.length; i++) { if (icount < len - 1) { temp = str.substr(i, 1); if (patrn.exec(temp) == null) { icount =