<<Javascript Patterns>>阅读笔记 -- 第2章 基本技巧(一)
第一次写这种东西, 有些生涩和蹩脚, 也是为了自己在表达或是总结方面有所提高, 同时为看过的东西留个痕迹, 以便日后查阅.
有错误或是不妥的地方, 还望各位指正, 谢谢!
第1章 简介
本章主要介绍了本书要讨论的内容, Javascript的一些基本概念, 面向对象, 原型, ECMASCript5, JSLine和console的相关内容.
不做过多阐述, 给出模式的定义
广义上: 模式是一个可以用来产生其他事物的模板或模型.
在软件开发中, 模式是指一个通用问题的解决方案.
书中主要讨论三种类型的模式: 设计模式, 编码模式, 反模式.
所谓反模式, 不是bug, 但使用它时, 引发的问题往往比解决的问题多...
第2章 基本技巧
编写可维护的代码
不用多说, 大家都有过阅读别人写的代码的历经, 确实阅读代码比写代码需要更多的时间.
每个人的想法是一样的, 甚至同一个人现在的想法与一周前的也会不一样, 写出的代码也就有所不同.
如果这些代码不易于维护, 可读性差, 那就更消耗时间.
易于维护的代码应具备如下特性:
- 可读性好
- 具有一致性
- 预见性好
- 看起来如同一个人编写
- 有文档
尽量少用全局变量
全局变量意味着在整个js应用或是页面中, 它们被共享. 有极大的可能出现命名冲突.
例如在一个脚本里定义了全局变量result, 后来又在某函数中定义了一个也叫result的全局变量,
那么就会导致脚本中的result变量被覆盖, 脚本无法正常工作.
首要的规则就是用var定义变量, 如下:
- function sum(x, y) {
- var result = x + y;
- // 反模式: 使用了全局变量
- // result = x + y;
- return result;
- }
另外, 在使用var定义变量时, 不要使用链式赋值. 例如:
- // 反模式, 不要使用
- function fun() {
- var a = b = 7;
- // a为局部变量, b为全部变量
- // 原因: 从右至左的操作符优先级, var a = (b = 0);
- // ...
- }
- // 如果对链接赋值的变量都进行了声明, 则不会出现全局变量, 如:
- function fun() {
- var a, b;
- a = b = 8;
- }
明确定义的全局变量与隐式定义的全局变量有微小的不同, 不同之处在于能否用delete撤消变量
- 使用var定义的全局变量(在函数外创建)不能删除.
- 不使用var定义的全局变量(在函数内创建)可以删除.
这说明隐式定义的全局变量严格来说不是真正的变量, 真正的变量不能被删除的, 它只是全局对象的一个属性, 只有属性可以被delete的掉
借用书中的例子:
- // 定义三个变量
- var global_var = 1;
- global_novar = 2; // 反模式
- (function(){
- global_fromfun = 3; // 反模式
- }());
- // 试着执行delete
- delete global_var;
- delete global_novar;
- delete global_fromfun;
- // 查看操作结果
- console.info(typeof global_var); // number
- console.info(typeof global_novar); // undefined
- console.info(typeof global_fromfun); // undefined
注: ES5的strict模式中, 为没有声明的变量赋值会抛出错误.
单一var定义变量
可提高代码可读性, 同时在声明变量时也可同时赋值或做一些其他的操作. 例如:
- function func() {
- var x = 2,
- y = 3,
- sum = x + y,
- obj = {
- };
- // ...
- }
提升: 凌散变量问题
所谓提升, 就是在Javascipt函数里, 允许在任意地方声明多个变量, 无论在哪里声明, 效果都跟在函数的顶部声明一样.
问题举例:
- name = 'global'; // 全局变量
- (function func() {
- console.info(name); // undefined
- var name = 'local';
- console.info(name); // local
- }());
- // 局部变量name的声明被提升了, 等同于下面这样:
- name = 'global'; // 全局变量
- (function func() {
- var name; // 等同于 ==> var name = undefined;
- console.info(name); // undefined
- name = 'local';
- console.info(name); // local
- }());
所以, 建议, 最好在函数开始就声明好要用的所有变量.
关于for循环
重点是缓存数组或类数组的长度
- for(var i=0; i<arr.length; i++) {
- // ...
- }
像这种访问方式, 每次循环都会访问数据的长度, 这样会使得代码变慢,
尤其是当arr不是真正的数组, 而是HTML集合对象时更为严重, 比如:
document.getElementsByName();
document.getElementsByTagName();
document.getElementsByClassName();
集合对象是DOM下的活动对象, 每次访问在它们的长度也就是在访问活动的DOM, DOM操作是相当耗时的.
缓存数据长度的for循环如下:
- for(var i=0, len=arr.length; i<len; i++) {
- // ...
- }
另外, 书中提到两个更有效率的循环方式, 有兴趣的可以学习一下.
主要就是使用最少的变量, 且逐步减至0, 因为与0的比较会更有效率, 代码如下:
- // 第一个仍然是for循环
- for(var i=arr.length; i--;) {
- // ...
- }
- // 第二个是while
- var i = arr.length;
- while(i--) {
- // ...
- }
<<Javascript Patterns>>阅读笔记 -- 第2章 基本技巧(一)的更多相关文章
- <<Javascript Patterns>>阅读笔记 -- 第2章 基本技巧(二)
关于for-in循环 循环数据时, 强烈不推荐使用for-in循环.因为当Array对象被扩展后, 再用for-in循环遍历数据会导致逻辑上的错误, 举例说明: var arr = ['a', 'b' ...
- <<Javascript Patterns>>阅读笔记 – 第3章 字面量和构造函数
对象字面量 首先给出对象字面量的定义语法: 1. 将对象定义在一对括号中(左大括号“{”和右大括号”}”) 2. 对象中以逗号分隔属性和方法. 每个属性或方法以key-value的形式出现, key和 ...
- 《图解HTTP》阅读笔记--第十一章针对web的攻击技术
第十一章.针对WEB的攻击技术 ----<图解HTTP>阅读笔记攻击目标---Web简单的HTTP协议本身并不存在安全性 问题,协议本身并不会成为被攻击的对象,应用HTTP的服务器和客户端 ...
- 深入理解 C 指针阅读笔记 -- 第六章
Chapter6.h #ifndef __CHAPTER_6_ #define __CHAPTER_6_ /*<深入理解C指针>学习笔记 -- 第六章*/ typedef struct _ ...
- 深入理解 C 指针阅读笔记 -- 第五章
Chapter5.h #ifndef __CHAPTER_5_ #define __CHAPTER_5_ /*<深入理解C指针>学习笔记 -- 第五章*/ /*不应该改动的字符串就应该用 ...
- Javascript权威指南阅读笔记--第3章类型、值和变量(1)
之前一直有个想法,好好读完JS权威指南,便于自己对于JS有个较为全面的了解.毕竟本人非计算机专业出生,虽然做着相关行业的工作,但总觉得对于基础的掌握并没有相关专业学者扎实,正好因为辞职待业等原因,还是 ...
- JavaScript模式读书笔记 第4章 函数
2014年11月10日 1.JavaScript函数具有两个特点: 函数是第一类对象 函数能够提供作用域 函数即对象,表现为: -1,函数能够在执行时动态创建,也 ...
- 【javascript dom读书笔记】 第九章 CSS-DOM
用dom设置样式 element.style.property = value 何时用dom脚本设置样式 作者写到:绝大多数的现代浏览器,虽然对css伪类的支持不是很完整,但是对dom都有良好的支持, ...
- JavaScript模式读书笔记 文章3章 文字和构造
1.对象字面量 -1.Javascript中所创建的自己定义对象在任务时候都是可变的.能够从一个空对象開始,依据须要添加函数.对象字面量模式能够使我们在创建对象的时候向其加入函数. ...
随机推荐
- 洛谷P1991 无线通讯网
P1991 无线通讯网 170通过 539提交 题目提供者洛谷OnlineJudge 标签图论 难度普及+/提高 提交该题 讨论 题解 记录 最新讨论 怎么又炸了 为啥一直40!求解! UKE:inv ...
- for程序员:这些你可能遇到的职场难题,我们帮你整理好了答案
“迷茫”是当下青年谈论的最多的词汇之一,无论高矮胖瘦富穷美丑,每个人都有自己独特的难题.造成“迷茫”的原因有很多种,比如生存压力,情感问题,以及困扰着相当一部分人的职场焦虑.今天这篇关于“职场迷茫”的 ...
- java中16进制转换10进制
java中16进制转换10进制 public static void main(String[] args) { String str = "04e1"; String myStr ...
- 1.java内存区域与内存溢出异常
1.java运行时数据区如图所示: 2.每个区域的功能 (1)程序计数器(寄存器) 当前线程所执行的字节码的行号指示器 为了线程切换后能够恢复到正确的执行位置,因此每个线程拥有自己独立的程序计数器 如 ...
- PHP提取链接批量下载
2014年年初的时候,曾经受委托完成一个视频网站,那时最大的技术障碍是一个大视频比如500MB,在一个带宽环境不怎么快的服务器(比如1Mbps)上提供播放的问题. 这里会遇到两种情况,第一种情况是客户 ...
- sql分页demo
ALTER proc [dbo].[ProcGetUserInfoPageInfoByUserName] ), @PageIndex int, @PageSize int as Begin selec ...
- 重构改善既有代码设计--重构手法04:Replace Temp with Query (以查询取代临时变量)
所谓的以查询取代临时变量:就是当你的程序以一个临时变量保存某一个表达式的运算效果.将这个表达式提炼到一个独立函数中.将这个临时变量的所有引用点替换为对新函数的调用.此后,新函数就可以被其他函数调用. ...
- Flex布局之box-flex
box-flex的写法比flex的写法要复杂一些,兼容性的前缀要多带几个,真希望有一天flex布局能够纳入w3c标准啊! <!DOCTYPE html> <html> < ...
- 10个基于 JavaScript 的 WYSIWYG 编辑器
COMSHARP CMS 写道:在线编辑内容的时候,那些基于 JavaScript 的编辑器帮了我们大忙,这些所见即所得(WYSIWYG)编辑器,给我们提供了类似 Office 的操作体验.如今,任何 ...
- iOS网络基础---iOS-Apple苹果官方文档翻译
CHENYILONG Blog iOS网络基础---iOS-Apple苹果官方文档翻译 iOS网络基础 技术博客http://www.cnblogs.com/ChenYilong/ 新浪微博http: ...