JavaScript之模块化编程(一)
来源:互联网 发布:java视频模糊 编辑:程序博客网 时间:2024/05/07 18:35
一、原始写法
模块就是实现特定功能的一组方法。
只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块。
function m1(){//TODO}function m2(){//TODO}上面的函数m1()和m2(),组成一个模块。使用的时候,直接调用就行了。
缺点:污染了全局变量,无法保证不与其他模块发生变量名冲突,而且模块成员之间看不出直接关系。
二、对象写法
为了解决上面的问题,可以把模块写成一个对象,所有的模块成员都放在这个对象里面。
var module1 = new Object({_count: 0,m1: function(){//TODO},m2: function(){//TODO}});上面的函数m1()和m2(),都封装在module1对象里。使用的时候,就是调用这个对象的属性。
module1.m1();
但是,这样写会暴露所有的模块成员,内部状态可以被外部改写。
比如,外部代码可以直接改变内部计数器的值。
module1._count = 5;
三、立即执行函数(Immediately-Invoked Function Expression,IIFE)写法
这种写法可以达到不暴露私有成员的目的。
var module1 = (function(){var _count = 0;var m1 = function(){//TODO};var m2 = function(){//TODO};return {m1: m1,m2: m2};})();使用上面的写法,外部代码无法读取内部的_count变量。
console.info(module1._count);//undefined
四、放大模式
如果一个模块很大,必须分成几个部分,或者一个模块需要继承另一个模块,这时就有必要采用“放大模式”。
var module1 = (function (mod){mod.m3 = function(){//TODO};return mod;})(module1);上面的代码为module1模块添加了一个新方法m3(),然后返回新的module1模块。
五、宽放大模式
在浏览器环境中,模块的各个部分通常都是从网上获取的,有时无法知道哪个部分会先加载。如果采用上面的写法,第一个执行的部分有可能加载一个不存在的空对象,这时就要采用“宽放大模式”。
var module1 = (function (mod){//...return mod;})(window.module1 || {});与“放大模式”相比,“宽放大模式”就是“立即执行函数”的参数可以是空对象。
六、输入全局变量
独立性是模块的重要特点,模块内部最好不与程序的其他部分直接交互。
为了在模块内部调用全局变量,必须显式地将其他变量输入模块。
var module1 = (function ($, YAHOO){//...})(jQuery, YAHOO);上面的module1模块需要使用jQuery库和YUI库,就把这两个库(其实是两个模块)当做参数输入module1。这样做除了保证模块的独立性,还使得模块之间的依赖关系变得明显。
转载自:阮一峰的网络日志
0 0
- JavaScript之模块化编程(一)
- Javascript模块化编程(一)
- Javascript模块化编程(一)
- JavaScript 模块化编程 一
- javascript模块化编程一
- javascript模块化编程一
- Javascript模块化编程(一)
- JavaScript之模块化编程
- JavaScript之模块化编程
- JavaScript之模块化编程
- JavaScript之模块化编程
- Javascript模块化编程(一):JS模块化的演变过程
- Javascript模块化编程(一):模块…
- JavaScript之模块化编程(二)
- javascript模块化编程三(requirejs入门补充一):模块化编程
- Javascript模块化编程(一):模块的写法
- Javascript模块化编程(一):模块的写法[requird]
- Javascript模块化编程(一):模块的写法
- Zookeeper(1)-Zookeeper是什么
- IT职场,技能比情商重要N倍
- 背包问题---非递归算法
- Android快速关联V4包的方式
- 安卓仿淘宝头条数据上下自动滚动
- JavaScript之模块化编程(一)
- java中的package/import概念
- 大牛养成指南(1):吃的草够多,你也能成为大牛
- QTP10.0安装破解图解
- C++文件读写详解(ofstream,ifstream,fstream)
- UML—交互图(序列图、协作图)
- 一点资讯后端方向工程师笔试题第二批
- HTML转义字符
- 关于#!/bin/bash和#!/bin/sh