requireJS的使用问题

1、引入requireJS文件，在requireJS同一个目录下创建main.js，main.js 用来引入requireJS依赖的js。例如

'use strict';
(function (win) {
    //配置baseUrl
    var baseUrl = document.getElementById('globalMain').getAttribute('data-baseurl');
    /*
     * 文件依赖
     */
    var config = {
        baseUrl: baseUrl,           //依赖相对路径
        paths: {                    //如果某个前缀的依赖不是按照baseUrl拼接这么简单，就需要在这里指出/assets/js/angularjs/base
            'angular': '/assets/js/angularjs/base/angular.all.min',
            'jquery':'/assets/js/plugins/jquery/jquery-1.11.3.min',
            'bootstrap':'/assets/js/plugins/bootstrap/js/bootstrap',
            'init':'/ftl/module/business/js/init',
        },
        priority:['jquery','angular'],//需要优先加载的依赖
        shim: {                     //引入没有使用requirejs模块写法的类库。例如underscore这个类库，本来会有一个全局变量'_'。这里shim等于快速定义一个模块，把原来的全局变量'_'封装在局部，并导出为一个exports，变成跟普通requirejs模块一样
            'angular':{
                deps:['jquery'],
                exports:'angular'
            },
            'jquery': {
                exports: '$'
            },
            'bootstrap': {
                deps: ['jquery']
            },
            'ngRoute': {
                exports: 'ngRoute',
                deps: ['angular']   //依赖什么模块
            },
            'init':{
                deps:['angular']
            }
        }
    };

    require.config(config);
    require(['angular','jquery','bootstrap','ngRoute','init'], function(angular){        angular.bootstrap(document, ['app']);
    });
})(window);

这些js路径只是controller需要的依赖，所以main.js的作用只是引用并不会加载。

2、在需要路由页面引入requireJS，例如，

define(['angular','require','jquery'],function (angular,require,$) {
    var app = angular.module('app', ['ngAnimate'
        , 'ngRoute'
        , "ngDialog"
        , "ngMessages"
        , "httpPostFix"
        , 'ui.bootstrap.datetimepicker'
        , "ui.select"
        , "ngSanitize"
        , "angularFileUpload"
        , 'isteven-multi-select'
        , "daterangepicker"
    ]);

app.config(['$routeProvider','$controllerProvider', function ($routeProvider,$controllerProvider) {         $routeProvider
    .when('/home', {
        templateUrl: ctx + '/workflow/main',
        controller: 'MainController',
        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(['/ftl/module/workflow/js/MainController.js'], function (controller) {
                    $controllerProvider.register('MainController', controller);      //由于是动态加载的controller，所以要先注册，再使用
                    deferred.resolve();
                });
                return deferred.promise;
            }
        }
    })
})
return app;
])

3、业务controller

define(['angular'], function (angular) { //引入依赖的angular
    //angular会自动根据controller函数的参数名，导入相应的服务
    return function MainController($rootScope, $scope, $http, $location, ngDialog) {
      //具体的业务逻辑代码
    }
});

4、使用requireJS的好处

1.解决页面加载时，因加载脚本而导致页面挂起的问题。 
这个问题的产生是因为页面加载脚本会暂停当前页面的渲染去加载脚本，当脚本加载完之后，才会继续渲染页面。当脚本比较大时就会造成因为加载脚本使页面挂起导致页面无响应的问题。 
requireJS因为异步加载模块从而避免了这个问题。 
2.当页面中多个js文件相互依赖时，使用script标签引用时要注意文件的先后顺序，即被依赖的文件应在前边。require函数和define函数通过指定依赖的模块和保证模块加载完之后才调用回调函数解决了这个问题。