最近需要架构新项目,只有偶一个前端工程师,为了项目进度,比较看好阿里Arale的生态,一些业务上base层的组件就不用重复造轮子,所以决定在新项目中使用seajs,自己将根据学习中一些好的文档和遇到的疑惑或者问题做一些笔记。 一直致力于在前端模块化上布道中,也因此在两年前开始了 modulejs 的探索,至今未停止脚步。
迈出第一步 掀起seajs的盖头来:
另一种方式:
seajs初始化时会自动去遍历查找seajs的script的data-main属性, data-main=”main” 完全等同于 seajs.use(“main”);
配置 seajs.config({ base: “” ,alias: {} ,map: {} ,preload: [] ,debug: true ,charset: ‘utf-8’ }); base 默认值为 path/to/sea.js 的中 path/to 路径
别名配置 官方文档已非常详细:https://github.com/seajs/seajs/issues/258
那些你需要知道的配置约定 别名配置 {jquery: ‘1.7.2’} 会自动被转换为 {jquery: ‘jquery/1.7.2/jquery’},如果你的目录是 jquery/x.x.x/jquery 的结构, 配置上会 看上去清爽许多,对于不了解此约定的童鞋读配置时可能会一头雾水。
这是seajs默认的处理方式,目前从配置上还不允许关闭此处理,如果的你的真实jquery文件是 以版本号 1.7.2.js 格式命名的,可能就悲剧了。
配置map避免请求缓存 避免缓存的方案是在请求上加上时间戳,现在我们让所有的请求都加上时间戳:
seajs.config({ map: [ [/^.*$/, function(url) { return url += (url.indexOf(‘?’) === -1 ? ‘?’ : ‘&’) + ‘ts=’ + new Date; }] ] }) seajs 提供一种快速配置的方式来避免缓存,原理与上面完全一致:
seajs.config({ debug : 2; });
预加载 为了让IE6/7/8 支持 ES5 的一些API,我们会引入es5-shim来修补,而在这些古老的浏览器使用ES5 API必然需要预先加载好才可以继续执行。 通过preload 配置中的空字符串会被忽略掉这一约定,我们不仅可以预加载,还可以按特征检测来智能加载的,让高级浏览量无需额外的请求es-shim:
seajs.config({ alias:{ ‘es5-shim’: ‘//cdnjs.cloudflare.com/ajax/libs/es5-shim/1.2.4/es5-shim.min’ } ,preload:[Array.isArray ? ‘’ : ‘es5-shim’] })
seajs.use(‘main’); seajs 中并不是读取到有preload配置就立即加载的,只能是通过 seajs.use 这个入口来触发执行预加载, 如上示例 seajs 会在执行 main 模块前确保 预加载完 es-shim, 其他方式都无法保证 es5-shim 模块已经加载并执行好。
被加载的库没有用 define 包装怎么办? 很多童鞋说我依赖的库是放在公共CDN上的,我没有权限去修改或添加一个符合CMD规范的版本, 如我们引用的是 google cdn 上的jquery地址: //ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js
这时该怎么办,最简单粗暴的方式是拷贝到本地然后包装上一层,但CDN的优势也就随之放弃了。
seajs 虽然没有原生支持对非CMD规范文件的支持,但通过seajs.modify 与 preload 组合可以让非CMD的文件也可以被正确的 require 到:
seajs.config({ alias:{ ‘jquery’: ‘//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min’ } ,preload:[“jquery”] })
seajs.modify(‘jquery’, function (require, exports, module) { module.exports = jQuery; });
seajs.use(‘main’); 目前在seajs中如需使用 非CMD文件 preload 配置是必不可少。
开发ing // main.js define(function(require){ var $ = require(‘jquery’); var _ = require(‘undersoce’); var qplus = require(‘qplus’);
});