本书的第二个部分总结了有关编程实践相关的内容,每一个章节都非常不错,捡取了其中5个章节的内容.对大家组织高维护性的代码具有辅导作用. 5个章节如下—— 一.UI层的松耦合 二.避免使用全局变量 三.事件处理 四.将配置数据从代码中分离出来 五.抛出自定义错误 一.UI层的松耦合 如果两个组件耦合太紧,则说明一个组件和另一个组件直接相关,这样的话,如果修改一个组件的逻辑,那么另外一个组件的逻辑也需要修改.比如,有一个名为error的CSS类名,它是贯穿整个站点的,它被嵌入到HTML之中.如果有一天…

上篇读书笔记系列之:<编写可维护的javascript>读书笔记(上) 上篇说的是编程风格,记录的都是最重要的点,不讲废话,写的比较简洁,而本篇将加入一些实例,因为那样比较容易说明问题. 二.编程实践 1.UI松耦合 第一.将css从javascript中抽离(要改变dom样式数据,应该去操作dom的class名而非dom的style属性,后续要修改此样式只需到对应的css文件中修改而不用修改js文件): 第二.将javascript从HTML中抽离,比如下面的写法是不好的 <!-- 不…

拯救一切强迫症 - 读<编写可维护的 JavaScript>(一) 本文写于 2020 年 4 月 24 日 我在小学的时候就有接触过编程,所以读大一的时候 C 语言还算是轻车熟路.自然会有很多同学给我看他们的代码,麻烦我帮助他们找一找 bug. 我代码拿到手的第一件事儿是啥? 重排代码格式!(相信大家基本上大学学 C 语言都用的是 VC++,并没有代码自动格式化功能,现在我极力推荐 prettier 进行自动格式化) 通常我看到的代码都是这样的: if (wl && wl.l…

最近读完<编写可维护的JavaScript>,让我受益匪浅,它指明了编码过程中,需要注意的方方面面,在团队协作中特别有用,可维护性是一个非常大的话题,这本书是一个不错的起点. 本书虽短,却五脏俱全,主要涵盖:编程风格(基本格式化.注释.语句和表达式.变量),编程实践(UI层松耦合.避免使用全局变量等).自动化,3个部分的内容. 本文主要整理归纳了书中编程实践章节的核心内容,其他两章编码风格和自动化部分,还需结合当前的流行趋势重新整理,稍后再与大家分享. 第5章 UI层的松耦合 Web开发三大要…

写在前面:之前硬着头皮参加了java方面的编程规范培训,收货良多,工作半年有余的时候,总算感觉到一丝丝Coding之美,以及造轮子的乐趣,以至于后面开发新功能的时候,在Coding style方面花了很多时间,但还有一些细节方面,总感觉一直没有统一,比如什么时候该加空行,比如是不是所有的return前面都应该加个空行以及注释的添加等等,才有了对这本书<编写可维护的Javascript>的阅读,还是如之前一样,只收纳了一些自己看本书的时候,还未完全贯彻的style 有待改进的点:在前端自动化的路…

最近在读<编写可维护的javascript>这本书,为了加深记忆,简单做个笔记,同时也让没有读过的同学有一个大概的了解. 一.编程风格 程序是写给人读的,所以一个团队的编程风格要保持一致. 1.缩进:一种是利用制表符缩进,一种是使用空格符缩进,各有利弊,任选一种,保持一致即可.个人比较喜欢制表符缩进. 2.语句结尾需要加上分号,避免没必要的BUG. 3.命名:首先要语义化,使用驼峰式命名法,小驼峰即首字母小写,之后每个单词首字母大写:大驼峰即首字母大写,之后同小驼峰:变量名前缀应该是名词(my…

如果你看过Nicolas C.Zakas写过的任何作品,你必须承认他是个不折不扣的天才.也只有天才级的才能写出<JavaScript高级程序设计>让所有的前端攻城师人手一本.Nicolas C.Zakas除了对现代JavaScrpt技术的详细讲解,还倡导了很多最佳实践,包括渐进增强.可访问性.性能.扩展性和可维护性等. 编写可维护的Javascript就意味着:消灭团队个体的差异达成整体的统一,以保持大家的代码风格一致和可读的.可维护性的.可扩展的.所以该系列收纳架做一个收纳整理. 书从编码风…

在团队中只有每个人的编程风格一致,大家才能方便的互相看懂和维护对方的代码. 1. 层级缩进 对于层级缩进目前有两种主张:1)使用制表符这种方法有两种好处,第一,制表符和缩进层级之间是一一对应关系,符合逻辑:第二是文本编辑器可以配置制表符的展现长度.缺点是系统对制表符的解释不一致.2)使用空格符目前主要有三种具体的做法:2个空格表示一个缩进,4个空格表示一个缩进,8个空格表示一个缩进优点:在所有的系统和编辑器中,文件的展现格式不会有任何差异:缺点:对于单个开发者来说,使用一个没有配置好的文本编辑器…

