ExMobi Lite轻量级JS开发框架

nandy007
   2015-08-05 11:49:03发布  2017-02-07 10:34:13更新 4收藏, 7846浏览
ExMobi客户端技术
0

使用ExMobi进行开发,少不了对UIXML的dom进行操作,然而UIXML的dom与HTML的dom不是等同的,既有相似又有不同
为了方便开发者们在UIXML中能够方便的操作dom,所以特别封装了这个ExMobi Lite轻量级JS框架,希望能对大家有所帮助。
代码已经在github开源: https://github.com/nandy007/exmobi-lite
源码和示例:
exmobi_lite.zip(0.17M 下载次数:533)

更新历史

1.2.5 beta版(2016-9-9):

1、支持$.ajax、$.server、$.form、$.serverForm提交键值对的时候,设置的data可以是一个json对象,内部会处理为键值对参数

2、支持$.ajax、$.server提交非键值对的时候,如果data为json对象自动转换为json字符串

3、修复$.form和$.serverFrom提交文件的bug

1.2.4 beta版(2016-4-28):

1、异步请求默认添加esn和imsi的头信息

2、完善on、off和trigger事件操作,具体请看下面api用法

3、数据注入默认处理,没有id的控件自动添加id(主要是配合2完成事件监听)

4、完善template.js,提供template-native-exmobi.js,此类可以支持模板内include嵌套本地模板文件

5、支持完成uixml数据注入,通过$.w.open(模板地址,json数据,是否新窗口打开);来实现将json数据注入到模板地址中渲染完整uixml页面后打开6、对eval的使用处理,使用代替方案,以保证代码注入安全

1.2.3 beta版(2016-1-11):

1、对$.form和$.serverForm异步请求类增加选项formId,其值为某个form表单的id值,当设置此值,则data和fileElementId选项自动失效,而最终提交的参数为formId对应的表单的数据


1.2.2 beta版(2015-12-31):

1、修复同时对多个对象进行render会导致所有数据都往最后一个对象注入的问题

1.2.1 beta版(2015-11-30):

1、修复所有异步请求的headers参数值的bug,用法不变

1.2.0 beta版(2015-08-14):

1、增加$().addClass|hasClass|removeClass|loadUrl函数

2、增加$.preferenceChange函数

1.1.0 beta版(2015-08-10):

1、增加$.alert和$.confirm函数


