zoukankan      html  css  js  c++  java
  • 公共开发中js代码的管理

    javascript代码和其他脚本语言一样,都要合理的组织好,不然到最后js代码也是比较乱的。
    我把JS的组织分成了三个阶段,看看您现在属于哪个阶段。
    初级阶段,JS代码从头顺序写到尾,过程化
    <html>
    <body>
    <input type="text" name="username" id="username" value="" />
    <input type="password" name="password" id="password" value="" />
    </body>
    </html>
    <script type="text/javascript">
    if(document.getElementById("username").value == ""){
    alert("用户名不能为空");
    }
    if(document.getElementById("password").value == ""){
    alert("密码不能为空");
    }
    </script>
    缺点:像这样的代码都是写一个页面里面的,代码基本不能共用,最后的结果js代码冗余比较多。
    优点:单个页面修改比较快,不用考虑影响其他页面。不用加载JS文件。
    中级阶段,通过JS的function来,组织js代码
    在开发的过程中,不断的发现,顺序写JS代码,有太多的麻烦,到最后可能就无法维护,要么维护的时间的太长。在重新开发的时,有意识的对代码进行分块,注意代码的共用性,这个时候function写的比较多。
    <script type="text/javascript">
    function check_username() {
    if(document.getElementById("username").value == ""){
    alert("用户名不能为空");
    }
    }
    function check_password() {
    if(document.getElementById("password").value == ""){
    alert("密码不能为空");
    }
    }
    </script>
    优点:对JS代码,进行分块,共用性较好,修改一处所有调用都可以修改掉,并且代码可读性加强。
    缺点:需要加载JS文件,如果function过多,导致找一个function要花很多时间。
    高级阶段: 通过方法类,域等对function进行分割
    当一个JS文件里面有100多个方法的时候,这个时候看代码其实挺难过的,如果能把里面的function进行分分类是不是就清楚很多,好比,这几个方法是注册时check用的,这个几是对字符串的验证用的等等。
    <script type="text/javascript">
    function register(){
    this.check_username = function(){
    if(document.getElementById("username").value == ""){
    alert("用户名不能为空");
    }
    }
    this.check_password = function(){
    if(document.getElementById("password").value == ""){
    alert("用户名不能为空");
    }
    }
    }
    new register().check_username(); //调用方法
    </script>
    上面的这种用的是方法类,大方法是register,里面定义的二个小方法,一个是对用户名的check,一个是对密码的check.
    <script type="text/javascript">
    var register = {
    check_username:function(){
    if(document.getElementById("username").value == ""){
    alert("用户名不能为空");
    }
    },
    check_password:function(){
    if(document.getElementById("password").value == ""){
    alert("用户名不能为空");
    }
    }
    }
    register.check_username(); //调用方法
    </script>
    个人觉得通过域,来对function进行管理,规划最简单明了。

  • 相关阅读:
    Smart Client Architecture and Design Guide
    Duwamish密码分析篇, Part 3
    庆贺发文100篇
    .Net Distributed Application Design Guide
    New Introduction to ASP.NET 2.0 Web Parts Framework
    SPS toplevel Site Collection Administrators and Owners
    来自Ingo Rammer先生的Email关于《Advanced .Net Remoting》
    The newsletter published by Ingo Rammer
    深度探索.Net Remoting基础架构
    信道、接收器、接收链和信道接受提供程序
  • 原文地址:https://www.cnblogs.com/andy-wcl/p/3406796.html
Copyright © 2011-2022 走看看