如何组织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. 2019.2.1 现有vue-cli项目引入ESLint

    ESLint 不管是多人合作还是个人项目,代码规范是很重要的.这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性. 可能在早期建立项目的时候,因为一些原因没有引入eslint.单元测试等, ...

  2. Window环境配置Mongodb

    Mongodb这几天也了解了一下,今天配置了下环境,从今天开始学下Mongodb数据库. 一.下载 在这个网址中选择要下载的开发环境https://www.mongodb.com/download-c ...

  3. 使用eclipse 开发lisp

    https://www.ibm.com/developerworks/cn/opensource/os-eclipse-lispcusp/ eclipse有一个插件,可以支持lisp的开发,叫cusp ...

  4. github删除仓库

    有的时候github的仓库创建错误了,不用了,想删除仓库 1.进入仓库,选择设置 2.拉到最下面,有一个Delete this repository删除仓库按钮,点击 3.输入需要删除的仓库的名称,直 ...

  5. Node.js 常用工具util包

    Node.js 常用工具 util 是一个Node.js 核心模块,提供常用函数的集合,用于弥补核心JavaScript 的功能 过于精简的不足. util.isError(obj); util.is ...

  6. SQL查询几种的区别。

    最近看了几篇SQL查询的文章做一下总结哦,大概简记如下: SQL查询的实质是,是指从数据库中取得数据的子集,可以先取列子集,然后再取符合条件的行子集. 1.单表查询: SELECT [Name] ,[ ...

  7. 手把手教你写一个java的orm（五）

    生成sql:where 上一篇里我们实现了生成insert的sql,下面要开始实现update,delete,select的sql语句了.但是这些语句有一个比较麻烦的地方是:它们一般后面都会有wher ...

  8. 撩课-Web大前端每天5道面试题-Day18

    1.如何判断一个变量是对象还是数组? 判断数组和对象分别都有好几种方法,其中用prototype.toString.call()兼容性最好. function isObjArr(variable){ ...

  9. hdu 1023 卡特兰数《 大数》java

    Train Problem II Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  10. css 文本和div垂直居中方法汇总

    https://blog.csdn.net/u014607184/article/details/51820508 https://blog.csdn.net/liuying1802028915/ar ...