轻量jquery框架之--组件交互基础设计
概要
组件交互基础,即考虑在JQUERY对象下($)下扩展所有组件都需要用到的通用api,如ajax入口、对表单的操作、html片段加载、通用的配合datagrid通用的curd客户端对象等。
扩展api如下
一、ajax设计
(1)统一ajax请求的流程预计数据返回格式、ajax请求的数据返回格式如下:
{
code:0/1, //0 表示正确运行,并返回了信息、数据;1表示非正确返回结果(可能是程序异常或者运算结果异常),异常信息放到message属性中
message:"服务端提示的信息",
data:{} //数据,如果返回的结果需要带数据,则保持到data属性中,如tree,datagrid的请求返回的数据就放在该属性中
}
(2)将ajax的请求流程设计为try.. catch.. finally...模式,即无论是正确运行还是错误运行,都应该有一个finally执行,这样客户代码可以注册自己需要运行的函数
(3)ajax默认配置定义
var ajaxOpts = {
timeout: 1000 * 60,
type: "POST",
dataType: 'json',
async: true,
preRequest: function () {//请求前
},
/***
*ajax错误
***/
error: function (xhr, status, errorThrown) {
this.final(status);
},
/**
*请求成功,并返回结果
***/
success: function (res) {
this.final(res);
if (res.code === 0) {
//res.convert 指的是返回的data属性值是json数据,但是是字符串格式,需要转为json对象后才传给客户代码
if (typeof res.convert != 'undefined' && (res.convert || res.convert === 'true'))
res.data = eval("(" + res.data + ")");
this.ok(res.data);
} else {
this.fail(res.message);
}
},
/**
*当返回结果是正确时的处理
**/
ok: function (data) {
},
/***
*当返回结果是非正确时的处理
***/
fail: function (msg) {
alert(msg);
},
/**
* 无论如何都回调的函数
****/
final: function (res) {//无论成功,失败,错误都执行的回调
}
};
二、其他通用api设计
三、整体代码
/**
* @author huangjingwen
* 封装通用公用接口
* @version 1.0
*/
(function ($) {
var ajaxOpts = {
timeout: 1000 * 60,
type: "POST",
dataType: 'json',
async: true,
preRequest: function () {//请求前
},
/***
*ajax错误
***/
error: function (xhr, status, errorThrown) {
this.final(status);
},
/**
*请求成功,并返回结果
***/
success: function (res) {
this.final(res);
if (res.code === 0) {
//res.convert 指的是返回的data属性值是json数据,但是是字符串格式,需要转为json对象后才传给客户代码
if (typeof res.convert != 'undefined' && (res.convert || res.convert === 'true'))
res.data = eval("(" + res.data + ")");
this.ok(res.data);
} else {
this.fail(res.message);
}
},
/**
*当返回结果是正确时的处理
**/
ok: function (data) {
},
/***
*当返回结果是非正确时的处理
***/
fail: function (msg) {
alert(msg);
},
/**
* 无论如何都回调的函数
****/
final: function (res) {//无论成功,失败,错误都执行的回调
}
};
/**
*框架的ajax统一入口
*所有ajax返回均以 {code:'',message:'',data:{}}的格式返回
*code=0表示服务器无异常运行并返回结果,code=1时,表示服务器出现异常并返回提示
*message,用与服务器返回的信息提示
*data,用于服务器返回的数据,如tree组件、datagrid组件返回的数据就保存到data当中
****/
$.request = function () {
var args = arguments[0];
var opts;
if (args != undefined)
opts = $.extend({}, ajaxOpts, args);
else
opts = ajaxOpts;
opts.preRequest();
$.ajax(opts);
};
/***
* 某个html标签加载远程html文件
*options={ target:jquery目标对象,
* url:'远程地址',
* params:{},//参数
* load:function(){.........} , //加载前处理事件
* loaded:function(result){.........} //加载后处理事件
* }
***/
$.htmlLoad = function () {
var opts = arguments[0];
opts.target.html("<div class='loading'>正在加载......</div>");
if (typeof opts.load === 'function') {
opts.load.call(opts.target);
}
var url = opts.url;
opts.target.load(url, opts.prarms, function (xmlReq, statu, error) {
if (statu === 'error') {
opts.target.html(xmlReq);
} else {
if (typeof opts.loaded === 'function') {
opts.loaded.call(opts.target);
}
}
});
};
/**
*将form表单转为json对象
***/
$.parseForm = function () {
var opts = arguments[0];
};
/***
*将json对象填充到表单中
***/
$.fillForm = function () {
var opts = arguments[0];
};
/***
*重置表单
****/
$.resetForm = function () { };
/**
*信息弹唱框
***/
$.alert = function () {
};
/**
*打开一个窗口
***/
$.window = function () {
};
/***
*获取字符长度
**/
$.getCharWidth = function (text, fontSize) {
var span = document.getElementById("__getcharwidth");
if (span == null) {
span = document.createElement("span");
span.id = "__getcharwidth";
document.body.appendChild(span);
span.style.visibility = "hidden";
span.style.whiteSpace = "nowrap";
}
span.innerText = text;
span.style.fontSize = fontSize;
return span.offsetWidth;
};
/***
*扩展一个通用的curd对象,用于结合datagrid实现通用的curd操作api封装
***/
$.curd = function () { };
$.curd.prototype = {
};
})(jQuery);
代码下载:https://code.csdn.net/hjwen/open-ui/tree/master
轻量jquery框架之--组件交互基础设计的更多相关文章
- Vue.js:轻量高效的前端组件化方案
转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014 ...
- vue-calendar 基于 vue 2.0 开发的轻量,高性能日历组件
vue-calendar-component 基于 vue 2.0 开发的轻量,高性能日历组件 占用内存小,性能好,样式好看,可扩展性强 原生 js 开发,没引入第三方库 Why Github 上很多 ...
- vue-concise-slider 一个轻量的vue幻灯片组件
vue-concise-slider 一个轻量的vue幻灯片组件 阅读 541 收藏 35 2017-07-03 原文链接:github.com 外卖订单处理有烦恼?试试美团点评餐饮开放平台吧,可实现 ...
- Vue.js:轻量高效的前端组件化方案(转载)
摘要:Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在GitHub上已经有5000+的star.本文将从各方面对Vue ...
- 【转】Vue.js:轻量高效的前端组件化方案
摘要:Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在GitHub上已经有5000+的star.本文将从各方面对Vue ...
- Cardinal:一个用于移动项目开发的轻量 CSS 框架
Cardinal 是一个适用于移动项目的 CSS 框架,包含很多有用的默认样式.矢量字体.可重用的模块以及一个简单的响应式模块系统.Cardinal 提供了一种在多种移动设备上实现可伸缩的字体和布局的 ...
- Android轻量缓存框架--ASimpleCache
[转] 大神真面目 稀土掘金,这是一个针对技术开发者的一个应用,你可以在掘金上获取最新最优质的技术干货,不仅仅是Android知识.前端.后端以至于产品和设计都有涉猎,想成为全栈工程师的朋友不要错过! ...
- [Go] 轻量服务器框架基础TCP服务模块
框架要先把整体的结构定义好,一般都是在$GOPATH目录的src下建立自己的目录 zinterface是一些接口的定义 znet就是接口的具体实现 IServer.go package zinterf ...
- [Go] 轻量服务器框架基础TCP连接的抽象和封装
对tcp连接部分以及与连接绑定的业务部分进行抽象和封装 主要是对连接的开启关闭和读写进行封装,抽象出接口,使用回调进行具体业务的绑定 zinterface/iconnection.go package ...
随机推荐
- php base64数据与图片的转换
1.解析base64数据成图片 The problem is that data:image/bmp;base64, is included in the encoded contents. This ...
- CSS定义网页滚动条
(一)滚动条样式主要涉及到如下CSS属性: overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容overflow: auto; 在需要时内容会自动添加滚动条overflow ...
- python爬虫下载youtube单个视频
__author__ = 'Sentinel'import requestsimport reimport jsonimport sysimport shutilimport urlparse &qu ...
- block(三)揭开神秘面纱(上)
block到底是什么 我们使用clang的rewrite-objc命令来获取转码后的代码. 1.block的底层实现 我们来看看最简单的一个block: [caption id="attac ...
- 5W1H分析法
"5W1H分析法"也叫"六何分析法",它是一种分析方法也可以说是一种创造技法.是对选定的项目.工序和操作,都要从原因(Why).对象(What).地点(Wher ...
- LeetCode_Permutations
Given a collection of numbers, return all possible permutations. For example, [1,2,3] have the follo ...
- keil c51 本變數型態(Variable Type)
本變數型態(Variable Type): 類 別 符號位元 位元組(bytes) 表 示 法 數 值 範 圍 整 數 有 2 int(short) -32768~0~>32767 4 long ...
- 《Programming WPF》翻译 第7章 1.图形基础
原文:<Programming WPF>翻译 第7章 1.图形基础 WPF使得在你的应用程序中使用图形很容易,以及更容易开发你的显卡的能力.这有很多图形构架的方面来达到这个目标.其中最重要 ...
- Pawn Brotherhood
Pawn Brotherhood 1 alpha_table = "abcdefgh" 2 3 def safe_pawns(pawns): 4 safe_count = 0 5 ...
- Nx32926 命令关机
一. poweroff关机命令 ~ # poweroff ~ # baud=, quot= w-config: 8bits/char umount: devtmpfs busy - remounted ...