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