前端模块化（二）：模块化编程

所谓的模块化编程就是封装细节，提供使用接口，彼此之间互不影响，每个模块都是相互独立，实现某一特定的功能。如果其他模块想调用的时候，可以暴露我们所希望对外的公开的方法与数据。

1、函数写法

function f1(){ var value=1； //...
}  function f2(){var value=2；   //...
}

这里定义了f1跟f2，每个函数相当于一个模块，f1跟f2是相互独立的，不能访问到对方里面的局部内容value；这种写法定义了全局变量f1、f2污染了全局环境会导致命名冲突（在上一篇文章提过）。

2、对象写法

var myModule= new Object({value : 0,f1 : function (){//...
　　　　},f2 : function (){//...
　　　　}
});

把函数f1()和f2(），封装在myModule对象里。使用的时候，就是调用这个对象的属性即可：myModule.f1()。这样的写法会暴露所有模块成员，内部状态可以被外部改写如：myModule.value=1 ，会改变myModule内部的属性值。同时这种办法只能一定程度上减少了命名冲突的问题，不能完全避免命名冲突。

3、立即执行函数写法

（1）匿名闭包写法　

(function () { // ...
}());

javascript中没用私有作用域的概念，根据javascript函数作用域链的特性，使用这种写法可以模仿一个私有作用域。在闭包中，可以定义私有变量和函数，外部无法访问它们，从而做到了私有成员的隐藏和隔离，俗称“匿名包裹器”或“命名空间”。

（2）全局引入写法

(function (a) { a.a3 = function () {//...
　　　};// …
}(a));

将a对象作为参数传入，在函数体内对这个对象进行操作。这样做除了保证模块的独立性，还使得模块之间的依赖关系变得明显。现在很多类库里都有这种使用方式，比如jQuery源码。

（3）模块导出写法

var myModule = (function(){var value = 0;var f1 = function(){//...
　　　　};var f2 = function(){//...
　　　　};return {value: value,f2 : f2};})();

这里，我们声明了一个全局的模块叫myModule，它包含二个属性，一个成员变量value和一个成员方法f1。除此之外，它还使用匿名函数的闭包维护了私有内部状态，我们也可以通过按需传入外部变量。

（3）扩展模式写法

var myModule = (function (a) { var value =a.value;var f1 = function(){//...
　　　　};var f2 = function(){//...
　　　　};return {value: value,f2 : f2};}(a));

这里，我们在闭包中定义私有变量和函数，外部无法访问它们，做到了私有成员的隐藏和隔离。将某对象作为参数传入，在函数体内对该对象进行操作，然后返回对象或函数。由此，可以做到把依赖项通过参数的形式注入进来在内部使用注入的属性，并且可以暴露我们所希望对外的公开的方法与数据。这就是模块化编程的基础思想。

在此思想之下，javaScript模块化编程开始盛行，大牛们开始进行各式各样的封装打包，从而产出一系列的模块化规范、模块化加载器。上面的方法中，a必须在模块myModule之前定义，如果a依赖项自身是一个大的模块，比如一个库，我们如何做到在myModule之前定义加载a，然后在myModule中成功地引用a呢？模块化加载器便能帮我们解决这个问题。

下一篇我们开始介绍模块化规范的先驱-------CommonJS规范；

转载于:https://www.cnblogs.com/huiguo/p/7967189.html

前端模块化（二）：模块化编程相关推荐

前端开发：模块化 — 高效重构
前端开发:模块化 - 高效重构说起模块化,也许我们首先想到的是编程中的模块设计,以功能块为单位进行程序设计,最后通过模块的选择和组合构成最终产品.把这种思想运用到页面构建中,也已经不是什么新鲜事. ...
对前端工程化、模块化、组件化开发的理解
参考理解一: 提到前端往往很多人的映像就是入门简单,HTML.CSS加一起一个星期基本上就能大概上手,JS难一点但也能很快写一些简单的小效果,在网上随便一搜索各种特效代码随意用,一个新手前端也能在很短 ...
ES6模块化与异步编程高级用法
ES6模块化与异步编程高级用法一.学习目标能够知道如何使用ES6的模块化语法能够知道如何使用Promise解决回调地域的问题能够知道如何使用async/await 简化Promise的调用能 ...
es6模块化和异步编程高级用法
es6模块化和异步编程高级用法 node.js 遵循了 CommonJS 的模块化规范.其中: ⚫ 导入其它模块使用 require() 方法 ⚫ 模块对外共享成员使用 module.exports ...
编程思想-模块化-产品模块化设计：产品模块化设计
ylbtech-编程思想-模块化-产品模块化设计:产品模块化设计产品模块化设计就是将产品分成几个部分,也就是几个模块,每一部分都是具有独立功能,具有一致的几何连接接口和一致的输入.输出接口的单元,相 ...
什么是模块化？模块化怎么实现？
什么是模块化?模块化怎么实现? 前言 : 增加印象,留下脚印 ,忘记还可以翻一翻奥利给. 1,什么是模块化公司里一个项目是有很多程序员一起开发的,例如 "多人运动" 这个项目 ...
JavaScript：模块化及模块化规范
什么是JavaScript的模块化?模块化模块化,那就是先有模块,模块是什么?模块就是将一个复杂的程序按照一定的规则拆分并单独封装成一个块或者文件,每一个块内都有自己的内部数据和方法,并且会向外暴露一 ...
什么是模块化，模块化开发如何实现？
相信广大前端朋友们都遇到过这么一个问题? 什么是模块化,模块化开发如何实现? 那么什么是模块化呢,时下流行的库与框架又有哪些在利用模块化进行开发呢? 今天我从以下两个方向来进行描述,如果描述不够准确 ...
模块化：模块化的基本概念
什么是模块化模块化是指解决一个复杂问题时,自顶向下逐层把系统划分成若干模块的过程.对于整个系统来说,模块是可组合.分解和更换的单元. 1. 现实生活中的模块化 2. 编程领域中的模块化编程领域中的 ...
国二c语言改错题答案,c语言国二考试编程题答案
<c语言国二考试编程题答案>由会员分享,可在线阅读,更多相关<c语言国二考试编程题答案(65页珍藏版)>请在人人文库网上搜索. 1.1m个人的成绩存放在score数组中,请编写 ...

前端模块化（二）：模块化编程

前端模块化（二）：模块化编程相关推荐

最新文章

热门文章