js 的模块化的几种用法和方式
来源:互联网 发布:超图软件不动产 编辑:程序博客网 时间:2024/06/15 20:44
<script type="text/javascript">
// 在JavaScript里最令人懊恼的事情是变量没有使用范围。任何变量,函数,数组,对象,只要不在函数内部,都被认为是全局的,这就是说,这个页面上的其它脚本也可以访问它,而且可以覆盖重写它。
// 解决办法是,把你的变量放在一个匿名函数内部,定义完之后立即调用它。例如,下面的写法将会产生三个全局变量和两个全局函数:
var name = 'Chris';
var age = '34';
var status = 'single';
function createMember(){
}
function getMemberDetails(){
}
//如果这个页面上的其它脚本里也存在一个叫 status 的变量,麻烦就会出现。如果我们把它们封装在一个 myApplication 里,这个问题就迎刃而解了:
var myApplication=function(){
var name = 'Chris';
var age = '34';
var status = 'single';
function getage(){
return age;
}
function getname(){
return name;
}
}();
//但是,这样一来,在函数外面就没有什么功能了。如果这是你需要的,那就可以了。你还可以省去函数的名称
(function(){
var name = 'Chris';
var age = '34';
var status = 'single';
function getage(){
return age;
}
function getname(){
return name;
}
})();
//如果你想在函数外面也能使用里面的东西,那就要做些修改。为了能访问 getage() 或 getage(),你需要把它们变成 myApplication的属性,从而把它们暴露于外部的世界:*******
// 三种方式种方式
var myf=function(){
var name = 'Chris';
var age = '34';
var status = 'single';
return {getage: function (){
return age;
},
getname:function (){
return name;
}
};
}();
// alert( myf.getage()+"*"+ myf.getname());
var myft= function(){
var name = 'Chris';
var age = '34';
var status = 'single';
function getage(){
return age;
}
function getname(){
return name;
}
return {geta:getage,getn:getname};
}();
// alert( myft.geta()+"*"+ myft.getn());
//对象的方式
var myfd={
name:'Chris',
age:'34',
status:'single',
getage:function(){ return age;},
getname:function(){ return name;}
};
// alert( myfd.getage()+"**"+ myfd.getname());
//带默认参数的
var $=(function(a,b){
return {
geta:function(s){return a+s;},
getb:function(){return b;}
}
})(1,2);
alert($.geta(8));
//不带默认参数的带默认参数的
var $=(function(a,b){
var n=3;
return {
geta:function(s){return a+s;},
getb:function(){return b+n;}
}
});
alert($(2,3).geta(8));
alert($(2,3).getb(8));
</script>
// 在JavaScript里最令人懊恼的事情是变量没有使用范围。任何变量,函数,数组,对象,只要不在函数内部,都被认为是全局的,这就是说,这个页面上的其它脚本也可以访问它,而且可以覆盖重写它。
// 解决办法是,把你的变量放在一个匿名函数内部,定义完之后立即调用它。例如,下面的写法将会产生三个全局变量和两个全局函数:
var name = 'Chris';
var age = '34';
var status = 'single';
function createMember(){
}
function getMemberDetails(){
}
//如果这个页面上的其它脚本里也存在一个叫 status 的变量,麻烦就会出现。如果我们把它们封装在一个 myApplication 里,这个问题就迎刃而解了:
var myApplication=function(){
var name = 'Chris';
var age = '34';
var status = 'single';
function getage(){
return age;
}
function getname(){
return name;
}
}();
//但是,这样一来,在函数外面就没有什么功能了。如果这是你需要的,那就可以了。你还可以省去函数的名称
(function(){
var name = 'Chris';
var age = '34';
var status = 'single';
function getage(){
return age;
}
function getname(){
return name;
}
})();
//如果你想在函数外面也能使用里面的东西,那就要做些修改。为了能访问 getage() 或 getage(),你需要把它们变成 myApplication的属性,从而把它们暴露于外部的世界:*******
// 三种方式种方式
var myf=function(){
var name = 'Chris';
var age = '34';
var status = 'single';
return {getage: function (){
return age;
},
getname:function (){
return name;
}
};
}();
// alert( myf.getage()+"*"+ myf.getname());
var myft= function(){
var name = 'Chris';
var age = '34';
var status = 'single';
function getage(){
return age;
}
function getname(){
return name;
}
return {geta:getage,getn:getname};
}();
// alert( myft.geta()+"*"+ myft.getn());
//对象的方式
var myfd={
name:'Chris',
age:'34',
status:'single',
getage:function(){ return age;},
getname:function(){ return name;}
};
// alert( myfd.getage()+"**"+ myfd.getname());
//带默认参数的
var $=(function(a,b){
return {
geta:function(s){return a+s;},
getb:function(){return b;}
}
})(1,2);
alert($.geta(8));
//不带默认参数的带默认参数的
var $=(function(a,b){
var n=3;
return {
geta:function(s){return a+s;},
getb:function(){return b+n;}
}
});
alert($(2,3).geta(8));
alert($(2,3).getb(8));
</script>
0 0
- js 的模块化的几种用法和方式
- Javascript模块化编程:require.js的用法
- Javascript模块化编程:require.js的用法
- Javascript模块化编程:require.js的用法
- Javascript模块化编程:require.js的用法
- JS模块化工具requirejs的基本用法
- Javascript模块化编程:require.js的用法
- require.js的用法(模块化编程)
- Javascript模块化编程require.js的用法
- Javascript模块化编程:require.js的用法
- js创建对象的几种方式和函数说明
- JS创建类和对象的几种方式总结
- Js输出消息的几种方式和转义字符
- js中创建对象和继承的几种方式
- JS页面跳转和刷新的几种方式
- JS模块化编程之require.js的用法
- js类编写的几种方式
- JS 创建对象的几种方式
- ZOJ 3818 Pretty Poem
- boost在linux下编译
- c中scanf与gets区别
- 使用wxPython开发一个简单GUI应用
- HDOJ 题目1150 Machine Schedule(二分图最小点覆盖)
- js 的模块化的几种用法和方式
- Windows Phone Toolkit-- DatePicker
- IOS valid architectures
- 左外连接、右外连接、内连接、全连接
- radio 选中值判断
- mysql不是内部或外部命令,也不是可运行的程序或批处理文件
- Struts+Spring+Hibernate开发实例
- FindFirstChangeNotification
- C++反射机制