《JavaScript 模式》读书笔记(2)— 基本技巧1
这篇文章的主要内容,介绍了一些js编程中的基本技巧,其实这些技巧,大家在开发的过程中,或多或少都在使用,或者已经可以熟练的应用于自己的代码或项目中了。那么,这篇文章,就一起来回顾下这些“基本技巧”。
编写可维护的代码
我们想象一下,在我们的工作过程中,要去改一个bug,这个bug可能是由于之前十几个人维护的项目,没有规范,没有JSLint,代码就像在大草原上弛聘一样,随心所欲,无欲无求。到了今天,刚好你接受了这个项目,测试发现了这个潜藏在系统中已久但今天才暴露的问题。然后,你看着这些代码,心里面问候了代码作者的祖宗十六代,但是,不管怎么样,你还是要坐下来,安心的,潜心的从这些凌乱的,毫无规则的代码中,解决这个bug。
我相信很多人都遇到过这样的问题,甚至在一些无规范的公司,企业,项目上,这实在是很普遍的事情(我现在正在经历的)。那时,你就会发现,编写可维护的代码有多重要。
易维护的代码意味着代码具有以下特性:
1. 阅读性好。
2. 具有一致性。
3. 预见性好。
4. 看起来如同一个人编写。
5. 有文档。
尽量少用全局变量
全局变量的问题在于,它们在整个JavaScript应用或Web页面内共享。它们生存于一个全局命名空间内,总有可能发生命名冲突。
JavaScript总是在不知不觉中就出人意料地创建了全局变量,其原因在于JavaScript 的两个特性。第一个特性是JavaScript可直接使用变量,甚至无需声明。第二个特性是JavaScript有一个暗示全局变量的概念,即任何变量,如果未经声明,就为全局对象所有(也就像正确生命过的全局变量一样可以访问)。比如:
1 2 3 4 5 | function sum (x,y) { //反模式:暗示全局变量 result = x + y; return result; } |
这个例子中,函数内部的变量result未经声明就使用了,当然,在简单环境下,这样并不会有什么问题,但是一旦在调用函数后,在外部空间使用了另外的result变量:
1 2 3 4 5 6 7 | function sum(x, y) { result = x + y; return result; } sum(1, 2) var result = 6 console.log(result) |
所以,一个首要规则就是,使用var声明变量。
1 2 3 4 | function sum (x,y) { var result = x + y; return result; } |
另外一种创建隐式全局变量的反模式式带有var声明的链式赋值:
1 2 3 4 5 6 | //反模式,不要使用 function foo() { var a = b = 0; //... } |
上面的代码,由于从右至左的操作符优先级。所以,上面的代码实际是这样的:
1 2 3 4 5 | function foo() { var a = ( b = 0 ); //... } |
但是,如果对链式赋值的所有变量都进行了声明,那么就不用担心会意想不到的创建了全局变量:
1 2 3 4 5 | function foo() { var a ,b; //... a = b = 0; } |
另外,假设你的代码想要在不同的宿主环境(比如node和window)中都可以跑的很欢快,那么就一定要注意全局变量的使用。因为,或许在window中不存在的变量,早已被node的全局变量所使用了。
变量释放时的副作用
隐含全局变量与明确定义的全局变量有细微的不同,不同之处在于能否使用delete操作符撤销变量。
- 使用var创建的全局变量(这类变量在函数外部创建)不能删除。
- 不实用var创建的隐含全局变量(尽管它是在函数内部创建)可以删除。
这表明隐含全局变量严格来讲并不是真正的变量,而是全局对象的属性。属性可以通过delete操作符删除,但是变量不可以。
1 2 3 4 5 6 7 8 9 10 11 12 | 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在函数顶部进行变量声明是一种非常有用的模式。它的好处在于:
- 提供方一个单一的地址以查找到函数需要的所有局部变量。
- 防止出现变量在定义前就被使用的逻辑错误。
- 抱住牢记要声明变量,以尽可能少的地使用全局变量。
- 更少的编码(无论是输入代码还是传输代码都更少了)。
比如:
1 2 3 4 5 6 7 8 | function func() { var a = 1, b = 2, sum = a + b, obj = {}, i, j; } |
要记住,所有未初始化,且未声明的变量,其值都为undefined。这句话不太容易理解,既然未声明,那就说明不存在啊,没错,不存在就是undefined。那既然说到了undefined,简单说下null的含义,null代表着存在,但是空。
提升:凌散变量的问题
JavaScript允许在函数的任意地方声明多个变量,无论在哪里声明,效果都等同于在函数顶部进行声明。这就是所谓的“提升”。当先使用后声明的时候,就可能会导致逻辑错误。对于JavaScript而言,只要变量是在同一个范围(同一个函数)里,就视为已经声明,那排是在变量声明前就使用。比如:
1 2 3 4 5 6 7 | // 反模式<br>name = 'global'; // 全局变量 function func() { alert(name); // "未定义" var name = 'local' ; alert(name); // "局部变量" } func(); |
你以为第一个alert的结果是global么?那么请再读一遍加粗的那段话,实际上,代码是这样执行的:
1 2 3 4 5 6 7 8 | name = 'global' ; // 全局变量 function func() { var name; alert(name); // "未定义" name = 'local' ; alert(name); // "局部变量" } func(); |
注意:事实上,代码处理上分为两个阶段:第一,这个阶段创建变量、函数声明及形式参数。这是解析和进入上线问的阶段。第二个阶段是代码运行时执行过程,创建函数表达和不合格标识符(未定义变量)。但为了实际使用的目的,我们使用了“提升”这个概念,尽管在ECMAScript标准中并不存在。
好了,我们这一篇的内容就到这里,实际上,仅仅是基本技巧,后面还有不少的内容。我希望篇幅短一点,读起来不那么让人厌烦。
本文来自博客园,作者:Zaking,转载请注明原文链接:https://www.cnblogs.com/zaking/p/12467121.html
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 周边上新:园子的第一款马克杯温暖上架
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
· 使用C#创建一个MCP客户端