如何组织好js代码 转
2013-07-02 09:57
176 查看
张映 发表于 2011-05-03
分类目录: 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
相关文章推荐
- 应该如何在小,中,大型应用开发中组织前端js代码?
- 如何从js代码中读取传入的一个java对象的属性?
- 多个表单中如何获得这个文件上传的网址实现js代码
- 如何组织前端javascript代码
- 如何组织性能最优,拓展型最好的业务层(一)
- 如何优化js代码
- Unity3D如何有效地组织代码?
- sharepoint 2013 在office 365中 如何嵌入JS代码实现搜索功能
- PMBOK是如何组织和描述项目管理工作的?
- 深入了解Java虚拟机中字段表集合,和在class中如何组织
- 如何用eclipse编写JSP,JS代码时自动提示
- CSS布局中如何组织样式表以便于简化、维护
- webpack 打包时到底如何组织js
- [转]VisualStudio如何组织解决方案的目录结构
- 如何组织一个程序?
- IE浏览器如何调试Asp.net的 js代码
- js代码如何测试代码运行时间
- Go:如何组织代码
- 如何在ie8下调试js代码
- 如何设计活动目录组织单位