如何组织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. b-树和b+树以及mysql索引

    b-树(m阶): 1.根节点至少有2个子节点; 2.中间节点包含k个子节点和k-1个元素,m/2 <= k <= m; 3.每个节点中的元素从小到大排列,节点当中k-1个元素正好是k个孩子 ...

  2. ubuntu上使用vim编辑文本内容

    1. 什么是 vim? Vim是从 vi 发展出来的一个文本编辑器.代码补完.编译及错误跳转等方便编程的功能特别丰富,在程序员中被广泛使用.简单的来说, vi 是老式的字处理器,不过功能已经很齐全了, ...

  3. 招新系统（jsp+servlet，实现简略前端网页注册登录+后台增删改查，分学生和管理员，Java语言，mysql数据库连接，tomcat服务器）

    生活不只是眼前的苟且,还有诗和远方. 架构说明: 要求是采用MVC模式,所以分了下面的几个包,但是由于是第一次写,可能分的也不是很清楚: 这个是后台部分的架构: 这个是前端的的展示: (那个StuLo ...

  4. fzu 2132 LQX的作业

    Problem 2132 LQX的作业 Accept: 67    Submit: 150Time Limit: 1000 mSec    Memory Limit : 32768 KB Proble ...

  5. Java的工厂模式（一）

    Java的工厂模式在框架中是用的到很多的,所谓的工厂模式,其实也就是用一个接口来创建对象,把实例化的工作推迟到子类去实现.这样在主函数中就可以直接创建一个工厂类,再通过这个工厂类实现操作. 假设有一个 ...

  6. 郭霖 - MVVM开源项目学习

    https://blog.csdn.net/guolin_blog/article/details/87900605 https://medium.com/androiddevelopers/view ...

  7. 记录：springmvc + mybatis + maven 搭建配置流程

    前言:不会配置 spring mvc,不知道为什么那样配置,也不知道从何下手,那么看这里就对了. 在 IDEA 中搭建 maven + springmvc + mybatis: 一.在 IDEA 中首 ...

  8. MVC 导出Execl 的总结几种方式 （三）

    第三种方式呢,就是借用第三方插件 NPOI 来实现Execl 导出 第一步:在NuGut包中下载NPOI 组件 第二步:编辑控制器代码 public FileResult ExcelNewKeyPro ...

  9. Spring+SpringMVC+SpringDataJpa整合

    一.思路: (一) Dao层与Service层: applicationContext.xml. a) 数据库连接池 b) 整合jpa c) 配置@service文件扫描器. d) 配置事务管理管理器 ...

  10. 统计SQL Server所有表记录数

    SELECT SCHEMA_NAME(t.schema_id) AS [schema] ,t.name AS tableName ,i.rows AS [rowCount] FROM sys.tabl ...