JavaScript的匿名函数和模块化的使用方法

对于开发人员来说,很多时候我们都会涉及到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 createMember(){
// [...]
}
function getMemberDetails(){
// [...]
}
}();
但是,这样一来,在函数外面就没有什么功能了。如果这是你需要的,那就可以了。你还可以省去函数的名称:
(function(){
var name = 'Chris';
var age = '34';
var status = 'single';
function createMember(){
// [...]
}
function getMemberDetails(){
// [...]
}
})();
如果你想在函数外面也能使用里面的东西,那就要做些修改。为了能访问 createMember() 或 getMemberDetails(),你需要把它们变成 myApplication的属性,从而把它们暴露于外部的世界:
var myApplication = function(){
var name = 'Chris';
var age = '34';
var status = 'single';
return{
createMember:function(){
// [...]
},
getMemberDetails:function(){
// [...]
}
}
}();
// myApplication.createMember() and
// myApplication.getMemberDetails() now works.
这被称作 module 模式或 singleton。但这样一来需要改变句式来使函数和变量能被外界访问甚至还需要加上myApplication 这个前缀。者貌似把简单东西复杂化了,很多开发人员并不喜欢这样做,而是更愿意简单的把需要能被外界访问的元素的指针导出来。这样做后,反倒简化了外界调用的写法:
var myApplication = function(){
var name = 'Chris';
var age = '34';
var status = 'single';
function createMember(){
// [...]
}
function getMemberDetails(){
// [...]
}
return{
create:createMember,
get:getMemberDetails
}
}();
//myApplication.get() and myApplication.create() now work.
以上就是JavaScript开发中,匿名函数和模块化的使用,算是脚本变量使用的一种小技巧,希望能对你在脚本的代码的开发中有所帮助。
JavaScript的匿名函数和模块化的使用方法的更多相关文章
- JavaScript封装一个函数效果类似内置方法concat()
JavaScript封装一个函数效果类似内置方法concat() 首先回忆concat()的作用: concat() 方法用于连接两个或多个数组.该方法不会改变现有的数组,而仅仅会返回被连接数组的一个 ...
- javascript 匿名函数和模块化
任何变量,函数,数组,对象,只要不在函数内部,都被认为是全局的,这就是说,这个页面上的其它脚本也可以访问它,而且可以覆盖重写它. 解决办法是,把你的变量放在一个匿名函数内部,定义完之后立即调用它.封装 ...
- javascript立即执行函数与模块化
概念:立即执行函数顾名思义就是函数定义好之后立即执行.函数表达式方式:函数表达式后面加括号()即可立即执行函数. var xmlhttpUtil = function () { function ge ...
- Javascript之匿名函数
分析: 1.所谓匿名函数,从字面意思理解,就是没有名字的函数,js 用()来代替(注意,是英文状态下的括号) 2.定义形式: function (){ //to add codes that you ...
- javascript 利用匿名函数对象给你异步回调方法传参数
先来创建一个匿名函数对象: /*** * 匿名函数 */ var callChangeBtn=new function(bugBtn){ this.chage=function(json){ bugB ...
- Javascript的匿名函数与自执行
1.匿名函数 函数是JavaScript中最灵活的一种对象,这里只是讲解其匿名函数的用途.匿名函数:就是没有函数名的函数. 1.1 函数的定义,首先简单介绍一下函数的定义,大致可分为三种方式 第一种: ...
- Javascript的匿名函数
一.什么是匿名函数?在Javascript定义一个函数一般有如下三种方式:函数关键字(function)语句:function fnMethodName(x){alert(x);}函数字面量(Func ...
- JavaScript 作用域 匿名函数 模仿块级作用域(私有作用域)
作用域 对于有块级作用域的语言来说,for语句中定义并初始化的变量i在循环外是无法访问的. 而javascript没有块级作用域,for语句中定义的变量i在循环结束后,依旧会存在于循环外部的执行环境( ...
- javascript . 04 匿名函数、递归、回调函数、对象、基于对象的javascript、状态和行为、New、This、构造函数/自定义对象、属性绑定、进制转换
匿名函数: 没有名字的函数,函数整体加小括号不报错, 函数调用 : a:直接调用 (function (){函数体}) ( ) ; b:事件绑定 document.onlick = functio ...
随机推荐
- UITapGestureRecognizer 的用法
最近在项目中用到了手势操作,键盘回收时还是挺常用的,现在总结下,多谢网络上大神们的分享. 先分享下我在项目中用的代码: UITapGestureRecognizer * mytap=[[UITapGe ...
- ZK框架的分析与应用
前言:本文是在下的在学习ZK官方文档时整理出来的初稿.本来里面有很多的效果图片和图片代码的.奈何博客园中图片不能粘贴上去,所以感兴趣的筒子们就将就吧.内容中,如有不好的地方,欢迎斧正! ZK框架的分析 ...
- 转: Ubuntu 安装字体方法
命令安装: 以微软雅黑字体为例(其他的宋体.黑体等点阵字体都一样的),我们的雅黑字体文件是:Yahei.ttf(放在自己的主目录下)(在widows目录的Fonts目录下找需要的字体)由于我是双系 ...
- [ActionScript 3.0] AS3.0 本机鼠标指针
Flash Player 10.2添加了内置的本机鼠标指针(native mouse cursor)支持,虽然在之前的版本里我们可以侦听MouseEvent事件来模拟鼠标指针,但是在有了原生的本机鼠标 ...
- PS 的参考线
新建参考线 菜单:"视图-新建参考线", 直接输入想要位置的参考线. 参考线对齐 按住Shift键拉辅助线,辅助线会自动对齐到当前标尺的刻度上. 按住Alt ...
- jQuery:find()及children()的区别
1:children及find方法都用是用来获得element的子elements的,两者都不会返回 text node,就像大多数的jQuery方法一样. 2:children方法获得的仅仅是元素一 ...
- Hbase基础操作
$HBASE_HOME/bin/hbase org.apache.hadoop.hbase.mapreduce.RowCounter 'tablename'
- Spring的java.lang.IndexOutOfBoundsException: Remember that ordinal parameters are 1-based!异常处理方法
使用Spring提供的模板类HibernateDaoSupport,如果单纯的使用'命名参数'的形式编写HQL语句如: public class UserDaoImpl extends Hiberna ...
- Grunt 之 使用 JavaScript 语法检查工具 jshint
前端开发环境准备好了,我们准备开始进行开发. 前端开发的主力语言是 JavaScript,这是一种脚本语言,没有编译器,也就没有了编译器带给我们的语法检查,怎样保证代码的质量呢?jshint 是一个强 ...
- android menu 开发
menu 分类: 选项菜单(OptionsMenu) 上下文菜单(ContextMenu) 子菜单(SubMenu) 弹出菜单(Popup) 首先说 选项菜单(OptionsMenu) 一.方法介 ...