js 模块加载框架 seajs 的使用

有些时候，我们不得不写一些前段的东西，但是总感觉前段加载的太乱，管理起来不方便，加载也是问题，其实以前不会写页面，但是偶然机会开始一直写页面+写程序了。我的使用搭配方案是 seajs + angularjs + bootstrap + jquery + grunt + less 。

为什么使用的是 Grunt 其实很简单，因为我也需要编译 less 文件，实施监控文件的改动和对 html 、 js 、css 进行压缩。当然不仅仅是这些，功能很强大，我就不一一介绍了。只是个人喜好而已。感觉这东西跟 golang 中的 bee Application 差不多。你也可以选择你所喜欢的。

一般的 CSS 我使用的是 less 因为 bootstrap 中也是提供了完整的 less 文件，开发和定制前端，最重要的是维护起来真的很方便，不得不这么说。

0X01 seajs 加载原生的 JQuery

很简单，只需要如下就可以

define(function(){
    //这里放JQuery源代码
    return $.noConflict();
});

其实就是将，下载的 JQuery 的源代码放到注释的部分加载就可以了。

0X02 angular js 模块如何加载

angular js 如何加载生效呢？ 不能用了咋办？ 其实也一样很简单，如下

define(function(require,exports,module){
    // angular js 源代码
    module.exports = angular;
});

只需要在注释的地方假如 angular js 源代码就可以了。

如果使用 angular js的其他模块，譬如route ,只需要将源代码包在 define(function(){ }) 中就可以，如下

define(function(){
    //angular-route 源代码
})

然后，你就可以写一段代码测试一下了，如下

define(function(require,exports,module){
    var angular = require('angular');
    require('angular-route');
    var app  = angular.module('myapp',['ngRoute']).config(function($routeProvider){
            $routeProvider.when('/',{
                controller : function($scope){
                    $scope.message = '这里是首页';
                },
                template  : "{{message}}"
            }).when('/list/:id',{
                controller : function($scope,$routeParams){
                    $scope.message = $routeParams.id;
                },
                template  : "您的用户id是{{message}}"
            }).when('/product',{
                controller : function($scope){
                    $scope.message = "这里是产品页";
                },
                template  : "{{message}}"
            }).otherwise({
                redirectTo : '/'
            });
        });
    app.controller('test',['$scope','$location',function($scope,$location){
        $scope.message = 'widuu.com';
    }]);
});

0X03 grunt 压缩时 angularjs 失效问题

这个也很简单，其实就是将特定的命名再压缩的时候不编译。在你的 uglify -> 项目 -> mangle 添加except

mangle: {
    except: ['require', 'exports','module','$','jquery','angular','$routeProvider','$scope','$routeParams']
},

就简单说到这吧！！