Question

我正在尝试使用以下两种方式来创建插件。现在我需要知道哪种方式更好，更有首选。

第一路

;(function ($) {
    var Movies = {
        init: function (options, el) {
            this.el = el;
            this.$el = $(el);
            this.url = 'http://example.com/movies.json';

            this.search = (typeof options === 'string') ? options : options.search;
            this.options = $.extend({}, $.fn.queryMovies.options, options);

            this.refresh();
        },

        refresh: function () {
            var self = this;
            this.fetch().done(function (results) {
                console.log(results.movies);
            });
        },

        fetch: function () {
            return $.ajax({
                url: this.url,
                data: {
                    q: this.search,
                    apikey: 'thisiskey'
                },
                dataType: 'jsonp'
            });
        }
    };

    $.fn.queryMovies = function (options) {
        return this.each(function () {
            var movies = Object.create(Movies);
            movies.init(options, this);
        });
    };

    $.fn.queryMovies.options = {

    };
})(jQuery);

第二路

;(function ($) {
    var Movies = function (options, el) {
        this.el = el;
        this.$el = $(el);
        this.url = 'http://example.com/movies.json';

        this.search = (typeof options === 'string') ? options : options.search;
        this.options = $.extend({}, $.fn.queryMovies.options, options);

        this.refresh();
    };

    Movies.prototype = function () {

        var refresh = function () {
            var self = this;
            fetch(this).done(function (results) {
                console.log(results.movies);
            });
        },

        fetch = function (self) {
            return $.ajax({
                url: self.url,
                data: {
                    q: self.search,
                    apikey: 'thisiskey'
                },
                dataType: 'jsonp'
            });
        };

        return {
            refresh: refresh
        };
    }();

    $.fn.queryMovies = function (options) {
        return this.each(function () {
            new Movies(options, this);
        });
    };

    $.fn.queryMovies.options = {

    };
})(jQuery);

第二种方式有原型继承。我知道这种方式更适合内存管理。其次，它有一种拥有公共和私人成员职能的方式，例如在上面的代码refresh中，方法是公共的，因为它在返回对象文字中有别名，而fetch是私有成员函数。

关于第一个，我真的不知道这是否比第二个好。很高兴知道从现在开始我将遵循这种方法。

Answer 1

第二种方式有原型继承。我知道这种方式更适合内存管理。

第一个也有：var movies = Object.create(Movies);。没有你想的那么多差异。

[第二个]有一种公共和私人成员职能的方式，例如在上面的代码刷新方法是公共的，因为它在返回对象文字中有别名，而fetch是私有成员函数。

fetch在这里并不是真正的成员函数（如你所见，它不使用this但确实采用self实例参数），它只是一个本地函数。因此，您甚至不需要IEFE使其成为原型函数的本地函数，只需在与function fetch相同的范围内声明Movies：< / p>

;(function ($) {

    function fetch (self) {
        return $.ajax({
            url: self.url,
            data: {
                q: self.search,
                apikey: 'thisiskey'
            },
            dataType: 'jsonp'
        });
    }

    function Movies (options, el) {
        this.el = el;
        this.$el = $(el);
        this.url = 'http://example.com/movies.json';

        this.search = (typeof options === 'string') ? options : options.search;
        this.options = $.extend({}, $.fn.queryMovies.options, options);

        this.refresh();
    }

    Movies.prototype.refresh = function () {
        var self = this;
        fetch(this).done(function (results) {
            console.log(results.movies);
        });
    };

    $.fn.queryMovies = function (options) {
        return this.each(function () {
            new Movies(options, this);
        });
    };

    $.fn.queryMovies.options = {

    };
})(jQuery);

请注意，您也可以使用第一个模式的本地范围辅助函数。我不会使用第一个模式，因为构造函数比手动Object.create实例和调用init方法更容易掌握，更简洁/更好用 - 这就是new为...制作。

更好的创建jquery插件的方法

1 个答案: