本文探究一下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