使用模块化编程库和闭包使后台JS更加规范

1、问题及方案

后台js代码规范度不好，怎么写的都有，不易维护、复用度低，我们不期全部使用backbone做到前端MVC，但使用模块化编程库做到模块化开发还是简单而有意义的。

2、为什么要模块化

时至今日，把脚本放在页面的底部，已不再是最佳的解决方案，甚至事与愿违，转化为性能的毒药。出于种种的原因，我们几乎从不直接在页面上插入js脚本，而是使用第三方的加载器，比如seajs或者requirejs。加载模块的概念，如果你是后端开发工程师，更不会陌生。Java、Python、C# 等等语言，都有 include、import 等功能。JavaScript 语言本身也有类似功能，但目前还处于草案阶段，需要等到 ES6 标准得到主流浏览器支持后才能使用。 模块化编程是十分便捷的工程管理工具，简化了代码的结构，让文件的功能变得单一易维护复用度高。更重要的是管理了文件依赖和消除了命名冲突问题，并利用 AMD / CMD 规范统一了格式。如果工具提供了异步加载，还可以避免页面停止渲染被js阻塞。参见Seajs的作者玉伯的一篇文章：
https://github.com/seajs/seajs/issues/547?utm_source=caibaojian.com

3、为什么要闭包

“Javascript的全局变量是魔鬼”。一种优雅的解决方式是闭包。配合var关键字，匿名函数可以实现有效隔离，不会造成全局变量的污染。闭包函数在不使用全局变量的情况下使变量得以保持，使父函数始终在内存中。使代码风格跟面向对象接近。把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value）（这时一定要小心，不要随便改变父函数内部变量的值）。注意：模块中如果不使用var定义变量，那么变量就是全局的。在入口、在其他模块都可以用。

4、Seajs

seajs定义了两个关键字define,require。前者定义一个模块，后者允许在模块中加载其他模块。
require 可以认为是 Sea.js 给 JavaScript 语言增加的一个 语法关键字，通过 require 可以在模块同步或者异步的获取其他模块通过 exports提供的接口（同时执行未包装的代码）。Sea.js 带来的两大好处:
1、通过 exports 暴露接口。这意味着不需要命名空间了，更不需要全局变量。这是一种彻底的命名冲突解决方案。
2、通过 require 引入依赖。这可以让依赖内置，开发者只需关心当前模块的依赖，其他事情 Sea.js 都会自动处理好。对模块开发者来说，这是一种很好的 关注度分离，能让程序员更多地享受编码的乐趣
IM工单内嵌页就是Seajs的，可以参考：
https://moirai.immomo.com/admin/q1w2e3/callcenter/v2/?action=createEmbeded&ticket_type=1&userId=303541406
seajs所能加载的模块必须是按照CMD规范，用define定义的模块，但已经有一部分流行的函数库不是CMD规范的，比如jquery。需要使用特殊的方式来加载。而且后台大部分的插件都是requirejs模块。对于非标准的模块加载，后者更有优势。
更多CMD详情
https://github.com/seajs/seajs/issues/242

5、requirejs

requirejs是AMD规范的。同seajs一样有define和require两个关键字，不同的是，由于AMD即Asynchronous Module Definition，它的require就只有异步模式。seajs使用模块中的方法要通过exports关键字。而requirejs则直接使用define回调函数的返回获取可用的方法，同样是闭包。paths多次配置，跟seajs一样是取并集的。而且模块中不用var定义的变量都是全局可见的
http://www.wpnoob.cn/a-2128.html

6、提议后台使用requirejs

针对后台业务，我用requirejs写了一个简单的架子，包含（html嵌入的代码、入口模块、业务模块。
可以从/web/html/static/a2/js/require_demo拿到。

6.1、在html页面底部嵌入以下代码（可以从/web/php/app/view/template/admin/web2/eventnearby/requirejs_demo.php中拿到）
功能主要是，配置本页面使用的模块，包括一个入口模块main，和两个处理用户行为的模块。加载main模块，然后调用main模块的render方法完成响应函数注册。调用init方法完成页面初始化。

6.2、入口模块main.js内声明本页依赖的所有模块，并提供两个方法render和init实现注册响应函数、插件初始化、页面内容初始化。

6.3、业务模块(operate.js modal.js)。除了事件响应函数，还外露出一些方法供其他插件回调使用。比如，图片上传完毕之后执行的方法。

改造了下面几个页面可供参考：
https://moirai.immomo.com/eventnearby/event/index/
https://moirai.immomo.com/eventnearby/banner/create/
https://moirai.immomo.com/tools/litemass/page/create/