JS模块加载框架 seajs 的使用

有些时候,我们不得不写一些前段的东西,但是总感觉前段加载的太乱,管理起来不方便,加载也是问题,其实以前不会写页面,但是偶然机会开始一直写页面+写程序了。我的使用搭配方案是 seajs + angularjs + bootstrap + jquery + grunt + less 。 为什么使用的是 Grunt 其实很简单,因为我也需要编译 less 文件,实施监控文件的改动和对 html 、 js 、css 进行压缩。

一、seajs 加载原生的 JQuery

很简单,只需要如下就可以
define(function(){
    //这里放JQuery源代码
    return $.noConflict();
});

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

二、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\';
    }]);
});

三、grunt 压缩时 angularjs 失效问题

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

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


版权属于:够过瘾——挨踢男的葵花宝典

文章链接:http://www.gouguoyin.cn/js/36.html

转载时必须以链接形式注明原始出处及本声明。

如果您觉得本文对您有所帮助,请小额赞助一下,我会优先回答您在使用过程中出现的问题,点此赞助

如有疑问或遇到技术问题,请加官方QQ群: 421537504   GoCMS官方交流群

文章点评:

表情