页面加载时，渲染节点同时会执行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插件）：
define(function(require,exports,module){
//var $=require(‘jquery’);
//jquery插件源码
});（2）、使用seajs的shim
seajs.config({
plugins:[‘shim’],
alias:{
‘jquery’:{
src: ‘jquery’:’/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；
seajs是为前端的模块化而生的，如果你的项目结构没有实现模块化，那么你没必要使用它，我想对于一个前端来说，使用seajs并不难，难得的是真正的在模块化的基础上构建一个由前端管理的结构；
本文为慕课网作者原创，转载请标明【原文作者及本文链接地址】。侵权必究，谢谢合作!
随时随地看视频
