zoukankan      html  css  js  c++  java
  • jQuery plugin metadata

    Today, when reading an article -
    A Plugin Development Pattern
    , i found an interesting plugin -
    metadata
    .

    First, let’s see it in action:

        <li id="Li1" class='someclass {"item_id": 1, "item_label": "Label"}'>Item 1</li>
        <li id="Li2" metadata='{"item_id": 1, "item_label": "Label"}'>Item 2</li>
        <li id="Li3">
            <metadata style="display: none;">{"item_id": 1, "item_label": "Label"}</metadata>
            Item 3 </li>
        <li id="Li4">
            <script type="metadata">{"item_id": 1, "item_label": "Label"}</script>
            Item 4 </li>
        $(function() {
            $("#item1").metadata().item_id; // 1
            $("#item1").metadata({
                "type": "class"
            }).item_id; // 1 
    
            $("#item2").metadata({
                "type": "attr"
            }).item_label; // "Label"
            $("#item2").metadata({
                "type": "attr",
                "name": "metadata"
            }).item_label; // "Label" 
    
            $("#item3").metadata({
                "type": "elem"
            }).item_label; // "Label"
            $("#item3").metadata({
                "type": "elem",
                "name": "metadata"
            }).item_label; // "Label" 
    
            $("#item4").metadata({
                "type": "elem",
                "name": "script"
            }).item_label; // "Label"
        });

    OK, this plugin extract JSON string from class, attribute or child node and parse
    it into JavaScript Object.

    Let’s go through the source code:

        (function($) { 
    
            $.extend({
                metadata: {
                    defaults: {
                        type: 'class',
                        name: 'metadata',
                        cre: /({.*})/,
                        single: 'metadata'
                    },
                    setType: function(type, name) {
                        this.defaults.type = type;
                        this.defaults.name = name;
                    },
                    get: function(elem, opts) {
                        var settings = $.extend({}, this.defaults, opts);
                        // check for empty string in single property
                        if (!settings.single.length) settings.single = 'metadata'; 
    
                        var data = $.data(elem, settings.single);
                        // returned cached data if it already exists
                        if (data) return data; 
    
                        data = "{}"; 
    
                        if (settings.type == "class") {
                            var m = settings.cre.exec(elem.className);
                            if (m)
                                data = m[1];
                        } else if (settings.type == "elem") {
                            if (!elem.getElementsByTagName) return;
                            var e = elem.getElementsByTagName(settings.name);
                            if (e.length)
                                data = $.trim(e[0].innerHTML);
                        } else if (elem.getAttribute != undefined) {
                            var attr = elem.getAttribute(settings.name);
                            if (attr)
                                data = attr;
                        } 
    
                        if (data.indexOf('{') < 0)
                            data = "{" + data + "}"; 
    
                        data = eval("(" + data + ")"); 
    
                        $.data(elem, settings.single, data);
                        return data;
                    }
                }
            }); 
    
            $.fn.metadata = function(opts) {
                return $.metadata.get(this[0], opts);
            }; 
    
        })(jQuery);

    Following is a modified version to demonstrate the main concept (also working well):

        (function($) { 
    
            $.fn.metadata = function(options) {
                var options = $.extend({}, {
                    type: 'class',
                    name: 'metadata'
                }, options); 
    
                var data = this.data("metadata");
                if (data) {
                    return data;
                } 
    
                data = "{}";
                if (options.type == "class") {
                    var m = /{.*}/.exec(this.attr("class"));
                    if (m) {
                        data = m[0];
                    }
                } else if (options.type == "elem") {
                    var childElem = this.find(options.name);
                    if (childElem) {
                        data = $.trim(childElem[0].innerHTML);
                    }
                } else if (options.type == "attr") {
                    data = this.attr(options.name);
                } 
    
                data = JSON.parse(data);
                this.data("metadata", data);
                return data;
            }; 
    
        })(jQuery);

    Maybe Athena should take this convention to simplify default options that passed
    to widget constructor.

    This is done manually by developers now. You can refer to “How to pass parameters
    to widget constructor?” in $.wbx.doc for details.

    I will post another article to demonstrate how to add this feature to $.wbx client-framework later.

  • 相关阅读:
    cudnn的下载地址
    rbg大神的主页
    ubuntu16.04上安装深度学习基本框架caffe2 pytorch tensorflow opencv
    linux sublime python
    ubuntu打开终端多开标签的快捷键是ctrl+ shift+ T 对比ctrl+ alt+ T 另外窗口打开一个终端
    在ubuntu1604上使用aria2下载coco数据集效率非常高
    MS coco数据集下载
    qtav----ffmeg在ubuntu和win10上的编译和运行
    论文预印版本的网站 https://arxiv.org/
    pip或者anacnda安装opencv以及opencv-contrib
  • 原文地址:https://www.cnblogs.com/sanshi/p/1510368.html
Copyright © 2011-2022 走看看