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，也會等待這三個檔案均加載完畢才執行，為了讓瀏覽器能夠按需加載，提出了模塊化管理工具，

<script type="text/javascript" src="https://www.cnblogs.com/engpj/archive/2023/01/29/js/a.js"></script>
<script type="text/javascript" src="https://www.cnblogs.com/engpj/archive/2023/01/29/js/b.js"></script>
<script type="text/javascript" src="https://www.cnblogs.com/engpj/archive/2023/01/29/js/c.js"></script>
<script type="text/javascript" src="https://www.cnblogs.com/engpj/archive/2023/01/29/js/d.js"></script>

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

<!DOCTYPE html>
<html>
<head>
	<title>RequireJS學習</title>
</head>
<body>
    <script data-main="js/main.js" src="https://www.cnblogs.com/engpj/archive/2023/01/29/js/lib/require.js"></script>
    <!-- main.js是主入口檔案 -->
</body>
</html>

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: '<h1>我是首頁！</h1>'
            });
    }]);
});

index.html

index.html是唯一的單頁面，但不表示只存在一個html頁面，其他頁面可作為模板存在，在index.html檔案中創建一個ui-view容器，然后用RequireJS語法參考入口檔案bootstrap.js，

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
	<title>
		測驗系統
	</title>
</head>
<body>
    <ui-view></ui-view>
    
    <script type="text/javascript" src="https://www.cnblogs.com/engpj/archive/2023/01/29/assets/requirejs/require.js" data-main="bootstrap.js"></script>
</body>
</html>

ngApp

ngApp里可根據場景創建相應檔案夾，存放撰寫控制器、服務和指令等內容的js檔案，此處創建root檔案夾和home檔案夾，

root

RootCtrl.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

<div>
  <header>
    <h1>我是root的template檔案</h1>
    {{rootCtrl.a}}
    <nav>
      <a ui-sref="root.home" ui-sref-active="cur">首頁</a>
    </nav>
  </header>
  <ui-view> </ui-view>
  <footer>我是footer</footer>
</div>

home

HomeCtrl.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

<div>
  <h1>我是首頁，{{homeCtrl.a}}</h1>
  <div >你好</div>
</div>

jquery的參考

法一：

最簡單的方法就是在index.html上參考，這樣可以在全域上使用$函式，缺點是不管頁面是否使用jquery，總是先會加載完畢，

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>測驗系統</title>
    <link rel="stylesheet" href="https://www.cnblogs.com/engpj/archive/2023/01/29/css/root.css" />
  </head>
  <body>
    <ui-view></ui-view>
    <script
      type="text/javascript"
      src="https://www.cnblogs.com/assets/jquery/dist/jquery.min.js"
    ></script>
    <script
      type="text/javascript"
      src="https://www.cnblogs.com/assets/requirejs/require.js"
      data-main="bootstrap.js"
    ></script>
  </body>
</html>

法二：

也可以在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，可以定位到目標檔案，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/542558.html

標籤：其他

上一篇：JavaScript 檔案上傳與下載

下一篇：JavaScript 條件判斷與比較運算