您的位置:首页 > Web前端 > JavaScript

Javascript 模块化编程(对象写法)

2017-09-18 22:47 253 查看
模块化编程可以让业务的逻辑更加清楚。与其他传统编程语言不同,Javascript并没有提供原生的、有组织的引入模块方式。这里主要探讨下:基于对象的Javascript模块化编程即javascript 模块化(package.类.方法)。

传统的写法:

在一个Javascript文件中将不同的函数杂糅在一起,比如:

function m1(arg1, arg2){
//…
}
function m2(){
//…
}

这种方式“污染”了全局变量,且不能保证不发生冲突,最重要的是模块与成员间的关系不明显。

对象的写法:

将不同的模块写成不同的对象,所有模块成员放在对象里面。

var module1 = new Object({
_appId : 0,
URL:{
process1:function(){
return ‘/data/process1’;
},
process2:function(){
return ‘/data/process2’;
}
},
m1: function(){
//…
},
m2:function(params){
var appId = params[‘appId’];
var package = params[‘package’];
//…
},
m3:{
init:function(){
//initial something
},
process:function(appId, package){
//
}
}
});

分析:

下面的写法:

var module1 = new Object({
//…
})
可以简写为:

var module1 = {
//…
}


常量相关的设置:

_appId: 0,

可以将设置某些常量值,这个常量还可以用来传递el表达式的值,在jsp文件中,添加

<script type=”text/javascript”>
module1._appId = ${appId}; //这样可以将服务端的appId的值设置到js中
</script>


注意:

EL表达式${appId}只能在jsp文件中使用,不能在js文件中使用。

另一种设置常量组的方式为:

URL:{
process1:function(){
return ‘/data/process1’;
},
process2:function(){
return ‘/data/process2’;
}
},


函数中变量的传递方式有两种方式:

1)比较简单的是:

process:function(appId, package)

这里appId和package即为传递的单层值。

2)数组传递:

m2:function(params){
var appId = params[‘appId’];
var package = params[‘package’];
//…
},

调用的时候格式如下:

module1.m2({appId:10, package:’hello’})


多层对象封装:

m3:{
init:function(){
//initial something
},
process:function(appId, package){
//
}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: