这篇文章的主要内容,介绍了一些js编程中的基本技巧,其实这些技巧,大家在开发的过程中,或多或少都在使用,或者已经可以熟练的应用于自己的代码或项目中了。那么,这篇文章,就一起来回顾下这些“基本技巧”。

编写可维护的代码

  我们想象一下,在我们的工作过程中,要去改一个bug,这个bug可能是由于之前十几个人维护的项目,没有规范,没有JSLint,代码就像在大草原上弛聘一样,随心所欲,无欲无求。到了今天,刚好你接受了这个项目,测试发现了这个潜藏在系统中已久但今天才暴露的问题。然后,你看着这些代码,心里面问候了代码作者的祖宗十六代,但是,不管怎么样,你还是要坐下来,安心的,潜心的从这些凌乱的,毫无规则的代码中,解决这个bug。

  我相信很多人都遇到过这样的问题,甚至在一些无规范的公司,企业,项目上,这实在是很普遍的事情(我现在正在经历的)。那时,你就会发现,编写可维护的代码有多重要。

  易维护的代码意味着代码具有以下特性:

    1. 阅读性好。

    2. 具有一致性。

    3. 预见性好。

    4. 看起来如同一个人编写。

    5. 有文档。

尽量少用全局变量

  全局变量的问题在于,它们在整个JavaScript应用或Web页面内共享。它们生存于一个全局命名空间内,总有可能发生命名冲突。

  JavaScript总是在不知不觉中就出人意料地创建了全局变量,其原因在于JavaScript 的两个特性。第一个特性是JavaScript可直接使用变量,甚至无需声明。第二个特性是JavaScript有一个暗示全局变量的概念,即任何变量,如果未经声明,就为全局对象所有(也就像正确生命过的全局变量一样可以访问)。比如:

