第22章 高级技巧

1、高级函数

(1)安全的类型检测

在任何值上调用Object原生的toString()方法,都会返回一个[object NativeConstructorName]格式的字符串。每个类在内部都有一个[[Class]]属性,这个属性中就指定了上述字符串中的构造函数名。

基于这一思路来测试某个值是不是原生函数或正则表达式,如:

function isFunction(value){

return object.prototype.toString.call(value) == “[object Function”];

}

(2)作用域安全的构造函数

作用域安全的构造函数在进行任何更改前,首先确认this对象是正确类型的实例。如果不是,那么会创建新的实例并返回。如:

function Person(name, age, job){

if(this instanceof Person){

this.name = name;

this.age = age;

this.job = job;

}else{

return new Person(name, age, job);

}

}

var person1 = Person(“Niecholas”,29,”Software Engineer”);

alert(window.names);   //””

alert(person1.name);    //” Niecholas”

var person2 = Person(“Shelby”,34,” Ergonmist”);

alert(person2.name);    //” Shelby”

(3)惰性载入函数

惰性载入载入表示函数执行的分支仅会发生一次。有两种实现惰性载入的方式,第一种就是在函数被调用时再处理函数。第二种是在声明函数时就指定适当的函数。

(4)函数绑定

函数绑定要创建一个函数,可以在特定的this环境中以指定参数调用另一个函数。

创建多个闭包可能会令代码变得难以理解和调试。因此,很多JavaScript库实现了一个可以将函数绑定到指定环境的函数。这个函数一般都叫bind()。

(5)函数柯里化

用于创建已经设置好了一个或多个参数的函数。函数柯里化的基本方法和函数绑定是一样的:使用一个闭包返回一个函数。

柯里化函数通常由以下步骤动态创建;调用另一个函数并为它传入要柯里化的函数和必要参数。

函数柯里化还常常作为函数绑定的一部分包含在其中,构造出更为复杂的bind()函数。

2、防篡改对象

一旦把对象定义为防篡改,就无法撤销了。

(1)不可扩展对象

默认情况下,所有对象都是可以扩展的。

使用object.preventExtensions()方法可以改变这个行为,让你不能再给对象添加属性和方法。

虽然不能给对象添加新成员,但已有的成员则丝毫不受影响。你仍然还可以修改和删除已有的成员。另外,是一个object.istExtensible()方法还可以确定对象是否可以扩展。

(2)密封的对象

密封对象不可扩展。而且已有成员的[[Configurable]]特性将被设置为false。这意味着不能删除属性和方法。属性值是可以修改的。

使用object.isSealed()方法可以确定对象是否被密封了。

(3)冻结的对象

最严格的防篡改级别是冻结对象。冻结的对象既不可扩展,又是密封的,而且对象数据属性的[[Writable]]特性会被设置为false。

与密封与不允许扩展一样,对冻结的对象执行非法操作在非严格模式下会被忽略,而在严格模式下会抛出错误。

也有一个object.isFrozen()方法用于检测冻结对象。

3、高级定时器

关于定时器要记住的最重要的事情是,指定的时间间隔表示任何将定时器的代码添加到队列,而不是何时实际执行代码。

(1)重复的定时器

(2)Yeilding Processes

(3)函数节流

函数流背后的基本思想是指,某些代码不可以在没有间断的情况连续重复执行。

第一次调用函数创建一个定时器,在指定的时间间隔之后运行代码。当第二次调用该函数时,它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了,这个操作就没有任何意义。然而,如果前一个定时器尚未执行,其实就是将其替换为一个新的定时器。

第24章 最佳实践

1、可维护性

(1)代码约定

一种让代码变得可维护的简单途径是形成一套JavaScript代码的书写约定。

  • 可读性

可读性的大部分内容都是和代码的缩进相关的。

可读性的另一方面是注释。

  • 适当给变量和函数起名字对于增加代码可理解和可维护性是非常重要的。
  • 变量类型透明

有3种表示变量数据类型的方式:

第一种方式是初始化。

缺点是它无法用于函数声明中的函数参数。

第二种方法是使用匈牙利标记法来指定变量类型。

