js的模块化写法
记得前两天自己写一个动画首页,动画很复杂,我用的fullpage虽然相对比较简单,但是每个页面的animation各有差异,需要相对控制,估计有上千行的js代码,写的心情乱糟糟的。
如何让代码量巨大,而且可以方便的管理,不会出现命名的冲突,代码结构乱七八糟问题,让代码设计结构清晰明了,这是一个巨大的需求
其实这就是一个需求分析和解决方案实施的过程。
function m1(){ //... } function m2(){ //... }
一般人没有什么面向对象和模块化的概念会这么去写。确实js的面向对象不会像java一样明了,除了难以管理就是命名冲突的问题了。
var module1 = new Object({ _count : 0, m1 : function (){ //... }, m2 : function (){ //... } });
把方法封装成对象的方法,这样就可以相当于给函数方法名加个前缀一样,但是麻烦是代码依然会暴露大量的变量,设计代码应该尽量让代码不必要暴露的变量封起来。
于是有人发明了这种写法,执行和上一个对象写法一样,也可以少暴露变量了,这样就是面向对象模块化的基本写法了,但是还要改进的
(function(){
var _count = 0; var module1 = function(){ var m1 = function(){ //... }; var m2 = function(){ //... }; return { m1 : m1, m2 : m2 }; }; window.module1 = module1() })()
这种方法是闭包的写法,可以把大量的代码写在闭包里,最后用添加到window属性当中,就暴露出去只有自己想暴露的方法了,这样代码的书写余地也更大了。
var module2 = (function (mod){ mod.m3 = function () { //... }; return mod; })(module1);
这段代码的意义是实现继承,传入modele,添加新的方法,然后返回,便得到一个新的对象,这个对象有了新的参数
模块的规范
先想一想,为什么模块很重要?
因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块。
但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有你的写法,我有我的写法,岂不是乱了套!考虑到Javascript模块现在还没有官方规范,这一点就更重要了。
目前,通行的Javascript模块规范共有两种:CommonJS和AMD。我主要介绍AMD,但是要先从CommonJS讲起。
var math = require('math'); math.add(2,3); // 5
commonJs是这么做的,require相当于load就是加在math.js,然后调用,这是用在服务器端的,但是客户端怎么办,客户端需要异步加载
所以出现了AMD
require(['math'], function (math) { math.add(2, 3); });
通过回掉的方式异步加载。
目前,主要有两个Javascript库实现了AMD规范:require.js和curl.js