Javascript高级技巧分享

上次整理了Ajax部分，这周看完了高级技巧部分，也整理下吧。

1、类型检测
使用Object.prototype.toString.call(obj)的方式。
因为无论typeof还是instanceof都无法做到精确判断变量类型。

2、安全的构造函数
通常我们定义构造函数的时候，会使用类似


代码如下:

function Person(name){
　　this.name = name;
}

然而之后如果不是去 var person = new Person("cnblogs")。
而是 var person = Person("cnblogs")。那么this就会指向别处，导致污染其余对象。
解决方法就是在设置this.property的时候判断
this instanceof Person
如果不是，则new Person(x,x,x);


代码如下:

function Person(name){
      if(this instanceof Person){
　　     this.name = name;
      }else{
          return new Person(name);
      }
}

但是要注意一点，如果其余构造函数试图通过Person.call(this,x)这种方式实现继承的时候。
需要注意，在实例化之前把那个函数的原型指向到Person去。

3、惰性载入函数
在调用函数时，经常会存在一种情况，就是函数中需要对浏览器功能进行判断。
例如


代码如下:

function createSomething(){
     if(supportH5){
          //do something
     }else{
          //do otherthing
     }
}

但是，如果一个浏览器支持一个功能，那么必然是一直都支持，所以这里面每次执行代码时都去判断是不必要的，因为判断一次就够了。
所以可以改写成


代码如下:

function createSomething(){
     if(supportH5){
          createSomething = function(){ //重写了createSomething 函数
               //do something
          }
     }else{
          //同上
     }
}

这样，第一次调用时会做判断，之后重写了这个函数，也就自然不会判断了。

4、函数绑定
在js中，最搞混的应该就是 this 指向谁的问题。
其实，在我学习js这么久的时间里，发现一个结论
在函数中的this会指向最终调用这个函数的对象，换句话说就是，哪个对象调用了这个函数，this就指向那个对象。
搞清楚了这个，函数绑定就不是问题了。
改变函数里面this指向的方法就是 call 和 apply，不过用这两个方法都会执行函数。
如果不想执行函数，而是把函数当参数传给某个函数，还想改变this，那么就用最新的bind。

5、定时器
setTimeou、setInterval或者Ajax等虽然是异步，像多线程一样，但是js是单线程的。
其实这些方法并没有增加一个线程。
setTimeout(fn,300)代表的意思是300毫秒后把fn放入js的执行队列里面。
如果这是队列里面没有事务要执行（也就是说js解释器处于空闲状态），那么便会立刻执行。否则，便会等队列的事务处理完再执行这个函数。
所以，用setTimeout或者setInterval都不是准确的控制时间。
还有一点要注意的就是，使用setTimeout模拟setInterval可以准确控制最小执行时间间隔。

6、使用定时器固定时间执行方法。
如果一个方法要执行很久，也许造成浏览器短时间没响应，那么可以用定时器固定每段时间执行一部分。这样可以不至于让js一直处于忙碌状态（浏览器无响应），有空闲的时间处理其余事务。比如有一个1000长度数组循环，那么可以100每次的执行，中间隔点时间让js处于空闲去做别的操作。

7、函数节流。
函数节流是一种提高性能很好的方式，在某些场合可以提高几倍效率。
比如在做拖动或者是一些发生在onresize事件中的操作时。
你每操作一下，其实执行了很多遍了。例如：


代码如下:

var i = 0;
window.onresize = function(){
    console.log(i++);
}

尝试着去拉伸浏览器，就会发现控制台瞬间显示i都超过100多了。
改变一下写法，例如：


代码如下:

var i = 0, j = 1;
window.onresize = function(){
     if(j % 2 == 0){
         console.log(i++);
     }
     j++;
}

创建一个变量j，让j每次只有偶数的时候才执行，也就是少了一半的实行次数。
像这样处理下，可以减少50%的执行次数，但是对用户来说，并感受不到区别。

还有一种使用定时器实现的函数节流。
核心代码如下：


代码如下:

function throttle(method , context){
   clearTimeout(method.tId);
   method.tId = setTimeout(function(){
         method.call(context);
    },100);
}

这里传入执行函数和函数的执行环境（也就是执行函数中的this的指向对象），然后先清除动作队列，接着执行动作。
这种形式可以对动作频率做更好的控制。
假设是一个浏览器拉伸动作，那么只要你拉伸的速度够快，每次触发的时间间隔在100ms之内，那么就只会执行最后一下的结果。

8、自定义事件
本质是观察者模式。基本模式是需要3个函数，
一个函数是绑定事件，一个函数是触发事件，一个是移除绑定。
这种模式可以很大程度降低代码耦合性。

赞 (0)

