JS学习笔记11_高级技巧

1.类型检测

typeof有时返回值不合理,比如RegExp对象返回object,测试代码:

var regex = /^what$/i;
regex = new RegExp(‘^what$‘);
alert(typeof regex);

instanceof在页面有多个frame时用不了,来自不同frame的对象instanceof返回false

可以用Object.prototype.toString.call(value) === ‘[object Array/Function...]’来做类型检查,也可以用来区分原生对象和自定义对象,例如:

[object JSON]//原生JSON对象
[object Object]//自定义JSON对象

注意:IE中以COM对象形式实现的函数对象toString不会返回[object Function]

2.作用域安全的构造函数

用new操作符调用构造函数会给新创建的对象添加属性,而直接调用构造函数会给全局对象window添加属性

为了避免污染全局作用域,可以用如下构造函数:

/* 可能会污染全局作用域
function Student(name){
  this.name = name;
}
*/
//作用域安全的构造函数
function Student(name){
  if(this instanceof Student){
    this.name = name;
  }
  else{
    return new Student(name);
  }
}

上面的构造函数能够避免直接调用构造函数给全局对象意外添加属性,但用这种方式实现继承可能会出现问题,类型检查可能导致继承失败

3.惰性载入(避免重复分支检测)

  1. 在第一次执行分支检测时,覆盖原有函数,例如:

    function detect(){
      if(...){
        detect = function(){
          //
        }
      }
      else if(...){
        detect = function(){
          //
        }
      }
      else...
    }
  2. 可以用匿名函数立即执行并返回匿名函数来实现惰性载入,例如:
    var detect = (function(){
      if(...){
        return function(){
          //
        }
      }
      else if(...){
        return function(){
          //
        }
      }
      else...
    })();

第一种方式第一次调用时损失性能,以后调用不会损失性能;第二种方式在第一次调用时也不会损失性能,因为把时耗放到了第一次载入代码时

4.函数绑定(指定执行环境)

可以用下面的函数给函数指定执行环境并创造新函数:

function bind(fun, context){
  return function(){
    return fun.apply(context, arguments);
  }
}

可以方便地根据已有函数生成新函数,[IE9+]有原生的bind方法,例如var newFun = fun.bind(obj);

注意:函数绑定存在内存消耗多,执行慢的缺点

5.函数柯里化(也叫函数套用,允许指定一些参数)

创建柯里化函数的通用方式:

function curry(fun){
  var args = Array.prototype.slice.call(arguments, 1);//去掉第一个参数fun,得到给定的参数值
  return function(){
    var innerArgs = Array.prototype.slice.call(arguments);//把内部arguments对象转换为数组(为了用concat方法)
    var finalArgs = args.concat(innerArgs);//拼接参数列表
    return fun.apply(null, finalArgs);//把拼接的参数列表传给fun
  }
}

或者增强bind方法实现柯里化:

function bind(fun, context){
  var args = Array.prototype.slice.call(arguments, 2);//去掉前2个参数
  return function(){
    var innerArgs = Array.prototype.slice.call(arguments);//同curry
    var finalArgs = args.concat(innerArgs);//同curry
    return fun.apply(context, finalArgs);//指定执行环境和参数
  }
}

注意:柯里化和bind都存在额外开销,不要滥用

6.防篡改对象

  1. 不可扩展对象(不能添加新属性)

    var obj = {a : 1, b : 2};
    alert(Object.isExtensible(obj));//true
    Object.preventExtensions(obj);//把obj设置为不可扩展
    alert(Object.isExtensible(obj));//false
    obj.c = 3;
    alert(obj.c);//undefined

    注意:设置不可扩展操作无法撤销(改不回来),设置之后无法添加新属性,但可以修改/删除原有属性

  2. 密封对象(只能修改现有属性,无法删除或添加)
    var obj = {a : 1, b : 2};
    Object.seal(obj);//设置密封对象
    alert(Object.isSealed(obj));//true
    obj.c = 3;
    alert(obj.c);//undefined
    delete obj.a;//严格模式下报错
    alert(obj.a);//1
  3. 冻结对象(只读,访问器属性可写)
    var obj = {a : 1, b : 2};
    Object.freeze(obj);//设置密封对象
    alert(Object.isFrozen(obj));//true
    obj.a = 3;
    alert(obj.a);//1

上面的实现都是ES5新增的部分,浏览器支持性未知,本机测试[IE8-]不支持,Chrome和FF支持

7.函数节流

把耗时的大任务分割成小块,用setTimeout控制执行

优点:提高了页面响应速度

缺点:逻辑连贯性没了,实现难度增大,而且不易实现事务控制,因为完整事务被拆开了

8.观察者模式

用自定义事件可以实现观察者模式:

function EventTarget(){
  this.handlers = {};
}

