jQuery插件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);
        }; 

    })

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;
        }; 

    })

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.