Javascript高级技巧分享

 这篇文章主要介绍了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个函数,
一个函数是绑定事件,一个函数是触发事件,一个是移除绑定。
这种模式可以很大程度降低代码耦合性。

时间: 2024-12-30 20:40:32

Javascript高级技巧分享的相关文章

Javascript高级技巧分享_javascript技巧

上次整理了Ajax部分,这周看完了高级技巧部分,也整理下吧. 1.类型检测 使用Object.prototype.toString.call(obj)的方式.因为无论typeof还是instanceof都无法做到精确判断变量类型. 2.安全的构造函数通常我们定义构造函数的时候,会使用类似 复制代码 代码如下: function Person(name){ this.name = name;} 然而之后如果不是去 var person = new Person("cnblogs").而是

20个实用的JavaScript技巧分享_javascript技巧

众所周知,JavaScript是一门非常流行的编程语言,开发者用它不仅可以开发出炫丽的Web程序,还可以用它来开发一些移动应用程序(如PhoneGap或Appcelerator),它还有一些服务端实现,比如NodeJS.Wakanda以及其它实现.此外,许多开发者都会把JavaScript选为入门语言,使用它来做一些弹出窗口等小东西. 在这篇文章中,作者将会向大家分享JavaScript开发的小技巧.最佳实践等非常实用的内容,不管你是前端开发者还是服务端开发者,都应该来看看这些小技巧,它们绝对会

原生javascript实现分享到朋友圈功能 支持ios和android_javascript技巧

现在主流的分享工具也有很多,例如JiaThis.bShare分享,甚至一些大公司的如百度分享,但是他们依旧停留在只是在PC端的分享,对手机端的支持不是太好. 大家都知道现在很多手机端浏览器都内置了一些分享组件,像UC浏览器.QQ浏览器,内置的组件分享可以直接启动相应的APP分享,要是一个JS能调用浏览器的内置分享组件,那是多么酷啊. 一.工具介绍 nativeShare.js 一个可以通过javascript直接调用原生分享的工具,该工具具有以下特点: 1.支持原生微博.微信好友.微信朋友圈.Q

10个基于浏览器的JavaScript调试工具分享_javascript技巧

调试Javascript可能是web开发中最让人郁闷的事情.所以这里我们绝定来寻找一些好的工具来帮助大家调试.这里是10款我们精选的基于浏览器的JS在线调试工具,希望大家喜欢!Online Debugging Tools 1.PastebinPastebin是一个协作式的调试工具,帮助你在IRC,IM或者消息版上对话来分享和修改代码片段 2.JSON Formatter and ValidatorJSON格式化工具用来帮助打来调试JSON.因为JSON数据格式经常没有换行,可能非常难于阅读.这个

Javascript资源分享:WEBJX分享最新的JavaScript库

文章简介:JavaScript库已经成为了一个web开发人员的工具包的重要组成部分,在这里为大家推荐15个最新的JavaScript库,来增强您的Web体验. JavaScript库已经成为了一个web开发人员的工具包的重要组成部分,在这里为大家推荐15个最新的JavaScript库,来增强您的Web体验. 1. Pikaday : Standalone JavaScript Datepicker 这是一个令人耳目一新的JavaScript日期选择器 轻量轻(压缩和gzip后小于5KB) 没有依

杨凯华:原创文章的写作高级技巧分享

什么是符合seo的原创文章呢,未被搜索引擎检索过的文章就是原创!今天杨凯华就来和大家分享下本人做的几个发的文章都能秒收的站的文章是怎么来的哦! 1.去百度新闻,百度博客(最新出来的,还是测试版)搜索和你关键词相关的文章,这里每天都在更新,用伪原创工具把其中的关键词适当替换下,段落位置适当颠倒下,这种类似的方法估计是大多数站长目前正在采用的方法哦! 2.由于qq空间的文章收录不佳,好多qq空间里的文章适当修改下,或者不修改都可以作为原创文章直接放上去的. 3.提到qq,还想分享一点,其实做为站长的

常用的几段javascript代码分享

 这篇文章主要介绍了常用的几段javascript代码,需要的朋友可以参考下 1.3秒后自动返回  代码如下: <span id="totalSecond">3</span>秒后自动返回    <script language="javascript" type="text/javascript">  <!--  var second = document.getElementById('totalSec

正则表达式的高级技巧分享_正则表达式

正则表达式(regular expression abbr. regex) 功能强大,能够用于在一大串字符里找到所需信息.它利用约定俗成的字符结构表达式来发生作用.不幸的是,简单的正则表达式对于一些高级运用,功能远远不够.若要进行筛选的结构比较复杂,你可能就需要用到高级正则表达式. 本文介绍正则表达式的高级技巧.筛选出了八个常用的概念,并配上实例解析,每个例子都是满足某种复杂要求的简单写法.如果你对正则的基本概念尚缺乏了解,请先阅读这篇文章,或者这个教程,或者维基条目. 这里的正则语法适用于ph

常用的几段javascript代码分享_javascript技巧

1.3秒后自动返回 复制代码 代码如下: <span id="totalSecond">3</span>秒后自动返回 <script language="javascript" type="text/javascript"> <!-- var second = document.getElementById('totalSecond').textContent; if (navigator.appName