EventTarget.prototype = {
  constructor: EventTarget,

  addHandler: function(type, handler){
    if (typeof this.handlers[type] == "undefined"){
      this.handlers[type] = [];
    }

    this.handlers[type].push(handler);
  },

  fire: function(event){
    if (!event.target){
      event.target = this;
    }
    if (this.handlers[event.type] instanceof Array){
      var handlers = this.handlers[event.type];
      for (var i=0, len=handlers.length; i < len; i++){
        handlers[i](event);
      }
    }
  },

  removeHandler: function(type, handler){
    if (this.handlers[type] instanceof Array){
      var handlers = this.handlers[type];
        for (var i=0, len=handlers.length; i < len; i++){
          if (handlers[i] === handler){
            break;
          }
        }

        handlers.splice(i, 1);
      }
  }
};

用法如下:

function handleMessage(event){
  alert("Message received: " + event.message);
}
//创建新对象
var target = new EventTarget();
//添加事件处理器
target.addHandler("message", handleMessage);
//触发事件
target.fire({ type: "message", message: "Hello world!"});
//删除事件处理器
target.removeHandler("message", handleMessage);
//再次触发事件,应该没有事件处理器
target.fire({ type: "message", message: "Hello world!"});
时间: 2024-09-28 19:16:50

JS学习笔记11_高级技巧的相关文章

Vue.js学习笔记:在元素 和 template 中使用 v-if 指令

f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <script src="https://cdn.bootcss.com/vue/2.2.

[Pro Angular.JS]学习笔记1.1:设置开发环境

可以使用yeoman.io,很方便.我已经写了一篇随笔,介绍如何使用.这里也有一篇介绍的文章:http://www.cnblogs.com/JoannaQ/p/3756281.html 代码编辑器,在Mac下用了一下WebStorm,太恶心了.另外发现书的作者使用的开发环境是Windows + VS Express 2013,为了方便学习,我也使用VS Express 2013 Update2.VS2013用起来蛮舒服的,把WebStorm比得跟驼屎一样.也许是因为我没用习惯吧. 1.安装Nod

【转】Backbone.js学习笔记(二)细说MVC

文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Backbone源码结构 1: (function() { 2: Backbone.Events // 自定义事件 3: Backbone.Model // 模型构造函数和原型扩展 4: Backbone.Collection // 集合构造函数和原型扩展 5: Backbone.Router // 路由

Angular JS 学习笔记

特定领域语言 编译器:遍历DOM来查找和它相关的属性, 分为编译和链接两个阶段, 指令:当关联的HTML结构进入编译阶段时应该执行的操作,可以写在名称里,属性里,css类名里:本质上是函数 稳定的DOM:绑定了数据模型的DOM元素的实例不会在绑定的生命周期发生改变 作用域:用来检测模型的改变和为表达式提供执行上下文的 AngularJS 和其它模板系统不同,它使用的是DOM而不是字符串 指令: 由某个属性.元素名称.css类名出现而导致的行为,或者说是DOM的变化 Filter过滤器:扮演着数据

Node.js学习笔记(3) - 简单的curd

这个算是不算完结的完结吧,前段时间也是看了好久的Node相关的东西,总想着去整理一下,可是当时也没有时间: 现在看来在整理的话,就有些混乱,自己也懒了,就没在整理,只是简单的记录一下 一.demo的简单介绍 这次demo,只涉及到简单的curd操作,用到的数据库是mongo,所以要安装mongo数据库,数据库连接驱动是mongoose: 当然关于mongo的驱动有很多,比如mongous mongoskin等:(详见http://cnodejs.org/topic/4f4ca8e0940ce2e

JS学习笔记-OO疑问之封装

封装是面向对象的基础,今天所要学习的匿名函数与闭包就是为了实现JS的面向对象封装.封装实现.封装变量,提高数据.系统安全性,封装正是面向对象的基础. 匿名函数 即没有名字的函数,其创建方式为 function(){...} 单独存在的匿名函数,无法运行,可通过赋值给变量调用或通过表达式自我执行来实现运行. 1.赋值给变量为一般的函数使用方式 var run = function(){ return '方法运行中'; }; alert(run()); 2.通过表达式自我执行 (function(a

每日js学习笔记2014.5.4

<script language="javascript">var mystring = "这是第一个正则表达式的例子";var myregex = new RegExp("这是"); //创建正则表达式if (myregex.test(mystring)) //test的功能是查找字符串中是否有匹配项,有则返回true,没有则返回false{ document.write ("找到了指定的模式");}else{

每日js学习笔记2014.5.5

<script language="javascript"><!-- var textstr = prompt("请输入一个字符串:",""); //prompt的用法,包含两个参数 var regex = /[A-Z][a-z]tion/; //[A-Z]有无匹配项 var result = regex.test(textstr); //test的用法 document.write ("<font size='

JS学习笔记-OO疑问之对象创建

问一.引入工厂,解决重复代码 前面已经提到,JS中创建对象的方法,不难发现,基本的创建方法中,创建一个对象还算简单,如果创建多个类似的对象的话就会产生大量重复的代码. 解决:工厂模式方法(添加一个专门创建对象的方法,传入参数避免重复) function createObject(name,age){ var obj =new Object(); //创建对象 obj.name = name; obj.age = age; obj.run = function(){ return this.nam