angular源码分析：angular的源代码目录结构说明

2022-10-05 14:56:20

一、读源码，是选择“编译合并后”的呢还是“编译前的”呢？

有朋友说，读angular源码，直接看编译后的，多好，不用管模块间的关系，从上往下读就好了。但是在我看来，阅读编译后的源码至少有两点不好。

  • 1.编译已经将所有的代码合并在一起了，这会丢失掉作者模块设计的思想，不利于理解代码架构的精髓，甚至想理解代码都很难。
  • 2.编译合并后的angular代码有2万多行，想要看完，早已望而生畏。相反阅读编译前的代码，可以一个模块一个模块的逐个击破。

    但是编译前的源码中的确文件一大堆，一开始靠不清楚都是拿来干嘛的，这可能是初学者源代码阅读一个很大的障碍。我今天要做的事就是把angular的angular的目录和文件的结构理清分享给大家。

二、Gruntfile.js

1.angular的编译合并以及测试使用的是grunt框架，所以首先应该从这个文件着手。

查看其源代码。

var files = require('./angularFiles').files;

var util = require('./lib/grunt/utils.js');

注意：在grunt开头引入了这个两个文件：angularFiles.js 和 ./lib/grunt/utils.js。

2.angularFiles.js：

var angularFiles = {

    'angularSrc': [...],

    'angularLoader': [...],

    'angularModules': {

    'ngAnimate': [...],

    'ngCookies': [...],

    'ngMessageFormat': [...],

    'ngMessages': [...],

    'ngResource': [...],

    'ngRoute': [...],

    'ngSanitize': [...],

    'ngMock': [...],

    'ngTouch': [...],

    'ngAria': [...]

  },

  'angularScenario': [...],

  'angularTest': [...],

  'karma': [...],

  'karmaExclude': [...],

  'karmaScenario': [...],

  "karmaModules": [...],

  'karmaJquery': [...],

  'karmaJqueryExclude': [...]

};

 ...

if (exports) {

  exports.files = angularFiles;

  exports.mergeFilesFor = function() {

    var files = [];

    Array.prototype.slice.call(arguments, 0).forEach(function(filegroup) {

      angularFiles[filegroup].forEach(function(file) {

        // replace @ref

        var match = file.match(/^\@(.*)/);

        if (match) {

          files = files.concat(angularFiles[match[1]]);

        } else {

          files.push(file);

        }

      });

    });

    return files;

  };

}

可以看到，其中就是定义了一个数组（files，其中每个元素都是一个文件名的数组。我们可以轻易的发现，files其实将所有的angular源码给分组追踪起来了）和一个函数（mergeFilesFor，用于合并angularFiles中的元素）。

3.将“/lib/grunt/utils.js”文件跳过，在Gruntfile.js中搜索 关键词 build，可以看到如下代码:

    build: {

      scenario: {...

      },

      angular: {

        dest: 'build/angular.js',

        src: util.wrap([files['angularSrc']], 'angular'),

        styles: {

          css: ['css/angular.css'],

          generateCspCssFile: true,

          minify: true

        }

      },

      loader: {...},

      touch: {...},

      mocks: {...},

      sanitize: {...},

      resource: {...},

      messageformat: {...},

      messages: {...},

      animate: {...},

      route: {...},

      cookies: {...},

      aria: {...},

      "promises-aplus-adapter": {...}

    },

我们可以猜测，"angular: {...}"就是对应angular.js的编译配置，而"loader: {...}"对应的是angular-loader.js，"touch: {...}"对应的是angular-touch.js，……

那么，我们重点分析angular.js的编译配置，其他的都是类似的。

      angular: {

        dest: 'build/angular.js',

        src: util.wrap([files['angularSrc']], 'angular'),

        styles: {

          css: ['css/angular.css'],

          generateCspCssFile: true,

          minify: true

        }

      },

4.util.wrap是什么鬼。从var util = require('./lib/grunt/utils.js');,我们知道应该阅读./lib/grunt/utils.js。

果然其中有一个导出的函数wrap

  wrap: function(src, name){

    src.unshift('src/' + name + '.prefix');

    src.push('src/' + name + '.suffix');

    return src;

  },

