探究一下qwrap的Jss開篇

 

    本文探究一下qwrap的一個特色地方：Jss 

      
    

 

mix(Jss,{
       //存儲的變量空間
       rules:{},

       /**
        *@name addRule
        *@param sSelector {String}   selector字符串
        *@param ruleData  {Object}
        * 
       /
       addRule:function(sSelector,ruleData){
               //判斷一下Jss.rules對象裏面是否有key爲sSelector，如果沒有創建空對象{}
               var data = Jss.rules[sSelector] || (Jss.rules[sSelector] = {});
               //合併一下數據，第三個參數true表示覆蓋已有的
               mix(data,ruleData,true);
       },

       /**
        *@name addRules
        *@param rules {Object}   key爲selector 值爲json對象
        *@see addRule 
       /
       addRules:function(rules){
             //批量調用Jss.addRule
             for(var i in rules){
                     Jss.addRule(i,rules[i]);
             }
       },

       /**
        *@name removeRule
        *@param sSelector {String}   selector字符串
        *@return {Boolean} 是否執行刪除操作
        * 
       /
       removeRule:function(sSelector){
             //先看Jss.rules裏面有沒有對應key爲sSelector的數據
             var data = Jss.rules[sSelector];
             if(data){
                   //採用delete
                   delete Jss.rules[sSelector];
                   //給標誌位表示刪除操作成功
                   return true;
             }

             //給標誌位表示沒有執行刪除 
             return false;
       },


       /**
        *@name getRuleData
        *@param sSelector {String}   selector字符串
        *@return {Object} 數據對象
        * 
       /
       getRuleData:function(sSelector){
              //直接返回Jss.rules對象對應的key爲sSelector的value
              return Jss.rules[sSelector];
       },


       /**
        *@name setRuleAttribute
        *@param sSelector {String}   selector字符串
        *@param sSelector {String}   attributeName
        *@param sSelector {String}   value  
       /
       setRuleAttribute:function(sSelector,attributeName,value){
             //創建一個空對象
             var data = {};
             //裝key爲attributeName，value爲value
             data[attributeName] = value;
             //調用Jss.addRule
             Jss.addRule(sSelector,data);  
       },

       /**
        *@name removeRuleAttribute
        *@param sSelector {String}   selector字符串
        *@param sSelector {String}   attributeName
        *@return {Boolean} 是否執行刪除
       /
       removeRuleAttribute:function(sSelector,attributeName){
            var data = Jss.rules[sSelector];
            if(data && (attributeName in data)){
                  //採用delete
                  delete data[attributeName];
                  //給標誌位表示刪除操作成功
                  return true;
            }
            //給標誌位表示沒有執行刪除 
            return false;
       },


       /**
        *@name getRuleAttribute
        *@param {String}   selector字符串
        *@param {String}   attributeName
        *@return 對應attributeName的數據部分
       /
       getRuleAttribute:function(sSelector,attributeName){
              //獲取Jss.rules指定的sSelector，沒有就創建空對象{}
              var data = Jss.rules[sSelector] || {};
              //獲取指定的attributeName
              return data[attributeName];
       }

});

 

 

   結論：

 

• 上面數據存取其實都是操作的Jss.rules這個對象
• sSelector是有規範要求的： 

1. #id    
2. @name  
3. .className  
4. tagName