Question

我正在为项目创建一个小的jquery插件。它基本上是一个项目管理应用程序，它从json文件中提取我们的项目列表，显示它们并允许我们搜索，添加和编辑。它工作得很好但我在使用＆＃34;这个＆＃34;时遇到了一些麻烦。每次我使用一个功能，我必须重新缓存＆＃34;这个＆＃34;引用插件实例。我的问题是，这是正确的方法吗？或者，我在插件初始化中做错了什么？

以下是我的代码示例。如果你查看我的getData和我的paginate函数，你会看到我缓存＆＃34;这个＆＃34;在var中称为上下文。我在各种功能中重复这个范例。如果我试图缓存＆＃34;这个＆＃34;在初始化期间然后在我的函数中使用该缓存变量它只识别一个实例。我必须继续重新缓存它。

(function($, window, document, undefined) {
    var pluginName = "ezProjectList",
        defaults = {
            jsonURL:"the URL",
            status: "",
            dateText: ""
        };
    var jsonData = {};
    var string = {};
    var updateObj = {};
    var currentObject = {};
    var allData = {};
    var contexts = {
        "contextone": undefined,
        "contexttwo": undefined
    }
    var updateBoth;

    function Plugin(element, options) {
        this._element = element;
        this._defaults = defaults;
        this.options = $.extend({}, this._defaults, options);
        this.init();    
    }
    $.extend(Plugin.prototype, {
        init: function() {
            this.getData();
            $this = $(this);

        },
        getData: function() {
            var context = this;
            console.log(context);
            console.log(this);
            if (contexts[0] == undefined) {
                contexts[0] = this;
            } else {
                contexts[1] = this;
            }
            $.ajax({
                type: "GET",
                url: context.options.jsonURL,
                success: function(data) {
                    allData = data;
                    jsonData = data.projects[context.options.status];
                    context.sortProjects(jsonData);
                    context.createPages(4)
                }
            }).done(function() {
                context.paginate();
                context.setupEditForm();
                context.addProject();
                context.searchProjects();
                context.expandImages();
            });
        },
paginate: function(nav) {
            //Creates pagination from the pages
            var context = this;
            nav = $(this._element).next().attr("id");
            $("#" + nav).jPages({
                containerID: $(context._element).attr("id"),
                perPage: 1
            });
        };
$.fn[pluginName] = function ( options ) {
        var self = this;
        return this.each(function () {
            if (!$.data(self, "plugin_" + pluginName)) {
                $.data(self, "plugin_" + pluginName,
                new Plugin( self, options ));
            }
        });
    };

}

Answer 1

这是JavaScript的常见问题。 '[ (00%)]/' '[##### (33%)]\' '[################## (66%)]-' '[##########################(100%)]|' depends on how the function is being called的值。当你将一个函数传递给另一个函数时，它取决于另一个函数如何调用它。

例如，使用this时，会在当前元素的上下文中调用$("ele").each(foo)。

More importantly, the callback is fired in the context of the current DOM element, so the keyword this refers to the element.

有几种方法可以应对它。您已经确定的第一种方式：分配＆＃34;这个＆＃34;到变量，变量将被函数捕获。您还可以使用Function.bind显式设置foo上下文。

e.g。

this

最后，如果您可以使用ES6，Arrow functions不会绑定自己的this.each(function () { if (!$.data(this, "plugin_" + pluginName)) { $.data(this, "plugin_" + pluginName, new Plugin( this, options )); } }.bind(this));。因此，它们可以在不创建新的var或调用Function.bind的情况下工作。

缓存＆＃34;这个＆＃34;什么时候使用Jquery Boilerplate范例？

1 个答案: