另类angularjs应用

另类angularjs应用

回顾

  上一篇文章主要讲解了创建兼容任意浏览器(主要是ie的一些奇葩问题)的angularjs web应用,但是项目开发中其实更重要的还是在功能的模块化、代码自动压缩上面,这样项目在后期维护或者功能的重复利用上才会更方便,那么今天主要围绕以下几个主题来讲讲如何在不是用其他js模块化库的情况下,开发便于管理的angualrjs模块化代码:

  • 使用service来创建模块
  • 模块间引用
  • 代码合并及压缩

  本文中的代码均已nodejs来实现。

  nodejs中,使用UglifyJS2来实现代码压缩

使用service来创建模块

  以前创建angualrjs应用都是直接基于对scope的直接绑定来完成的,例如:登录功能,代码如下:

//html
<div ng-controller="loginController">
    <div>
        用户名:
        <input type="text" ng-model="name" />
    </div>
    <div>
        密 码:
        <input type="password" ng-model="pwd" />
    </div>
    <a href="javascript:void(0)" ng-click="login()">
        登录
    </a>
</div>

//js
var myApp = angular.module('myApp', []);
myApp.controller('loginController', function ($scope) {
    $scope.name = '';
    $scope.pwd = '';

    $scope.login = function () {
        //代码略
    };
});

  当有很多的功能的时候,有些人可能会创建很多的controller来完成,也有些人会像我一样,使用一些js模块化库(seajs\requirejs)来实现,但是整合js模块化库会带来一些问题,而且效果也不尽人意,代码也会变得很复杂。

  鉴于以上的一些问题,我不得不寻找一些其他的方案来替代,于是后来就想到了使用service来替代模块化(可能是资质比较差的原因吧),这样便可以充分利用angularjs的特性来完成,首先创建一个user的service,其实就是将当前scope内的代码迁移到user.js内,代码如下:

myApp.service('user', function () {
    function User() {
        this.name = '';
        this.pwd = '';
    }

    User.prototype.login = function () {
        //代码略
    };

    return new User();
});

  然后只要稍微修改一下上面的代码便可以实现这个功能了,改完代码如下:

//html
<div ng-controller="loginController">
    <div>
        用户名:
        <input type="text" ng-model="user.name" />
    </div>
    <div>
        密 码:
        <input type="password" ng-model="user.pwd" />
    </div>
    <a href="javascript:void(0)" ng-click="user.login()">
        登录
    </a>
</div>

//js
myApp.controller('loginController', function ($scope, user) {
    $scope.user = user;
});

  使用这种方法,功能开发就简单多了,只要将功能的代码变成一个个的js,然后页面上引用后在controller初始化的时候,一个个绑定到scope上就可以了。

模块间引用

  项目开发当中,免不了模块之间的交互,由于以上我们只用了service来创建模块,而angularjs的service跟许多js模块化库是一样的,不允许模块之间的循环引用,这样如果我们有一个user和userAddress,当user需要引用userAddress的时候就会遇到一些问题。

  遇到此类问题的时候,其实可以引入一个类似缓存的模块来解决,首先将所有的功能模块都加入到缓存模块中(controller内),然后当user模块需要引用到userAddress模块的时候,只要引用缓存模块并从其开放的接口中获取userAddress模块即可。

  其实缓存模块就只要有2个方法(get\set),大致代码如下:

myApp.controller('loginController', function ($scope, cache, user, userAddress) {
    $scope.user = user;
    $scope.userAddress = userAddress;

    caceh.set('user', user);
    caceh.set('userAddress', userAddress);
});

//user
myApp.service('user', function(cache) {
    //需要引用的时候
    var userAddress = cache.get('userAddress');
    //其他代码省略
});

代码合并及压缩

  当功能模块越来越多的时候,controller内就会有很多类似的代码了,而且每增加一个js模块,都需要在controller内注册并添加到cache中去,实在是很麻烦。

  其实大家应该已经发现了,只要我们将模块放在同一的文件夹内,然后通过扫描这个文件夹,并使用模板来进行代码生成就可以免去这些麻烦的注册代码了,代码如下:

//模板
window.myApp= angular.module('myApp', []);

myApp.controller('mainController', function ($scope, cache, <%= modules.join(', ') %>){
    <% modules.forEach(function (m){ %>
    $scope.<%= m %> = <%= m %>;
    cache.set('<%= m %>', <%= m %>);
    <% }) %>
});
<% codes.forEach(function (c){ %>
<%- code %>
<% }) %>

//合并
var ejs = require('ejs');
var fs = require('fs');
var path = require('path');
var jsDir = 'js文件夹路径';
var codes = [];
var modules = [];
fs.readdirSync(jsDir).forEach(function (filename) {
    if (filename.indexOf('.js') == -1)
        return;

    codes.push(fs.readFileSync(path.join(jsDir, filename), 'utf8'));
    modules.push(filename.replace('.js', ''));
});

var tplCode = fs.readFileSync('模板路径', 'utf8');
codes.unshift(ejs.render(tplCode, {
    modules: modules,
    codes: codes
}));

fs.writeFileSync('整合后的js文件路径', codes.join('\r\n'), 'utf8');

  这样我们便可以在js文件变化的时候,通过合并所有的js,但是这里要注意将功能模块的js和公用库的js放在不同的文件夹下,引用公用代码并不会去引用功能模块,因此不需要加入到cache中去,并在合并的时候通过额外的代码去拼接公用js。

  通过以上的操作,我们只需要在页面上只引入一个js,这样开发起来也会比较方便,但是测试的时候,就略微麻烦。

  在这里我建议将angularjs创建module和controller的生成代码独立放在一个生成模块中,并生成一个js(如:config);将合并公用js和模块js放在另一个生成模块中;并在项目中添加一个诸如development的变量来标识是否为开发模式。

  开发模式的时候,页面上引用生成的config及其他公用js和功能js;非开发者模式下,则引用合并且压缩后的js,示例代码如下:

<%
        var app = process.app;
        if (app.get('development')) {
%>
<script type="text/javascript" src="/js/config.js"></script>
<script type="text/javascript" src="/js/lib/cache.js"></script>
<script type="text/javascript" src="/js/main/user.js"></script>
<script type="text/javascript" src="/js/main/userAddress.js"></script>
<%      }
        else { %>
<script type="text/javascript" src="/js/myApp.min.js"></script>
<%      } %>

  2个代码生成的模块代码这里就不再写出来了,因此大致的代码上面都已经给出来了,其他的就靠大家自己根据实际情况去重构了,^_^。

  压缩js脚本的代码也不写了,具体的可以查看文章开头的UglifyJS2的示例代码,需要注意的是except参数是不能少的,不然会将合并脚本内的angularjs的模块名和功能模块名替换成其他的简单变量,项目运行起来会出现错误。

结尾

  由于近段时间都是使用angualrjs配合nodejs来进行开发的,开发中遇到的问题和解决的方案整理了一下跟大家分享一下,希望对大家有所帮助。

  大致的代码基本上都有提供,其他的就要靠大家自己去编码了,这样才能将分享的东西转化成自己的。

  今天的文章就到这里了,如果有什么错误、问题请留言给我,谢谢大家!

 

 

 

分类:  Javascriptnodejs想法

你可能感兴趣的:(AngularJS)