JavaScript中最传统的匈牙利标记法是用单个字符表示类型:“o”代表对象,“s”代表字符串,“i”代表整数,“f”代表浮点数,“b”代表布尔型。

好处是函数参数一样可以使用;缺点是让代码某种程度上难以阅读,阻碍了没有用它时代码的直观性和句子式的特质。

最后一种指定变量类型的方式是使用类型注释。

缺点是你不能用多行注释一次注释大块的代码。

(2)松散耦合

HTML呈现应该尽可能与JavaScript保持分离。当JavaScript用于插入数据时,尽量不要直接插入标记。

显示问题的唯一来源应该是CSS,行为问题的唯一来源应该是JavaScript。在这些层次之间保持松散耦合可以让你的整个应用更加容易维护。

将应用逻辑和事件处理程序相分离。

(3)编程实践

避免全局量、避免与null进行比较、

2、性能

(1)注意作用域

访问全局变量总是要比访问局部变量慢。

  • 避免全局查找
  • 避免with语句。with语句会创建自己的作用域,因此会增加其中执行的代码的作用域的长度,因此会增加其中执行的代码的作用域链的长度。

(2)最小化语句数

创建很多语句时,变量声明只用一个var语句,之间由逗号隔开。

当使用迭代值(也就是在不同的位置进行增加或减少的值)的时候,尽可能合并语句。如:

var name = values[i];

i++;

组合为如下一个语句:

var name = values[i++];

只要有可能,尽量使用数组和对象的字面量表达式来消除不必要的语句。

(3)优化DOM交互

有两种在页面上创建DOM节点的方法:使用诸如createElement()和appendChild()之类的DOM方法,以及使用innerHTML。对于大的DOM修改,使用innerHTML要比使用标准DOM方法创建同样的DOM结构快的多。

大多数Web应用在用户交互上大量用到事件处理程序,最好使用事件代理。

任何时候要访问HTMLCollection,不管它是一个属性还是一个方法,都是在文档上进行一个查询,这个查询开销很昂贵。最小化访问HTMLCollection的次数可以极大地改进脚本的性能。

3、部署

你写的代码不应该原封不动地放入浏览器中,最好给JavaScript文件定义一个构建过程。

因为JavaScript并非编译为字节编码,而是按照源代码传送的,代码文件通常包含浏览器执行需要的额外的信息和格式。不过,我们可以使用压缩工具减少文件的大小。

第25章 新兴的API

1、request AnimationFrame()

在JavaScript中创建动画的典型方式,就是使用setInterval()方法来控制所有动画。

Firefox 4 最早为JavaScript动画添加了一个新API,即mozRequestAnimationFrame()。这个方法会告诉浏览器:有一个动画开始了。

基于mozRequestAnimationFrame(),Chrome和IE10+也都给出了自己的实现,分别叫webRequestAnimationFrame()和msRequestAnimationFrame()。

2、Page Visibility API

如果页面最小化了或者隐藏在了其他标签页后面,那么有些功能是可以停下来的。而Page Visibility API(页面可见性API)就是为了让开发人员知道页面是否对用户课件而推出的。

3、Geolocation API

地理定位是最令人兴奋,而且得到了广泛支持的一个新API。

Geolocation API在浏览器中的实现是navigator.geolocation对象。

4、File API

File API(文件API)的宗旨是为Web开发人员提供一种安全的方式,以便在客户端访问用户计算机中的文件,并更好地对这些文件执行操作。

5、Web计时

Web Timing API是用来度量页面性能指标的方式之一。让开发人员通过JavaScript就能使用浏览器内部的度量结果,通过直接读取这些信息可以做任何想做的分析。

8、Web Workers

长时间运行的JavaScript进程会导致浏览器冻结用户界面。Web Workers规范通过让JavaScript在后台运行解决了这个问题。