基本说明
ExMobi Lite框架是用于UIXML中的类似于jQuery的JS框架。用法类似于$(selector)。
使用时需引用core.js(核心类)和template.js(artTemplate的简洁语法,用于数据注入,如需使用原生语法请引用template-native,使用方法不变,请参考https://github.com/aui/artTemplate)。
ExMobi Lite默认会占用$作为操作符,如有其它框架也使用了$作为操作符,请最后引用ExMobi Lite,这时候ExMobi Lite将出让$的使用权。可以使用ExMobiLite(selector)代替原$操作。
当ExMobi Lite出让$使用权的时候,可以通过ExMobiLite.noConflict()挂靠新的操作符,比如:var $a = ExMobiLite.noConflict();后续则可通过$a(selector)进行操作。

基本用法

$(selector).html('new');

selector的类型

支持id选择器(#id)、元素选择器(tag)、类选择器(.className)和属性选择器([attr='value'])
必须至少包含tag、#id或者属性[name='']中之一,否则无法取到对象
支持多属性,多个选择器用英文“,”隔开
不支持通配符*,不支持派生,不支持多样式


正确示例

$('div, #test, [name=ipt][type=file]')
$('div.tab, input#test, #test[name='ipt']')


错误示例

$('*')【不支持通配符】
$('.tab')【未包含tag、#id或[name='']之一】
$('div #test')【不支持级联】 $('div.tab.menu')【不支持多样式】


dom基本操作
[]数组索引

var nativeDom = $(selector)[index];//根据索引获取某个dom的原生JS对象


html函数

var html = $(selector).html();//获取dom内部innerHTML
$(selector).html('new html');//设置dom内部innerHTML


val函数

var val = $(selector).val();//获取dom的value值
$(selector).val('new value');//设置dom的value值


attr函数

var attr = $(selector).attr('attrName');//获取dom的某个属性值
$(selector).attr('attrName', 'attrVal');//设置dom的某个属性值

注:当$对象调用了on监听事件,则修改dom对象的事件属性实际会添加到事件监听队列里,实际点击控件的时候触发的是$对象的事件触发器,在触发器里遍历所有事件队列从而触发设置的属性

css函数

$(selector).css('styleName', 'styleVal');//设置dom的某个样式
$(selector).css({'styleName' : 'styleVal'});//设置dom的多个样式
支持的样式设置请参考手册



hasClass函数

$(selector).hasClass('className');//返回dom是否包含某个样式



addClass函数

$(selector).addClass('className', ['className']);//设置dom的某个样式



removeClass函数

$(selector).removeClass('className');//移除dom的某个样式



loadUrl函数

$(selector).loadUrl('path');//为webview设置url

append函数

$(selector).append('new str' [, 'new str'...]);//为dom追加innerHTML


get函数

$(selector).get(index);//根据索引获取某个dom的$对象


check函数

$(selector).check();//设置dom为选中状态


uncheck函数

$(selector).check();//设置dom为未选中状态


checked函数

var isChecked = $(selector).checked();//获取dom的选中状态


each函数

$(selector).each(function(i){
//this对象为dom的原生JS对象,通过$(this)转成$对象
var dom = $(this);
});//循环选择器中的所有dom对象


序列化相关函数

//序列化form内的表单元素为键值对字符串,多个相同name会出现多次
var params = $(selector).serialize();
//序列化form内的表单元素为JSON对象,多个相同name的值为数组
var paramsJSON = $(selector).serializeJSON();
//序列化form内的表单元素为数组,多个相同name会出现多次
var params = $(selector).serializeArray();
注:所有序列化不包含文件类型

显隐函数

$(selector).show();//dom元素显示
$(selector).hide();//dom元素隐藏

数据注入函数

$(selector).renderReplace(str, data, callback);//注入后的数据替换原来dom内的内容
$(selector).renderAfter(str, data, callback);//注入后的数据在dom内尾部插入
$(selector).renderBefore(str, data, callback);//注入后的数据在dom内顶部插入
注:
str可以为模板的字符串、http地址(走Ajax服务端异步请求)、res地址
data可以为json对象、http地址(走Ajax服务端异步请求)、res地址
callback为回调函数,注入结束会调用此函数,其接收三个参数:json渲染模板后的HTML片段(字符串),模板内容(字符串)和json数据(json格式)

注:

1、目前template-native-exmobi.js可以支持数据注入可以支持inlude语法递归调用本地的模板文件。此类只支持原生语法。用法示例:

<%include('res:page/template/mh/dbdetail.template', {forms:[rows[tfrIndex]]})%>

include函数接受两个参数,第一个是模板地址,第二个是注入模板的json数据

2、被注入的dom会自动检测是否有id,没有id的会添加id后注入

事件函数

$(selector).on('eventName', function);//为dom绑定事件
$(selector).trigger('eventName');//触发dom绑定的事件
$(selector).off('eventName');//卸载dom已经绑定的事件

注:
1、能被监听事件的对象,必须具有id属性,目前框架提供的数据注入方法注入前已经为所有没有设置id的控件添加id,所以对数据注入的dom均可以监听

2、能被监听的事件为控件的已支持的事件属性名,比如div的href(而不是onclick,也不是click)



异步请求
经过ExMobi服务端

$.server(options);//对应ExMobi的Ajax类
$.serverForm(options);//对应ExMobi的FormSubmit类

直连第三方系统

$.ajax(options);//对应ExMobi的DirectAjax类
$.form(options);//对应ExMobi的DirectFormSubmit类

特别说明:

server和ajax两个函数不可上传文件,所以options一般包含:
url:http请求地址
type:请求方式,get(默认)|post
data:请求的参数,为字符串
headers:请求的头信息,为json对象,默认会添加esn和imsi在头信息里
dataType:相应数据格式化,text(默认)|json
timeout:超时时间,20000(默认),单位毫秒
success:成功回调函数
error:失败回调函数
isBlock:是否显示进度条,true|false(默认)
form和serverForm两个函数可上传文件,所以options除了以上信息,还需要添加:
fileElementId:要上传文件的控件id,单个文件为字符串,多个文件为数组

特别的,可以通过设置formId选项来指定要提交的参数和文件,此时,选项data和fileElementId失效


示例:

$.server({
                                        url : 'http://domain/server.jsp',
                                        dataType : 'json',
                                        success : function(data){
                                                alert(data.list);
                                        }
                                });





dom高级用法(数据注入)

$(selector).renderReplace(str, data, callback);//注入后的数据替换原来dom内的内容
$(selector).renderAfter(str, data, callback);//注入后的数据在dom内尾部插入
$(selector).renderBefore(str, data, callback);//注入后的数据在dom内顶部插入
注:
str可以为模板的字符串、http地址(走Ajax服务端异步请求)、res地址
data可以为json对象、http地址(走Ajax服务端异步请求)、res地址

示例:

function doRender(){
                                //当有异步请求的时候,只能在回调中获得注入后的数据
                                //$.provider('res:page/template/my.template', 'http://domain/server.jsp', function(h, t, o){
                                //        $('#content').html(h);
                                //});
                                
                                //如果模板和数据都是不需要异步请求的,则可以直接通过返回值获得注入内容,而不需要回调函数
                                //var html = $.provider('res:page/template/my.template', {"list":["Agile Lite移动前端框架", "ExMobi三大引擎完美融合"]});
                                //$('#content').html(html);
                                
                                //也可以直接使用renderReplace|renderAfter|renderBefore注入到某个对象里
                                //$.renderReplace('#content', 'res:page/template/my.template', 'http://domain/server.jsp', function(h, t, o){
                                //        alert(h);
                                //});
                                
                                //更简单的用法就是直接对dom操作
                                $('#content').renderAfter('res:page/template/my.template', 'http://domain/server.jsp', function(h, t, o){
                                        //alert(h);
                                });
                        }

常用封装

JSON操作

var str = $.JSON.stringify(json);//将JSON对象转为字符串
var json = $.JSON.parse(str);//将字符串转为JSON对象

常用封装

$.showMask();//显示进度条
$.hideMask();//隐藏进度条
$.showToast(msg);//显示toast提示信息
$.alert(msg, okFunc);//显示alert提示信息
$.confirm(msg, okFunc, cancleFunc);//显示confirm提示信息
$.preferenceChange(func);//批处理func内的同步dom操作,dom操作中有比较大的变化时需要放置在此,以提升处理效率,注意异步处理的不生效

工具集函数

var json = $.util.paramsToJSON(params);//将键值对参数转为json对象

如果有其他需求请跟帖哦

提交评论