如何组织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应用中的代码？

#001 如何组织JS代码的更多相关文章

  1. JavaScript进阶之路——认识和使用Promise，重构你的Js代码

    一转眼,这2015年上半年就过去了,差不多一个月没有写博客了,"罪过罪过"啊~~.进入了七月份,也就意味着我们上半年苦逼的单身生活结束了,从此刻起,我们要打起十二分的精神,开始下半 ...

  2. 阻止pc端浏览器缩放js代码

    阻止pc端浏览器缩放js代码 众所周知:移动端页面禁止用户缩放界面只需加上<meta name="viewport" content="user-scalable= ...

  3. 最新的JavaScript核心语言标准——ES6，彻底改变你编写JS代码的方式！【转载+整理】

    原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructu ...

  4. JS代码的window.location属性详解

    转载:http://www.5icool.org/a/201105/a564.html 如果你稍微懂一些JS代码,一般都会知道 window.location.href 这个属性.并且用该属性获取页面 ...

  5. 一个基于 EasyUI 的前台架构（3）封装操作Tabs的JS代码

    一般来说,系统框架的主内容区会引入另一个独立的 Web 页面来实现系统的功能,所以在在 Tabs 里的每一个标签页里使用 iframe 标签来引入子页面.所以这里可以将 Tabs 的 Content ...

  6. 有哪些值得一读的优秀开源 JS 代码

    有哪些值得一读的优秀开源 JS 代码 采纳 首先,没有“必须”读的源代码(我发现我特喜欢说首先……),因为读源代码不是做功课,只有用到或是非常好奇才会去读,当成“日常”去做是没有意义的. 当然有些人会 ...

  7. php课程 1-3 web项目中php、html、js代码的执行顺序是怎样的（详解）

    php课程 1-3 web项目中php.html.js代码的执行顺序是怎样的(详解) 一.总结 一句话总结:b/s结构 总是先执行服务器端的先.js是客户端脚本 ,是最后执行的.所以肯定是php先执行 ...

  8. 最新的JavaScript核心语言标准——ES6，彻底改变你编写JS代码的方式！

    原文地址 迁移到:http://www.bdata-cap.com/newsinfo/1741515.html 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和f ...

  9. 127个常用的JS代码片段，每段代码花30秒就能看懂（上）

    127个常用的JS代码片段,每段代码花30秒就能看懂(上) JavaScript 是目前最流行的编程语言之一,正如大多数人所说:“如果你想学一门编程语言,请学JavaScript.” FreeCode ...

随机推荐

  1. [HNOI 2018]转盘

    Description 题库链接 在一个环上有 \(n\) 个物品,第 \(i\) 个物品的出现时间为 \(T_i\) .一开始你可以任意选择一个物品的位置作为起始位置,然后以这个位置为起点沿正方向走 ...

  2. 提高 ASP.NET Web 应用性能的 24 种方法和技巧（转载）

    在这篇文章中,将介绍一些提高 ASP.NET Web 应用性能的方法和技巧.众所周知,解决性能问题是一项繁琐的工作,当出现性能问题,每个人都会归咎于编写代码的开发人员. 以下为译文 那性能问题到底该如 ...

  3. winform:简单文件资源管理器

    今天全部学习内容的体现就是winform的资源管理器.这个资源管理器主要由一个textbox获取路径,然后在treeview那里通过递归的方式呈现目录树,当用户点击treeview的节点是,会触发Af ...

  4. 前端模块化(AMD和CMD、CommonJs)

    知识点1:AMD/CMD/CommonJs是JS模块化开发的标准,目前对应的实现是RequireJs/SeaJs/nodeJs. 知识点2:CommonJs主要针对服务端,AMD/CMD主要针对浏览器 ...

  5. yum 安装php7.1

    yum install http://rpms.remirepo.net/enterprise/remi-release-6.rpm yum -y install php71-php.x86_64 p ...

  6. 163. [USACO Mat07] 牛语

    ☆   输入文件:latin.in   输出文件:latin.out   简单对比 时间限制:1 s   内存限制:128 MB 译: zqzas 奶牛们听说猪发明了一种秘密语言,叫做"猪语 ...

  7. nginx的启动和关闭

    nginx的启动和关闭nginx -h 查看帮助信息nginx -v 查看Nginx的版本号nginx -V 显示Nginx的版本号和编译信息start nginx 启动Nginxnginx -s s ...

  8. Git学习 之 安装

    1.官网下载 https://git-scm.com/downloads 2.修改安装目标路径,其他默认安装 3.通过系统管理员身份打开cmd,输入git 检查是否安装成功

  9. opencv3.2.0图像对比度与亮度调整

    ##名称:图像对象度与对比度调整(由轨迹条分别控制对比度和亮度值) ##平台:QT5.7.1+opencv3.2.0 ##时间:2017年12月13日 /***********建立QT控制台程序*** ...

  10. CentOS7系列--1.4CentOS7服务

    CentOS7服务管理 1. 查看服务 1.1. 查看所有运行的服务 [root@centos7 ~]# systemctl -t service UNIT LOAD ACTIVE SUB DESCR ...