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 backgroundImage控制
May 19 Javascript
模仿jQuery each函数的链式调用
Jul 22 Javascript
Javascript 中介者模式实例
Dec 16 Javascript
jquery ztree实现树的搜索功能
Feb 25 Javascript
基于javascript数组实现图片轮播
May 02 Javascript
js实现移动端轮播图效果
Dec 09 Javascript
旺旺在线客服代码 旺旺客服代码生成器
Jan 09 Javascript
微信小程序实现倒计时补零功能
Jul 09 Javascript
vue计算属性computed的使用方法示例
Mar 13 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
Apr 14 Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 Javascript
小程序自定义模板实现吸顶功能
Jan 08 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使用变量动态创建类的对象用法示例
2017/02/06 PHP
PHP yield关键字功能与用法分析
2019/01/03 PHP
Jquery中getJSON在asp.net中的使用说明
2011/03/10 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
2014/11/04 Javascript
PHP结合jQuery实现的评论顶、踩功能
2015/07/22 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
2016/02/17 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
2016/05/10 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
2016/10/28 Javascript
Node.js中用D3.js的方法示例
2017/01/16 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
vue2.0 自定义日期时间过滤器
2017/06/07 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
2017/09/19 Javascript
深入理解Node module模块
2018/03/26 Javascript
Angular 封装并发布组件的方法示例
2018/04/19 Javascript
微信小程序实现折叠展开效果
2018/07/19 Javascript
Vue入门之数量加减运算操作示例
2018/12/11 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
详解vue父子组件关于模态框状态的绑定方案
2019/06/05 Javascript
使用vue for时为什么要key【推荐】
2019/07/11 Javascript
详解微信小程序开发之formId使用(模板消息)
2019/08/27 Javascript
Python 实现在文件中的每一行添加一个逗号
2018/04/29 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
Python 分发包中添加额外文件的方法
2019/08/16 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
python安装dlib库报错问题及解决方法
2020/03/16 Python
python利用google翻译方法实例(翻译字幕文件)
2020/09/21 Python
CSS3媒体查询Media Queries基础学习教程
2016/02/29 HTML / CSS
Vertbaudet西班牙网上商店:婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
澳大利亚Rockwear官网:女子瑜伽、健身和运动服
2021/01/26 全球购物
YII2 全局异常处理深入讲解
2021/03/24 PHP
给全校老师的建议书
2014/03/13 职场文书
幼儿园新年寄语
2014/04/03 职场文书
2015共产党员公开承诺书
2015/01/22 职场文书
董事长助理岗位职责
2015/02/11 职场文书
七年级作文之秋游
2019/10/21 职场文书