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