狠狠撸

狠狠撸Share a Scribd company logo

Qwrap jss

?Download as PPT, PDF?
?
G
greengnn
1 of 17
QWrap-JSS 介绍 ----By JK 2011-11-06
提纲 节点 JS 数据的用途 节点 JS 数据的描述方式 另一种描述方式： JSS JSS 应用实例 QWrap 的 JSS 实现、局限、以及未来展望
节点 JS 数据的用途 日期输入框 <input name=“birthday” type=“date”/> 够用吗？ 看一下现实中，日期输入框有哪些交互参数： 这些参数事实上不是浏览器在用，而是给页面的 js 用的。 -----JS 根据这些参数，来实现相应的交互效果。
节点 JS 数据的用途 一个更复杂的去程回程日期
节点 JS 数据的描述方式 自定义属性描述 <input id=“fromDate” dataType=“d” minValue=“2011-11-12”/> JS 偷加属性 <input id=“fromDate”/> <script>g(‘fromDate’).dataType=’d’; g(‘fromDate’).minValue:’2011-11-12’;</script> JQuery 的 data 方法 <input id=“fromDate”/> <script>$(‘#fromDate’).data({dataType:’d’,minValue:’2011-11-12’});</script> ECUI 格式（百度） <input id=“fromDate” ecui=“dataType:d;minValue:2011-11-12&quot;> JSS 格式 <input id=“fromDate” data-jss=“dataType:’d’;minValue:’2011-11-12’&quot;> 其它 ----- 批量定义
节点 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’); 还有其它方式么？ ---- 规则
节点 JS 数据的描述方式—规则 <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 数据设置方式 <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> 为什么叫 JSS ？ CSS --- JSS ( 感谢屈屈 ) 一套“ HTML 元素”与“ JS 数据”之间的关联机制 Inline style ? CSS ? 与 css 方法
方法介绍 Jss: addRule (selector,data) addRules (ruleDatas) removeRule (sSelector) getRuleData (sSelector) setRuleAttribute (sSelector, arrtibuteName, value) removeRuleAttribute (sSelector, arrtibuteName) getRuleAttribute (sSelector,arrtibuteName) JssTargetH: setJss (el, attributeName , attributeValue) removeJss (el, attributeName) getOwnJss (el, attributeName) getJss (el, attributeName) Retouch 出的 gsetter ： getJss + setJss ? jss
重点方法 JssTargetH.getJss getJss : function (el ,attributeName) /** * 获取元素的属性，优先度为： inlineJssAttribute > #id > @name > .className > tagName * @param {element} el 元素 * @return {any} 获取到的 jss attribute */
小试牛刀之一 Valid 验证规则的前后端统一配置 rules: { ‘ @goDate’:{ dataType:’d’, errMsg:’ 请检查您的出发日期’ , reqMsg:’ 出发日期必填’ } ‘ @backDate’:{ dataType:’d’, errMsg:’ 请检查您的返程日期’ , reqMsg:’ 返程日期必填’ } } 前端除了在提交前验证，也可以依此数据渲染效果，例如在日期输入框后添加日期按钮。
小试牛刀之二 Css 与 Jss 的配合 <script> Jss.addRule(‘. d ’, {dataType:’d’,minValue:’2008-01-01’}); </script> <style> . d {width:100px;} </style> 日期： <input class=“ d ” > 通过 class ，定义 css 展现，与 jss 代表的 js 交互
小试牛刀之三 Switch 组件调用三部曲 <div id=&quot;picslide_1&quot; class=&quot;picslide&quot;>...</div> <script type=&quot;text/javascript&quot;> W('#picslide_1').switchable({ tabSelector : '>.switch-nav>li', viewSelector : '>.switch-content>li', autoPlay: true, supportMouseenter: true, mouseenterSwitchTime: 300 }); // 组件代码已为 &quot;.picslide&quot; 作好了 jss 定制，所以： W('#picslide_1').switchable(); </script> <div id=&quot;picslide_2&quot; class=&quot;switchable picslide&quot;>...</div> <script type=&quot;text/javascript&quot;> // 如果组件代码里已有 Dom.ready(function(){W('div.switchable').switchable();}); // 那我们是不是可以这样： //W('#picslide_2').switchable(); // 完全不用写页面 JS ！！！ </script>
JSS 未来展望 JS 针对节点的数据规范化 不再只是 data-xyz 一种新的传参方式 ajaxable / validatable / switchable / dragable ( 可交互，如何交互由组件决定 ) ajax() / validate() // 立即交互 // 交互特性都可以由 jss 来定义。让组件的使用更简单
相关链接 QWrap ： http://www.qwrap.com/ Jss 代码： https://github.com/wedteam/qwrap/blob/master/resource/js/dom/jss.js Jss 帮助 http://dev.qwrap.com/resource/js/_docs/_youa/?content=http://dev.qwrap.com/resource/js/_docs/_youa/qw/nodew/w.jss_.htm Valid/Switch 组件 http://dev.qwrap.com/resource/js/wagang/_index.html 友情链接 http://www.360.cn
JSS 的问题 单向 setJss 只定义数据，不主动触发与 jss 相关的任何展现 想逆向太复杂…… 单 selector 规则 只支持” #id” 、 ” @name” 、 ” .class” 、” tagName” 不支持” input.className” 式的组合 想组合有性能问题…… 更多。。。
非常感谢！ Q&A

More Related Content

