jq插件之metadata

jQuery元数据插件解析

最新推荐文章于 2025-09-15 14:48:22 发布

原创最新推荐文章于 2025-09-15 14:48:22 发布 · 179 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery插件 #metadata

jQuery插件介绍同时被 2 个专栏收录

8 篇文章

订阅专栏

数据存储相关

8 篇文章

订阅专栏

本文介绍了一个基于jQuery的元数据插件实现方法，该插件可通过不同方式（如class属性、元素内部或自定义属性）获取元素上的JSON数据，并进行缓存以提高性能。

先直接上源码吧：

(function($){

      $.extend({

             metadata:{

                   //默认配置
                   defaults:{

                         type:"class",      //默认是class，插件支持elem
                         name:"metadata",
                         cre:/({.*})/,
                         single:'metadata'

                   },

                   /*
                     setType目前支持设置两个参数，一个type,一个name
                   */
                   setType:function(type,name){
                          this.defaults.type = type;
                          this.defaults.name = name;
                   },


                   /*
                     get获取对应的数据
                   */
                   get:function(elem,opts){

                         //合并配置
                         var settings = $.extend({},this.defaults,opts);

                         //怕opts里面外部配置single为''，强制置为metadata
                         if(!settings.single.length){
                             settings.single = 'metadata';
                         }

                         //一上来调用$.data看有没有缓存过的数据
                         var data = $.data(elem,settings.single);

                         //如果有，直接返回,不重复劳动，节省效率
                         if(data){
                               return data;
                         }

                         //给一个默认值"{}"
                         data = "{}";

                         if(settings.type == "class"){
                         //默认class方式：<p id="one" class="some_class {id: 1}">p</p>
                         //从class去读数据，用cre正则去匹配
                              var m = settings.cre.exec(elem.className);
                              if(m){
                                   data = m[1];
                              }

                         }else if(settings.type = "elem"){
                     //elem方式：<p id="one">p<script>{id:1}</script></p>
                     //从elem去读数据
                              if(!elem.getElementsByTagName){
                                    return undefined;
                              }

                              //比如上面用script作为数据源，那么name就得设置script
                              var e = elem.getElemengtsByTagName(settings.name);

                              if(e.length){
                                     //核心还是innerHTML
                                     data = $.trim(e[0].innerHTML);
                              }

                         }else if(elem.getAttribute != undefined){
                                  //自定义属性方向，通过getAttribute来获取数据源
                                  //<p id="one" class="some_class">p</p>
                                  //name就设置为自定义属性的key   
                                   var attr = elem.getAttribute(settings.name);

                                   if(attr){
                                          data = attr;
                                   }
 
                         }

                         
                          //data的类型转换！！！
                          data = eval("(" + data + ")");

                          //调用$.data存一下
                          $.data(elem,settings.single,data);

                          //把对象化的data返回
                          return data;

                   }



             }

      });


      $.fn.metadata = function(opts){
             return $.metadata.get(this[0],opts);
      };

})(jQuery);