RequireJS 和 SeaJS 都是模块加载器，倡导的是一种模块化开发理念，核心价值是让 JavaScript 的模块化开发变得更简单自然。
不同之处
两者的区别如下：
定位有差异。RequireJS 想成为浏览器端的模块加载器，同时也想成为 Rhino / Node 等环境的模块加载器。SeaJS 则专注于 Web 浏览器端，同时通过 Node 扩展的方式可以很方便跑在 Node 服务器端。
遵循的规范不同。RequireJS 遵循的是 AMD（异步模块定义）规范，SeaJS 遵循的是 CMD （通用模块定义）规范。规范的不同，导致了两者 API 的不同。SeaJS 更简洁优雅，更贴近 CommonJS Modules/1.1 和 Node Modules 规范。
社区理念有差异。RequireJS 在尝试让第三方类库修改自身来支持 RequireJS，目前只有少数社区采纳。SeaJS 不强推，采用自主封装的方式来“海纳百川”，目前已有较成熟的封装策略。
代码质量有差异。RequireJS 是没有明显的 bug，SeaJS 是明显没有 bug。
对调试等的支持有差异。SeaJS 通过插件，可以实现 Fiddler 中自动映射的功能，还可以实现自动 combo 等功能，非常方便。RequireJS 无这方面的支持。
插件机制不同。RequireJS 采取的是在源码中预留接口的形式，源码中留有为插件而写的代码。SeaJS 采取的插件机制则与 JavaScript 语言以及Node 的方式一致：开放自身，让插件开发者可直接访问或修改，从而非常灵活，可以实现各种类型的插件。
还有不少细节差异就不多说了。
总之，SeaJS 从 API 到实现，都比 RequireJS 更简洁优雅。如果说 RequireJS 是 Prototype 类库的话，则 SeaJS 是jQuery 类库。
最重要的
最后，向 RequireJS 致敬！RequireJS 和 SeaJS 是好兄弟，一起努力推广模块化开发思想，这才是最重要的。
LABjs的核心是
LAB（Loading
and
Blocking）：Loading
指异步并行加载，Blocking
是指同步等待执行。LABjs
通过优雅的语法（script
和
wait）实现了这两大特性，核心价值是性能优化。LABjs
是一个文件加载器。
RequireJS
和
SeaJS
则是模块加载器，倡导的是一种模块化开发理念，核心价值是让
JavaScript
的模块化开发变得更简单自然。
模块加载器一般可降级为文件加载器用，因此使用
RequireJS
和
SeaJS，也可以达成
LABjs
的性能优化目的。
RequireJS
和
SeaJS
都是很不错的模块加载器，两者区别如下：
1.
两者定位有差异。RequireJS
想成为浏览器端的模块加载器，同时也想成为
Rhino
/
Node
等环境的模块加载器。SeaJS
则专注于
Web
浏览器端，同时通过
Node
扩展的方式可以很方便跑在
Node
服务器端
2.
两者遵循的标准有差异。RequireJS
遵循的是
AMD（异步模块定义）规范，SeaJS
遵循的是
CMD
（通用模块定义）规范。规范的不同，导致了两者
API
的不同。SeaJS
更简洁优雅，更贴近
CommonJS
Modules/1.1
和
Node
Modules
规范。
3.
两者社区理念有差异。RequireJS
在尝试让第三方类库修改自身来支持
RequireJS，目前只有少数社区采纳。SeaJS
不强推，而采用自主封装的方式来“海纳百川”，目前已有较成熟的封装策略。
4.
两者代码质量有差异。RequireJS
是没有明显的
bug，SeaJS
是明显没有
bug。
5.
两者对调试等的支持有差异。SeaJS
通过插件，可以实现
Fiddler
中自动映射的功能，还可以实现自动
combo
等功能，非常方便便捷。RequireJS
无这方面的支持。
6.
两者的插件机制有差异。RequireJS
采取的是在源码中预留接口的形式，源码中留有为插件而写的代码。SeaJS
采取的插件机制则与
Node
的方式一致：开放自身，让插件开发者可直接访问或修改，从而非常灵活，可以实现各种类型的插件。
还有不少细节差异就不多说了。
总之，SeaJS
从
API
到实现，都比
RequireJS
更简洁优雅。如果说
RequireJS
是
Prototype
类库的话，则
SeaJS
是
jQuery
类库。
最后，向
RequireJS
致敬！RequireJS
和
SeaJS
是好兄弟，一起努力推广模块化开发思想，这才是最重要的。
一、前言ocLoayLoad是AngularJS的模块按需加载器。一般在小型项目里，首次加载页面就下载好所有的资源没有什么大问题。但是当我们的网站渐渐庞大起来，这样子的加载策略让网速初始化速度变得越来越慢，用户体验不好。二来，分模块加载易于团队协作，减低代码冲突。
二、按需加载的对象
各个Controller模块、Directive模块、Server模块、template模板，其实这些都是一些
.js文件或者
.html文件
。
三
、按需加载的场景
1
路由加载(resolve/uiRouter)
基于uiRouter的resolve是在加载controller和template之前所执行的一系列操作，它帮助我们初始化我们所要前往的那一个视图。只有be
solved(操作完成)，controller才会被实例化。因此，我们可以在resolve步骤里面加载我们所需要的controller。
$stateProvider
.state('index',
{
url:
'/',
views:
{
'lazyLoadView':
{
templateUrl:
'partials/main.html',
controller:
'AppCtrl'
}
},
resolve:
{
loadMyCtrl:
['$ocLazyLoad',
function($ocLazyLoad){
return
$ocLazyLoad.load('js/AppCtrl.js')
}]
}
})
其中，'js/AppCtrl.js'里面放着一个我们所需要的controller
angular.module('myApp')
.controller('AppCtrl',
['$scope',
function($scope){
//...
}])
2
依赖加载
在依赖项里面导入我们所需要的一系列模块(这里有一层'[
]'符合哦)
angular.module('gridModule',
[[
'bower_components/angular-ui-grid/ui-grid.js',
'bower_components/angular-ui-grid/ui-grid.css'
]]).controller('GridModuleCtrl',
['$scope',
function($scope){
//...
}])
3
Cotroller里动态加载
angular.module('myApp')
.controller('AppCtrl',
['$scope','$ocLazyLoad',
function($scope,
$ocLazyLoad){
$scope.loadBootstrap
=
function(){
$ocLazyLoad.load([
'bower_components/bootstrap/dist/js/bootstrap.js',
'bower_components/bootstrap/dist/css/bootstrap.css'
])
}
var
unbind
=
$scope.$on('ocLazyLoad.fileLoaded',
function(e,
file){
$scope.bootstrapLoaded
=
true
console.log('下载boot完成')
unbind()
})
}])
4
template包含加载(config)
如何处理我们所加载的html模板里面嵌套的controller呢？这里需要oc-lazy-load指令和$ocLazyLoadProvider的配置
/*template
A.html*/
<h1>hi
i
am
hzp
</h1>
<div
oc-lazy-load="gridModule">
<div
ng-controller="GridModuleCtrl">
<span>{{test}}</span><br/>
<div
ui-grid="gridOptions"
class="gridStyle"></div>
</div>
</div>
</div>
$ocLazyLoadProvider.config({
modules:
[{
name:
'gridModule',
files:
[
'js/gridModule.js'
]
}]
})
四、如何组织按需加载
分路由、按功能来区分、打包成不同的多个或单个controller.directive.server模块
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