Qwrap jss

  • 1. QWrap-JSS 介绍 ----By JK 2011-11-06
  • 2. 提纲 节点 JS 数据的用途 节点 JS 数据的描述方式 另一种描述方式： JSS JSS 应用实例 QWrap 的 JSS 实现、局限、以及未来展望
  • 3. 节点 JS 数据的用途 日期输入框 <input name=“birthday” type=“date”/> 够用吗？ 看一下现实中，日期输入框有哪些交互参数： 这些参数事实上不是浏览器在用，而是给页面的 js 用的。 -----JS 根据这些参数，来实现相应的交互效果。
  • 4. 节点 JS 数据的用途 一个更复杂的去程回程日期
  • 5. 节点 JS 数据的描述方式 自定义属性描述 <input id=“fromDate” dataType=“d” minValue=“2011-11-12”/> JS 偷加属性 <input id=“fromDate”/> <script>g(‘fromDate’).dataType=’d’; g(‘fromDate’).minValue:’2011-11-12’;</script> JQuery 的 data 方法 <input id=“fromDate”/> <script>$(‘#fromDate’).data({dataType:’d’,minValue:’2011-11-12’});</script> ECUI 格式（百度） <input id=“fromDate” ecui=“dataType:d;minValue:2011-11-12&quot;> JSS 格式 <input id=“fromDate” data-jss=“dataType:’d’;minValue:’2011-11-12’&quot;> 其它 ----- 批量定义
  • 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 数据的描述方式—规则 <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”> 规则的优点： 在元素产生之前，就可以定规则。 在获取数据时，再去配合规则。
  • 8. 常见的几种 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> 为什么叫 JSS ？ CSS --- JSS ( 感谢屈屈 ) 一套“ HTML 元素”与“ JS 数据”之间的关联机制 Inline style ? CSS ? 与 css 方法
  • 9. 方法介绍 Jss: addRule (selector,data) addRules (ruleDatas) removeRule (sSelector) getRuleData (sSelector) setRuleAttribute (sSelector, arrtibuteName, value) removeRuleAttribute (sSelector, arrtibuteName) getRuleAttribute (sSelector,arrtibuteName) JssTargetH: setJss (el, attributeName , attributeValue) removeJss (el, attributeName) getOwnJss (el, attributeName) getJss (el, attributeName) Retouch 出的 gsetter ： getJss + setJss ? jss
  • 10. 重点方法 JssTargetH.getJss getJss : function (el ,attributeName) /** * 获取元素的属性，优先度为： inlineJssAttribute > #id > @name > .className > tagName * @param {element} el 元素 * @return {any} 获取到的 jss attribute */
  • 11. 小试牛刀之一 Valid 验证规则的前后端统一配置 rules: { ‘ @goDate’:{ dataType:’d’, errMsg:’ 请检查您的出发日期’ , reqMsg:’ 出发日期必填’ } ‘ @backDate’:{ dataType:’d’, errMsg:’ 请检查您的返程日期’ , reqMsg:’ 返程日期必填’ } } 前端除了在提交前验证，也可以依此数据渲染效果，例如在日期输入框后添加日期按钮。
  • 12. 小试牛刀之二 Css 与 Jss 的配合 <script> Jss.addRule(‘. d ’, {dataType:’d’,minValue:’2008-01-01’}); </script> <style> . d {width:100px;} </style> 日期： <input class=“ d ” > 通过 class ，定义 css 展现，与 jss 代表的 js 交互
  • 13. 小试牛刀之三 Switch 组件调用三部曲 <div id=&quot;picslide_1&quot; class=&quot;picslide&quot;>...</div> <script type=&quot;text/javascript&quot;> W('#picslide_1').switchable({ tabSelector : '>.switch-nav>li', viewSelector : '>.switch-content>li', autoPlay: true, supportMouseenter: true, mouseenterSwitchTime: 300 }); // 组件代码已为 &quot;.picslide&quot; 作好了 jss 定制，所以： W('#picslide_1').switchable(); </script> <div id=&quot;picslide_2&quot; class=&quot;switchable picslide&quot;>...</div> <script type=&quot;text/javascript&quot;> // 如果组件代码里已有 Dom.ready(function(){W('div.switchable').switchable();}); // 那我们是不是可以这样： //W('#picslide_2').switchable(); // 完全不用写页面 JS ！！！ </script>
  • 14. JSS 未来展望 JS 针对节点的数据规范化 不再只是 data-xyz 一种新的传参方式 ajaxable / validatable / switchable / dragable ( 可交互，如何交互由组件决定 ) ajax() / validate() // 立即交互 // 交互特性都可以由 jss 来定义。让组件的使用更简单
  • 15. 相关链接 QWrap ： http://www.qwrap.com/ Jss 代码： https://github.com/wedteam/qwrap/blob/master/resource/js/dom/jss.js Jss 帮助 http://dev.qwrap.com/resource/js/_docs/_youa/?content=http://dev.qwrap.com/resource/js/_docs/_youa/qw/nodew/w.jss_.htm Valid/Switch 组件 http://dev.qwrap.com/resource/js/wagang/_index.html 友情链接 http://www.360.cn
  • 16. JSS 的问题 单向 setJss 只定义数据，不主动触发与 jss 相关的任何展现 想逆向太复杂…… 单 selector 规则 只支持” #id” 、 ” @name” 、 ” .class” 、” tagName” 不支持” input.className” 式的组合 想组合有性能问题…… 更多。。。