3-可维护的JavaScript-编程实践-UI层的松耦合

UI层

• html：定义数据和语义
• css：页面样式
• javascript：页面添加行为

基本的UI层关系

不过在实际情况下我们的三个部分都是存在相互依存的关系的。

image

那什么是松耦合啦？

如果一个组件和另外一个组件耦合太紧，则说明一个组件和另外一个组件直接相关，当你修改这个组件的时候，其他的相关的组件也会受到一定的影响。
比如你修改一个html的class的类名“ .class ” --> 改成" id "，导致css和js层都会改。
但是我们知道工作中不可能做到“无耦合“的状态，我们的目的是修改一个组件的时候，尽量少的影响其他的组件。

要实现松耦合要做的事情

1，把js从css中抽离出来

对的你没有看错，在远古时期的时候 ie8-允许使用expression方法把js写进css，不过现在不用在意了。基本没人这么干了。

2，把css从JavaScript中抽离出来

尽量的不要在js中修改你的css，我们已经有很多工具和css预处理器sass，less等，来处理我们多变的css。

3，把JavaScript从html抽离

我们有些同学喜欢使用 on 属性(比如 onclick)方法来绑定一个事件处理程序，但是我们强烈建议不使用这种耦合紧的方法，因为当你发现js问题的时候，你需要话费较多的时间去html面找，而不是js页面。

以前的老页面喜欢这种方法，初学者也喜欢混搭的使用js的各种方法，这是一个非常不好的习惯。推荐使用如下：使用绑定的方法来解决html元素和方法之间的联系。

最好将js代码都放在外置文件中，确保html代码中不会有内联的js代码。

4，将html从JavaScript中抽离

这里要说的主要就是，但我们去拼接长串的字符串和直接使用jq html()，或者js的 innerHtml方法，直接的嵌入html代码。

这样的方法，虽然需求实现了，但是这样是非常不好的实践，它增加了我们跟踪文本和结构性的复杂度。调试的时候我们必须去调试工具的DOM结构中去寻找，而不是简单的去html页面寻找。如果这样我们在跟踪bug的时候就会话费更多的时间和精力。

当然我们现在完全有能力和办法去修改这种方法：

• 使用服务器加载，就是提供一个一个 XMLHttpRequest对象来获取外部标签。比如点击一个按钮返回一个新的对话框。

  
  
  

  image

• 使用模板引擎，使用模板套用的方法。这样的插件非常多了。也可以根据自己的需求来重构自己的模板引擎，主要思想就是将字符串拼接整合化，套用在html端写好的模板来实现一定的dom结构改变。比如template.js-- http://www.oschina.net/p/template-js/

• 使用复杂的客户端模板，当然我们上面提供的是简单的模板引擎，负责比较清晰，没有太多转义的模板。如果你需要更多健壮的模板。可以使用handlebar -- http://handlebarsjs.com/

使用类似简单的js操作就可以引进你需要的模块dom结构了。主要教程还是自行google吧。