Magicodes.WeiChat——后台JS框架封装

Magicodes.WeiChat同时也致力于提高后台开发效率，因此对在后台前端这块也做了一定的封装。我们先来说说主要的框架JS——mwc.js和mwc_elements.js。这两个JS文件位于Scripts目录下的app目录：

· mwc：前端框架定义，可以理解为接口定义

· mwc_elements：基于前端框架定义的具体实现

主要API功能如下：

1日志

日志函数用于向浏览器控制台输出日志信息，比如调试信息、警告信息、错误信息、灾难信息等等，兼容主流的浏览器。后续还会增强相关函数，目前只做了简单的封装。

1.1 定义

目前封装了5个日志记录函数，分别是：

方法名

参数

描述

mwc.log.debug

logObject:object

输出debug日志

mwc.log.info

logObject:object

输出info日志

mwc.log.warn

logObject:object

输出warn日志

mwc.log.error

logObject:object

输出error日志

mwc.log.fatal

logObject:object

输出fatal日志

1.2 使用示例：

mwc.log.debug('记录调试日志')

mwc.log.info('记录信息日志')

mwc.log.warn('记录警告日志')

mwc.log.error('记录错误日志')

mwc.log.fatal('记录灾难日志')

1.3 效果图

image

2 通知

通知函数用于向用户提示相关业务信息。默认显示在用户窗口的右上角，然后在一定时间后会自动消失。

不同函数显示的颜色和图标不同，通常用于显示业务成功操作提示，警告提示，错误提示等信息。

2.1 定义

函数定义如下：

方法名

参数

描述

mwc.notify.success

message（消息正文）:string,

title（消息标题）:string

显示success提示

mwc.notify.info

message（消息正文）:string,

title（消息标题）:string

显示info提示

mwc.notify.warn

message（消息正文）:string,

title（消息标题）:string

显示warn提示

mwc.notify.error

message（消息正文）:string,

title（消息标题）:string

显示error提示

2.2 使用示例

mwc.notify.success('这是成功提示！','消息提示')

mwc.notify.success('这是成功提示！')

mwc.notify.info('这是信息提示！','消息提示')

mwc.notify.info('这是信息提示！')

mwc.notify.warn('这是警告提示！','消息提示')

mwc.notify.warn('这是警告提示！')

mwc.notify.error('这是错误提示！','消息提示')

mwc.notify.error('这是错误提示！')

2.3 效果图

image

3 弹窗

弹窗信息（提示）用于向用户显示需要用户确认的信息或内容，主要用于弹窗显示信息确认、成功确认、警告确认、错误确认、操作确认等。

3.1 定义

方法名

参数

描述

mwc.message.info

message（消息正文）:string,

title（消息标题）:string

显示Info信息

mwc.message.success

message（消息正文）:string,

title（消息标题）:string

显示success信息

mwc.message.warn

message（消息正文）:string,

title（消息标题）:string

显示warn信息

mwc.message.error

message（消息正文）:string,

title（消息标题）:string

显示error信息

mwc.message.confirm

message（消息正文）:string,

title（消息标题）:string

显示confirm信息

3.2 使用示例

mwc.message.info('图片删除成功！','温馨提示')

mwc.message.success('图片删除成功！','温馨提示')

mwc.message.warn('图片删除失败！','温馨提示')

mwc.message.error('图片删除出现错误，该图片不存在！','温馨提示')

mwc.message.confirm('确定需要删除此项目么？','温馨提示')

mwc.message.confirm('确定需要删除此项目么？','温馨提示',function(){alert('删除成功！')})

3.3 效果图

Info：

image

Success：

image

Warn：

image

Error：

image

Confirm：

image

4 UI阻塞

UI阻塞会显示遮罩层以阻碍用户的操作，通常用于Ajax请求处理或者时间比较长的业务处理，以提高用户体验并且防止在处理过程中用户进行其他操作。

4.1 定义

方法名

参数

描述

mwc.ui.block

elm（jq选择器）:string

阻塞UI

mwc.ui. unblock

elm（jq选择器）:string

取消阻塞

4.2 使用示例

mwc.ui. block ()

mwc.ui. unblock ()

mwc.ui. block ('#newUsers')

mwc.ui. unblock ('#newUsers')

4.3 效果图

image

image

5 忙碌状态

忙碌状态用于阻塞UI并且显示加载动画，通常用于Ajax请求处理或者时间比较长的业务处理，以提高用户体验并且防止在处理过程中用户进行其他操作。

5.1 定义

方法名

参数

描述

mwc.ui.setBusy

elm（jq选择器）:string,

optionsOrPromise（设置）:object

设置为忙碌状态

mwc.ui.clearBusy

elm（jq选择器）:string

清除或关闭忙碌状态

5.2 使用示例

mwc.ui.setBusy()

mwc.ui.clearBusy()

mwc.ui.setBusy('#newUsers')

mwc.ui.clearBusy('#newUsers')

mwc.ui.setBusy('#newUsers',{finally:function(){alert('终于搞完了！')}})

5.3 效果图

image

image

6 弹出窗口

弹出窗口用于在当前页面弹窗以Iframe的形式加载其他页面并显示，以便用户在一个界面里完成所有的操作或者查看所有内容，以便提高用户体验。

6.1 定义

