Javascript高级技巧分享


Posted in Javascript onFebruary 25, 2014

上次整理了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个函数,
一个函数是绑定事件,一个函数是触发事件,一个是移除绑定。
这种模式可以很大程度降低代码耦合性。

Javascript 相关文章推荐
javascript 兼容鼠标滚轮事件
Apr 07 Javascript
如何用jquery控制表格奇偶行及活动行颜色
Apr 20 Javascript
jQuery中contents()方法用法实例
Jan 08 Javascript
基于jQuery实现放大镜特效
Oct 19 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
Dec 26 Javascript
浅析Javascript中bind()方法的使用与实现
May 30 Javascript
ES6中Generator与异步操作实例分析
Mar 31 Javascript
详解AngularJS controller调用factory
May 19 Javascript
JS关于刷新页面的相关总结
May 09 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
Aug 24 Javascript
如何基于JS截获动态代码
Dec 25 Javascript
使用Vue 自定义文件选择器组件的实例代码
Mar 04 Javascript
鼠标拖拽移动子窗体的JS实现
Feb 25 #Javascript
js判断为空Null与字符串为空简写方法
Feb 24 #Javascript
JS清空多文本框、文本域示例代码
Feb 24 #Javascript
脚本合并提升javascript性能示例
Feb 24 #Javascript
动态加载脚本提升javascript性能
Feb 24 #Javascript
巧用局部变量提升javascript性能
Feb 24 #Javascript
javascript中的原型链深入理解
Feb 24 #Javascript
You might like
PHP实现MySQL更新记录的代码
2008/06/07 PHP
PHP mcrypt可逆加密算法分析
2011/07/19 PHP
ThinkPHP实现跨模块调用操作方法概述
2014/06/20 PHP
9个实用的PHP代码片段分享
2015/01/22 PHP
PHP模拟post提交数据方法汇总
2016/02/16 PHP
网站被黑的假象--ARP欺骗之页面中加入一段js
2007/05/16 Javascript
JS解密入门之凭直觉解
2008/06/25 Javascript
9个JavaScript评级/投票插件
2010/01/18 Javascript
理解Javascript_13_执行模型详解
2010/10/20 Javascript
javascript自动给文本url地址增加链接的方法分享
2014/01/20 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
2015/03/02 Javascript
jquery mobile开发常见问题分析
2016/01/21 Javascript
js仿拉勾网首页穿墙广告效果
2017/03/08 Javascript
基于Vue实现后台系统权限控制的示例代码
2017/08/29 Javascript
让axios发送表单请求形式的键值对post数据的实例
2018/08/11 Javascript
vue中的mvvm模式讲解
2019/01/31 Javascript
微信小程序自定义toast组件的方法详解【含动画】
2019/05/11 Javascript
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
Vuex实现购物车小功能
2020/08/17 Javascript
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
Python库urllib与urllib2主要区别分析
2014/07/13 Python
Python中字符串的常见操作技巧总结
2016/07/28 Python
python snownlp情感分析简易demo(分享)
2017/06/04 Python
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
Python实现括号匹配方法详解
2020/02/10 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
Python的轻量级ORM框架peewee使用教程
2021/02/05 Python
matplotlib之属性组合包(cycler)的使用
2021/02/24 Python
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
2019/07/09 HTML / CSS
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
印度民族服装购物网站:BIBA
2019/08/05 全球购物
大唐电信科技股份有限公司java工程师面试经历
2016/12/09 面试题
库房主管岗位职责
2013/12/31 职场文书
战友聚会邀请函
2014/01/18 职场文书
暑假社会实践心得体会
2014/09/02 职场文书
2015年初一班主任工作总结
2015/05/13 职场文书