如何组织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. 扫描网站服务器真实IP的小脚本

    #!/usr/bin/env python # -*- coding: gbk -*- # -*- coding: utf_8 -*- # Date: 2015年9月11日 # Author:蔚蓝行 ...

  2. 小白学习之Code First（四）

    code first :约定大于配置(通过配置实体重写约定) 通过两种方式配置实体:DataAnnotations      Fluent Api System.ComponentModel.Data ...

  3. Session和Cookie之间区别与联系

    一. 概念理解 你可能有留意到当你浏览网页时,会有一些推送消息,大多数是你最近留意过的同类东西,比如你想买桌子,上淘宝搜了一下,结果连着几天会有各种各样的桌子的链接.这是因为 你浏览某个网页的时候,W ...

  4. SpringMVC中数据转换

    SpringMVC中接收到的数据都是String形式,然后再根据反射机制将String转换成对应的类型.如果此时想接收一个Date类型,那么我们可以定义一个转换器来完成. 例如,我们有下面的Emp类: ...

  5. 从mysql中dump数据到本地

    方法一:使用mysqldump命令,如: mysqldump -h10.90.6.237 -uf_insplat2car_r -P3306 -pxxxxxxxxx nbmp tb_tag_log -- ...

  6. linux下安装jdk8

    https://www.cnblogs.com/shihaiming/p/5809553.html

  7. zookeeper 典型应用

    一.发布/订阅 配置文件的集中管理. 问题:当分布式系统变多后,每个系统保存相应的配置文件,会造成同个文件有多份,修改起来非常麻烦. 解决方法:使用zk的发布/订阅功能,配合Watcher机制,在应用 ...

  8. Python rest-framework 中类的继承关系(as_view)

    一. 背景 最近几天一直在学习restful framework的源代码,用户请求的流程,在路由系统这块遇到一个疑问,关于类的继承关系,当请求进来到路由这块,执行as_view()方法的时候,为什么会 ...

  9. PHP生成缩略图（2）--等比缩略图

    分析: 当原图是横屏或竖屏的时候,希望缩略图会保持原来的比例缩放,不改变原图的完整性,即等比缩放! 此时只需确定原图的宽高,以及目标图的最大宽高,比较目标图的宽高比例与原图的宽高比例的大小,以此来判断 ...

  10. 洛谷P4360 [CEOI2004]锯木厂选址(dp 斜率优化)

    题意 题目链接 Sol 枚举第二个球放的位置,用前缀和推一波之后发现可以斜率优化 // luogu-judger-enable-o2 #include<bits/stdc++.h> #de ...