领导一看就加薪的编程风格！！！—— 读书笔记篇《编写可维护的js》（二）

在上一篇领导一看就加薪的编程风格！！！—— 读书笔记篇《编写可维护的js》（一）中我们介绍了代码的呈现风格，即什么样风格的代码更容易阅读、更容易被大家接受。并且在团队中，所有的代码风格一致是极其重要的。因此在上一篇中我们总结了比较经得起考验的代码书写风格。在这一篇中，主要介绍了在开发中我们应该以什么方式来编写代码，使得代码更不容易出错。也算是一些小的编程技巧，它不像上文中，主要强调代码的呈现方式。这篇文章更关注代码的执行结果。

准备好了吗？下面就要进入这一篇的内容咯！

在这一部分呢，我们主要是介绍了在编程过程中一些更好的实践经验，可以帮助我们踩更少的坑，走更少的弯路。这种技巧或者说提醒是多年实践经验的总结，他可以帮助我们增强代码的总体质量。

如果说上一部分是传授的是一些理论知识，那么这一部分则是实践经验。

书中抽取了八个小点来跟大家分享。

UI层的松耦合

什么是松耦合

如果是刚刚进入这个领域的人来说可能不知道什么叫松耦合。一句简单的话跟大家讲，就是模块与模块之间尽量不要直接相关联和依赖。运用到实践中的判断准则就是：当我想要修改这个模块的东西时，我尽量不需要修改其他模块。

有句话叫做：高内聚低耦合。这是代码设计和模块设计的一大准则。意思是我们设计的模块，在模块内部，我们需要高内聚，我们需要的功能逻辑尽量在一个模块中完成。低耦合，也就是松耦合，一个意思。我们尽量不要在这么模块中直接修改另一个模块，甚至在另一个模块中包含了这个模块的逻辑，这是我们不推荐的 。我们希望这个模块的功能尽量在该模块内部完成。这个模块与其他模块尽可能少的有关联。如果有，也是通过设计接口来实现，我们抛出去一个公有的接口或者函数让人来调用实现功能，但是绝对不能直接操作我的模块！这是所谓的低耦合。需要说一下哦，我们工作中模块之间不可能做到零耦合的。我们要做的是确保一个模块内部的修改不会经常性的影响其他部分。

至于什么称之为模块，这要看个人的理解透不透彻。万变不离其宗，一个函数可以是一个模块，一个类可以是一个模块，一个页面可以是一个模块，一个登录功能可以是一个模块，一段html可以是一个模块。理解模块不是固定的，任何想要实现高内聚低耦合的部分都可以称之为模块。甚至是你在编程的任何地方都可以拿来说是一个模块！

上边这些是我自己的理解和总结哦！如果有什么问题欢迎评论交流哈。

说完了松耦合，我们来谈一谈UI的分层。

一般来说前端的开发和实现，主要有三个大的模块或者分支：html css js
html：负责页面的结构（有表单、链接、表格等等）
css：负责页面的样式（颜色、大小、背景、摆放位置等等）
js：负责页面的交互（点击、提交数据、数据校验、缓存处理等等）

文中所指的UI层的松耦合主要是这三大模块的松耦合，具体体现在：

将js从css中抽离

看到这个标题有人会问了，css里边怎么会有js呢？
确实是，现在一般我们都不会在css中写js代码。但是css中其实是可以写js的。这常常在css表达式中使用。有时候当属性不确定或者需要依赖其他数据计算而来，我们会用到这种表达式的写法。
但是我们更建议，不要这么操作。一旦你以为js出了问题，你大概率死也不会去找css去定位问题。
如果实在万不得已必须靠js来计算css,建议把这部分放在js里边去操作数据，然手数据直接对应到css。不要直接把这段代码写在css文件里。不然定位问题定位到你哭！！！

解决错误并不难，但是在自己认为不会出错的代码里找错误，实在是一件让人可笑的浪费时间的事情。

将css从js中抽离

保持js和css之间的清晰的分离是很有挑战的。因为我们经常用js的style属性去修改css,保持一定的交互感。
如下：

element.style.color = 'red' //不推荐

但是这种写法是有问题的，因为信息是通过js而不是css承载的。
我们推荐如下这种写法，其实现在前端主流的框架都是这么引导的：

element.className += 'redclass' //推荐

