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 相关文章推荐
js 数组克隆方法 小结
Mar 20 Javascript
JavaScript中“+”的陷阱深刻理解
Dec 04 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
Sep 10 Javascript
一个简单的jquery进度条示例
Apr 28 Javascript
avalonjs实现仿微博的图片拖动特效
May 06 Javascript
Javascript实现跨域后台设置拦截的方法详解
Aug 04 Javascript
全新打包工具parcel零配置vue开发脚手架
Jan 11 Javascript
JavaScript中var、let、const区别浅析
Jun 24 Javascript
微信小程序画布圆形进度条显示效果
Nov 17 Javascript
JS扁平化输出数组的2种方法解析
Sep 17 Javascript
vue把输入框的内容添加到页面的实例讲解
Nov 11 Javascript
vue中使用elementUI组件手动上传图片功能
Dec 13 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
追求程序速度,而不是编程的速度
2008/04/23 PHP
探讨php define()函数及defined()函数使用详解
2013/06/09 PHP
php入门教程之Zend Studio设置与开发实例
2016/09/09 PHP
php获取远程图片并下载保存到本地的方法分析
2016/10/08 PHP
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
php设计模式之策略模式应用案例详解
2019/06/17 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
java script编程起步(第三课)
2007/01/10 Javascript
json格式化/压缩工具 Chrome插件扩展版
2010/05/25 Javascript
一个检测表单数据的JavaScript实例
2014/10/31 Javascript
JavaScript实现弹出子窗口并传值给父窗口
2014/12/18 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
2015/09/27 Javascript
javascript使用 concat 方法对数组进行合并的方法
2016/09/08 Javascript
javascript表单控件实例讲解
2016/09/13 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
Element UI 自定义正则表达式验证方法
2018/09/04 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
2018/09/26 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
2020/06/02 Javascript
python实现对一个完整url进行分割的方法
2015/04/29 Python
Python之ReportLab绘制条形码和二维码的实例
2018/01/15 Python
Python中property函数用法实例分析
2018/06/04 Python
树莓派用python中的OpenCV输出USB摄像头画面
2019/06/22 Python
Python装饰器用法与知识点小结
2020/03/09 Python
PyCharm License Activation激活码失效问题的解决方法(图文详解)
2020/03/12 Python
详解python tkinter包获取本地绝对路径(以获取图片并展示)
2020/09/04 Python
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
优良学风班总结材料
2014/02/08 职场文书
贷款委托书范本
2014/04/08 职场文书
林肯就职演讲稿
2014/05/19 职场文书
大学奖学金获奖感言
2014/08/15 职场文书
2014年内部审计工作总结
2014/12/09 职场文书
教代会开幕词
2015/01/28 职场文书
电影地道战观后感
2015/06/04 职场文书
统招统分证明
2015/06/23 职场文书
《岳阳楼记》原文、译文赏析
2019/09/10 职场文书
互联网创业商业模式以及赚钱法则有哪些?
2019/10/12 职场文书