function sum (x,y) {
//反模式:暗示全局变量
result = x + y;
return result;

  这个例子中,函数内部的变量result未经声明就使用了,当然,在简单环境下,这样并不会有什么问题,但是一旦在调用函数后,在外部空间使用了另外的result变量:

function sum(x, y) {
result = x + y;
return result;
}
sum(1, 2)
var result = 6
console.log(result)

  所以,一个首要规则就是,使用var声明变量。

function sum (x,y) {
var result = x + y;
return result;
}

  另外一种创建隐式全局变量的反模式式带有var声明的链式赋值:

//反模式,不要使用
function foo() {
var a = b = 0; //...
}

  上面的代码,由于从右至左的操作符优先级。所以,上面的代码实际是这样的:

function foo() {
var a = ( b = 0 ); //...
}

  但是,如果对链式赋值的所有变量都进行了声明,那么就不用担心会意想不到的创建了全局变量:

function foo() {
var a ,b;
//...
a = b = 0;
}

  另外,假设你的代码想要在不同的宿主环境(比如node和window)中都可以跑的很欢快,那么就一定要注意全局变量的使用。因为,或许在window中不存在的变量,早已被node的全局变量所使用了。

变量释放时的副作用

  隐含全局变量与明确定义的全局变量有细微的不同,不同之处在于能否使用delete操作符撤销变量。

  • 使用var创建的全局变量(这类变量在函数外部创建)不能删除。
  • 不实用var创建的隐含全局变量(尽管它是在函数内部创建)可以删除。

  这表明隐含全局变量严格来讲并不是真正的变量,而是全局对象的属性。属性可以通过delete操作符删除,但是变量不可以。

var a = '1';
b = 2;
(function () {
c = 3;
}())
delete a;
delete b;
delete c; console.log(typeof a)
console.log(typeof b)
console.log(typeof c)

单一var模式

  只使用一个var在函数顶部进行变量声明是一种非常有用的模式。它的好处在于:

  •   提供方一个单一的地址以查找到函数需要的所有局部变量。
  • 防止出现变量在定义前就被使用的逻辑错误。
  •   抱住牢记要声明变量,以尽可能少的地使用全局变量。
  • 更少的编码(无论是输入代码还是传输代码都更少了)。

  比如:

function func() {
var a = 1,
b = 2,
sum = a + b,
obj = {},
i,
j;
}

  要记住,所有未初始化,且未声明的变量,其值都为undefined。这句话不太容易理解,既然未声明,那就说明不存在啊,没错,不存在就是undefined。那既然说到了undefined,简单说下null的含义,null代表着存在,但是空。

提升:凌散变量的问题

  JavaScript允许在函数的任意地方声明多个变量,无论在哪里声明,效果都等同于在函数顶部进行声明。这就是所谓的“提升”。当先使用后声明的时候,就可能会导致逻辑错误。对于JavaScript而言,只要变量是在同一个范围(同一个函数)里,就视为已经声明,那排是在变量声明前就使用。比如:

// 反模式
name = 'global'; // 全局变量
function func() {
alert(name); // "未定义"
var name = 'local';
alert(name); // "局部变量"
}
func();

  你以为第一个alert的结果是global么?那么请再读一遍加粗的那段话,实际上,代码是这样执行的:

name = 'global'; // 全局变量
function func() {
var name;
alert(name); // "未定义"
name = 'local';
alert(name); // "局部变量"
}
func();

  注意:事实上,代码处理上分为两个阶段:第一,这个阶段创建变量、函数声明及形式参数。这是解析和进入上线问的阶段。第二个阶段是代码运行时执行过程,创建函数表达和不合格标识符(未定义变量)。但为了实际使用的目的,我们使用了“提升”这个概念,尽管在ECMAScript标准中并不存在。

  好了,我们这一篇的内容就到这里,实际上,仅仅是基本技巧,后面还有不少的内容。我希望篇幅短一点,读起来不那么让人厌烦。

《JavaScript 模式》读书笔记(2)— 基本技巧1的更多相关文章

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

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

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

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

  3. 《你不知道的javascript》读书笔记2

    概述 放假读完了<你不知道的javascript>上篇,学到了很多东西,记录下来,供以后开发时参考,相信对其他人也有用. 这篇笔记是这本书的下半部分,上半部分请见<你不知道的java ...

  4. 《编写可维护的javascript》读书笔记(中)——编程实践

    上篇读书笔记系列之:<编写可维护的javascript>读书笔记(上) 上篇说的是编程风格,记录的都是最重要的点,不讲废话,写的比较简洁,而本篇将加入一些实例,因为那样比较容易说明问题. ...

  5. Javascript & JQuery读书笔记

    Hi All, 分享一下我学JS & JQuery的读书笔记: JS的3个不足:复杂的文档对象模型(DOM),不一致的浏览器的实现和便捷的开发,调试工具的缺乏. Jquery的选择器 a. 基 ...

  6. SQL反模式读书笔记思维导图

    在写SQL过程以及设计数据表的过程中,我们经常会走一些弯路,会做一些错误的设计.<SQL反模式>这本书针对这些经常容易出错的设计模式进行分析,解释了错误的理由.允许错误的场景,并给出更好的 ...

  7. Javascript模式(第二章基本技巧)------读书笔记

    本章主要帮助大家写出高质量的JS代码的方法,模式和习惯,例如:避免使用全局变量,使用单个的var变量声明,缓存for循环的长度变量length等 一.尽量避免使用全局变量 1 每一个js环境都有一个全 ...

  8. 《Javascript模式》之对象创建模式读书笔记

    引言: 在javascript中创建对象是很容易的,可以使用对象字面量或者构造函数或者object.creat.在接下来的介绍中,我们将越过这些方法去寻求一些其他的对象创建模式. 我们知道js是一种简 ...

  9. JavaScript设计模式:读书笔记(未完)

    该篇随我读书的进度持续更新阅读书目:<JavaScript设计模式> 2016/3/30 2016/3/31 2016/4/8 2016/3/30: 模式是一种可复用的解决方案,可用于解决 ...

  10. 《面向对象的JavaScript》读书笔记

    发现了2004年出版的一本好书,用两天快速刷了一遍,草草整理了一下笔记,在此备忘. 类:对象的设计蓝图或制作配方. 对象 === 实例 :老鹰是鸟类的一个实例 基于相同的类创建出许多不同的对象,类更多 ...

随机推荐

  1. 柱状图dataLabels 文字格式 以及如何获取柱子的name(名称)属性

    dataLabels: { formatter:funnctin(){ return this.percentage //只在堆叠图或饼图中有效,是该点相对总值的百分比. this.point //数 ...

  2. 基于phathomjs token 不定时无响应问题排查

    问题描述 基于phathomjs的token池项目,基本原理是,打开淘宝页,获取匿名cookie,再由cookie中提取有效token,调用方通过该token获取淘宝数据 为方便基他人应用,封装了部分 ...

  3. 实例理解scala 隐式转换(隐式值,隐式方法,隐式类)

    作用 简单说,隐式转换就是:当Scala编译器进行类型匹配时,如果找不到合适的候选,那么隐式转化提供了另外一种途径来告诉编译器如何将当前的类型转换成预期类型.话不多说,直接测试 ImplicitHel ...

  4. Word Flow:创造吉尼斯世界纪录的触屏文本输入的全新体验——微软Windows Phone 8.1系统倾情巨献

    Flow:创造吉尼斯世界纪录的触屏文本输入的全新体验--微软Windows Phone 8.1系统倾情巨献" title="Word Flow:创造吉尼斯世界纪录的触屏文本输入的全 ...

  5. 安装oracle 11g 客户端,检查过程中报物理内存不足的解决

    今早接到同事电话,说安装oracle 11g客户端的时候,在检查先决条件的时候,报错,说内存不足,但是本机的内存是2G,肯定够用:如图: 找了一圈,原来Oracle执行先决条件检查是依赖c$共享,很多 ...

  6. 移动端Video标签踩坑记录

    需求 用户能在手机上上传视频并预览. 问题 上传完成后安卓下封面展示正常,ios下封面空白.如下图所示: 利用canvas截取视频第一帧发现,ios下截取到的第一帧一直是空白图片, 安卓正常. 后端利 ...

  7. LeetCode Day 9

    LeetCode0017 给定一个仅包含数字 2-9 的字符串,返回所有它能表示的字母组合. 给出数字到字母的映射如下(与电话按键相同).注意 1 不对应任何字母. 示例: 输入:"23&q ...

  8. CSS性能优化探讨

    大部分前端开发人员都不关心CSS性能优化,其实对于一个复杂的页面来说,高效的选择器还是可以带来一定的性能提升的. 1. CSS 选择器 浏览器是“从右往左”来分析 class 的,它的匹配规则是从右向 ...

  9. [洛谷P2785] 物理1(phsic1)-磁通量

    随便翻到的一道题...... 题目传送门 这道题是用向量叉积求多边形面积. 首先讲一下向量叉积(也叫外积). 设两个向量的坐标表示为(x1,y1).(x2,y2). 那么它们的叉积为x1*y2-x2* ...

  10. Python 搭建webdriver环境遇到的问题总结

    安装过程是参考<selenium2Python自动化测试实战>中Pythonwebdriver环境搭建章节 在安装过程中,遇到了一些问题,总结一下,为日后自己再遇到相同问题做个笔记以便查看 ...