<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> var config = { MSG_INVALID_VALUE: 'Invalid value', // MSG 表示展现给用户的消息 URL_IN…
这周也是拿到了同程的offer,从此走上了前端之路!感谢我的贵人们.再次纪念一下~! 第11章 不是你的对象不要动 11.1 什么是你的 你的对象:当你的代码创建了这些对象或者你有职责维护其他人的代码的对象时,你就拥有这些对象. 不是你的对象: 原生对象(Object.Array等等) DOM对象(例如:Document) 浏览器对象模型(BOM)对象(例如: window) 类库的对象 11.2.1 不覆盖方法 JavaScript这门语言也存在着糟粕,那就是覆盖一个已经存在的方法是难以置信的…
第六章 避免使用全局变量 JavaScript执行环境在很多方面都有其独特之处,全局变量就是其中之一.“全局变量”是一个神秘的对象,它表示了脚本的最外层上下文. 在浏览器中,windows对象往往重载并等同于全局对象,因此任何在全局作用域声明的变量和函数都是windows对象的属性. 6.1 全局变量带来的问题 这个就不用照着书详谈了,当我们进入团队合作编写代码时,若大家自定义的变量都是直接挂载在windows对象上(也就是全局变量),很容易发生命名冲突.像这样: function sayCol…
第五章 UI层的松耦合 5.1 什么是松耦合 在Web开发中,用户界面是由三个彼此隔离又相互作用的层定义的: HTML是用来定义页面的数据和语义 CSS用来给页面添加样式 JavaScript用来给页面添加行为 我们的目标:确保对一个组件的修改不会经常性地影响其他部分. 结果: 遇到和文本或结构相关的问题,通过查找HTML即可定位 当发生了样式相关的问题,你知道问题出现在CSS中 对于那些行为相关的问题,你直接去JavaScript中找到问题所在 5.2 将JavaScript从CSS中抽离 I…
第四章 变量 函数和运算符 4.1 ① 变量声明 变量声明是通过var语句来完成的,并且所有的var语句都提前到包含这段逻辑的函数的顶部执行. function doSomething() { + value; ; return result; } // 编译器理解为 function doSomething() { var result; // 这里为undefined var value; // 这里为undefined result = +value; value = ; return r…
  第七章 事件处理 7.1 典型用法 作者首先给了个我们一个处理事件的方法.看起来也没啥俩样,不过后来给出的优化方法很值得学习: // 不好的写法 function handleClick(event) { var popup = document.getElementById("popup"); popup.style.left = event.clientX + "px"; popup.style.top = event.clientY + "px&…
第二章 注释 添加注释的一般原则是,在需要让代码变得清晰时添加注释. 2.1 ① 单行注释 独占一行的注释,用来解释下一行代码.这行注释之前总是有一个空行,且缩进层级和下一行代码保持一致. 在代码行的尾部的注释.代码结束到注释之间至少有一个缩进.(包括之前的代码部分)不应当超过单行最大字符限制,如果超过了,就将这条注释置于当前代码行的上方. // 好的写法 if (condition) { // 如果代码执行到这里,则表明通过了所有安全检查 allowed(); } // 不好的写法:注释之前没…
第九章 将配置数据从代码中分离出来 9.2 抽离配置数据 这章比较好理解,也非常常见,作者给的俩个例子就能说明一切: // 将配置数据藏在代码中 function validate(value) { if (!value) { alert("Invalid value"); location.href = "/errors/invalid.php"; } } function toggleSelected(element) { if (hasClass(elemen…
最近读完<编写可维护的JavaScript>,让我受益匪浅,它指明了编码过程中,需要注意的方方面面,在团队协作中特别有用,可维护性是一个非常大的话题,这本书是一个不错的起点. 本书虽短,却五脏俱全,主要涵盖:编程风格(基本格式化.注释.语句和表达式.变量),编程实践(UI层松耦合.避免使用全局变量等).自动化,3个部分的内容. 本文主要整理归纳了书中编程实践章节的核心内容,其他两章编码风格和自动化部分,还需结合当前的流行趋势重新整理,稍后再与大家分享. 第5章 UI层的松耦合 Web开发三大要…
第一章 基本的格式化 缩进层级:推荐 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…