js代码之编程习惯

编程习惯:

异常处理

如果你没有使用异常处理的习惯，这可能是因为你并未真正的理解它的作用。当你正确使用异常处理之后，你会发现你的代码最显著的变化就是：少了很多的 if-else 语句 。

虽然在 JS 中，只有错误（Error），没有异常（Exception），但是我们很多人还是喜欢将之成为异常( 我觉得并没什么不好，反而会更形象)，js 把 异常分为以下6种：

EvalError: raised when an error occurs executing code in eval()

RangeError: raised when a numeric variable or parameter is outside of its valid range

ReferenceError: raised when de-referencing an invalid reference

SyntaxError: raised when a syntax error occurs while parsing code in eval()

TypeError: raised when a variable or parameter is not a valid type

URIError: raised when encodeURI() or decodeURI() are passed invalid parameters

但是很多人都以为只能使用这6种异常，不符合项目中的需求，所以就不使用异常处理了，但其实我们完全可以根据自己的项目去自定义一些异常，我建议大家在错误消息中包含函数名称以及失败的原因，这样会十分利于你的代码调试，如图：

为了便于统一管理，我建议大家自己建立一个异常模块，需要的时候，直接引入这个模块，如图

大家如果不习惯使用 异常处理 的话，我的建议是从你的下一个项目开始，你就试着去用异常处理，你会发现你的代码非常优雅，省去很多的 if-else，十分干净利落。

事件处理

有经验的开发者一定会知道，随着项目内容增多的时候，代码里面的事件处理程序会特别多，如果没有良好的管理，应用逻辑会和事件处理程序紧密的耦合在一起，而且这时的代码会有很大的冗余。为了解决这种问题，我建议大家采用以下3个方法：

1、隔离应用逻辑 2、禁止分发对象 3、定义事件注册模块。

1. 隔离应用逻辑：将应用逻辑从所有事件处理程序中抽离出来是最佳的方法，因为你不知道接下来什么时候还会触发同一段的逻辑。

2. 禁止分发对象：既然应用逻辑和事件处理程序是完全隔离的，那么应用程序中就不能有任何与事件有关的代码，所以，应用逻辑不能依赖于 event 对象来实现某一功能。

3. 定义事件注册模块：整个时代都在提倡 js 代码统一模块化管理，所以，为了方便管理，我们有必要定义一个事件注册模块，用来统一完成事件的注册( 绑定 ) 和 移除

隔离应用逻辑

禁止分发对象

事件注册模块

配置分离

每一次修改源代码，都会有引入 bug 的风险，且只修改一些数据也会带来许多意外的风险，因为数据是不影响指令正常运行的，精心设计的应用应该把关键数据从源码中抽离出来，这样，我们每次修改时，只需要修改抽离出的那部分代码就行了，这样既简单方便又降低了很多风险。

什么是配置数据呢？就是在应用中写死了的那些值，如图的代码：

"/write.php"就是配置数据，想象一下，这只是一个文件中的代码，如果有100个文件中有这样的代码，假设某天，网站的 write.php 改成了 compose.php ，那么你就要将 "/write.php" 改100次 ！ 所以，无论是从安全上讲还是从可维护上讲，我们都很有必要抽离出配置项，并且定义在 Config 配置模块中。（需要自己自定义一个 Config 配置模块，代码就不用演示了吧。。。）

其他

①：将 CSS 代码从 JS 代码中抽离出来（推荐 使用 class 类名作为 CSS 和 JS 通信的桥梁）

②：将 JS 代码从 HTML 标签中分里出来

( 不要使用<span onclick="dosomething()" ></span>）。

③：将 HTML 从 JS 中抽离出来 。这里特别说一下，有些人可能会习惯了在 JS 代码中 这样写：

$( "p" ).append( "<h2>大家好</h2>" )，这样并不是不可行，但是当需要插入大量的 HTML 标签时，代码就会变得十分丑陋而且难以维护，我们可以使用以下方法来解决这个问题：

1）使用 Jquery 的 load( "路径" ) 方法 从服务端加载 。

2）使用 <script type="text/html"> 在这里书写你的 HTML 代码 </script>，这样，浏览器就不会将它识别为 HTML 代码，你就可以在 JS 中 通过调用 这个<script>标签，实现优雅的生成 HTML 代码了。