seajs 使用点滴

JavaScript 作为脚本语言，本身很精简，发明之初根本没考虑什么模块的情况。于是，今天讨论的模块化就来解决 JavaScript 中依赖、冲突甚至代码如何封装的问题的。

加载模块：

seajs.use()

与同步加载 require() 对应的，另外一种是异步的 require.async()。

创建一个模块：

/* 
    带参数的seaJs模块化 
    正确写法 
*/  
define(function(require, exports, module) {  
    function tab () {  
        alert(123)  
    }  
});  

防止冲突：

引入中间件 middleware.js:

define(function(require, exports, module) {
	var provide= {};
	exports.provide = function(id, obj){
		provide[id] = obj;
	}
	exports.get = function(id){
		return provide[id];
	}
});

其他：

兼容 Common 的情况，在 nodejs 中不引入 seajs，但提供 define() 的实现以防报错：

// Hook into commonJS module systems
if (typeof module !== 'undefined' && "exports" in module) {
  var define = function (fn){
    fn(null, exports, module);
  }
}

压缩 & 混淆代码

安装Uglify-js：

npm install uglify-js -g

压缩：

uglifyjs inet.js -o inet-min.js

混淆：

uglifyjs inet.js -m -o inet.min.js

批处理压缩某个目录。首先，复制多一份文件夹，然后修改 BAT 里面的 JSFOLDER：

@echo off
:: 设置压缩JS文件的根目录，脚本会自动按树层次查找和压缩所有的JS
SET JSFOLDER=C:\temp\src
echo 正在查找JS文件
chdir /d %JSFOLDER%
for /r . %%a in (*.js) do (
    @echo 正在压缩 %%~a ...
    uglifyjs %%~fa -o %%~fa --source-map=%%~fa.map --source-map-url=%%~na.js.map --source-map-root=http://localhost/bigfoot/src --prefix=2
)
echo 完成!
pause & exit
cd..

记住不要在当前 src 文件夹下，该批处理会覆盖 src！

其中参数解释如下：

• --source-map 是 map 文件所保存的物理位置，一般保存在同一目录。“%%~fa” 是 DOS 批处理的特殊变量，其中 f 表示完整的磁盘路径，a 则是变量名；
• --source-map-url 是告诉浏览器欲还原 js 的信息，定义在压缩后的 js 文件最后一行。“%%~na” 是 DOS 批处理的特殊变量，其中 n 表示仅读取文件名，a 则是变量名；
• --source-map-root 是 map 文件的根目录，一般定义在 map 文件最后出。该值决定了未压缩前的 js 文件的目录。一般来说，该值应指向开发机器的，放在线上也可以，但这样等于暴露了你辛辛苦苦所写的 js。
• --source-map-root 与 map 文件里的 source [] 构成了未压缩前的 js 的最终位置。故所以 --prefix 参数是消除目录前缀的。这些前缀一般是开发机器上的虚拟目录呀、批处理的文件目录呀，跟线上的最终目录要作一个转换。--prefix=2 是消除前面两级的目录。关于 -prefix 参数， uglify 有个 win32 的bug，详细如下：
  

Windows 用户请注意！！！

uglify-js（我当前版本 v2.4.15）只能识别 linux 系统文件分隔符 “/”，不能识别 Win32 的“\”，所以当你传入 -p/-perfix int 参数时，无效！ soures 输出为 ["?"]，

解决办法就是修改接收参数之源码，也是一份 js 来的，在

C:\Users\你用户名目录\AppData\Roaming\npm\node_modules\uglify-js\bin\uglifyjs

第 257 行，修改为：

// replace 删除开头的 分隔符
file = file.replace(/^(\\|\/)+/, "").split(/\/+|\\+/).slice(ARGS.p).join("/");

才可识别 Window 的分隔符。

参考：http://www.zhangxinxu.com/wordpress/2013/01/uglifyjs-compress-js/