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
