/***@name getOwnJssData 获取设置data-jss这种方式的数据*@param el*@param needInit*@return {Object} data
/
function getOwnJssData(el,needInit){var data = el.__jssData;if(!data){//匹配上key为data-jss适合在每个标签里面加data-jss=""这种方式var s = el.getAttribute('data-jss');if(s){//进行{}包裹if (!/^\s*{/.test(s)) {s = '{' + s + '}';}//evalExp会把字符串转换成对象 //赋值给data和el.__jssDatadata = el.__jssData =  evalExp(s);             }else if(needInit){data = el.__jssData = {};}}//返回数据对象return data;
}
/***@name getOwnJss *@param el*@param attributeName 指定对应的key为attributeName*@see getOwnJssData*/
getOwnJss:function(el,attributeName){var data = getOwnJssData(el);if(data && (attributeName in data)){return data[attributeName];}return undefined;}

结论

  • getOwnJss只是返回data-jss这种方式的数据,而且是第一个匹配元素的对应数据
/***@name setJss*@param el*@param attributeName*@param attributeValue*@see getOwnJssData*/
setJss:function(el,attributeName,attributeValue){var data = getOwnJssData(el,true);data[attributeName] = attributeValue;}
/***@name removeJss*@param el*@param attributeName*@see getOwnJssData*/
removeJss:function(el,attributeName){var data = getOwnJssData(el);if(data && (attributeName in data)){//采用delete方式删除delete data[attributeName];//返回标志位,true代表删除操作完成return true; }//返回标志位,默认falsereturn false;}
/***@name getJss*@param el*@param attributeName*@see getOwnJssData*@see getRuleData*/
getJss:function(el,attributeName){var data = getOwnJssData(el);if(data && (attributeName in data)){return data[attributeName];}//idvar getRuleData = Jss.getRuleDate,id = el.id;//id是有规范的"#"+idif(id && (data = getRuleData("#" + id)) && (attributeName in data)){return data[attributeName];}   //namevar name = el.name;//name是有规范的"@"+nameif(name && (data = getRuleData("@" + name)) && (attributeName in data)) {return data[attributeName];}//classNamevar className = el.className;//className是有规范的"."+className  if(className){//支持"classNameA classNameB classNameC"var classNames = className.split(" ");for(var i = 0;i<classNames.length;i++){if((data = getRuleData('.'+classNames[i])) && (attributeName in data)){return data[attributeName];}    }}//tagNamevar tagName = el.tagName;if(tagName && (data = getRuleData(tagName)) && (attributeName in data)){return data[attributeName];}return undefined;}

从getJss的设计得出一些结论

  1. 获取的有一定的优先顺序:data-jss >  #id > @name > .className > tagName

qwrap之Jss调用相关推荐

  1. 探究一下qwrap的Jss开篇

    本文探究一下qwrap的一个特色地方:Jss mix(Jss,{//存储的变量空间rules:{},/***@name addRule*@param sSelector {String} select ...

  2. 手写动画css jss_用手写笔生成CSS网格

    手写动画css jss I've jumped into Stylus over the past few moths and I love it.  I wouldn't say it's bett ...

  3. 【转】Jquery -Ajax 入门练习 Jquery.Ajax 调用后台函数,获取DataTable Json,Asp.net

    直接上图=============最后拷贝源码(图片清楚) ====================================================================== ...

  4. c#使用HttpClient调用WebApi

    调用WebApi 可以利用HttpClient来进行Web Api的调用.由于WebA Api的调用本质上就是一次普通的发送请求与接收响应的过程, 所有HttpClient其实可以作为一般意义上发送H ...

  5. ajax调用后台Datatable

    之前遇到的问题,用AjaxPro方式没有实现,后来使用的Jquery .ajax方法调用后台的WebMethod返回的DataTable来实现的.有园友问关于将DataTable转换成JSON格式的疑 ...

  6. sqlserver 调用接口往企业微信推送消息

    其实解决问题的方法有很多,对于定时推送的功能来说,.net和java 都有自己的定时功能,但对于这些不熟悉,只熟悉sqlserver 的人来说,肯定希望从sqlserver下手.于是,我就尝试做了下, ...

  7. 编译型 JSS 框架 Linaria 的原理

    Linaria 是一个近似于 styled-components 和 emotion JSS 框架,不同点在于, styled-components 和 emotion 是一个 运行时 方案,而 Li ...

  8. Linaria 也许是现在 React 最佳的 JSS 方案

    React 社区一直在探索各种 JSS 方案,比如现在比较出名的 styled-components ,但他们或多或少都有些问题存在,但是社区对 JSS 方案的探索一直没有停下,而现在看上去最像最佳方 ...

  9. ashx 接口调用_使用ajax去请求调用ashx的接口

    首先要明白这个是前台去请求后台的接口,把前台的参数传给后台,然后后台给前台一个或多个返回结果. 1.后台的代码如下: /// /// GetInfomationDetail 的摘要说明 /// pub ...

最新文章

  1. Array 数组去重 总结10方法(7)
  2. Linux内核系统时钟管理 感想总结 (未完待续)
  3. java同步互斥功能检测_猿考研之操作系统篇三(进程同步,管程,死锁)
  4. 程序员的小天地:注释中的快乐
  5. 117.滑动窗口协议
  6. 构造数组MaxTree、环形单链表的约瑟夫问题等总结
  7. Eclipse更改系统主题
  8. Linux运行项目部分空指针,技术文章—Linux编程时遇到Oops提示该如何排查?
  9. 自定义滚动条CSS样式
  10. Mac上关于shell使用Python3和C++11声明
  11. 2020中科院sci分区查询_2020年中科院分区(基础版)更新
  12. python xmlns 解析_使用python读取标记中包含xmlns的XML文件
  13. FFMPEG列出DirectShow支持的设备
  14. 最强悍的FCKEditor配置和攻略(转载)
  15. 第二章:Improving On User Commands--14.格式化长句
  16. 菜鸟必知之网络安全常识
  17. 【自动控制原理】系统带宽
  18. OS学习笔记-18(清华大学慕课)信号量
  19. Cesium学习教程+笔记(Mars3D) 图层 图层组 矢量数据
  20. Bilibili 视频下载 Python 实现

热门文章

  1. DP专题--P1796 汤姆斯的天堂梦
  2. 基于Pubmed数据库的蛋白质修饰后的信息挖掘.完整代码+数据 毕业设计
  3. java二维数组随机赋值_java 二维数组随机赋值
  4. IS指标复现 文本生成图像IS分数定量实验全流程复现 Inception Score定量评价实验踩坑避坑流程
  5. linux grud文件丢失,linux命令:grub 文件详解及grub修复,系统常见故障修复(示例代码)...
  6. php转跳到html,php跳转到html的方法
  7. 第四章:神奇的变身器-转义字符,痴月熊学python
  8. python怎么用turtle画同心圆_在Python中用turtle函数画同心圆
  9. 致传统企业朋友:不够痛就别微服务,有坑 (2)
  10. 基于HTML+CSS+JS实现七夕情人节表白代码【含代码】