AngularJS模块化解析

[TOC]

概述

模块化作为前端一个重要话题，模块化主要是为了提高了代码的复用性，降低代码的可维护性。AngularJS作为一个前端框架必然无法跨越模块化。AngularJS中的模块又是什么样子的？它和namespace、闭包、amd模块、cmd模块、es6模块等前端模块有什么区别呢？

实例

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>angularJS模块化</title>
    <script type="text/javascript" src="./angular.js"></script>
</head>
<body>
    <div ng-controller="demoCtrl">
        <p>Input something in the input box:</p>
        <p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
        <h1>Hello {{name | demoFilter}}</h1>
    </div>
    <script type="text/javascript">
        var type = Object.prototype.toString;
        var demoApp = angular.module('demoApp',[]);
        demoApp.controller('demoCtrl',[
            '$scope',
            function($scope){
                $scope.name = '';
            }
        ])
        demoApp.filter('demoFilter',[
            '$rootScope',
            function($rootScope){
                return function(value){
                    return value+'filter--->>>123';
                }
            }
        ]);
        var result = '',item;
        for(var key in demoApp){
            item = demoApp[key];
            if(typeof item === 'object'&&type.call(item) === "[object Array]"){
                item = '['+item.toString()+']'
            }else{
                item = item.toString()
            }
            result += (key+' : '+item+'\n')
        }
        console.log(result)
    </script>
</body>
</html>

从控制台打印的结果可以分析得出以下结论：

provider、factory、service、decorator、animation、filter、controller、directive都是把数据做参数化处理[provider,method,arguments],并压入invokeQueue中

value、constant做参数化处理[provider,method,arguments]，并压入invokeQueue数组

function invokeLater(provider, method, insertMethod, queue){
if (!queue) queue = invokeQueue;
return function() {
    queue[insertMethod || 'push']([provider, method, arguments]);
    return moduleInstance;
};
}

config参数化处理后，压入configBlocks数组

var config = invokeLater('$injector', 'invoke', 'push', configBlocks);

run参数化处理后，压入runBlocks数组
arguments是_invokeQueue中的[ "demoCtrl",//name ["$scope",function($scope){$scope.name=''}]//fn ]

API相关

function module(name, requires, configFn)

configFn和生成demoApp之后调用config API是相同逻辑

总结

angularJS中module是一个类似namespace的模块化方案，provider、factory、service、decorator、animation、filter、controller、directive等都是参数化处理的工厂函数。_invokeQueue是注册 Provider， _configBlocks是配置Provider， _runBlocks执行实例,可以理解为AOP模式。

hytzgroup / blog

AngularJS模块化解析 #1

AngularJS模块化解析

概述

实例

API相关

总结