如何写出漂亮的js代码

最新推荐文章于 2021-09-30 14:47:07 发布

H小志

最新推荐文章于 2021-09-30 14:47:07 发布

阅读量423

点赞数

分类专栏：性能优化 javascript/jquery 文章标签： javascript

本文链接：https://blog.csdn.net/xiaozhi_2016/article/details/55264186

版权

javascript/jquery 同时被 2 个专栏收录

20 篇文章 2 订阅

订阅专栏

性能优化

5 篇文章 0 订阅

订阅专栏

javascript代码和其他脚本语言一样，都要合理的组织好，不然到最后js代码也是比较乱的。

我把JS的组织分成了三个阶段，看看您现在属于哪个阶段。

初级阶段：JS代码从头顺序写到尾,过程化

<html> 
  <body> 
    <input type="text" name="username" id="username" value="" /> 
    <input type="password" name="password" id="password" value="" /> 
  </body>
  <script type="text/javascript"> 
    if(document.getElementById("username").value == ""){ 
      alert("用户名不能为空"); 
    } 
    if(document.getElementById("password").value == ""){ 
      alert("密码不能为空"); 
    } 
  </script>  
</html>

缺点：像这样的代码都是写一个页面里面的，代码基本不能共用，最后的结果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进行管理，规划最简单明了。

H小志

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何写出漂亮的js代码

javascript代码和其他脚本语言一样，都要合理的组织好，不然到最后js代码也是比较乱的。我把JS的组织分成了三个阶段，看看您现在属于哪个阶段。初级阶段：JS代码从头顺序写到尾,过程化 if(document.getElementById("username").value == ""){ alert("用户名不
复制链接

扫一扫