<编写可维护的JavaScript> 笔记 我的github iSAM2016 概述 本书的一开始介绍了大量的编码规范,并且给出了最佳和错误的范例,大部分在网上的编码规范看过,就不在赘述 重点是总结了数据类型的判断,我再此和underscore中的类型判断一起做个总结: 总结 string number undefined boolean 这四中数据类型使用typeof 在检测即可 typeof '1' == 'string' typeof 1 == 'number' typeof found…

平时使用的时VS来进行代码的书写,VS会自动的将代码格式化,所有写了这么久的JS代码,也没有注意到这些点.看了<编写可维护的javascript代码>之后,做了些笔记. var result = parameter1 + parameter2 + parameter3 + parameter4 + parameter5 parameter6 + parameter7; 当代码超过一行的时候应该给代码换行.换行的时候,第二行的代码应该增加两个缩进 if (isTrue && is…

目录 推荐一本好书:编写可维护的JavaScript(可下载) 书摘: 下载: 有些建议: 推荐一本好书:编写可维护的JavaScript(可下载) 书摘: 很多设计模式就是为了解决紧耦合的问题.如果两个组件耦合太紧,则说明一个组件和另一个组件直接相关,这样的话,如果修改一个组件的逻辑,那么另外一个组件的逻辑也需修改.比如,假设有一个名为error的CSS类名,它是贯穿整个站点的,它被嵌入到HTML之中.如果有一天你觉得error的取名并不合适,想将它改为warning,你不仅需要修改CSS还要…

第四章 变量 函数和运算符 4.1 ① 变量声明 变量声明是通过var语句来完成的,并且所有的var语句都提前到包含这段逻辑的函数的顶部执行. function doSomething() { + value; ; return result; } // 编译器理解为 function doSomething() { var result; // 这里为undefined var value; // 这里为undefined result = +value; value = ; return r…

注释 单行注释 单行注释以两个斜线开始,以行尾结束 单行注释有三种使用方法: 独占一行的注释,用来解释下一行代码.这行注释前总是有一个空行,且缩进层级和下一行代码保持一致. 在行尾的注释.代码结束到注释之间至少有一个缩进.注释(包括之前的代码部分)不应当超过单行最大字符数限制.如果超过了,就将这条注释放置于当前代码行的上方. 被注释掉的大段代码(很多编辑器都可以批量注释掉多行代码). 单行注释不应当以连续多行注释的形式出现,除非你注释掉一大段代码.只有当需要注释一段很长的文本时才使用多行注释 多…

第九章 将配置数据从代码中分离出来 9.2 抽离配置数据 这章比较好理解,也非常常见,作者给的俩个例子就能说明一切: // 将配置数据藏在代码中 function validate(value) { if (!value) { alert("Invalid value"); location.href = "/errors/invalid.php"; } } function toggleSelected(element) { if (hasClass(elemen…

之前大致翻了一遍这本书,整体感觉很不错,还是不可追求快速,需要细细理解. 这篇随笔主要对本书的第一部分中对自己触动比较大的部分及与平常组织代码最为息息相关的部分做一个记录,加深印象. 主要讲述五点内容—— 一.空行 二.null 三.undefined 四.变量声明 五.函数声明 一.空行 /* * 通常来讲,代码看起来应当像一系列可读的段落,而不是一大段揉在一起的连续文本. * 有时一段代码的语意和另一段代码不相关,这时就应该使用空行将它们分隔,确保语义有关联的代码展现在一起. */ var…

啦啦啦啦啦,今天第二篇随笔\(^o^)/~ ////////////////////////////////正文分割线////////////////////////////////////// 直接量 JavaScript中包含一些类型的原始值:字符串.数字.布尔值.null和undefined.同样也包含对象直接量和数组直接量. 字符串 在JavaScript中,字符串是独一无二的.字符串可以用双引号括起来,也可以用单引号括起来. 除了内部出现字符串界定符(string delimiter)…

昨天是我偶像生日,现在整个人都还好兴奋啊O(∩_∩)O~  闲话少说,让我先发篇随笔留念一下^_^ ////////////////////////////////正文分割线////////////////////////////////////// 命名 只要写代码,都会涉及变量和函数,因此变量和函数命名对增强代码可读性至关重要.JavaScript语言的核心ECMAScript,即是遵照了驼峰式大小写(Camel case)命名法.Camel case在这里被作者用来特指“小驼峰式大小写”(…

这周也是拿到了同程的offer,从此走上了前端之路!感谢我的贵人们.再次纪念一下~! 第11章 不是你的对象不要动 11.1 什么是你的 你的对象:当你的代码创建了这些对象或者你有职责维护其他人的代码的对象时,你就拥有这些对象. 不是你的对象: 原生对象(Object.Array等等) DOM对象(例如:Document) 浏览器对象模型(BOM)对象(例如: window) 类库的对象 11.2.1 不覆盖方法 JavaScript这门语言也存在着糟粕,那就是覆盖一个已经存在的方法是难以置信的…

第六章 避免使用全局变量 JavaScript执行环境在很多方面都有其独特之处,全局变量就是其中之一.“全局变量”是一个神秘的对象,它表示了脚本的最外层上下文. 在浏览器中,windows对象往往重载并等同于全局对象,因此任何在全局作用域声明的变量和函数都是windows对象的属性. 6.1 全局变量带来的问题 这个就不用照着书详谈了,当我们进入团队合作编写代码时,若大家自定义的变量都是直接挂载在windows对象上(也就是全局变量),很容易发生命名冲突.像这样: function sayCol…

第一章 基本的格式化 缩进层级:推荐 tab:4; 换行:在运算符后面换行,第二行追加两个缩进: // Good: Break after operator, following line indented two levels callAFunction(document, element, window, "some string value", true, 123, navigator); // Bad: Following line indented only one leve…

第一部分: 编程风格 在大型项目开发中,因为项目可读性规范性的需要(就像<编写可维护性的Javascript>一书作者Nicholas Zakas大神所说,他们团队所有成员写出的代码就像是经同一个人之手写出的一样),风格约定要大于个人喜好这一点毋庸置疑,不过什么样才是好的编程风格约定?下面推荐一些实践中沉淀下来的代码规范和最佳实践: 缩进 缩进问题和编辑器问题一样是一个因为个人喜好和其他不管值得不值得争执的理由而存在争议的问题,目前存在两个流派,空格流和tab流.个人比较习惯于tab(4个空格…

第一部分 一.基本规范 1.缩进:一般以四个空格为一个缩进. 2.语句结尾:最好加上分号,因为虽然“自动分号插入(ASI)”机制在没有分号的位置会插入分号,但是ASI规则复杂而且会有特殊情况发生 // 源代码 function aaa() { return { title: 'aaaa', id: '2222' } } // ASI解析 function aaa() { return; { title: 'aaaa', id: '2222' } } 此时return换行会返回undefined…

格式 变量 变量命名, 采取小驼峰大小写 变量使用名词, 函数前缀为动词 局部变量应统一定义在函数的最上面, 而不是散落在函数的任意角落. 赋初始值的定义在未赋初始值的变量的上面. 我个人建议不使用单var语句, 因为无法在控制台单行调试 空行 方法之间 方法内, 局部变量和第一条语句之间 多行和单行注释之前 逻辑片段之间 引号 单和双都可以, 各有优点: 单引号适合但一个项目要统一. 其他 设置tab缩进4空格 不省略分号 注释 单行注释 // 单行注释 多行注释 /* * 多行注释 */ 文…

UI层的松耦合 在web开发中,用户界面(UI)是由三个彼此隔离又相互作用的层定义的. HTML用来定义页面的数据和语义. CSS用来给页面添加样式,创建视觉特征. JavaScript用来给页面添加行为,使其具有交互性. 如果两个组件耦合太紧,则说明一个组件和另一个组件直接相关,这样的话,修改一个组件的逻辑,那么另外一个组件的逻辑也需要修改. 如果你能够做到修改一个组件而不需要修改其他的组件时,你就做到了松耦合.松耦合对于代码可维护性来说至关重要. 避免使用全局变量 在浏览器中,window对…

变量.函数和运算符 在讨论过基本的JavaScript书写格式化之后,接下来关注如何使用函数.变量和运算符来减少复杂度和增强可读性就显得十分重要了. 变量声明 变量声明是通过var语句来完成的.var语句几乎可以用在JavaScript脚本中的任意地方.不论var语句是否真正会被执行,所有的var语句都提前到包含这段逻辑的函数顶部执行.比如: function doSomething() { var result = 10 + value; var value = 10; return resu…

语句和表达式 在JavaScript中,诸如if和for之类的语句有两种写法,使用花括号的多行代码或者不使用花括号的单行代码.比如: //不好的写法,尽管这是合法的JavaScript代码 if (condition) doSomething(); //不好的写法,尽管这是合法的JavaScript代码 if (condition) doSomething(); //不好的写法,尽管这是合法的JavaScript代码 if (condition) { doSomething(); } //好的写…

缩进层级 代码如何缩进通常有两种主张: 使用制表符缩进 每一个缩进层级都用单独的制表符表示.这种方法的主要缺点是:系统对制表符的解释不一致.这些差异会导致不同的开发者对同一段代码有不同的看法的,这正是团队开发需要规避的 使用空格符缩进 每个缩进层级是由多个空格字符组成.在这种观点钟有三种具体的做法:2个空格表示一个缩进,4个空格表示一个缩进,以及8个空格表示一个缩进.这三种做法在其他很多编程语言中都能找到渊源.实际上,很多团队选择4个空格的缩进.缺点是:对于单个开发者来说,使用一个没有配置好的文…

第八章 避免“空比较” 我们在对传进来的参数做处理之前,肯定需要验证一下是否是我们想要的,也就是说大多数情况下,我们需要对比一下它的类型. 作者首先给了一个看起来都感觉不对的代码: var Controller = { process: function(items) { if (items !== null) { items.sort(); // 不好的写法 items.forEach(function(){ // 执行一些逻辑 }); } } }; 在这段代码中,process()方法显然希…

第五章 UI层的松耦合 5.1 什么是松耦合 在Web开发中,用户界面是由三个彼此隔离又相互作用的层定义的: HTML是用来定义页面的数据和语义 CSS用来给页面添加样式 JavaScript用来给页面添加行为 我们的目标:确保对一个组件的修改不会经常性地影响其他部分. 结果: 遇到和文本或结构相关的问题,通过查找HTML即可定位 当发生了样式相关的问题,你知道问题出现在CSS中 对于那些行为相关的问题,你直接去JavaScript中找到问题所在 5.2 将JavaScript从CSS中抽离 I…

第一章 基本的格式化 1.4 ① 换行 当一行长度到达了单行最大的字符限制时,就需要手动将一行拆成俩行.通常我们会在运算符后换行,下一行会增加俩个层级的缩进. // 好的做法: 在运算符后换行,第二行追加俩个缩进 callFunction(document, element, window, "some string value", true, 123, navigator); // 不好的做法: 在运算符之前换行了 callFunction(document, element, wi…