require.js的好处以及用法（一）

为什么要使用require.js?

愚见：

1.异步加载防止阻塞：传统前端项目开发引入js文件是利用:script标签依次同步顺序加载,require(['module1'，'module2'])中的modue1和module2两个模块
是异步加载（原理是在script标签中加入defer或者async属性,插入到head标签里面，以及module标签所依赖的标签也会插入head标签中），当然传统script标签也可以直接加入这两个属性，实现异步加载。

2.模块化开发，防止全局污染：自定义模块写在define(['jquery'],function(){return {}})中，另一个模块依赖它的话直接require(['该模块就行']);

3.不用写过多的script标签：如果a依赖jQuery和angular两个文件，传统需要写<script src="jquey,js">和<script src="angular.js">两个标签，现在只需要
require(['jquery','angular'])就可以把两个标签异步加载到head标签中。

4.按需加载：require.js 结合angular.js 
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: {
                        keyName: function ($q) {
                            var deferred = $q.defer();
                            require(['module1/module1.js'], function (controller) {//按需加载对应的控制器，如果采用传统方式的话，所有控制器都要提前写在首页的script标签中引入，这样首次加载页面文件过多，慢！！！
                                $controllerProvider.register('module1Controller', controller);      //由于是动态加载的controller，所以要先注册，再使用
                                deferred.resolve();
                            });
                            return deferred.promise;
                        }
                    }
                }).
                otherwise({
                    redirectTo: '/module1'
                });
        }]);

    return app;
});
5.可以将css和html文件按照js的方式引入。
6.可以结合r.js 打包压缩合并
7.可以在require.config 配置中定义paths 缩短模块的相对路径或者绝对路径。
8.一旦通过require加载到head标签中，以后不会再加载
require(['./home/c/1.js'], function(m) {
	console.log("m", m);
	console.error(define.amd)
});
require(['./home/c/jqdefine.js'], function(j) {
	console.log("j", j);
	console.error($, jQuery);
	$("button").click(function() {
		require(['./home/c/1.js'], function(m) {//click事件不会再加载一次依赖的js了，因为已经加载完了。
			console.log("m", m);
			console.error(define.amd)
		});
	})
})