如何组织好js代码

张映 发表于 2011-05-03

分类目录: nodejs/vue/js/jquery

标签:,

js代码根其他脚本语言一样,都要合理的组织好,不然到最后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进行管理,规划最简单明了。



转载请注明
作者:海底苍鹰
地址:http://blog.51yip.com/jsjquery/1267.html

3 条评论

  1. wclssdn 留言

    创建N多JS文件 动态加载.. 最合适了- - .. 动态加载规则. 也是一门学问- -.. 我看过RIA那边同时的编辑器中....... 一点也不比我们PHP的文件少- - . 分类很清晰. 很不错的说`~~

  2. 张映 留言

    N多JS文件,要每个都熟才行,知道每个文件都是干什么用的,如果都了解的人走了,那就杯具了。做程序的跳槽很频率的,特别是刚毕业的。
    有的公司是整体规画的,感觉像一个整体,有的公司有很多模块,模块与模块间通过接口调用,整体规画不是很好,但是很灵活。这个要看架构师怎么架构了。

  3. 小七 留言

    N多jS文件的话,可以搞一个controller.js之类的核心文件,然后根据需求异步的动态加载,效果应该很不错,没试过。。