方法名

参数

描述

mwc.window.show

title（窗口标题）:string,

url（url地址）:string,

width（宽度，可省略）:int,

height（高度，可省略）:int

弹出窗口。

注意：该函数支持多级弹窗，如果没有设置弹窗大小，子级弹窗的高宽会被自动设置比父级窗口稍小，以更好的呈现。

mwc.window.closeSeft

  

从当前窗口的内容页关闭自身（即关闭当前窗口）

mwc.window.closeAll

  

关闭所有弹窗

6.2 使用示例

//将clicktype='modal'属性的链接均用弹窗打开

$("a[data-clicktype='modal']").on('click', function () {

var url = $(this).data('url');

var title = $(this).data('title');

mwc.window.show(title, url);

});

mwc.window.closeSeft()

mwc.window.closeAll()

6.3 效果图

image

image

image

7 Ajax请求处理

本框架封装了对象restApi用于处理Ajax请求。主要用于使用Ajax请求REST风格的Web Api，并且根据状态码处理请求结果，回调成功或错误函数。

7.1 HTTP状态码处理

mwc.restApi封装了对Ajax请求的通用处理。其定义了get、put、post、delete等4个函数，能够很方便的访问REST API接口。默认已支持以下类型的HTTP状态码处理：

HTTP状态码

描述

处理

对应WebApi方法

200

成功响应

调用success函数，并传递jsonData

Ok

201

创建成功

调用success函数，并传递jsonData

Created

401

需要验证

弹出“登陆失效，请重新登陆！”提示，调用error函数，并跳转到登录窗口

Unauthorized

204

成功响应，无内容返回

调用success函数

StatusCode(HttpStatusCode.NoContent)

404

资源或对象不存在

弹出“您访问的资源已被删除或不存在！”提示，调用error函数，并传递错误消息

NotFound

400

请求失败

调用error函数，并传递失败对象消息

BadRequest

500

服务器错误

调用error函数，并传递错误消息对象

InternalServerError

配置说明，在Ajax默认的配置项上，增加对以下属性的支持：

属性名称

类型

说明

success

function

业务处理成功后执行的回调函数

error

function

业务处理失败后执行的回调函数

isBlockUI

bool

请求时是否阻碍UI（会显示遮罩层以及加载动画），默认为true

blockUI

string

Jquery选择器表达式

7.2 定义

方法名

参数

描述

mwc.restApi.get

setting（ajax设置）:object

使用Http GET发起Ajax请求

mwc.restApi.delete

setting（ajax设置）:object

使用Http DELETE发起Ajax请求

mwc.restApi.put

setting（ajax设置）:object

使用Http PUT发起Ajax请求

mwc.restApi.post

setting（ajax设置）:object

使用Http POST发起Ajax请求

7.3 使用示例

7.3.1 GET

示例1：

mwc.restApi.get({
                    url: '/api/Menus',
                    success: function (data) {
                        $.each(data, function (i, v) {
                            if (v.sub_button) {
                                $.each(v.sub_button, function (i1, v1) {
                                    v.sub_button[i1] = $.extend(self.getModelTpl(), v1);
                                })
                            }
                            data[i] = $.extend(self.getModelTpl(), v);
                        });
                        self.Menus(ko.mapping.fromJS(data));
                    }
                });

示例2：

mwc.restApi.get({
            //请求地址
            url: '/api/News/' + newValue,
            //是否锁定UI
            isBlockUI: true,
            //可选，锁定元素
            blockUI: componentInfo.element,
            //成功函数
            success: function (data) {
                self.Name(data.Title);
                self.Url('/MediaFiles/thumb/' + data.ThumbMediaId + '.jpg');
            }
        });

示例3：

//加载数据
    this.loadData = function () {
        mwc.restApi.get({
            //请求地址
            url: '/api/News/' + self.currentPageIndex() + '/' + self.pageSize(),
            //是否锁定UI
            isBlockUI: true,
            //可选，锁定元素
            blockUI: componentInfo.element,
            //成功函数
            success: function (data) {
                self.dataRows(data.DataRows);
                self.totalCount(data["TotalItemCount"]);
                self.pages(self.getPagesArr());
                self.showLoader(false);
            }
        });
};

7.3.2 POST

示例1：

mwc.restApi.post({
                    url: "@Model.TemplateNo",
                    contentType: "application/x-www-form-urlencoded",
                    data: dataJson,
                    success: function (data) {
                        if (data.Success && data.Result)
                            location.href = '/WeiChat_MessagesTemplateSendLog?templateNo=@Model.TemplateNo&batchNumber=' + data.Result;
                        else
                            mwc.message.warn('操作失败，具体原因请查看系统日志！');
                    }
                });

7.3.3 PUT

mwc.restApi.put({
                    url: '/api/Menus',
                    data: { menu: { button: data } }
                });

7.3.4 DELETE

mwc.restApi.delete({
                    url: "/api/images/" + $(this).data("id"),
                    success: function (data) {
                        mwc.notify.success("操作成功！");
                        setTimeout(function () {
                            location.reload();
                        }, 1000);
                    }
                });

已经在封装微信H5 UI框架的脚本了，请关注后续更新。

posted @ 2016-03-28 17:32  雪雁  阅读(2763)  评论(3)  编辑  收藏  举报