JavaScript高级程序设计-读书笔记(7)的更多相关文章

  1. javascript高级程序设计读书笔记-事件(一)

    读书笔记,写的很乱   事件处理程序   事件处理程序分为三种: 1.html事件2. DOM0级,3,DOM2级别  没有DOM1 同样的事件 DOM0会顶掉html事件   因为他们都是属性  而 ...

  2. javascript高级程序设计读书笔记

    第2章  在html中使用javascript 一般都会把js引用文件放在</body>前面,而不是放在<head>里, 目的是最后读取js文件以提高网页载入速度. 引用js文 ...

  3. Javascript高级程序设计读书笔记(第六章)

    第6章  面向对象的程序设计 6.2 创建对象 创建某个类的实例,必须使用new操作符调用构造函数会经历以下四个步骤: 创建一个新对象: 将构造函数的作用域赋给新对象: 执行构造函数中的代码: 返回新 ...

  4. JavaScript高级程序设计 读书笔记

    第一章 JavaScript 简介 第二章 Html中使用JavaScript 第三章 基本概念 第四章 变量,作用域,内存 第五章 引用类型 第六章 面向对象 第七章 函数表达式 第八章 BOM 第 ...

  5. JavaScript高级程序设计 读书笔记 第一章

    JavaScript是一种专门为与网页交互而设计的脚本语言 JavaScript实现 ECMAscript---核心 DOM---文档对象模型 BOM---浏览器对象模型

  6. Javascript高级程序设计读书笔记(第二章)

    第二章  在HTML中使用Javascript 2.1<script>元素 延迟脚本(defer = "defer")表明脚本在执行时不会影响页面的构造,脚本会被延迟到 ...

  7. JavaScript高级程序设计-读书笔记(6)

    第20章 JSON JSON是一个轻量级的数据格式,可以简化表示复杂数据结构的工作量 JSON的语法可以表示一下三种类型的值 l        简单值:使用与JavaScript相同的语法,可以在JS ...

  8. JavaScript高级程序设计-读书笔记(5)

    第13章 事件 1.事件流 事件流描述的是从页面中接收事件的顺序.IE的事件流是事件冒泡流,而Netscape Communicator的事件流是事件捕获流. (1)事件冒泡,即事件开始时由最具体的元 ...

  9. JavaScript高级程序设计-读书笔记(4)

    第11章 DOM扩展 1.选择符API Selector API Level 1 的核心是两个方法:querySelector()和querySelectorAll().在兼容的浏览器中,可以通过Do ...

随机推荐

  1. mysql 迁移数据

    一.导出导入所有数据库的数据 1.导出 mysqldump -u root -p123456 --all-databases > all.sql 2.导入 mysql -u root -p123 ...

  2. odoo继承父类中的函数(方法)

    使用_inherit继承父类重新设计新类时,可以调用父类中的函数,具体为: 第一步:获得某个模型('model.name')的数据集并进行某种集合操作(model_function),从而获得想要的数 ...

  3. JS根据userAgent值来判断浏览器的类型及版本【转】

    转自:http://blog.csdn.net/sunlovefly2012/article/details/22384255 JavaScript是前端开发的主要语言,我们可以通过编写JavaScr ...

  4. su 与 su - 区别

    su与su -都是用来切换用户的命令,简单说它们之间的区别就是:su -切换的干净彻底,而su 切换用户却拖泥带水. su su username,切换到指定用户,但是当前目录不会变化,环境变量还是上 ...

  5. Singleton: this & instance

    public class Singleton{ private static final Singleton instance = new Singleton(); private String na ...

  6. ViewFlipper

    main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xml ...

  7. Codeforces Round #403 (Div. 2, based on Technocup 2017 Finals) D. Innokenty and a Football League

    地址:http://codeforces.com/contest/782/problem/D 题目: D. Innokenty and a Football League time limit per ...

  8. centos7防火墙的简单配置介绍

    centos7版本 1.查看已开放的端口(默认不开放任何端口) firewall-cmd --list-ports 2.开启80端口 firewall-cmd --zone=public(作用域) - ...

  9. 多路选择I/O

    多路选择I/O提供另一种处理I/O的方法,相比于传统的I/O方法,这种方法更好,更具有效率.多路选择是一种充分利用系统时间的典型. 1.多路选择I/O的概念 当用户需要从网络设备上读数据时,会发生的读 ...

  10. Axure的总结

    1.Axure的用途      Axure RP 能帮助网站需求设计者,快捷而简便的创建基于网站构架图的带注释页面示意图.操作流程图.以及交互设计,并可自动生成用于演示的网页文件和规格文件,以提供演示 ...