js的模块化写法

Posted 2020-08-30 白与小寒

记得前两天自己写一个动画首页，动画很复杂，我用的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