转载

好好的用好seajs吧！

页面加载时，渲染节点同时会执行script块内的JS和外部加载的无包装JS，这两种JS的安全执行，要保证涉及到的相关节点已被渲染到页面；所以外部JS要想安全的早于DOMReady执行，要放在页面底部；所以全部JS放到底部最好，不使用DOMReady也能最早执行；

对于外部加载的有包装的JS，包括ready内的，seajs模块内的，onload内的，执行顺序依次为：ready早于seajs早于onload；

有种情况是 ready 在 seajs 里：

define(function(require,exports,module){ var $=require(‘jquery’); $(function(){ console.log(‘seajs-ready’); }); });

你会发现他会在 onload 后面执行，不信你试试，所以不推荐这样；

一般情况下，我们都希望节点渲染完就执行JS，我们也会使用seajs来组织那一堆堆的模块，seajs只有屈指可数的几个api，一般的前端都能很容易的上手使用，但经常容易忽略一个问题：如何通过seajs真正的实现模块化？

seajs是个模块加载器，他是用来组织你那一堆堆模块的，而不是用seajs那种写法来装逼的，经常看到很多项目下，script的src下既有seajs还有其他框架，最多的就是jquery，而seajs里也有require(‘jquery’)，很明显，这是一种‘混合模式’，半模块化半零散状态，甚至那些seajs加载的模块，也不具有模块的独立性，而只是define或exports了一下，页面内另加载一个非模块化的jquery，来补充一部分JS；每次看到这种搞法，顿时觉得好无力啊！

对于一个页面，只需要define一个主模块（页面模块），在里面require其他基础模块，来实现一个页面调用一个JS文件；所以jquery应该是一个基础模块，而不应该单独加载；

1、模块化 jquery ：

define(function(require,exports,module){ //jquery源码 module.exports=$.noConflict(true); });

2、模块化插件（主要是 jquery 插件）：

（ 1 ）、

define(function(require,exports,module){ //var $=require(‘jquery’); //jquery插件源码 });

（ 2 ）、使用 seajs 的 shim

seajs.config({ plugins:[‘shim’], alias:{ ‘jquery’:{ src : '/path/jquery.js’ }, ‘jquery.easing’:{ src:’/path/jquery.easing.js’, deps:[‘jquery’] } } });

实现前后端的彻底分离，将静态资源从后台程序中分离出来，页面要加载哪些js，怎么加载，什么时候加载，由你决定，而不是叫后台去写到某个位置；因为复杂的项目中经常会有静态资源被写到后台的配置文件中，这对于前端来说不是那么好的做法，首先容易被滥用，其次不利于前端结构的维护，除非你的前端没有结构，还有就是失去了前端的独立性，难以实现结构上的前后端分离；

已成型项目怎么使用 seajs 完成模块化的结构转型呢？首先要解决以下问题：

（ 1 ）、独立出基础模块；

（ 2 ）、完成每个页面的模块化改造；

（ 3 ）、在最少依赖后台的情况下，将每个页面的主模块写入页面；

对于已成型的项目，第三点恐怕是最难的，哪怕你已将每个页面主模块拆分好了，但又不得不叫后台更新每个页面，来加载你的模块，这恐怕比较难，也说明你的结构还不够好；

前面说了，要实现前后端的彻底分离，将静态资源从后台程序中独立出来；怎么做呢，我这样想的，也在自己的博客系统中试着实现过：再建一个模块，作为所有页面模块的主模块，在这个模块里，写个页面与页面模块对应的配置 json ，将所有页面的要加载的页面主模块配置到这里，那么以后要新增页面，要增减 JS 只需要弄那个页面模块和这个公共主模块了，这样就能把所有 JS 文件从后台配置中抽离出来，由这个公共主模块来配置，现在问题的第三点也就好解决了，后台并不需要太多改动， JS 文件全是你的了，由你分配！每个页面只会出现两个 script 的 src ，一个是 seajs.js 一个是 main.js ；