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