AngularJS-系统代码的配置和翻译

前言：在Web开发中常常会遇到这样的情况，有些页面的下拉选项是固定不变的几个，比如：性别，一般有男、女、保密等。对于这样的情形我们一般在数据库中存储的是数字或者其对应的代码，如果是可维护的需要系统给出一些维护的界面，不断的对这些系统代码进行增删改的操作，如果是固定不变的，一般需要配置一下数据字典，下面我记录的这种方式就是在页面配置的一种方式。

1：示例演示文件的放置方式

2：SysCodeConfig.js文件，这个文件是系统代码配置的关键，也是变化的核心，这里可以配置自己的系统代码，系统代码只需要在第二部分进行添加就行了

/**
 * 1：模块声明部分——不需要改变
 */
var app = angular.module('sysCodeConfigModule',[]);
var sysCodeCon={},sysCode;
/**
 * 2：配置自己的代码部分，需要自己配置对应的内容以及存入对应的变量中，常量仅用于翻译信息，请勿改变，另外，命名采用全部大写多个单词使用下划线分割的形式，请自行注释一下
 */

//性别类型
sysCode =[];
sysCode=[{"id_":1,"name_":"男"},{"id_":2,"name_":"女"},{"id_":3,"name_":"保密"}];
sysCodeCon.SEX_TYPE = sysCode;

/*操作类型，添加新的系统代码也是非常简单的哟！
sysCode =[];
sysCode=[{"id_":"A","name_":"添加"},{"id_":"D","name_":"删除"},{"id_":"U","name_":"修改"}];
sysCodeCon.OPERATION_TYPE = sysCode;
*/

/**
 * 3：将配置的常量配置为模块的常量，以便在对应的模块中使用——不需改变
 */
app.constant('SYS_CODE_CON',sysCodeCon);

3：SysCodeTranslate.js文件，翻译系统代码的模块，这个文件不需要任何的改动，其作用非常简单——根据代码类型和代码，将代码翻译成文字用于页面展现

/**
 * 1：根据系统代码的ID和类型将对应的代码翻译为对应的名称，用于在页面详情以及列表中使用——不需要改变
 */
var app=angular.module("sysCodeTranslateModule", ['sysCodeConfigModule']);

app.factory('sysCodeTranslateFactory',function(SYS_CODE_CON) {
    return{
        //系统代码翻译
        codeTranslate:function(code,type)
        {
            if(type)
            {
                var sysCodeCon=SYS_CODE_CON,typeList=sysCodeCon[type],i=0;
                if(typeList)
                {
                    for(;i<typeList.length;i++)
                    {
                        if(code==typeList[i].id_){return typeList[i].name_ }
                    }
                }
            }
            return code;
        }
    };
});

4：demo.html文件，这里就是一个简单的演示，具体到实际的项目一定比这复杂的多，但是对于我们要描述的代码展现和翻译是怎么回事，还是足够的

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <!-- 引入angularJS框架文件 -->
        <script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
        <!-- 引入系统代码配置文件 -->
        <script type="text/javascript" src="SysCodeConfig.js"></script>
        <!-- 引入系统代码翻译文件 -->
        <script type="text/javascript" src="SysCodeTranslate.js"></script>
        <script type="text/javascript">
            //声明demo的模块及其依赖的模块
            var app = angular.module('demoModule', ['sysCodeConfigModule' , 'sysCodeTranslateModule']);
            //在demo模块中创建一个控制器，并且引入其依赖的模块中服务
            app.controller('demoController', function($scope , SYS_CODE_CON , sysCodeTranslateFactory) {
                //将系统代码配置、翻译相关的服务挂在当前的作用域变量上
                $scope.sysCode={'con':SYS_CODE_CON,'translate':sysCodeTranslateFactory};
                //打印系统代码先关的对象
                console.info("$scope.sysCode is ======",$scope.sysCode);
                //声明用户对象，用于双向数据绑定、系统代码翻译的演示
                $scope.user={};
            });
        </script>
    </head>

    <body bgcolor="AliceBlue" ng-app="demoModule" ng-controller="demoController" align="center">
          <!-- 使用配置的系统代码，多用在添加、修改的页面 -->
          <select ng-options="s.id_ as s.name_ for s in sysCode.con.SEX_TYPE" ng-model="user.sex">
              <option value="">请选择</option>
          </select>
          <!-- 翻译配置的系统代码，多用在列表查询、详情查询页面 -->
          <p ng-bind="sysCode.translate.codeTranslate(user.sex,'SEX_TYPE')"></p>
    </body>
</html>

5：为了更容易理解我们的例子，下面我截取了几张代码演示的图例

5-1：首次进入页面的图例，使用了AngularJS的”ng-options“指令

5-2：展示系统代码的配置集合

5-3：利用AngularJS的数据双向绑定，展示了一下系统代码翻译的功能

6：小结

示例代码比较简单，不过在Web开发中常常会使用的到，所以，这里小记一笔以备后用。

当然，这里仅仅针对系统代码的控制提供了一种思路，这种思路是我认为是可行的，针对系统代码的处理有如下一些情况，如果是可变的应该提供相应的维护页面，存储在数据库中，如果是不可变的也可以存储在数据库中（需要初始化基础数据）、不过存储在服务器的某个文件中对用户不可见也行，如果对于用户可见（习惯按F12的用户）也没关系，那么存储在前端的JS文件中也是可以的。

为什么这样存储哪？直接存储汉字不也行吗？

直接存储汉字也是可以的，不过没有存储数字或者代码好，存储数字或者代码相对于存储汉字有如下的几点好处：

1：节省存储空间

2：能提高数据库查询的效率

3：使编程更简单，不然汉字多了，会多写许多的代码，汉字如果需要变换，使用汉字的维护成本就高了去啦（可能前端、后端、数据库视图中都需要做出更改）！

posted on 2016-09-01 15:59 godtrue 阅读(1170) 评论(0) 编辑收藏举报