me.js - 基于angular的前端模块化框架

me.js 框架概述

me.js 是一个自定义的前端 JavaScript 框架，用于构建单页应用（SPA），具有模块化、组件化和路由管理等功能。

核心功能

1. 模块定义和管理

// 定义模块
var that = me.define("moduleName", {components: {// 组件定义},ctrl: function() {// 控制器逻辑}
});

2. 路由和页面管理

// 配置路由
me.config({container: "#main_body",path: "pages/",// 其他配置
});// 页面跳转
me.show("pages/module/page", {showType: 1,style: "pop",param: { /* 参数 */ }
});

3. 组件系统

// 组件注册
components: {"componentName": "pages/path/to/component"
}// 获取组件
me.getCom("componentName", function(com) {// 使用组件
});

4. 数据绑定和作用域管理

// 在控制器中使用作用域
ctrl: function() {that.$scope.variable = "value";that.$scope.function = function() {// 业务逻辑};
}

5. 全局对象和配置

// 全局配置
me.global.site
me.global.login_data
me.global.enumXXX_map  // 各种枚举映射

使用方式详解

1. 框架初始化

在 index.html 中：

me.config({container: "#main_body",     // 主容器main: "",                    // 主页面path: "pages/",             // 页面路径前缀scroller: ".index_right",   // 滚动容器debug: Config.debug,        // 调试模式cache: false,               // 是否缓存version: version           // 版本号
});// 启动应用
me.run('meApp', []);

2. 模块定义

在各个页面 JS 文件中，如 test.js：

(function () {var that = me.define("caseAdviceList", {// 组件依赖components: {// 可以引入其他组件},// 控制器函数ctrl: function () {// 初始化逻辑Util.initDatePicker();that.$scope.breadcrumbs = me.param().breadcrumbs || [];// 调用其他方法that.switchTab(0);that.getSiteList();},// 自定义方法getSiteList: function () {// 业务逻辑},doSearch: function () {// 搜索逻辑}});
})();

3. 页面跳转和参数传递

// 跳转到新页面
me.show("record/modal/caseView", {showType: 1,style: "pop",param: {case_id: info.case_id}
});// 获取传递的参数
me.param().case_id

4. 组件使用

// 定义组件依赖
components: {"comAllRecordList": "pages/record/components/record/comAllRecordList","comCaseAdviceRecordList": "pages/record/components/record/comCaseAdviceRecordList",
},// 获取并使用组件
me.getCom("comAllRecordList-total", function(com) {that.$scope.comAllRecordList = com;that.listRecord(function (data){that.$scope.comAllRecordList.setData(data, searchParams);});
});

5. 全局功能使用

// 使用全局工具方法
me.global.timeGMTToString();   // 时间格式化// 使用枚举
me.global.enumCaseLibType_key_map.advice.code

核心 API 详解

1. me.define(name, module) 定义一个模块

var module = me.define("moduleName", {components: {},  // 组件依赖ctrl: function() {}  // 控制器
});

2. me.show(path, options) 页面跳转/显示模块

me.show("pages/path/module", {showType: 1,      // 显示类型style: "pop",     // 样式param: {},        // 传递参数isFullPath: true  // 是否完整路径
});

3. me.getCom(name, callback) 获取组件实例

me.getCom("componentName", function(component) {// 使用组件
});

4. me.config(options) 配置框架

me.config({container: "#main_body",  // 容器选择器path: "pages/",          // 页面路径scroller: ".scroller"    // 滚动容器
});

5. me.param() 获取当前模块的参数

var params = me.param();

数据流和状态管理

作用域 ($scope)

ctrl: function() {// 数据绑定that.$scope.data = [];that.$scope.loading = false;// 方法绑定that.$scope.doSomething = function() {// 业务逻辑};
}

组件间通信

// 父组件向子组件传递数据
that.$scope.comAllRecordList.setData(data, searchParams);// 事件监听
me.show("module").on("hide", function(data) {// 处理回调数据
});

实际应用示例

页面模块定义

(function () {var that = me.define("recordList", {components: {"comAllRecordList": "pages/record/components/record/comAllRecordList"},ctrl: function () {// 初始化数据that.$scope.recordList = [];that.$scope.searchString = "";// 初始化功能Util.initDatePicker();that.getDefaultTime();// 加载数据me.getCom("comAllRecordList-total", function(com) {that.$scope.comAllRecordList = com;that.listRecord(function(data){that.$scope.comAllRecordList.setData(data);});});},// 搜索功能doSearch: function(){that.listRecord(function(data){that.$scope.comAllRecordList.setData(data);});},// 数据加载listRecord: function (callback) {// Ajax 请求Util.ajax({method: "POST",data: { /* 请求参数 */ },url: Util.getApiUrl("api/path")}, function (data) {// 处理返回数据that.$scope.recordList = data.list;callback && callback(that.$scope.recordList);});}});
})();