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

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

第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. 洛谷P1991 无线通讯网

    P1991 无线通讯网 170通过 539提交 题目提供者洛谷OnlineJudge 标签图论 难度普及+/提高 提交该题 讨论 题解 记录 最新讨论 怎么又炸了 为啥一直40!求解! UKE:inv ...

  2. for程序员:这些你可能遇到的职场难题,我们帮你整理好了答案

    “迷茫”是当下青年谈论的最多的词汇之一,无论高矮胖瘦富穷美丑,每个人都有自己独特的难题.造成“迷茫”的原因有很多种,比如生存压力,情感问题,以及困扰着相当一部分人的职场焦虑.今天这篇关于“职场迷茫”的 ...

  3. java中16进制转换10进制

    java中16进制转换10进制 public static void main(String[] args) { String str = "04e1"; String myStr ...

  4. 1.java内存区域与内存溢出异常

    1.java运行时数据区如图所示: 2.每个区域的功能 (1)程序计数器(寄存器) 当前线程所执行的字节码的行号指示器 为了线程切换后能够恢复到正确的执行位置,因此每个线程拥有自己独立的程序计数器 如 ...

  5. PHP提取链接批量下载

    2014年年初的时候,曾经受委托完成一个视频网站,那时最大的技术障碍是一个大视频比如500MB,在一个带宽环境不怎么快的服务器(比如1Mbps)上提供播放的问题. 这里会遇到两种情况,第一种情况是客户 ...

  6. sql分页demo

    ALTER proc [dbo].[ProcGetUserInfoPageInfoByUserName] ), @PageIndex int, @PageSize int as Begin selec ...

  7. 重构改善既有代码设计--重构手法04:Replace Temp with Query (以查询取代临时变量)

    所谓的以查询取代临时变量:就是当你的程序以一个临时变量保存某一个表达式的运算效果.将这个表达式提炼到一个独立函数中.将这个临时变量的所有引用点替换为对新函数的调用.此后,新函数就可以被其他函数调用. ...

  8. Flex布局之box-flex

    box-flex的写法比flex的写法要复杂一些,兼容性的前缀要多带几个,真希望有一天flex布局能够纳入w3c标准啊! <!DOCTYPE html> <html> < ...

  9. 10个基于 JavaScript 的 WYSIWYG 编辑器

    COMSHARP CMS 写道:在线编辑内容的时候,那些基于 JavaScript 的编辑器帮了我们大忙,这些所见即所得(WYSIWYG)编辑器,给我们提供了类似 Office 的操作体验.如今,任何 ...

  10. iOS网络基础---iOS-Apple苹果官方文档翻译

    CHENYILONG Blog iOS网络基础---iOS-Apple苹果官方文档翻译 iOS网络基础 技术博客http://www.cnblogs.com/ChenYilong/ 新浪微博http: ...