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 相关文章推荐
基于jquery的图片的切换(以数字的形式)
Feb 14 Javascript
ajax不执行success回调而是执行了error回调
Dec 10 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
Mar 18 Javascript
基于JS实现简单的样式切换效果代码
Sep 04 Javascript
关于session和cookie的简单理解
Jun 08 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
Nov 29 Javascript
Bootstrap风格的WPF样式
Dec 07 Javascript
AngularJS Controller作用域
Jan 09 Javascript
浅谈Vue.nextTick 的实现方法
Oct 25 Javascript
Vue中的Props(不可变状态)
Sep 29 Javascript
webpack中如何使用雪碧图的示例代码
Nov 11 Javascript
探索node之事件循环的实现
Oct 30 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_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
PHP的foreach中使用引用时需要注意的一个问题和解决方法
2014/05/29 PHP
PHP伪造来源HTTP_REFERER的方法实例详解
2015/07/06 PHP
PHP7多线程搭建教程
2017/04/21 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
php之可变变量的实例详解
2017/09/12 PHP
laravel 实现登陆后返回登陆前的页面方法
2019/10/03 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
JS增加行复制行删除行的实现代码
2013/11/09 Javascript
基于javascript如何传递特殊字符
2015/11/30 Javascript
简单介绍jsonp 使用小结
2016/01/27 Javascript
laydate 显示结束时间不小于开始时间的实例
2017/08/11 Javascript
JS实现520 表白简单代码
2018/05/21 Javascript
js比较两个单独的数组或对象是否相等的实例代码
2019/04/28 Javascript
vue登录以及权限验证相关的实现
2019/10/25 Javascript
ES6箭头函数和扩展实例分析
2020/05/23 Javascript
[05:00]第二届DOTA2亚洲邀请赛主赛事第三天比赛集锦.mp4
2017/04/04 DOTA
Python中使用wxPython开发的一个简易笔记本程序实例
2015/02/08 Python
python动态参数用法实例分析
2015/05/25 Python
Python二叉树的镜像转换实现方法示例
2019/03/06 Python
使用PyQtGraph绘制精美的股票行情K线图的示例代码
2019/03/14 Python
pyqt5 comboBox获得下标、文本和事件选中函数的方法
2019/06/14 Python
python3用PIL把图片转换为RGB图片的实例
2019/07/04 Python
python自动结束mysql慢查询会话的实例代码
2019/10/27 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
Erwin Müller穆勒家居瑞士官网:您整个家庭的邮购公司
2019/12/28 全球购物
上海天奕面试题笔试题
2015/04/19 面试题
如何进行Linux分区优化
2013/02/12 面试题
校园网站的创业计划书范文
2013/12/30 职场文书
党性心得体会
2014/09/03 职场文书
医德医魂心得体会
2014/09/11 职场文书
《成长的天空》读后感3篇
2019/12/06 职场文书
阿里云服务器部署mongodb的详细过程
2021/09/04 MongoDB
前端JavaScript大管家 package.json
2021/11/02 Javascript
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android