AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构_requirejs+angular(2)

总结

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

前端面试题汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

JavaScript

性能

linux

define(['angular', 'require', 'angular-route'], function (angular, require) {
    var app = angular.module('webapp', ['ngRoute']);
    app.config(['$routeProvider', '$controllerProvider',
        function($routeProvider, $controllerProvider) {
            $routeProvider.
                when('/module1', {
                    templateUrl: 'module1/tpl.html',
                    controller: 'module1Controller',
                    resolve: {
                        /*
                        这个key值会被注入到controller中，对应的是后边这个function返回的值，或者promise最终resolve的值。函数的参数是所需的服务，angular会根据参数名自动注入对应controller写法（注意keyName）：
           controllers.controller('module2Controller', ['$scope', '$http', 'keyName',
                             function($scope, $http, keyName) {
                         }]);
                         */
                        keyName: function ($q) {
                            var deferred = $q.defer();
                            require(['module1/module1.js'], function (controller) {
                                $controllerProvider.register('module1Controller', controller);      //由于是动态加载的controller，所以要先注册，再使用
                                deferred.resolve();
                            });
                            return deferred.promise;
                        }
                    }
                }).
                otherwise({
                    redirectTo: '/module1'      //angular就喜欢斜杠开头
                });
        }]);
    return app;
});

上述代码看起来长，实际很短，因为有一堆绿色的注释，嘿嘿。。。

如果大家用过angular-route，这里的语法就很简单，如果没用过，则建议直接阅读angular-route源代码中的注释，非常清晰。

简单而言，就是when函数配置一个路由规则，对应一个template和一个controller。otherwise就是默认路由，也就是遇到一个未定义路径的时候如何跳转。

如果没有使用requirejs，那么我们需要在路由配置前加载完全部controller。angular-route需要做的只是切换HTML模版，重新编译，绑定新的controller。

但是这里用了requirejs，事情就变化了。我们要按需加载，不可能页面刚加载就全部controller都load回来，这样得耗费多少流量。。。

所以，这里利用了angular-route提供的resolve功能，也就是路由更改html前先把resolve里边该做的事完成。

resolve的写法比较特殊，接受的是一个key:value对象，keyName将会导入到controller中（如果controller有注明依赖）。而value应该是一个函数，函数的写法类似controller，angular会自动根据参数名导入相应依赖的服务，例如$q、$route。

上述例子中，module1.js定义了模块1的controller，后续我们再看代码。

由于路由配置前还不存在这个controller，所以现在需要动态注册这个controller。也就是：

$controllerProvider.register(‘module1Controller’, controller);

第四步，看看模块1的controller是怎么写的

define(['angular'], function (angular) {
    //angular会自动根据controller函数的参数名，导入相应的服务
    return function($scope, $http, $interval){
        $scope.info = 'kenko';      //向view/模版注入数据
        //模拟请求cgi获取数据，数据返回后，自动修改界面，不需要啰嗦的$('#xxx').html(xxx)
        $http.get('module2/tpl.html').success(function(data) {
            $scope.info = 'vivi';
        });
        var i = 0;
        //angularjs修改了原来的setTimeout和setInterval，要用这两个玩意，必须引入$timeout和$interval，否则无法修改angular范围内的东西
        $interval(function () {
            i++;
            $scope.info = i;
        }, 1000);
    };
});

angular有太多牛逼的功能，但实际上我业务太简单，用不到。所以这里只演示了3种最简单的情况。

这里不得不说，由于双向绑定，拉cgi和修改dom这些操作就变得非常简单了。

貌似一切解决了？这样的模块化似乎已经很好，跳转到某个模块的时候才加载对应的html和controller js。

但是对于追求极致的团队来说，模块的html和js应该打包在一起，一次请求就拉回来，这样能大大减少HTTP请求的时间。而现在按照angular-route，只能利用templateUrl单独拉取一个html文件。

那么接下来，我们再动动歪脑筋，修改一下。

第五步，修改angular-route，实现HTML和js打包加载。

