第一次写这种东西, 有些生涩和蹩脚, 也是为了自己在表达或是总结方面有所提高, 同时为看过的东西留个痕迹, 以便日后查阅.

有错误或是不妥的地方, 还望各位指正, 谢谢!

第1章 简介

本章主要介绍了本书要讨论的内容, Javascript的一些基本概念, 面向对象, 原型, ECMASCript5, JSLine和console的相关内容.

不做过多阐述, 给出模式的定义

广义上: 模式是一个可以用来产生其他事物的模板或模型.

在软件开发中, 模式是指一个通用问题的解决方案.

书中主要讨论三种类型的模式: 设计模式, 编码模式, 反模式.

所谓反模式, 不是bug, 但使用它时, 引发的问题往往比解决的问题多...

第2章 基本技巧

编写可维护的代码

不用多说, 大家都有过阅读别人写的代码的历经, 确实阅读代码比写代码需要更多的时间.

每个人的想法是一样的, 甚至同一个人现在的想法与一周前的也会不一样, 写出的代码也就有所不同.

如果这些代码不易于维护, 可读性差, 那就更消耗时间.

易于维护的代码应具备如下特性:

  • 可读性好
  • 具有一致性
  • 预见性好
  • 看起来如同一个人编写
  • 有文档

尽量少用全局变量

全局变量意味着在整个js应用或是页面中, 它们被共享. 有极大的可能出现命名冲突.

例如在一个脚本里定义了全局变量result, 后来又在某函数中定义了一个也叫result的全局变量,

那么就会导致脚本中的result变量被覆盖, 脚本无法正常工作.

首要的规则就是用var定义变量, 如下:

  1. function sum(x, y) {
  2. var result = x + y;
  3. // 反模式: 使用了全局变量
  4. // result = x + y;
  5. return result;
  6. }

另外, 在使用var定义变量时, 不要使用链式赋值. 例如:

  1. // 反模式, 不要使用
  2. function fun() {
  3. var a = b = 7;
  4. // a为局部变量, b为全部变量
  5. // 原因: 从右至左的操作符优先级, var a = (b = 0);
  6. // ...
  7. }
  1. // 如果对链接赋值的变量都进行了声明, 则不会出现全局变量, 如:
  2. function fun() {
  3. var a, b;
  4. a = b = 8;
  5. }

明确定义的全局变量与隐式定义的全局变量有微小的不同, 不同之处在于能否用delete撤消变量

  • 使用var定义的全局变量(在函数外创建)不能删除.
  • 不使用var定义的全局变量(在函数内创建)可以删除.

这说明隐式定义的全局变量严格来说不是真正的变量, 真正的变量不能被删除的, 它只是全局对象的一个属性, 只有属性可以被delete的掉

借用书中的例子:

  1. // 定义三个变量
  2. var global_var = 1;
  3. global_novar = 2; // 反模式
  4. (function(){
  5. global_fromfun = 3; // 反模式
  6. }());
  7. // 试着执行delete
  8. delete global_var;
  9. delete global_novar;
  10. delete global_fromfun;
  11. // 查看操作结果
  12. console.info(typeof global_var); // number
  13. console.info(typeof global_novar); // undefined
  14. console.info(typeof global_fromfun); // undefined

注: ES5的strict模式中, 为没有声明的变量赋值会抛出错误.

单一var定义变量

可提高代码可读性, 同时在声明变量时也可同时赋值或做一些其他的操作. 例如:

  1. function func() {
  2. var x = 2,
  3. y = 3,
  4. sum = x + y,
  5. obj = {
  6.  
  7. };
  8. // ...
  9. }

提升: 凌散变量问题

所谓提升, 就是在Javascipt函数里, 允许在任意地方声明多个变量, 无论在哪里声明, 效果都跟在函数的顶部声明一样.

问题举例:

  1. name = 'global'; // 全局变量
  2. (function func() {
  3. console.info(name); // undefined
  4. var name = 'local';
  5. console.info(name); // local
  6. }());
  7. // 局部变量name的声明被提升了, 等同于下面这样:
  8. name = 'global'; // 全局变量
  9. (function func() {
  10. var name; // 等同于 ==> var name = undefined;
  11. console.info(name); // undefined
  12. name = 'local';
  13. console.info(name); // local
  14. }());

所以, 建议, 最好在函数开始就声明好要用的所有变量.

关于for循环

重点是缓存数组或类数组的长度

  1. for(var i=0; i<arr.length; i++) {
  2. // ...
  3. }

像这种访问方式, 每次循环都会访问数据的长度, 这样会使得代码变慢,

尤其是当arr不是真正的数组, 而是HTML集合对象时更为严重, 比如:

document.getElementsByName();

document.getElementsByTagName();

document.getElementsByClassName();

集合对象是DOM下的活动对象, 每次访问在它们的长度也就是在访问活动的DOM, DOM操作是相当耗时的.

缓存数据长度的for循环如下:

  1. for(var i=0, len=arr.length; i<len; i++) {
  2. // ...
  3. }

另外, 书中提到两个更有效率的循环方式, 有兴趣的可以学习一下.

主要就是使用最少的变量, 且逐步减至0, 因为与0的比较会更有效率, 代码如下:

  1. // 第一个仍然是for循环
  2. for(var i=arr.length; i--;) {
  3. // ...
  4. }
  5. // 第二个是while
  6. var i = arr.length;
  7. while(i--) {
  8. // ...
  9. }