相关推荐

  • 21个值得收藏的Javascript技巧

    1  Javascript数组转换为CSV格式 首先考虑如下的应用场景,有一个Javscript的字符型(或者数值型)数组,现在需要转换为以逗号分割的CSV格式文件.则我们可以使用如下的小技巧,代码如下: 复制代码 代码如下: var fruits = ['apple', 'peaches', 'oranges', 'mangoes'];var str = fruits.valueOf(); 输出:apple,peaches,oranges,mangoes 其中,valueOf()方法会将Jav

  • javascript学习笔记之10个原生技巧

    1.原生JavaScript实现字符串长度截取 复制代码 代码如下: 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

  • javascript父、子页面交互技巧总结

    帧用来存放子页面,既可以是iframe,又可以是frameset.window对象是全局对象,页面上的一切函数和对象都在它的作用域里. 1.parent代表父窗口.如果父窗口又存在若干层嵌套,则top代表顶级父窗口. self代表窗口自身. if(self==top){//}判断窗口是否处于顶级 if(self==parent){}//也可以 2.1.父页面访问子页面元素.思路是子页面的元素都在其window.document对象里面,先获取它然后就好说了. 帧最好设置name属性,这样操作最方

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

    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代码. 重复的收集元素 我在他们的JavaScript代码里看到的最常见的问题是重复的收集元素.虽然jQuery选择器引擎或querySelectorAll的执行速度

  • Javascript小技巧之生成html元素

    Javascript 生成 HTML元素的方法在本文中介绍2种,第一种是比较正规的创建元素方法,第二种是利用javascript中的write()方法直接写出html元素. 方法一: 复制代码 代码如下: //createElement()创建input元素到obj对象中   var obj = document.createElement('input');   //选择要生成地点的前一个元素   var before = document.getElementById('before'); 

  • javascript调试之DOM断点调试法使用技巧分享

    有的同学会说,可以使用源代码搜索的办法.的确,对于一个相对简单的页面,这个方法时常奏效.但是,对于构成相对复杂的页面(比如页面嵌入很多脚本文件和片段.使用了大段面向对象的实现.隐藏了实现的代码),可能找起来就不那么顺利了. 在Javascript调试中,我们经常会使用到断点调试.其实,在DOM结构的调试中,我们也可以使用断点方法,这就是DOM Breakpoint(DOM断点). 具体的使用方法: 1. 在Chrome浏览器中,打开开发者工具,先选中一个页面元素,然后点击鼠标右键,依次点击菜单中

  • JS高级调试技巧：捕获和分析 JavaScript Error详解

    反正只要 JavaScript 出错后刷新不复现,那用户就可以通过刷新解决问题,浏览器不会崩溃,当没有发生过好了.这种假设在 Single Page App 流行之前还是成立的.现在的 Single Page App 运行一段时间后状态复杂无比,用户可能进行了若干输入操作才来到这里的,说刷新就刷新啊?之前的操作岂不要完全重做?所以我们还是有必要捕获和分析这些异常信息的,然后我们就可以修改代码避免影响用户体验. 捕获异常的方式 我们自己写的 throw new Error() 想要捕获当然可以捕获

  • 一些老手都不一定知道的JavaScript技巧

    一些不太常用但强大的JavaScript小技巧,新手和老手js开发人员都不一定知道. 1.截断数组与数组长度 复制代码 代码如下: var arr1 = arr2 = [1, 2, 3]; //改变 arr1arr1 = []; // arr2则任然是 [1,2,3] 你会发现arr1用[]方法来清空不会影响arr2的值,假如要想让arr1改变后arr2跟着一起改变 ,则可以这样 复制代码 代码如下: var arr1 = arr2 = [1, 2, 3];arr1.length=0; //注意

  • JavaScript编程的10个实用小技巧

    在这篇文章中,我将列出10个Javascript实用小技巧,主要面向Javascript新手和中级开发者.希望每个读者都能至少从中学到一个有用的技巧. 1.变量转换 看起来很简单,但据我所看到的,使用构造函数,像Array()或者Number()来进行变量转换是常用的做法.始终使用原始数据类型(有时也称为字面量)来转换变量,这种没有任何额外的影响的做法反而效率更高. 复制代码 代码如下: var myVar   = "3.14159",str     = ""+ m

  • 高效率JavaScript编写技巧整理

    最近在编写一个JavaScript框架,发现有很多细节注意得不够,担心长时间积累会导致框架实际应用的时候出现严重的效率问题.于是开始关注JavaScript提高效率的一些技巧,在这里分享给大家. 1.JavaScript是唯一一个对代码体积要求越小越好的语言,因此我们可以通过一些工具来精简和压缩JavaScript代码,如JSMin.Packer.YUICompressor等.这些工具会将局部变量的名字替换成很短的变量名,例如将parseFloat()替换成a().因此我们在编写JavaScri

  • JavaScript中对循环语句的优化技巧深入探讨

    JavaScript中对循环语句的优化技巧深入探讨

    循环是所有编程语言中最为重要的机制之一,几乎任何拥有实际意义的计算机程序(排序.查询等)都里不开循环. 而循环也正是程序优化中非常让人头疼的一环,我们往往需要不断去优化程序的复杂度,却因循环而纠结在时间复杂度和空间复杂度之间的抉择. 在 javascript 中,有3种原生循环,for () {}, while () {}和do {} while (),其中最为常用的要数for () {}. 然而for正是 javascript 工程师们在优化程序时最容易忽略的一种循环. 我们先来回顾一下for

  • javascript初学者常用技巧

    本文实例讲解了javascript初学者常用的一些技巧.分享给大家供大家参考之用.具体如下: 一.Javascript程序存放位置 HTML的<body></body>里面 HTML的<head></head>里面 *.js文件里面 二.标准格式 放在HTML的<body></body>里面,当浏览器载入到Body部分的时候就开始执行Javascript <html> <head></head> &

随机推荐