function ngViewFillContentFactory($compile, $controller, $route) {
  return {
    restrict: 'ECA',
    priority: -400,
    link: function(scope, $element) {
      var current = $route.current,
          locals = current.locals;
      $element.html(current.template);  //原来是locals.$template

首先，先修改一下angular-route的源代码，这个源代码非常精简，不用太纠结，狠狠的去修改就好了。

另外，想问我为什么知道或者想到在这修改？咳咳咳，我会大摇大摆的说我认识angular-route的作者么？。。。。。。。开玩笑，作者叫什么，我都没去找，还说认识作者。其实就是逐步调，稍加变量搜索，发现一些不对劲，就做了这个小刀。

再另外，有专家要拍板了，这样乱修改，肯定带来毛病。是的，我不得不说，我自己都没彻底的检查是否有问题，但按照实际情况来看，暂时没遇到问题。

然后，做一个新的when配置：

       when('/module2', {
                    template: '',
                    controller: 'module2Controller',
                    resolve:{
                        keyName: function ($route, $q) {
                            var deferred = $q.defer();
                            require(['module2/module2.js'], function (module2) {
                                $controllerProvider.register('module2Controller', module2.controller);
                                $route.current.template = module2.tpl;
                                deferred.resolve();
                            });
                            return deferred.promise;
                        }
                    }
                })

这里用module2做例子，跟module1不同，这里初始设置的template是空字符串，然后在resolve中require回来后，动态修改$route.current.template。

因为我知道，这个修改能赶在angular-route修改HTML前，也就是小把戏能凑效。

相应，看看module2怎么写：

define(['angular', 'text!module2/tpl.html'], function (angular, tpl) {
    //angular会自动根据controller函数的参数名，导入相应的服务
    return {
        controller: function ($scope, $http, $interval) {
            $scope.date = '2015-07-13';
        },
        tpl: tpl
    };
});

大功告成，这样html模版就不由angular-route去接管了，而是由requirejs加载，我们可以控制的范围和灵活性就变大了。

不过，这里controller的函数写法可能会因为压缩混淆时丢失了原来的参数名，所以，我们也可以采用显式注入的方式：

 //也可以使用这样的显式注入方式，angular执行controller函数前，会先读取$inject
    controller.$inject = ['$scope'];
    function controller(s){
        s.date = '2015-07-13';
    }
    return {controller:controller, tpl:tpl};

到这里，整个架构基本就成型了，webapp中每个模块都能非常独立，这样对网站打开速度和协同开发都非常有好处。

但是，路由表的配置还是略复杂，每次大家都要写一大堆代码，这不是我们想要的，那么可以抽取公用代码，再优化一下。

第六步，优化路由表，变成真正的配置化。

define(['angular', 'require', 'angular-route'], function (angular, require) {
    var app = angular.module('webapp', [
        'ngRoute'
    ]);
    app.config(['$routeProvider', '$controllerProvider',
        function($routeProvider, $controllerProvider) {
            var routeMap = {
                '/module2': {                           //路由
                    path: 'module2/module2.js',         //模块的代码路径
                    controller: 'module2Controller'     //控制器名称
                }
            };
            var defaultRoute = '/module2';              //默认跳转到某个路由
            $routeProvider.otherwise({redirectTo: defaultRoute});
            for (var key in routeMap) {
                $routeProvider.when(key, {
                    template: '',
                    controller: routeMap[key].controller,
                    resolve:{
                     keyName:requireModule(routeMap[key].path, routeMap[key].controller)
                    }
                });
            }
            function requireModule(path, controller) {
                return function ($route, $q) {
                    var deferred = $q.defer();
                    require([path], function (ret) {
                        $controllerProvider.register(controller, ret.controller);
                        $route.current.template = ret.tpl;
                        deferred.resolve();
                    });
                    return deferred.promise;
                }
            }
        }]);
    return app;
});

routeMap可以由服务器直出，实现0缓存，彻底解耦，更便于团队合作。

最后最后，由于requirejs和angular都有模块管理，但两个概念又不一致，这里说说我的看法：

requirejs模块管理，不单单是代码模块化，还提供了模块加载的功能；

angular模块管理，更在乎的是代码逻辑上的模块化，避免全局变量污染，并不提供js文件层面的加载功能；

TCP协议

• TCP 和 UDP 的区别？
• TCP 三次握手的过程？
• 为什么是三次而不是两次、四次？
• 三次握手过程中可以携带数据么？
• 说说 TCP 四次挥手的过程
• 为什么是四次挥手而不是三次？
• 半连接队列和 SYN Flood 攻击的关系
• 如何应对 SYN Flood 攻击？
• 介绍一下 TCP 报文头部的字段
• TCP 快速打开的原理(TFO)
• 说说TCP报文中时间戳的作用？
• TCP 的超时重传时间是如何计算的？
• TCP 的流量控制
• TCP 的拥塞控制
• 说说 Nagle 算法和延迟确认？
• 如何理解 TCP 的 keep-alive？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

浏览器篇

• 浏览器缓存?
• 说一说浏览器的本地存储？各自优劣如何？
• 说一说从输入URL到页面呈现发生了什么？
• 谈谈你对重绘和回流的理解
• XSS攻击
• CSRF攻击
• HTTPS为什么让数据传输更安全？
• 实现事件的防抖和节流？
• 实现图片懒加载？

确认？

• 如何理解 TCP 的 keep-alive？

[外链图片转存中…(img-nSfCbEIf-1715090081268)]

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

浏览器篇

• 浏览器缓存?
• 说一说浏览器的本地存储？各自优劣如何？
• 说一说从输入URL到页面呈现发生了什么？
• 谈谈你对重绘和回流的理解
• XSS攻击
• CSRF攻击
• HTTPS为什么让数据传输更安全？
• 实现事件的防抖和节流？
• 实现图片懒加载？

[外链图片转存中…(img-NATIybnX-1715090081269)]