另外还有一个build函数,主要功能是合并js代码

  build: function(config, fn){

    var files = grunt.file.expand(config.src);

    var styles = config.styles;

    var processedStyles;

    //concat

    var src = files.map(function(filepath) {

      return grunt.file.read(filepath);

    }).join(grunt.util.normalizelf('\n'));

    //process

    var processed = this.process(src, grunt.config('NG_VERSION'), config.strict);

    if (styles) {

      processedStyles = this.addStyle(processed, styles.css, styles.minify);

      processed = processedStyles.js;

      if (config.styles.generateCspCssFile) {

        grunt.file.write(removeSuffix(config.dest) + '-csp.css', CSP_CSS_HEADER + processedStyles.css);

      }

    }

    //write

    grunt.file.write(config.dest, processed);

    grunt.log.ok('File ' + config.dest + ' created.');

    fn();

    function removeSuffix(fileName) {

      return fileName.replace(/\.js$/, '');

    }

  },

通过简单推理，build函数对代码的合并时根据配置数组的顺序粘贴完成的，而angular所包含的文件如下：

  'angularSrc': [

    'src/angular.prefix',  //util.wrap函数加入的前缀代码

    'src/minErr.js',

    'src/Angular.js',

    'src/loader.js',

    'src/stringify.js',

    'src/AngularPublic.js',

    'src/jqLite.js',

    'src/apis.js',

    'src/auto/injector.js',

    'src/ng/anchorScroll.js',

    'src/ng/animate.js',

    'src/ng/animateCss.js',

    'src/ng/browser.js',

    'src/ng/cacheFactory.js',

    'src/ng/compile.js',

    'src/ng/controller.js',

    'src/ng/document.js',

    'src/ng/exceptionHandler.js',

    'src/ng/forceReflow.js',

    'src/ng/http.js',

    'src/ng/httpBackend.js',

    'src/ng/interpolate.js',

    'src/ng/interval.js',

    'src/ng/locale.js',

    'src/ng/location.js',

    'src/ng/log.js',

    'src/ng/parse.js',

    'src/ng/q.js',

    'src/ng/raf.js',

    'src/ng/rootScope.js',

    'src/ng/sanitizeUri.js',

    'src/ng/sce.js',

    'src/ng/sniffer.js',

    'src/ng/templateRequest.js',

    'src/ng/testability.js',

    'src/ng/timeout.js',

    'src/ng/urlUtils.js',

    'src/ng/window.js',

    'src/ng/cookieReader.js',

    'src/ng/filter.js',

    'src/ng/filter/filter.js',

    'src/ng/filter/filters.js',

    'src/ng/filter/limitTo.js',

    'src/ng/filter/orderBy.js',

    'src/ng/directive/directives.js',

    'src/ng/directive/a.js',

    'src/ng/directive/attrs.js',

    'src/ng/directive/form.js',

    'src/ng/directive/input.js',

    'src/ng/directive/ngBind.js',

    'src/ng/directive/ngChange.js',

    'src/ng/directive/ngClass.js',

    'src/ng/directive/ngCloak.js',

    'src/ng/directive/ngController.js',

    'src/ng/directive/ngCsp.js',

    'src/ng/directive/ngEventDirs.js',

    'src/ng/directive/ngIf.js',

    'src/ng/directive/ngInclude.js',

    'src/ng/directive/ngInit.js',

    'src/ng/directive/ngList.js',

    'src/ng/directive/ngModel.js',

    'src/ng/directive/ngNonBindable.js',

    'src/ng/directive/ngOptions.js',

    'src/ng/directive/ngPluralize.js',

    'src/ng/directive/ngRepeat.js',

    'src/ng/directive/ngShowHide.js',

    'src/ng/directive/ngStyle.js',

    'src/ng/directive/ngSwitch.js',

    'src/ng/directive/ngTransclude.js',

    'src/ng/directive/script.js',

    'src/ng/directive/select.js',

    'src/ng/directive/style.js',

    'src/ng/directive/validators.js',

    'src/angular.bind.js',

    'src/publishExternalApis.js',

    'src/ngLocale/angular-locale_en-us.js',

    'src/angular.suffix'   //util.wrap函数加入的后缀代码

  ],

5.分析下angular.prefix 和 angular.suffix

angular.prefix

/**

 * @license AngularJS v"NG_VERSION_FULL"

 * (c) 2010-2015 Google, Inc. http://angularjs.org

 * License: MIT

 */

