qwrap之Jss调用

 

  

/**
 *@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.__jssData
               data = 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; 

        }
        //返回标志位，默认false
        return 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];
       }

        //id
       var getRuleData = Jss.getRuleDate,
             id = el.id;

       //id是有规范的"#"+id
       if(id && (data = getRuleData("#" + id)) && (attributeName in data)){

              return data[attributeName];
       }   


      //name
      var name = el.name;
      //name是有规范的"@"+name
      if(name && (data = getRuleData("@" + name)) && (attributeName in data)) {

            return data[attributeName];
      }


      //className
      var 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];
              }    
          }
      }
 

      //tagName
      var tagName = el.tagName;
      if(tagName && (data = getRuleData(tagName)) && (attributeName in data)){

           return data[attributeName];
      }


      

      return undefined;
     

}

 

   从getJss的设计得出一些结论：

 

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