《JavaScript 模式》读书笔记(4)— 函数4
这篇文章我们主要来学习下即时对象初始化、初始化时分支、函数属性-备忘模式以及配置对象。这篇的内容会有点多。
六、即时对象初始化
保护全局作用域不受污染的另一种方法,即时对象初始化模式。这种模式使用带有init()方法的对象,该方法在创建对象后将会立即执行。init()函数需要负责所有的初始化任务。
({
// 在这里可以定义设定值
// 又名配置常数
maxwidth:600,
maxheight:400, // 还可以定义一些实用的方法
gimmeMax:function () {
return this.maxwidth + "x" + this.maxheight;
}, // 初始化
init:function() {
console.log(this.gimmeMax());
// 更多初始化任务
}
}).init()
就语法而言,对待这种模式就像在使用对象字面量创建一个普通的对象。也可以将字面量包装到括号中(分组操作符),它指示JavaScript引擎将大括号作为对象字面量,而不是作为一个代码块(也不是if或者for循环)。在该括号结束之后,可以立即调用init()方法。
这两种方法都可以运行:
({...}).init();
({...}.init());
这种方法可以在执行一次性初始化任务时,保护全局命名空间。
与仅仅将一堆代码包装到匿名函数的方法相比,这种模式看起来涉及更多的语法特征,但是如果初始化任务更加复杂,它会使整个初始化过程显得更有结构化。比如,私有帮助函数是非常清晰可辩别的,因为他们是临时对象的属性,而在即时函数模式中,他们就很可能只是分散在各处的函数而已。
这种模式主要适用于一次性的任务,而且在init()完毕后也没有对该对象的访问,如果想要在init()完毕后保存对该对象的一个引用,可以通过在init()尾部添加"return this;"语句实现该功能。
var a = ({
// 在这里可以定义设定值
// 又名配置常数
maxwidth:600,
maxheight:400, // 还可以定义一些实用的方法
gimmeMax:function () {
return this.maxwidth + "x" + this.maxheight;
}, // 初始化
init:function() {
console.log(this.gimmeMax());
// 更多初始化任务
return this;
}
}).init()
console.log(a.maxheight)
七、初始化时分支
初始化时分支(Init-time branching,也称为加载时分支Load-time branching)是一种优化模式。当知道某个条件在整个程序声明周期内都不会发生改变的时候,仅对该条件测试一次时很有意义的。浏览器嗅探就是一个典型的例子。
查明DOM元素的计算样式或附加的事件处理程序是另外一个可以受益于初始化时分支模式的场景。绝大多数程序开发员都已经编写过这样的代码,至少有一次在他们的客户端编程生命周期内,既可用于附加或删除事件监听器的工具:
// 之前
var utils = {
addListener: function(el,type,fn) {
if(typeof window.addEventListener === 'function') {
el.addEventListener(type,fn,false);
} else if(typeof document.attachEvent === 'function') { //'IE'
el.attachEvent('on' + type,fn);
} else {
el['on' + type] = fn;
}
},
removeListener:function(el,type,fn){
// 几乎一样
}
}
此段代码效率低下。每次在调用utils.addListener()或utils.removeListener()时,都会重复执行相同的检查。
当使用初始化分支的时候,可以在脚本初始化加载时一次性探测出浏览器特征。此时,可以在整个页面生命周期内重定义函数运行方式:
// 之后
var utils = {
addListener:null,
removeListener:null
};
//实现
if(typeof window.addEventListener === 'function') {
utils.addListener = function(el,type,fn){
el.addEventListener(type,fn,false);
};
utils.removeListener = function(el,type,fn){
el.removeEventListener(type,fn,false);
};
} else if(typeof document.attachEvent === 'function') { //判断为IE浏览器
utils.addListener = function(el,type,fn){
el.attachEvent('on' + type,fn);
};
utils.removeListener = function(el,type,fn){
el.detachEvent('on' + type,fn);
};
} else { //更早的版本
utils.addListener = function(el,type,fn){
el['on' + type] = fn;
};
utils.removeListener = function(el,type,fn){
el['on' + type] = null;
};
}
其实,简单来说,个人理解,分支初始化的意义就在于:把重复的事情仅做一次。
八、函数属性—备忘模式
函数是对象,因此它们具有属性。事实上,它们确实还有属性和方法。比如,对于每一个函数,无论使用什么样的语法来创建它,它都会自动获得一个length属性,其中包含了该函数期望的参数数量。
function func(a, b, c) {}
console.log(func.length); //
可以在任何时候将自定义属性添加到你的函数中。自定义属性的其中一个用例是缓存函数结果(即返回值),因此,在下一次调用该函数时就不用重做潜在的繁重计算。缓存函数结果,也被称为备忘。
var myFunc = function (param) {
if(!myFunc.cache[param]) {
var result = {};
// ... 开销很大的操作 ...
myFunc.cache[param] = result;
}
return myFunc.cache[param];
}; // 缓存存储
myFunc.cache = {};
上面的例子中,函数myFunc创建了一个属性cache,该属性可以通过myFunc.cache像通常那样进行访问。cache属性是一个对象,其中使用传递给函数的参数param作为键,而计算结果作为值。计算结果可以是需要的任意复杂数据结构。
上面的代码假定该函数只需要一个参数param,并且它是一个基本数据类型。如果有更多以及更复杂的参数,对此的通用解决方案是将它们序列化。即,可以将参数对象序列化为一个JSON字符串,并使用该字符串作为cache对象的键:
var myFunc = function () {
var cachekey = JSON.stringify(Array.prototype.slice.call(arguments)),
result;
if(!myFunc.cache[cachekey]) {
result = {};
// ... 开销很大的操作 ...
myFunc.cache[cachekey] = result;
}
return myFunc.cache[cachekey];
}; // 缓存存储
myFunc.cache = {};
请注意,在序列化的过程中,对象的“标识”将会丢失。如果有两个不同的对象并且恰好都具有相同的属性,这两个对象将会共享同一个缓存条目。
编写前面的函数的另一种方法是使用arguments.callee来引用该函数,而不是使用硬编码函数名称。虽然在目前这是可行的,但是在ES5的严格模式中并不支持arguments.callee。
var myFunc = function (param) {
var f = arguments.callee,
result;
if(!f.cache[param]) {
result = {};
// ... 开销很大的操作 ...
f.cache[param] = result;
}
return f.cache[param];
}; // 缓存存储
myFunc.cache = {};
九、配置对象
配置对象模式(configuration object pattern)是一种提供更简洁API的方法,尤其是在建立一个库或任何将被其他程序使用的代码的情况。
其实配置对象的概念很简单,或许你已经在开发工作中使用了:
// 由于软件的开发是不断推进的,需求必然会频繁变更。
// 假设,我们正在编写一个addPerson()的函数,该函数接受人员的名和姓作为参数。
function addPerson(first,last){
//...
}; // 后来,又要加入人员的性别,住址,电话啥的,住址和电话是可选的
// 这里把可选的参数放在末尾
function addPerson(first,last,gender,address,phone){
//...
}; // 然后,又需要直到用户名,注册的日期等,这是必填的。
// 于是,就是这样了
function addPerson(first,last,gender,address,phone,username,addDate){
//...
}; // 这时候,可选的参数,也必须要传递了
addPerson('first','last','gender',null,null,'username','addDate'); // 这个参数列表变得越来越长,越来越无法维护
所以,我们可以仅使用一个参数来代表所有参数,让我们将该参数对象成为conf,即“配置”的意思。
addPerson(conf);
然后,该函数的使用者可以这样做:
var conf = {
username:'zaking',
first:"Bruce",
last:"Wayne"
};
addPerson(conf);
配置对象的优点在于:
- 不需要记住众多的参数以及其顺序。
- 可以安全忽略可选参数。
- 更加易于阅读和维护。
- 更加易于添加和删除参数。
缺点是这样的:
- 需要记住参数名称。
- 属性名称无法被压缩。
当函数创建DOM元素时,这种模式可能是非常有用的,例如,可以用在设置元素的CSS样式中,因为元素和样式可能具有大量的可选特征和属性。
这篇文章的内容就到这里了,都是一些小的point,但是其实也很有必要去学习一下,下一章将会是函数部分的最后一章,我们会聊一聊“Curry化”。
《JavaScript 模式》读书笔记(4)— 函数4的更多相关文章
- JavaScript模式读书笔记 第4章 函数
2014年11月10日 1.JavaScript函数具有两个特点: 函数是第一类对象 函数能够提供作用域 函数即对象,表现为: -1,函数能够在执行时动态创建,也 ...
- JavaScript模式读书笔记 文章3章 文字和构造
1.对象字面量 -1.Javascript中所创建的自己定义对象在任务时候都是可变的.能够从一个空对象開始,依据须要添加函数.对象字面量模式能够使我们在创建对象的时候向其加入函数. ...
- 《你不知道的javascript》读书笔记2
概述 放假读完了<你不知道的javascript>上篇,学到了很多东西,记录下来,供以后开发时参考,相信对其他人也有用. 这篇笔记是这本书的下半部分,上半部分请见<你不知道的java ...
- 《编写可维护的javascript》读书笔记(中)——编程实践
上篇读书笔记系列之:<编写可维护的javascript>读书笔记(上) 上篇说的是编程风格,记录的都是最重要的点,不讲废话,写的比较简洁,而本篇将加入一些实例,因为那样比较容易说明问题. ...
- C语言深度解剖读书笔记(6.函数的核心)
对于本节的函数内容其实就没什么难点了,但是对于函数这节又涉及到了顺序点的问题,我觉得可以还是忽略吧. 本节知识点: 1.函数中的顺序点:f(k,k++); 这样的问题大多跟编译器有关,不要去刻意追求 ...
- Javascript & JQuery读书笔记
Hi All, 分享一下我学JS & JQuery的读书笔记: JS的3个不足:复杂的文档对象模型(DOM),不一致的浏览器的实现和便捷的开发,调试工具的缺乏. Jquery的选择器 a. 基 ...
- 《你不知道的javascript》读书笔记1
概述 放假读完了<你不知道的javascript>上篇,学到了很多东西,记录下来,供以后开发时参考,相信对其他人也有用. js的工作原理 引擎:从头到尾负责整个js的编译和运行.(很大一部 ...
- JavaScript中的this—你不知道的JavaScript上卷读书笔记(三)
this是什么? this 是在运行时进行绑定的,并不是在编写时绑定,它的上下文取决于函数调用时的各种条件.this 的绑定和函数声明的位置没有任何关系,只取决于函数的调用方式.当一个函数被调用时,会 ...
- JavaScript词法作用域—你不知道的JavaScript上卷读书笔记(一)
前段时间在每天往返的地铁上抽空将 <你不知道的JavaScript(上卷)>读了一遍,这本书很多部分写的很是精妙,对于接触前端时间不太久的人来说,就好像是叩开了JavaScript的另一扇 ...
- SQL反模式读书笔记思维导图
在写SQL过程以及设计数据表的过程中,我们经常会走一些弯路,会做一些错误的设计.<SQL反模式>这本书针对这些经常容易出错的设计模式进行分析,解释了错误的理由.允许错误的场景,并给出更好的 ...
随机推荐
- django models 中choices之用法举例
CHOICES常用做单选属性,下面举例在django models中人物性别的用法: 我们先定义一个模型,名字为Students ,这个Students 包含了名字和性别两个字段,代码如下: from ...
- Dykin's blog
回归分析是一种很重要的预测建模技术.主要是研究自变量与因变量之间的因果关系.本文将会从数学角度与代码角度分析不同类型的回归.当你想预测连续型的非独立变量,或者对一系列独立变量或输入项有所反应时,就会使 ...
- Swift 浅谈Struct与Class
讨论Struct与Class之前,我们先来看一个概念:Value Type(值类型),Reference Type(引用类型): 1. 值类型的变量直接包含他们的数据,对于值类型都有他们自己的数据副本 ...
- ResultMap和ResultType到底有什么区别?
转载请标明出处:https://www.cnblogs.com/Dreamice/ 首先,SQL语句执行后返回的结果可以使用 Map 存储,也可以使用 POJO 存储. 一.使用Map存储结果集 下面 ...
- 二手iPhone,为什么没有火?
据相关媒体报道,日前苹果准备向印度市场销售二手iPhone,以提高自己在这个市场内的竞争力,但却遭遇到了强烈的反对,首先是印度本土手机制造商担心二手iPhone会冲击他们的销售,让其本就微薄的利润更加 ...
- css雪碧图压缩
cssgaga下载地址 链接: https://pan.baidu.com/s/1Q9xH_XzumIc7vTLCZ3tr5A 提取码: stqe CssGaga功能特性 合并import的CSS文件 ...
- MYSQL对数据库和表的基本操作
CREATE DATABASE testdb CHARSET=UTF8 创建一个数据库 名字叫做testdb USE testdb; 选择数据库 CREATE TABLE testTable1( ) ...
- django之学习前的准备
一.配置环境 Windows 10操作系统 Python安装配置教程参考:https://www.cnblogs.com/huangbiquan/p/7784533.html 安装Python虚拟环境 ...
- Java程序员考研失败后的面试经历,oppo、VIVO、等面经
温馨提示:有些可能会遗漏个别问题,都是最近一周的面试,有点忘了. 浪潮(一面挂) 你是网络工程的?对网络很了解? 解释一下什么是广播域 怎么划分子网 说一下CSS的几种分类器 数据库中有哪些聚集函 ...
- [红日安全]Web安全Day8 - XXE实战攻防
本文由红日安全成员: ruanruan 编写,如有不当,还望斧正. 大家好,我们是红日安全-Web安全攻防小组.此项目是关于Web安全的系列文章分享,还包含一个HTB靶场供大家练习,我们给这个项目起了 ...