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进行管理,规划最简单明了。

  • 相关阅读:
    vs2008将 win32项目改为console项目
    python——pandas技巧(处理dataframe每个元素,不用for,而用apply)
    leetcode计划
    初识Flask——基于python的web框架
    开展论文研究——推荐系统
    c++如何按照map的value进行排序?
    sklearn决策树应用及可视化
    黑客可远程控制!微软紧急修补2个新漏洞,以下系统版本都受影响
    高通推出新的智能手表芯片,为安卓系统注入新的活力
    美国宇航局向有创意的科技小企业支付5100万美元
  • 原文地址:https://www.cnblogs.com/andy-wcl/p/3406796.html
Copyright © 2011-2022 走看看