jquery - 初めてのプラグイン

Question

aほとんどのコードは機能しますが、個人ごとに必要なものを取得していないことを除いて.post

(function ($) {
'use strict';
var url = window.location.href.split('#')[0];
var post = $('.post').children('a[name]').attr('name');
var helpers = {
        "defaults": {
            "post": post,
            "href": url+'#',
            "send": 'true',
            "layout": 'button_count',
            "width": '125',
            "faces": 'false',
            "font": 'verdana',
            "action": 'like',
            "scheme": 'light',
        },
        "init": function (options) {

            var settings = $.extend({}, helpers.defaults, options),

                easyface = $('<div />').addClass('easyface fb-like').attr({
                    "data-href": settings.href + settings.post,
                    "data-send": settings.send,
                    "data-layout": settings.layout,
                    "data-width": settings.width,
                    "data-show-faces": settings.faces,
                    "data-font": settings.font,
                    "data-action": settings.action,
                    "data-colorscheme": settings.scheme
                });

            return this.each(function (i, elem) {
                var self = $(elem),                 
                    data = self.data('easyface');  
                if (!data) {   

                    self.data('easyface', easyface);
                    self.append(easyface);
                }
            });
        },
        "destroy": function () {
            return this.each(function (i, elem) {
                var self = $(this),                
                    data = self.data('easyface');   // test to see if we've already called init on this element

                $(window).unbind('.easyface');      // unbind any namespaced events, assuming you've namespaced them like "click.easyface"
                self.removeData('easyface');        // remove the data flag
                self.find('.easyface').remove();    // remove the appended div
            });
        }

    };
//define the method "easyface"
$.fn.easyface = function (method) {
    if (helpers[method]) {
        // call the method and pass in the settings
        return helpers[method].apply(this, Array.prototype.slice.call(arguments, 1));
    } else if (typeof method === 'object' || !method) {
        // default to the init method and pass in the arg
        return helpers.init.apply(this, arguments);
    } else {
        // throw an error
        $.error('Method ' + method + ' does not exist on jQuery.tooltip');
    }
};
}(jQuery));
 $(function() {
   $('body').append('<div id="fb-root"></div>');
   (function(d, s, id) {
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) return;
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=477049588983712";
     fjs.parentNode.insertBefore(js, fjs);
     }(document, 'script', 'facebook-jssdk'));
   });

Answer 1

特にあなたのパターンで、あなたが試したことについてのいくつかの指針：

$(this).attr('data-send', function () {
    return + send;
});
$(this).attr('data-layout', function () {
    return + layout;
});
$(this).attr('data-width', function () {
    return + width;
});

コメントで説明できるのは次のとおりです。

// in your execution scope, "this" is the window object
$(this).attr('data-href', function () {
    // "href" is not in any scope of the IIFE
    // and is therefore either a global variable
    // or is undefined. Also the plus sign, when
    // used like this, will try to convert your
    // "href" to a number which is likely to return
    // NaN given that "href" is likely to be undefined
    // or a non-numeric string
    return + href;
});

そうは言っても、なぜプラグインをそのように構成するのかについてのコメントを付けて、プラグインを構成する方法を次に示します。

// Start with an IIFE and pass in either jQuery, or jQuery.noConflict
// which will map it to the dollar sign so that the the dollar sign
// cannot be overwritten by another library in the scope of its execution.
(function ($) {
    'use strict';
    // contain all methods and settings in a local variable.
    // this helps ensure clean namespacing and
    // preserves scope
    var helpers = {
            "defaults": {
                "post": "",                 //pass the post id in as a parameter
                "href": '/',
                "send": 'true',
                "layout": 'button_count',
                "width": '125',
                "faces": 'false',
                "font": 'verdana',
                "like": 'like'
            },
            "init": function (options) {
                // combine passed in options with the defaults in a new object
                var settings = $.extend({}, helpers.defaults, options),
                    // build the easyface element to attach
                    easyface = $('<div />').addClass('easyface fb-like').attr({
                        "data-href": settings.href + settings.post, // concatenate with your href here.
                        "data-send": settings.send,
                        "data-layout": settings.layout,
                        "data-width": settings.width,
                        "data-show-faces": settings.faces,
                        "data-font": settings.font,
                        "data-like": settings.like
                    });
                // return this.each to preserve chainability
                return this.each(function (i, elem) {
                    var self = $(elem),                 // cached reference to the element
                        data = self.data('easyface');   // test to see if we've already called init on this element
                    if (!data) {    // If the plugin hasn't been initialized yet
                        //Do more setup stuff here
                        self.data('easyface', easyface);
                        self.append(easyface);
                    }
                });
            },
            "destroy": function () {
                return this.each(function (i, elem) {
                    var self = $(this),                 // cached reference to the element
                        data = self.data('easyface');   // test to see if we've already called init on this element
                    // namespacing for the win
                    $(window).unbind('.easyface');      // unbind any namespaced events, assuming you've namespaced them like "click.easyface"
                    self.removeData('easyface');        // remove the data flag
                    self.find('.easyface').remove();    // remove the appended div
                });
            }
            /*
             * other example methods
             *
             *  "reposition": function () {},
             *  "show": function () {},
             *  "hide": function () {},
             *  "update": function (content) {}
             */
        };
    //define the method "easyface"
    $.fn.easyface = function (method) {
        if (helpers[method]) {
            // if the arg passed was a string that indicates a method above
            // call the method and pass in the settings
            return helpers[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            // if the arg passed was an object, or no arg was passed
            // default to the init method and pass in the arg
            return helpers.init.apply(this, arguments);
        } else {
            // don't know what to do with this
            // throw an error
            $.error('Method ' + method + ' does not exist on jQuery.tooltip');
        }
    };
}(jQuery));

あなたの例のフィドルでは、次のように投稿IDをオプションとして渡すことができます：

$('.postfoot').easyface({
    "post": $('.post').children('a[name]').attr('name')
});

デモ用に更新されたフィドルを次に示します: http://jsfiddle.net/zUeFL/9/

Answer 2

ステートメントのネストを確認してください。プラグインにあると思われるコードの多くが、実際にはそうではないことがわかります。

声明は何$(this).attr(...)を達成することになっていますか？それらがプラグイン内に移動された後でも、現在書かれているようには機能しません。(a) オブジェクトに格納されたデータを使用する必要があり、(b) 作成された要素optionsに作用する必要があります。'<div class="fb-like"></div>'

ステートメントをよく見てください$('.post-options').before().easyface();。.before()、引数なしでは何も行われず、チェーン.easyface()(エラーなしで実行された場合) も何も行われない可能性があります。おそらく次のようなもの$('.post-options').before(easyface(...));が必要ですが、それを機能させるには、プラグインが<div class="fb-like"></div>ではなく完全に構成された要素を返すようにする必要がありますthis。