Angularjs的工程化AMD规范和CMD规范为什么需要模块化管理工具

在编写项目时可能需要加载很多js文件,若b.js依赖a.js,且a.js比b.js大很多,那么浏览器会让b.js等待a.js加载完毕后再去执行b.js里的内容;而即使d.js并不依赖a.js,b.js,c.js,也会等待这三个文件均加载完毕才执行,为了让浏览器能够按需加载,提出了模块化管理工具。

AMD规范

全称为Asynchronous Module Defined,即异步模块管理,它通过使用依赖注入等方法完整描述了模块的定义、依赖关系、引用关系以及加载机制,AngularJS、RequireJS均是符合AMD规范的。

define函数

函数中有三个参数,前两个参数可以省略,第三个参数是模块的具体实现本身。 当define函数执行时,它首先会异步调用第二个参数中列出的依赖模块,当所有的模块被载入完成之后,如果第三个参数是一个回调函数则执行,然后告诉系统模块可用,也通知了依赖于自己的模块自己已经可用。

define([module-name?], [array-of-dependencies?], [module-factory-or-object]);其中:module-name: 模块标识,可以省略。array-of-dependencies: 所依赖的模块,可以省略。module-factory-or-object: 模块的实现,或者一个JavaScript对象。

下面代码定义了一个alpha模块,并且依赖于内置的require,exports模块,以及外部的beta模块。

define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {    exports.verb = function() {    return beta.verb();    };});

案例项目结构

案例
│ test.html

└─js
│ main.js
│ math.js
│ pi.js

└─lib
require.js

项目代码test.html

RequireJS学习        

main.js