我们可以在css中多加一个类的样式。使得js不直接操作样式，保持与css的松耦合。
当然有一些特殊情况我们是可以用js来实现的，定位。跟定位有关的数据是无法简单在css中通过选择器来实现动态的更改的。

将js从html中抽离

html中的js,我们首先可以想到的是html的元素属性嵌入js脚本。
举个例子：

//事件属性
<input  type = 'button' onclick = 'print()'/> //不推荐
//特殊协议
<a href = 'javascript:alert(0)' >点击一下</a> //不推荐

上边这两种方式的写法都是不推荐的，主要考虑复用性、局限性、可读性的问题。
先说复用性：如果有一百个元素绑定点击事件呢？写一百遍？如果改个函数名呢？每个用到的函数都要改。
再说局限性：属性的值是字符串形式的，内容应该是一些简单的逻辑，如果要声明变量函数呢？创建对象呢？
来说可读性：如果代码量过大，一堆字符串可读性差，也没法调试啊
so,将js从html中抽离出来吧
推荐大家使用标准的js的事件绑定函数，把所有的js都写在js文件里，与html尽量无内联。

将html从js中抽离

将html从js中抽离的好处在于他减少了跟踪文本和结构性问题的复杂度。
方法一：从服务器加载
第一种方法是将模板放置与远程服务器，从远程获取html结构。这种方法适用于需要大量的html字符串嵌进html中时，我们通过调取一个远程的接口来返回html模板，将直接内联在js中的html编程中从远程获取。因为处于新歌能的原因，如果你将大量的html模版存在dom或者内存里是非常糟糕的。
方法二：简单客户端模板
简单客户端模板是在模板中用一些占位符来替换真正的html，真实的html可能存放在页面中某个不展示的标签内进行暂时的存储。当需要的时候获取节点的内容并插入到对应的dom。这种方式在获取真实的dom节点时要注意一些空的节点，保证获取的节点是需要的节点就好。
方法三：复杂客户端模板
这种方式其实就是现在主流框架的方式，如vue、react，他们都是用了{{name}}的方式进行占位。所有的占位符都标记为一个名称。其中还有一些简单的循环和条件判断。非常的灵活和方便。可以体验下vue、react的语法。 也可以直接看handlebars提供的解决方案。它是专门为浏览器端js设计的完整的客户端模板系统。

避免使用全局变量

全局变量带来的问题

全局变量的使用在团队开发的背景中可以说是问题多多。

1. 命名冲突：全局变量越来越多时，发生明明冲突的可能性就越来越高。
2. 代码的脆弱性：全局变量因为暴露在全局，任何函数任何地方都可以修改和使用。耦合了这样的变量，意味着任何对全局变量的修改都可以造成错误。
3. 难以测试：如果由于全局变量导致的错误，很难定位到问题所在，因为任何地方都可以修改他。

因此我们我们希望函数不要对全局变量有依赖。

避免意外的全局变量

js中有不少陷阱，一不小心就会创建全局变量。例如当你给一个未被var声明的变量赋值时，你已经自动创建了一个全局变量。js不会提醒你这样做是否是有问题的。更加过分的是，如果的你变量名刚好是和某个全局变量同名，那么你已经修改了真正的全局变量，如window下的name属性,一旦修改将会导致你的链接导航出错。因为很多js自身的全局属性，在js的底层中都是有一定的用处。你不知道你的修改将带来什么不可预测的问题。所以避免一些意外的全局变量也是很有必要的。这个时候JSLint或者JSHint就会发挥他的作用了。它是一个js语法检查的插件。

单全局变量方式

单全局变量的意思是只需要唯一一个全局变量,且名字是独一无二的。如现在的jQuery，它定义了两个全局对象，分别为$和jQuery.如果出现了冲突，可以自行调用函数修改。其实很多类库都采用了这种方式，目的是为了避免明明冲突。
命名空间：

模块：

零全局变量

——————————未完待续

下边真的可以不看 -----

想学习一些前端的书籍吗，我都帮你整理好啦！评论打出你想读的书，给你最全的笔记干货

超级全的前端知识，面试必备、系统复习必备哟哟哟

有想法评论提出哈，欢迎交流，小编也是渣渣一枚呢～一起进步呗

这次真的可以不看 -----

点个收藏呗，要不赞一个呗，小编手都敲累了，但还是持续加更呢～