<<Javascript Patterns>>阅读笔记 -- 第2章 基本技巧(一)的更多相关文章

  1. <<Javascript Patterns>>阅读笔记 -- 第2章 基本技巧(二)

    关于for-in循环 循环数据时, 强烈不推荐使用for-in循环.因为当Array对象被扩展后, 再用for-in循环遍历数据会导致逻辑上的错误, 举例说明: var arr = ['a', 'b' ...

  2. <<Javascript Patterns>>阅读笔记 – 第3章 字面量和构造函数

    对象字面量 首先给出对象字面量的定义语法: 1. 将对象定义在一对括号中(左大括号“{”和右大括号”}”) 2. 对象中以逗号分隔属性和方法. 每个属性或方法以key-value的形式出现, key和 ...

  3. 《图解HTTP》阅读笔记--第十一章针对web的攻击技术

    第十一章.针对WEB的攻击技术 ----<图解HTTP>阅读笔记攻击目标---Web简单的HTTP协议本身并不存在安全性 问题,协议本身并不会成为被攻击的对象,应用HTTP的服务器和客户端 ...

  4. 深入理解 C 指针阅读笔记 -- 第六章

    Chapter6.h #ifndef __CHAPTER_6_ #define __CHAPTER_6_ /*<深入理解C指针>学习笔记 -- 第六章*/ typedef struct _ ...

  5. 深入理解 C 指针阅读笔记 -- 第五章

    Chapter5.h #ifndef __CHAPTER_5_ #define __CHAPTER_5_ /*<深入理解C指针>学习笔记 -- 第五章*/ /*不应该改动的字符串就应该用 ...

  6. Javascript权威指南阅读笔记--第3章类型、值和变量(1)

    之前一直有个想法,好好读完JS权威指南,便于自己对于JS有个较为全面的了解.毕竟本人非计算机专业出生,虽然做着相关行业的工作,但总觉得对于基础的掌握并没有相关专业学者扎实,正好因为辞职待业等原因,还是 ...

  7. JavaScript模式读书笔记 第4章 函数

    2014年11月10日 1.JavaScript函数具有两个特点: 函数是第一类对象    函数能够提供作用域         函数即对象,表现为:         -1,函数能够在执行时动态创建,也 ...

  8. 【javascript dom读书笔记】 第九章 CSS-DOM

    用dom设置样式 element.style.property = value 何时用dom脚本设置样式 作者写到:绝大多数的现代浏览器,虽然对css伪类的支持不是很完整,但是对dom都有良好的支持, ...

  9. JavaScript模式读书笔记 文章3章 文字和构造

    1.对象字面量     -1.Javascript中所创建的自己定义对象在任务时候都是可变的.能够从一个空对象開始,依据须要添加函数.对象字面量模式能够使我们在创建对象的时候向其加入函数.       ...

随机推荐

  1. Centos 下 error while loading shared libraries: libopencv_core.so.3.0

    error while loading shared libraries: libopencv_core.so.3.0 Check if those libraries are present in ...

  2. 斯皮尔曼等级相关(Spearman’s correlation coefficient for ranked data)

    sklearn实战-乳腺癌细胞数据挖掘(博主亲自录制视频) https://study.163.com/course/introduction.htm?courseId=1005269003& ...

  3. fisher's exact test

    sklearn实战-乳腺癌细胞数据挖掘(博主亲自录视频) https://study.163.com/course/introduction.htm?courseId=1005269003&u ...

  4. JAVA类与对象---实例变量与类变量的区别,实例方法和类方法的区别

    实例变量 实例变量声明在一个类中,但在方法.构造方法和语句块之外: 当一个对象被实例化之后,每个实例变量的值就跟着确定: 实例变量在对象创建的时候创建,在对象被销毁的时候销毁: 实例变量的值应该至少被 ...

  5. java面试梳理

    自己整理的有关java面试过的问题,有错的请矫正. 1, Spring的核心思想 控制反转和面向切面的编程 2,Spring的核心模块 反向控制与依赖注入.Bean配置以及加载 3,Scope是什么 ...

  6. H5多媒体

    Video <video width="500px" controls="controls"> <source src="test. ...

  7. 【BZOJ】3143: [Hnoi2013]游走 期望+高斯消元

    [题意]给定n个点m条边的无向连通图,每条路径的代价是其编号大小,每个点等概率往周围走,要求给所有边编号,使得从1到n的期望总分最小(求该总分).n<=500. [算法]期望+高斯消元 [题解] ...

  8. NYOJ 756 重建二叉树 (二叉树)

    题目链接 描述 题目很简单,给你一棵二叉树的后序和中序序列,求出它的前序序列(So easy!). 输入 输入有多组数据(少于100组),以文件结尾结束.每组数据仅一行,包括两个字符串,中间用空格隔开 ...

  9. Openflow Plugin学习笔记1

    主入口 ConfigurableOpenFlowProviderModule是OpenFlowPlugin中启动加载的入口,如下: @Override public java.lang.AutoClo ...

  10. MySQL之——如何添加新数据库到MySQL主从复制列表 【转】

    转自 转载请注明出处:http://blog.csdn.net/l1028386804/article/details/54653691 MySQL主从复制一般情况下我们会设置需要同步的数据库,使用参 ...