JSS----另一种节点与JS数据的关系模式

节点JS数据的用途
一个简单的例子,我们的页面需要一个日期输入框,用html5可以简写为:<input name="birthday" type="date"/>
但是,只有type="date"这一个设置,远远不能满足交互需求。
看一下wagang的valid组件(http://dev.qwrap.com/resource/js/wagang/valid/_examples/Valid-BaseDemo.htm )里,与日期输入框交互有关的信息还有哪些:
    minValue 最小日期
    maxValue 最大日期
    d_format 用户日期格式错误
    d_upper 日期太晚时的提示
    d_lower 日期太早时的提示
这些信息没有标准的dom属性与之对应,我们需要js来根据些信息来完成一些交互需求。
同时,这些信息又跟某具体的元素相关。
那么,如何将这些信息(数据)与元素对应起来呢?

节点JS数据的描述方式
我们看一下有哪些方式来实现这种关联。
1. 自定义属性描述

    <input  id="fromDate" dataType="d" minValue="2011-11-12"/>

2. JS偷加属性

    <input  id="fromDate"/>
<script>g('fromDate').dataType='d'; g('fromDate').minValue:'2011-11-12';</script>

3. JQuery的data方法

    <input id="fromDate"/>
<script>$('#fromDate').data({dataType:'d',minValue:'2011-11-12'});</script>

4. ECUI 格式(百度欧阳等同学开发,http://tangram.baidu.com/other/ecui/

    <input  id="fromDate" ecui="dataType:d;minValue:2011-11-12">

5. JSS 格式

    <input  id="fromDate" data-jss="dataType:'d',minValue:'2011-11-12'">

6. 其它,批量定义节点JS数据的描述方式—批量

//JQuery的data方法
$('input.d').data('dataType', 'd');
$('input.birthday').data('maxValue','2011-11-12');
//QWrap的jss方法
W('input.d').jss('dataType', 'd');
W('input.birthday').jss('maxValue','2011-11-12');

7. 还有一种,节点JS数据的描述方式—JSS规则

<script>
Jss.addRules({
".d": {dataType:'d', minValue:'2008-01-01'},
".n": {dataType:'n', minValue:0},
".email": {dataType:'email'},
'#fromDate': {minValue:'2011-11-12'}
});
Dom.ready(
function(){
alert(W(
'#fromDate').jss('dataType'));
});
</script>
<input id="fromDate" class="d">

规则的优点:
    在元素产生之前,就可以定规则。
    在获取数据时,再去配合规则。
回头看一下JSS的三种描述节点数据的方式: JSS规则、inline JSS、QW.NodeW所提供的jss方法

<script>
Jss.addRules({
".d": {dataType:'d', minValue:'2008-01-01'},
".n": {dataType:'n', minValue:0},
".email": {dataType:'email'},
'#fromDate': {minValue:'2011-11-12'}
});
</script>
<input id="fromDate" class="d" data-jss="errMsg:'日格输入有误'">
<script>
W(
'#fromDate').jss('d_lower','只能预订五日内的车票');
</script>

这三种描述形成一个小的体系。这个体系与CSS很相似:CSS规则、inline Style、js里更改style。
这也是JSS的得名由来:JSS是仿照CSS的一套"HTML元素"与"JS数据"之间的关联机制。
即:
CSS是"HTML元素"与"style数据"之间的关联机制,
而JSS是"HTML元素"与"JS数据"之间的关联机制。

感谢屈屈(http://www.imququ.com/)同学为这一种机制命名为JSS.

JS的原生代码其实很简单:参见:https://github.com/wedteam/qwrap/blob/master/resource/js/dom/jss.js
重点方法:getJss

        /**
* 获取元素的jss属性,优先度为:inlineJssAttribute > #id > @name > .className > tagName
* @method getJss
* @param {element} el 元素
* @return {any} 获取到的jss attribute
*/
getJss: function(el, attributeName) { //为提高性能,本方法代码有点长。
var data = getOwnJssData(el);
if (data && (attributeName in data)) {
return data[attributeName];
}
var getRuleData = Jss.getRuleData,
id = el.id;
if (id && (data = getRuleData('#' + id)) && (attributeName in data)) {
return data[attributeName];
}
var name = el.name;
if (name && (data = getRuleData('@' + name)) && (attributeName in data)) {
return data[attributeName];
}
var className = el.className;
if (className) {
var classNames = className.split(' ');
for (var i = 0; i < classNames.length; i++) {
if ((data = getRuleData('.' + classNames[i])) && (attributeName in data)) {
return data[attributeName];
}
}
}
var tagName = el.tagName;
if (tagName && (data = getRuleData(tagName)) && (attributeName in data)) {
return data[attributeName];
}
return undefined;
}

其中,平时会使用到的jss方法,是getJss与setJss方法的gsetter合体。
参见:http://dev.qwrap.com/resource/js/_docs/_youa/?content=http://dev.qwrap.com/resource/js/_docs/_youa/qw/nodew/w.jss_.htm


JSS的一些应用场景:
1. Valid验证规则的前后端统一配置:前端验证,前端效果渲染(日期输入框后会加日期按钮)、后端验证,三者可以统一用一套规则:

rules:
{
'@goDate':{
dataType:'d',
errMsg:'请检查您的出发日期',
reqMsg:'出发日期必填'
}
'@backDate':{
dataType:'d',
errMsg:'请检查您的返程日期',
reqMsg:'返程日期必填'
}
}

2. Css与Jss的配合:通过class,定义css展现,与jss代表的js交互

    <script>
Jss.addRule(
'.d', {dataType:'d',minValue:'2008-01-01'});
</script>
<style>
.d
{width:100px;}
</style>
日期:<input class="d">

3. 新的组件初始化方式:组件调用三部曲:

<div id="picslide_1">...</div>
<script type="text/javascript">
W(
'#picslide_1').switchable({
tabSelector :
'>.switch-nav>li',
viewSelector :
'>.switch-content>li',
autoPlay:
true,
supportMouseenter:
true,
mouseenterSwitchTime:
300
});
</script>

可以简化成这样:(因为组件代码已为".picslide"作好了jss定制)

<div id="picslide_1" class="picslide">...</div>
<script type="text/javascript">
W('#picslide_1').switchable();
</script>

可以进一步简化成什么代码都没有了:(因为组件代码里已有Dom.ready(function(){W('div.switchable').switchable();});)

<div id="picslide_2" class="switchable picslide">...</div>

参见例子:http://dev.qwrap.com/resource/js/wagang/switch/_examples/switch_retouched_demo.html

我自己很看好JSS在以后的应用,尤其是在组件的开发中,有了JSS,再也不必用类继承来实现参数特别化,并且还可以作参数特别化的按优先级自动揉合(因为selector有优先度)
更多信息,可以查看这个ppt,这是11月12日webrebuild年会上作分享的ppt:

《QWrap中的JSS》

http://dev.qwrap.com/resource/js/_docs/QWrap-Jss-20111106.ppt

posted on 2011-11-17 16:37 JKisJK 阅读(...) 评论(...) 编辑 收藏

导航

公告