(function(window, document, undefined) {

angular.suffix

  jqLite(document).ready(function() {

    angularInit(document, bootstrap);

  });

})(window, document);

很熟悉吧，angular.prefix 和 angular.suffix 刚好构成一个自动执行的匿名函数。在这个函数的最后做了一个操作，等待jqLite准备好后，执行angularInit(document, bootstrap);，如果我们今天是分析angular的代码可能就会继续去追jqLite函数以及angularInit函数。但是今天不是，我们的目标是树立代码目录结构。其实目录结构已经出来了。

三、angular的代码目录结构：

├─── angular.prefix   //util.wrap函数加入的前缀代码

│

├─── minErr.js       //错误处理

├─── Angular.js      //主要定义angular的工具函数，我们[上一期]主要讲了这个

├─── loader.js       //定义了setupModuleLoader函数

├─── stringify.js    //定义了对象序列化serializeObject，和对象调试输出字符串serializeObject

├─── AngularPublic.js //定义了angular导出的函数和变量

├─── jqLite.js        //定义jqLite,一个mini的jQuery

├─── apis.js          //定义了关于对象hash值的几个函数

├─── auto

│     └─── injector.js //依赖注入和模块加载，主要在这里实现，我在[第二期]讲过部分

│

├─── ng                //定义angular的各种服务的目录，该目录下一个文件按名字对应一个服务

│    ├─── anchorScroll.js

│    ├─── animate.js

│    ├─── animateCss.js

│    ├─── browser.js

│    ├─── cacheFactory.js

│    ├─── compile.js

│    ├─── controller.js

│    ├─── document.js

│    ├─── exceptionHandler.js

│    ├─── forceReflow.js

│    ├─── http.js

│    ├─── httpBackend.js

│    ├─── interpolate.js

│    ├─── interval.js

│    ├─── locale.js

│    ├─── location.js

│    ├─── log.js

│    ├─── parse.js

│    ├─── q.js

│    ├─── raf.js

│    ├─── rootScope.js

│    ├─── sanitizeUri.js

│    ├─── sce.js

│    ├─── sniffer.js

│    ├─── templateRequest.js

│    ├─── testability.js

│    ├─── timeout.js

│    ├─── urlUtils.js

│    ├─── window.js

│    ├─── cookieReader.js

│    ├─── filter.js

│    ├─── filter         //过滤器目录，该目录下一个文件对应一个过滤器

│    │     ├─── filter.js

│    │     ├─── filters.js

│    │     ├─── limitTo.js

│    │     └─── orderBy.js

│    └─── directive      //指令目录，该目录下一个文件对应一个angular指令

│          ├─── directives.js

│          ├─── a.js

│          ├─── attrs.js

│          ├─── form.js

│          ├─── input.js

│          ├─── ngBind.js

│          ├─── ngChange.js

│          ├─── ngClass.js

│          ├─── ngCloak.js

│          ├─── ngController.js

│          ├─── ngCsp.js

│          ├─── ngEventDirs.js

│          ├─── ngIf.js

│          ├─── ngInclude.js

│          ├─── ngInit.js

│          ├─── ngList.js

│          ├─── ngModel.js

│          ├─── ngNonBindable.js

│          ├─── ngOptions.js

│          ├─── ngPluralize.js

│          ├─── ngRepeat.js

│          ├─── ngShowHide.js

│          ├─── ngStyle.js

│          ├─── ngSwitch.js

│          ├─── ngTransclude.js

│          ├─── script.js

│          ├─── select.js

│          ├─── style.js

│          └─── validators.js

├─── angular.bind.js           //简单几行代码，判断是否已经加载了jQuery，如果是，直接使用jQuery，而不使用jqLite

├─── publishExternalApis.js        // `publishExternalAPI(angular);`导出变量和接口

├─── ngLocale

│       └───angular─locale_en─us.js //本地化处理，其中定义地区性的星期月份神马的

│

└── angular.suffix   //util.wrap函数加入的后缀代码

上一期:angular源码分析：angular中各种常用函数，比较省代码的各种小技巧

下一期：angular源码分析：angular中jqLite的实现——你可以丢掉jQuery了

ps：在这《angular源码分析：angular中jqLite的实现——你可以丢掉jQuery了》这一期中，我将讲述笔者在其中遇到的一个坑。

上一篇：JS里面的call, apply以及bind


下一篇：robotframework-FQA