zoukankan      html  css  js  c++  java

  • #001 如何组织JS代码

    如何组织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应用中的代码？
  • 相关阅读:
    C/C++中的内存对齐 C/C++中的内存对齐
    Java编程提高性能时需注意的地方
    微软HoloLens技术解谜
    MySQL索引原理及慢查询优化
    mysql 2006
    第9周个人总结
    第十周任务安排
    下一阶段学习安排
    写在软考弃考之后
    第九周任务安排
  • 原文地址：https://www.cnblogs.com/zhongxia/p/eed4d2deeb4fd7d1f8019ae4a08a2bdc.html
Copyright © 2011-2022 走看看