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.

  • 相关阅读:
    web.xml中listener、 filter、servlet 加载顺序及其详解 从零开始
    网站运营之门外汉并且伪理解
    win7 旗舰版 64位注册dll(regsvr32)失败解决方法
    盖是乱盖,书童逆天之初创互联网企业常见弊病
    VirtualBox中安装Windows10
    jupyter导出pdf文件的方法
    com.ibm.mm.sdk.common.DKUsageError: DGL3616A: 发生意外的 SQL 错误; ICM7015: 在库服务器的 SQL 操作期间,发生意外错误。有关错误的详细信息,请参阅数据库文档。 (STATE) : [LS RC = 7015, SQL RC = 100
    Tomcat编译java文件没有同步问题
    Google APPS申请指南
    如何用C#语言构造蜘蛛程序
  • 原文地址:https://www.cnblogs.com/sanshi/p/1510368.html
Copyright © 2011-2022 走看看