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

时间:2022-10-25 14:13:34

第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. DELPHI类声明方式简介

    TMyDemo = class(TObject) FName: string; {数据成员(Field)} FAge: Integer; private {私有的} {最为隐秘的访问程度} proce ...

  2. 使用Eclipse构建Maven项目 &lpar;转&rpar;

    Maven这个个项目管理和构建自动化工具,越来越多的开发人员使用它来管理项目中的jar包.本文仅对Eclipse中如何安装.配置和使用Maven进行了介绍.完全step by step. 如果觉得本文 ...

  3. Codeforces Round &num;249 &lpar;Div&period; 2&rpar;

    A.水题. #include <cstdio> #include <iostream> #include <cstdlib> #include <cstrin ...

  4. HttpClient Post Form data and get Response String

    DefaultHttpClient httpclient = new DefaultHttpClient(); HttpPost httpost = new HttpPost("http:/ ...

  5. flex 弹性盒子模型一些案例&period;html

    Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flex元素是可以让你的布局根据浏览器的大小变化进行自动伸缩. 自适应导航 <ul class="navi ...

  6. 定制属于自己的Chrome起始页

    个人感觉没什么技术含量,可是很有用.我定制的起始页面例如以下: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2FuZ19saWNodW4=/font/5 ...

  7. css-文本及其他

    <!DOCTYPE html>css7-文本和其他 text-align行内元素对齐方式,值为 左/中/右 对齐:left/right/center.test{text-align:cen ...

  8. 转账示例(四):service层面实现(线程管理Connection,AOP思想,动态代理)(本例采用QueryRunner来执行sql语句,数据源为C3P0)

    用了AOP(面向切面编程),实现动态代理,service层面隐藏了开启事务.1.自行创建C3P0Uti,account数据库,导入Jar包 2.Dao层面 接口: package com.learni ...

  9. python 中的 yield 究竟为何物?生成器和迭代器的区别?

    当你突然看到别人的代码中出现了一个好像见过但又没用过的关键词 比如 yield ,你是否会觉得这段代码真是高大上呢? 或许只有我这种小白才会这样子觉得,就在刚刚,我就看见了别人的代码中的yield,觉 ...

  10. 对TCP协议握手的理解(转)

    reference:https://www.cnblogs.com/awkflf11/p/9191708.html 目录: 31.Tcp握手的一些问题? 21.Tcp三次握手及SYN攻击: 四次握手? ...