requirejs.config({baseUrl: 'js',  //所有js程序的根目录paths: {//别名"math": "math"}});requirejs(["math"],function(math){alert(math.squre(8));alert(math.area(10));});alert("hello");

math.js

define(["pi"], function(pi){alert("我是math");return {"squre": function(number){return number * number;},"area": function(r){return pi.pi * r *r;}};});

pi.js

define({"pi": 3.1415926})

项目说明

  • 在html文件中引包时需要同时指定require.js文件和main.js文件;

  • main.js是主入口文件,只有主入口main.js能用requirejs,其他入口只能用define;

  • math.js用define定义模块,模块暴露的API用return返回;

  • main.js中如果有语句不需要依赖别人的语句,可以不写在回调函数里面,而现在很少有机会不在回调函数中写语句,即AMD和CMD越来越像。

CMD规范

全称为Common Module Defined,即普通模块管理,其执行过程是懒式的。NodeJS、SeaJS、CommonJS、webpack均是符合CMD规范的。

define函数

define(function(require, exports, module) {        // 模块定义在此  });

AngularJS的工程化angular-async-loader

angular-async-loader可以轻松解决ReuqireJS和AngularJS之间的粘合问题。angular-async-loader官网

安装前端依赖

大体思路就是用RequireJS配置AngularJS项目,配置步骤如下。

  • 进入项目文件夹,在命令行窗口执行下列指令,创建bower前端依赖文件。

    bower init
  • 创建.bowerrc文件并进行配置(先创建一个空文档,再在命令行用rename重命名为.bowerrc),配置内容如下,配置后,用bower下载的模块会生成在assets文件夹下。

    {"directory" : "assets"}
  • 安装AngularJS。

    bower install angular --save
  • 安装ui-router。

    bower install angular-ui-router --save
  • 安装RequireJS。

    bower install requirejs --save
  • 安装angular-async-loader。

    bower install angular-async-loader --save

书写三大文件

三大文件为app-routes.js、app.js、bootstrap.js。

在项目根目录下分别创建ngApp文件夹、app-routes.js、app.js、bootstrap.js、index.html文件。

bootstrap.js

bootstrap.js是RequireJS的入口文件。

require.config({    baseUrl: '/',    //别名    paths: {        'angular': 'assets/angular/angular.min',        'angular-ui-router': 'assets/angular-ui-router/release/angular-ui-router.min',        'angular-async-loader': 'assets/angular-async-loader/dist/angular-async-loader.min'    },    //声明paths中元素暴露的接口和依赖    shim: {        'angular': {exports: 'angular'},  //暴露的是angular        'angular-ui-router': {deps: ['angular']}  //依赖的是angular    }});//核心入口require(['angular', './app-routes'], function (angular) {    //当整个文档就绪之后    angular.element(document).ready(function () {        //angular.bootstrap是一个方法,表示启动angular        angular.bootstrap(document, ['myapp']);        //通过类名添加ng-app指令,也可以通过attr来添加        angular.element(document).find('html').addClass('ng-app');    });});

app.js

app.js中创建了app对象。

define(function (require, exports, module) {    //这是一个CMD规范的模块,模块的作用是向外暴露app整体    //AMD只能向外暴露json形式的API    //引入依赖    var angular = require('angular');    var asyncLoader = require('angular-async-loader');    require('angular-ui-router');    //创建app对象,app对象依赖ui.router    var app = angular.module('app', ['ui.router']);    // initialze app module for angular-async-loader    asyncLoader.configure(app);    //向外暴露    module.exports = app;});

app-routes.js

app-routes.js中定义了路由,这里采用了连续依赖,bootstrap.js依赖app-routes.js,app-routes.js依赖app.js。

define(function (require) {    //引入app对象    var app = require('./app');    //定义路由    app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {        $urlRouterProvider.otherwise('/home');        $stateProvider            .state('home', {                url: '/home',                template: '

我是首页!

' }); }]);});

index.html

index.html是唯一的单页面,但不表示只存在一个html页面,其他页面可作为模板存在,在index.html文件中创建一个ui-view容器,然后用RequireJS语法引用入口文件bootstrap.js。

    测试系统            

ngApp

ngApp里可根据场景创建相应文件夹,存放编写控制器、服务和指令等内容的js文件。此处创建root文件夹和home文件夹。

rootRootCtrl.js

define(function (require) {    var app = require('app');    require('./rootService');    // dynamic load services here or add into dependencies of ui-router state config    // require('../services/usersService');    app.controller('RootCtrl', ['$scope', 'rootService', function ($scope, rootService) {        this.a = rootService.m;    }]);});

rootService.js

define(function (require) {    var app = require('app');    // dynamic load services here or add into dependencies of ui-router state config    // require('../services/usersService');    app.factory("rootService", function () {        return {            m : 9        }    });});

template.html

我是root的template文件

{{rootCtrl.a}}
我是footer

homeHomeCtrl.js

define(function (require) {    var app = require('app');    require('jquery');  //var $ = require('jquery');为什么不用变量接收,因为jquery的原理就是给window对象添加属性    require('jquery-ui');    app.controller('HomeCtrl', [function () {        this.a = 100;        $('.box').animate({ 'font-size': 100 }, 1000, function () {            $(this).css("color", "red");            $(this).draggable();        });    }]);    });

template.html

我是首页。{{homeCtrl.a}}

你好

jquery的引用法一:

最简单的方法就是在index.html上引用,这样可以在全局上使用$函数,缺点是不管页面是否使用jquery,总是先会加载完毕。

          测试系统                      

法二:

也可以在bootstrap.js上起一个别名,使用RequireJS加载jquery。

require.config({    baseUrl: '/',    //别名    paths: {        'angular': 'assets/angular/angular.min',        'angular-ui-router': 'assets/angular-ui-router/release/angular-ui-router.min',        'angular-async-loader': 'assets/angular-async-loader/dist/angular-async-loader.min',        'jquery': 'assets/jquery/dist/jquery.min'    },    //声明paths中元素暴露的接口和依赖    shim: {        'angular': {exports: 'angular'},  //暴露的是angular        'angular-ui-router': { deps: ['angular'] },  //依赖的是angular        'jquery': {exports: 'jquery'}  //暴露的是jquery    }});

然后在需要使用jquery的控制器中写入如下代码。

define(function (require) {    var app = require('app');    var jquery = require('jquery');    app.controller('HomeCtrl', [function () {        jquery('.box').animate({ 'font-size': 100 }, 1000);    }]);    });

若要引入jquery的插件,需要bower下载jquery-ui,然后改变bootstrap.js

require.config({    baseUrl: '/',    //别名    paths: {        'angular': 'assets/angular/angular.min',        'angular-ui-router': 'assets/angular-ui-router/release/angular-ui-router.min',        'angular-async-loader': 'assets/angular-async-loader/dist/angular-async-loader.min',        'jquery': 'assets/jquery/dist/jquery.min',        'jquery-ui': 'assets/jquery-ui/jquery-ui.min'    },    //声明paths中元素暴露的接口和依赖    shim: {        'angular': {exports: 'angular'},  //暴露的是angular        'angular-ui-router': { deps: ['angular'] },  //依赖的是angular        'jquery': {exports: 'jquery'},  //暴露的是jquery        'jquery-ui': { deps: ['jquery'] },  //依赖的是jquery    }});

在控制器中写入如下代码。

define(function (require) {    var app = require('app');    var $ = require('jquery');    require('jquery-ui');    app.controller('HomeCtrl', [function () {        this.a = 100;        $('.box').animate({ 'font-size': 100 }, 1000, function () {            $(this).css("color", "red");            $(this).draggable();        });    }]);    });

项目结构

项目
│ app-routes.js
│ app.js
│ bootstrap.js
│ index.html

├─assets
│ ├─angular
│ ├─angular-async-loader
│ ├─angular-ui-router
│ ├─jquery
│ ├─jquery-ui

├─css
│ root.css

└─ngApp
├─home
│ HomeCtrl.js
│ template.html

└─root
RootCtrl.js
rootService.js
template.html

注:在项目中使用ctrl+p,可以定位到目标文件。