如何组织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. JAVA-4NIO之Channel之间的数据传输

    转载:自并发编程网ifeve.com 在Java NIO中,如果两个通道中有一个是FileChannel,那你可以直接将数据从一个channel(译者注:channel中文常译作通道)传输到另外一个c ...

  2. [CQOI 2018]解锁屏幕

    Description 题库链接 给出平面上 \(n\) 个点,一开始你可以选任何一个点作为起点,接着对于每一个你在的位置,你可以选取一个未走过的点.将路径(线段)上所有的点均选上(包括起点终点),并 ...

  3. 问题集录--从初级java程序员到架构师，从小工到专家

    怎样学习才能从一名Java初级程序员成长为一名合格的架构师,或者说一名合格的架构师应该有怎样的技术知识体系,这是不仅一个刚刚踏入职场的初级程序员也是工作三五年之后开始迷茫的老程序员经常会问到的问题.希 ...

  4. [转]How can I list all foreign keys referencing a given table in SQL Server?

    本文转自:https://stackoverflow.com/questions/483193/how-can-i-list-all-foreign-keys-referencing-a-given- ...

  5. Js四则运算精度问题处理

    JavaScript小数在做四则运算时,精度会丢失,这会在项目中引起诸多不便.先看个具体的例子: //较小的数运算 console.log(0.09999999 + 0.00000001); //0. ...

  6. 如何编写makefile文件

    最近一直在学习makefile是如何编写的.       当我们写的程序文件比较少的时候,敲入gcc /g++,当你在大型工程中,在一个个编译文件的话,你可能就会很郁闷.linux有一个自带的make ...

  7. MUI框架 选择器的使用

    js.css引用 <script type="text/javascript" src="librarys/mui/js/mui.min.js">& ...

  8. 【代码笔记】iOS-DropDownDemo-下拉按钮效果

    一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController ...

  9. redis事务报错No ongoing transaction. Did you forget to call multi?

    场景:需要存两条数据到redis中,并且两条要么都存要么都不存,需要事务来控制 Spring Data Redis的RedisTemplate提供了MULTI.EXEC命令进行封装,远看可以解决问题, ...

  10. 让input光标一直在最右边

    有时候,我们需要使的input输入框的在点击时光标一直居右边 例如:移动端,用手指去点击输入框,在输入框较小,手指又比较大,那么经常会在点击后,光标会在已有文字时,居左 我们的输入框文字肯定要居中的需 ...