js 模块加载框架 seajs 的使用

widuu 2015-4-19 前台技术 1,423 0 喜欢 (2)

有些时候,我们不得不写一些前段的东西,但是总感觉前段加载的太乱,管理起来不方便,加载也是问题,其实以前不会写页面,但是偶然机会开始一直写页面+写程序了。我的使用搭配方案是 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']
},

就简单说到这吧!!

转载请注明来自微度网络,本文标题:《js 模块加载框架 seajs 的使用》

喜欢 2 发布评论
Top