javaScript模块化一
1. Module模式的基本特性
A) 模块化 可重用
B) 封装了变量和function 和全局的namespace不接触 松耦合。
C) 只暴露可用public的方法 其他私有方法全部隐藏
2. 匿名闭包
匿名闭包是让一切成为可能的基础,而这也是JavaScript最好的特性,我们来创建一个最简单的闭包函数,函数内部的代码一直存在于闭包内,在整个运行周期内,该闭包都保证了内部的代码处于私有状态。
(function(){
//所有的变量和function 都在这里声明 并且作用域也只能在这个匿名闭包里 但是这里的依然可用访问全局的对象
})();
3. 引用全局变量
JavaScript 有一个特性叫隐式全局变量。不管变量有没有用过 JavaScript解释器反向遍历作用域链来查找整个变量的var声明。如果没有找到var。解释器则假定。该全局变量是全局变量。好在匿名函数里我们可以提供一个比较简单的替代方案 我们可以将全局变量当成一个参数传到匿名函数然后使用 相比隐式全局变量 它清晰又快。
(function($,document){
//这里我们就可以使用全局jQuery对象了。
})(jQuery,document);
但是有的时候我们也想声明全局变量 如何做呢? 我们可以通过匿名函数的返回值来返回这个全局对象。这也就是一个基本的Module模式
上面的代码声明了一个全局变量blogModule,并且带有两个可访问的属性:blogModule.AddTopic和blogModule.Name;除此之外 其他代码都在匿名函数的闭包里保持着私有状态。同时根据上面传入的全局变量的例子 我们可以很方便的传入其他的全局变量。
4. 高级用法
扩展 Module模式的一个限制就是所有的代码都要在一个文件 但是在一些大型的项目里。将一个功能分离成多个文件是很重要的。之前的那个例子我们能否把bolgModule自己传进去。 我们先将blogModule传进去 添加一个函数属性。 然后再返回就达到我们所说的目的。
松耦合扩展。
尽管上面的代码可以执行 但是必须先声明blogModule 然后再执行上面的扩展代码。就是说步骤不能乱。 怎么解决这个问题呢。
我们平常这样声明变量的:
var cnblog = cnblog || {}; //存在的时候直接用 不存在的时候直接赋值{}。
var blogModule = (function(my){
//添加一些功能
return my;
})(blogModule || {});
这样子 每个单独分离的文件都能保证这个结构 那么我们就可以直接实现任意顺序的加载 所以这个时候var就是必须要声明的。
紧耦合扩展
虽然松耦合扩展很牛叉了,但是可能也会存在一些限制,比如你没办法重写你的一些属性或者函数,也不能在初始化的时候就是用Module的属性。紧耦合扩展限制了加载顺序,但是提供了我们重载的机会。
5. 克隆与继承
6. 跨文件共享私有对象
过上面的例子,我们知道,如果一个module分割到多个文件的话,每个文件需要保证一样的结构,也就是说每个文件匿名函数里的私有对象都不能交叉访问,那如果我们非要使用,那怎么办呢?
javaScript模块化一的更多相关文章
- Javascript模块化编程(三):require.js的用法
Javascript模块化编程(三):require.js的用法 原文地址:http://www.ruanyifeng.com/blog/2012/11/require_js.html 作者: 阮一峰 ...
- Javascript模块化编程(二):AMD规范
Javascript模块化编程(二):AMD规范 作者: 阮一峰 原文地址:http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_d ...
- Javascript模块化编程(一):模块的写法
Javascript模块化编程(一):模块的写法 作者: 阮一峰 原文链接:http://www.ruanyifeng.com/blog/2012/10/javascript_module.html ...
- Javascript模块化编程(二):AMD规范(转)
这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. (接上文) 七.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要 ...
- Javascript模块化编程(一):模块的写法(转)
随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂. 网页越来越像桌面程序,需要一个团队分工协作.进度管理.单元测试等等......开发者 ...
- Javascript模块化规范
Javascript模块化规范 一.前端js模块化由来与演变 CommonJS 原来叫 ServerJS,推出 Modules/1.0 规范后,在 Node.js 等环境下取得了很不错的实践.09年下 ...
- Javascript模块化开发,使用模块化脚本加载工具RequireJS,提高你代码的速度和质量。
随着前端JavaScript代码越来越重,如何组织JavaScript代码变得非常重要,好的组织方式,可以让别人和自己很好的理解代码,也便于维护和测试.模块化是一种非常好的代码组织方式,本文试着对Ja ...
- Javascript 模块化开发上线解决方案
最近又换部门了,好频繁地说...于是把这段时间搞的小工具们简单整理了一下,作了一个小的总结.这次用一个简单业务demo来向大家介绍一下Javascript模块化开发的方式和自动化合并压缩的一些自己的处 ...
- Javascript模块化编程(二):AMD规范 作者: 阮一峰
声明:转载自阮一峰的网络日志 这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. (接上文) 七.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可 ...
- Javascript模块化编程(一):模块的写法 作者: 阮一峰
声明:转载自阮一峰的网络日志 随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂. 网页越来越像桌面程序,需要一个团队分工协作.进度管理. ...
随机推荐
- DNS负载均衡
1)DNS负载均衡的介绍 对于负载均衡的一个典型应用就是DNS负载均衡.庞大的网络地址和网络域名绝对是负载均衡体现优势的地方.那么它的具体原理是如何的呢?本文就将为大家详细介绍一下相关内容. DNS负 ...
- win7下如何执行批处理文件
经过了一段时间的适应之后,某C也基本摸透了Win7的习性,然后突然发现无聊,就上了VeryCD去下载几个游戏玩.R大是电驴游戏版块的大神,某C怀着崇敬的心情,每每都追寻着他的足迹下载游戏.这次正好下载 ...
- angularjs中的绑定策略“@”,“=”,“&”实例
<!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <me ...
- 自己动手写框架——IoC的实现
先看看 IoC百度百科 优化过程 namespace Test { class Program { static void Main(string[] args) { //场景 某公司客服要回访一些客 ...
- ECSTORE 关于前台页面DIALOG的调用
在需调用dialog的html页面中插入本段代码. link='<{link app=test ctl=site_test act=abc}>'; var dialog = new Dia ...
- getAttribute:取得属性; setAttribute:设置属性。
input.setAttribute("title"); 当它是一个值,就是取值. input.setAttribute("title", "hell ...
- sitecore(key\value\language)的灵活应用
1.当我们在做网站的时候是否会因为一个页面的文字变动来回改变.这样的麻烦sitecore都帮我们解决了. 2.sitecore分类key和value和语言几个维度.不同的key会因为不同的语言显示不同 ...
- java注解实例-反射生成sql
定义描述用户表的注解: package dao; import java.lang.annotation.ElementType; import java.lang.annotation.Retent ...
- 宏定义 button 方法 --备
定义 #define BARBUTTON(TITLE, SELECTOR) [[[UIBarButtonItem alloc] initWithTitle:TITLE style:UIBarButto ...
- Altium Designer多图纸原理图设计方法探讨
1 图纸结构 包括层次式图纸的连接关系是纵向的,也就是某一层次的图纸只能和相邻的上级或下级有关系,另一种即扁平式图纸的连接关系是横向的,任何两张图纸之间都可以建立信号连接. 2 网络连接方式 Alti ...