zoukankan      html  css  js  c++  java

  • 如何组织好js代码 转

     

    张映 发表于 2011-05-03

    分类目录： js/jquery

    js代码根其他脚本语言一样，都要合理的组织好，不然到最后js代码也是比较乱的。我把JS的组织分成了三个阶段，看看您现在属于哪个阶段?

    初级阶段，JS代码从头顺序写到尾

    查看复制打印?
    1. <html>  
    2. <body>  
    3. <input type="text" name="username" id="username" value="" />  
    4. <input type="password" name="password" id="password" value="" />  
    5. </body>  
    6. </html>  
    7.   
    8. <script type="text/javascript">  
    9. if(document.getElementById("username").value == ""){  
    10.  alert("用户名不能为空");  
    11. }  
    12. if(document.getElementById("password").value == ""){  
    13.  alert("密码不能为空");  
    14. }  
    15. </script>  

    缺点：像这样的代码都是写一个页面里面的，代码基本不能共用，最后的结果js代码冗余比较多。

    优点：单个页面修改比较快，不用考虑影响其他页面。不用加载JS文件。

    中级阶段，通过JS的function来，组织js代码

    在开发的过程中，不断的发现，顺序写JS代码，有太多的麻烦，到最后可能就无法维护，要么维护的时间的太长。在重新开发的时，有意识的对代码进行分块，注意代码的共用性，这个时候function写的比较多。

    查看复制打印?
    1. <script type="text/javascript">  
    2. function check_username() {  
    3.  if(document.getElementById("username").value == ""){  
    4.  alert("用户名不能为空");  
    5.  }      
    6. }  
    7.   
    8. function check_password() {  
    9.  if(document.getElementById("password").value == ""){  
    10.  alert("密码不能为空");  
    11.  }  
    12. }  
    13. </script>  

    优点：对JS代码，进行分块，共用性较好，修改一处所有调用都可以修改掉，并且代码可读性加强。

    缺点：需要加载JS文件，如果function过多，导致找一个function要花很多时间。

    高级阶段:  通过方法类，域等对function进行分割

    当一个JS文件里面有100多个方法的时候，这个时候看代码其实挺难过的，如果能把里面的function进行分分类是不是就清楚很多，好比，这几个方法是注册时check用的，这个几是对字符串的验证用的等等。

    查看复制打印?
    1. <script type="text/javascript">  
    2. function register(){  
    3.  this.check_username = function(){  
    4.      if(document.getElementById("username").value == ""){  
    5.          alert("用户名不能为空");  
    6.      }              
    7.  }  
    8.  this.check_password = function(){  
    9.      if(document.getElementById("password").value == ""){  
    10.          alert("用户名不能为空");  
    11.      }              
    12.  }  
    13. }  
    14. new register().check_username();  //调用方法  
    15. </script>  

    上面的这种用的是方法类，大方法是register，里面定义的二个小方法，一个是对用户名的check,一个是对密码的check.

    查看复制打印?
    1. <script type="text/javascript">  
    2. var register = {  
    3.  check_username:function(){  
    4.      if(document.getElementById("username").value == ""){  
    5.          alert("用户名不能为空");  
    6.      }              
    7.  },  
    8.  check_password:function(){  
    9.      if(document.getElementById("password").value == ""){  
    10.          alert("用户名不能为空");  
    11.      }              
    12.  }  
    13. }  
    14. register.check_username();  //调用方法  
    15. </script>  

    个人觉得通过域，来对function进行管理，规划最简单明了。

    作者:海底苍鹰
    地址:http://blog.51yip.com/jsjquery/1267.html
  • 相关阅读:
    Some interesting problems in Group theory
    Abstract Harmonic Analysis Lecture Notes
    郭懋正《实变函数与泛函分析》课后题答案
    江泽坚《泛函分析》第二版 参考答案
    国外著名数学杂志
    郑继明等《数值分析》习题解答
    《摩诃般若波罗蜜多心经》新译 何新 译
    炼静
    金刚经原文
    道德经全文
  • 原文地址：https://www.cnblogs.com/zifeiyu/p/3166338.html
Copyright © 2011-2022 走看看