#001 如何组织JS代码

如何组织JS代码

有没有这样的经历，在编写代码的时候，因为功能简单，写的时候比较随意，所有的JS代码都放在一个文件里面，但是随着功能的增加，发现代码很乱，不好维护。

简单的整理了一下，目前对已有项目的结构做了一个分析，主要有以下两种方式

1. 按文件类型分类【最简单，但模块划分不清晰】
2. 按模块进行分类【实用，但文件夹比较多】

一、对项目目录结构分类

1. 最简单的文件类型分类

1. css/
2. img/
3. js/
4. app.js
5. controllers.js
6. directives.js
7. filters.js
8. services.js
9. lib/
10. partials/
11. index.html

存在问题： 如果有很多 controller.js 或者 services.js 文件，则 JS 文件夹里面会很乱，当然可以继续在 JS 文件夹里面，创建 controllers 文件夹， services 文件夹
继续创建文件夹进行归纳，则已经有了大概的结构了。

但是 又来了一个问题，如果模块多了，为了区分 这些文件属于哪一个模块，就比较麻烦。

---

2. 按模块划分（推荐）

按模块进行划分，可以划分的细一点。

1. 可以抽取出模块共用的部分，放在 根目录的 common 下
2. 每个模块里面有完整的目录结构来区分各类文件

优势： 方便模块的添加和删除，删除模块只需要在 modules 文件夹，删除掉 指定的模块，然后再 routes 文件里面，删除相对应的路由，就可以了

1. common
2. imgs
3. js
4. css
5. fonts
6. ...
7. modules
8. home
9. css
10. js //文件夹里面可以在根据需要，创建新的文件夹
11. imgs
12. index.js //入口文件
13. index.html

---

二、单纯的JS代码组织（三个阶段）

1. 初级阶段，JS代码从头顺序写到尾
   描述： JS代码 和 HTML代码 写在一个文件里面
   优点： 对单个页面修改快，不怕影响其他页面。 适用于：功能简单，复用少 的页面
   缺点： 复用性差，代码只能用在这个页面。
   例子：

1. <html>
2. <body>
3. <inputtype="text"name="username"id="username"value=""/>
4. <inputtype="password"name="password"id="password"value=""/>
5. <scripttype="text/javascript">
6. if(document.getElementById("username").value ==""){
7. alert("用户名不能为空");
8. }
9. if(document.getElementById("password").value ==""){
10. alert("密码不能为空");
11. }
12. </script>
13. </body>
14. </html>

1. 中级阶段，通过JS的function来，组织js代码
   描述： 抽取出共用的逻辑或者功能，封装成 function，随着页面功能的增加，function 可能越来越多，后期很难维护
   优点： 抽取了共用的方法，有一定的复用能力，多次调用，只需要修改一个地方即可
   缺点： 但是function一多，很难找出代码在哪里
   例子：

1. function check_username(){
2. if(document.getElementById("username").value ==""){
3. alert("用户名不能为空");
4. }
5. }
7. function check_password(){
8. if(document.getElementById("password").value ==""){
9. alert("密码不能为空");
10. }
11. }

1. 高级阶段: 通过方法类，域等对function进行分割
   描述： 在抽取function之后，发现如何 function太多，很多找到function 在哪里，这个时候，如果对function进行分类，则相对比较好找一点
   优点： 对单个页面修改快，不怕影响其他页面。 适用于：功能简单，复用少 的页面
   缺点： 复用性差，代码只能用在这个页面。
   例子：

1.使用类的方法

1. functionregister(){
2. this.check_username =function(){
3. if(document.getElementById("username").value ==""){
4. alert("用户名不能为空");
5. }
6. }
7. this.check_password =function(){
8. if(document.getElementById("password").value ==""){
9. alert("用户名不能为空");
10. }
11. }
12. }
13. newregister().check_username();//调用方法

2.使用对象的方法

1. varregister={
2. check_username:function(){
3. if(document.getElementById("username").value ==""){
4. alert("用户名不能为空");
5. }
6. },
7. check_password:function(){
8. if(document.getElementById("password").value ==""){
9. alert("用户名不能为空");
10. }
11. }
12. }
13. register.check_username();//调用方法

---

[top]
参考文章：

1. 如何组织好js代码
2. 如何组织大型JavaScript应用中的代码？

来自为知笔记(Wiz)