展谊lero
前言：阅读该文章之前，需要有肯定的js基础。
随着应使用的规模越来越庞大，嵌入网页的Js代码越来越庞大，越来越复杂。假如任由其发展，那么就会像下图所示。后期添加一个功可以，对应使用来的维护性来说将是指数级别的递增。
程序开发者不得不用软件工程的方法，管理网页的业务逻辑。Js的板块化，封装化已经成为了一个迫切的需求。
一． 基础写法
封装是一种思想，它把特定的功可以封装成一组方法。
只需把不同的函数以及变量简单地放在一起，就算是一个封装了的功可以。
上面的函数zhanyisc1()和zhanyisc2()，组成一个板块。用的时候，直接调使用就行了。
这种做法的缺点很显著：”污染”了全局变量，无法保证不与其余板块发生变量名冲突，而且板块成员之间看不出直接关系。
二． 对象写法
为理解决上面的缺点，能把板块写成一个对象，所有的板块成员都封装放到这个对象里面。
上面的函数zhanyisc1()和zhanyisc2()，都封装在module对象里。用的时候，就是调使用这个对象的属性。
例如调使用函数zhanyisc1的写法：
但是，这样的写法会暴露所有板块成员，内部状态能被外部改写。比方，外部代码能直接改变内部计数器的值。
三． 立即执行函数写法
用”立即执行函数”（Immediately-Invoked Function Expression，IIFE），能达到不暴露私有成员的目的。
上面的写法无法直接从外部获取count变量，上面的封装就是js的常使用封装方法。
四． 放大模式写法
假如一个板块很大，必需分成几个部分，或者者一个板块需要继承另一个板块，这时就有必要采使用”放大模式”（augmentation）。
上面的代码为module板块增加了一个新方法zhanyisc3()，而后返回新的module板块。
五． 宽放大模式
在浏览器环境中，板块的各个部分通常都是从网上获取的，有时无法知道哪个部分会先加载。假如采使用上一节的写法，第一个执行的部分有可可以加载一个不存在空对象，这时就要采使用”宽放大模式”。
与”放大模式”相比，＂宽放大模式＂就是”立即执行函数”的参数能是空对象。
六． 输入全局变量写法
独立性是板块的重要特点，板块内部最好不与程序的其余部分直接交互。
为了在板块内部调使用全局变量，必需显式地将其余变量输入板块。
上面的module板块需要用jQuery库，就把该库当作参数输入module。这样做除了保证板块的独立性，还使得板块之间的依赖关系变得显著。上面详情的是一个js文件内部的封装过程。
但是假如一个应使用中一个页面需要加载很多个js文件，常见的写法如下：
这样的写法有很大的缺点。首先，加载的时候，浏览器会中止网页渲染，加载文件越多，网页失去响应的时间就会越长；其次，因为js文件之间存在依赖关系，因而必需严格保证加载顺序（比方上例的1.js要在2.js的前面），依赖性最大的板块肯定要放到最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。
有没有办法来处理上面所提到的问题呢？答案是有的，这就是多个js协作工作的问题，请接着往下看。
七． 板块化规范
俗话说没有规矩不成方圆，板块化没有规范，每个人都按照自己的想法来写，对别人了解起来就很费时费力，不利于沟通传播和学习。因而js就制定了这样一个规范，使用于板块的加载，别人想要什么，按照规范来加载用就好了。
目前，通行的js板块规范有CommonJS和AMD。下面就来说说这两种加载方式。
八． CommonJS
在CommonJS规范中，有一个全局性方法require()，使用于加载板块。假定有一个板块hello.js，即可以像下面这样加载。
上面的伪代码中，必需等hello.js加载完成。才可以调使用该板块的方法，也就是说，假如加载时间很长，整个应使用就会停在那里等。
这个重大的局限，使得CommonJS规范不适使用于浏览器环境，假如网速很慢，加载js的等待时间过长，浏览器处于”假死”状态。
因而，浏览器端的板块，不可以采使用”同步加载”（synchronous），只可以采使用”异步加载”（asynchronous）。这也是AMD规范诞生的背景。
九． AMD
AMD是”Asynchronous Module Definition”的缩写，意思就是”异步板块定义”。它采使用异步方式加载板块，板块的加载不影响它后面语句的运行。所有依赖这个板块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。
AMD也采使用require()语句加载板块，但是不同于CommonJS，它要求两个参数如下所示：
将上面的方法改为AMD方式异步加载写法如下：
它更适合浏览器环境。
上面提到了AMD加载其余板块，那么所谓的其余板块如hello.js这样的独立的js文件在AMD规范中该如何写呢？
这里也要用定义的规范函数来定义它就是define()函数。如下hello.js的定义为：
假如这个hello.js板块还依赖其余板块，那么define()函数的第一个参数，必需是一个数组，指明该板块的依赖性。
至此一步一步封装js到这里就告一段落啦。喜欢的小伙伴，记得点个关注哦！
