Javascript 香草JS插件模板

好的，我们都知道如何编写jQuery插件：

有人能给一个带有方法和默认设置的纯Javascript模板插件提供建议吗

我想让它与单个节点和节点数组一起工作（

querySelectorAll

）

大概是这样的：

var PluginName = function(selector){
    ...
}

var dropdown = new PluginName('.dropdown');

dropdown.close();

这样称呼它：

var PluginName = function(selector){
    ...
}

var dropdown = new PluginName('.dropdown');

dropdown.close();

并且能够关闭所有下拉列表，如下所示：

var PluginName = function(selector){
    ...
}

var dropdown = new PluginName('.dropdown');

dropdown.close();

---

查找javascript原型继承

function PluginName(selector) {
    this.node = document.querySelector(selector);
        if (this.node == null) {
            // whoops node not found! Handle Error
        }

    return this;
}

PluginName.prototype.close = function() {
        this.var = "blah";
        // do stuff
}

var myPlugin = new Plugin(".selector")

---

此外，该网站还有很棒的javascript设计模式-

我想说的是，您需要一个javascript类

var PluginName = function(selector){
    // Constructor here
    this.el = document.querySelector(selector);
}

PluginName.prototype.close = function(){
    console.log(this.el);
}

PluginName.prototype.anotherMethod = function(){
    console.log(this.el);
}

然后你可以做：

var dropdown = new PluginName('.dropdown');
dropdown.close();
dropdown.anotherMethod();

插件的一种常见做法是在构造函数中传递一个options对象。这样，您可以优雅地参数化某些行为。例如：

var dropdown = new PluginName({el:'.dropdown',slideInterval:1000, effect:'fade'});

---

我已经在inits和public方法中使用模块模式有一段时间了。不是jQuery插件模式的完全匹配，但是非常可扩展并且工作得非常好。最近刚刚为UMD/CommonJS/AMD/etc更新了它

您可以签出并查看一个

为了更好地衡量，此处提供了完整的模板：

/**
 *
 * Name v0.0.1
 * Description, by Chris Ferdinandi.
 * http://gomakethings.com
 *
 * Free to use under the MIT License.
 * http://gomakethings.com/mit/
 *
 */

(function (root, factory) {
    if ( typeof define === 'function' && define.amd ) {
        define(factory);
    } else if ( typeof exports === 'object' ) {
        module.exports = factory;
    } else {
        root.Plugin = factory(root); // @todo Update to plugin name
    }
})(this, function (root) {

    'use strict';

    //
    // Variables
    //

    var exports = {}; // Object for public APIs
    var supports = !!document.querySelector && !!root.addEventListener; // Feature test

    // Default settings
    var defaults = {
        someVar: 123,
        callbackBefore: function () {},
        callbackAfter: function () {}
    };


    //
    // Methods
    //

    /**
     * Merge defaults with user options
     * @private
     * @param {Object} defaults Default settings
     * @param {Object} options User options
     * @returns {Object} Merged values of defaults and options
     */
    var extend = function ( defaults, options ) {
        for ( var key in options ) {
            if (Object.prototype.hasOwnProperty.call(options, key)) {
                defaults[key] = options[key];
            }
        }
        return defaults;
    };

    /**
     * A simple forEach() implementation for Arrays, Objects and NodeLists
     * @private
     * @param {Array|Object|NodeList} collection Collection of items to iterate
     * @param {Function} callback Callback function for each iteration
     * @param {Array|Object|NodeList} scope Object/NodeList/Array that forEach is iterating over (aka `this`)
     */
    var forEach = function (collection, callback, scope) {
        if (Object.prototype.toString.call(collection) === '[object Object]') {
            for (var prop in collection) {
                if (Object.prototype.hasOwnProperty.call(collection, prop)) {
                    callback.call(scope, collection[prop], prop, collection);
                }
            }
        } else {
            for (var i = 0, len = collection.length; i < len; i++) {
                callback.call(scope, collection[i], i, collection);
            }
        }
    };

    /**
     * Remove whitespace from a string
     * @private
     * @param {String} string
     * @returns {String}
     */
    var trim = function ( string ) {
        return string.replace(/^\s+|\s+$/g, '');
    };

    /**
     * Convert data-options attribute into an object of key/value pairs
     * @private
     * @param {String} options Link-specific options as a data attribute string
     * @returns {Object}
     */
    var getDataOptions = function ( options ) {
        var settings = {};
        // Create a key/value pair for each setting
        if ( options ) {
            options = options.split(';');
            options.forEach( function(option) {
                option = trim(option);
                if ( option !== '' ) {
                    option = option.split(':');
                    settings[option[0]] = trim(option[1]);
                }
            });
        }
        return settings;
    };

    // @todo Do something...

    /**
     * Initialize Plugin
     * @public
     * @param {Object} options User settings
     */
    exports.init = function ( options ) {

        // feature test
        if ( !supports ) return;

        // @todo Do something...

    };


    //
    // Public APIs
    //

    return exports;

});

/**
*
*名称v0.0.1
*描述，作者克里斯·费迪南迪。
* http://gomakethings.com
*
*根据麻省理工学院许可证免费使用。
* http://gomakethings.com/mit/
*
*/
（函数（根，工厂）{
if（typeof define==='function'&&define.amd）{
定义（工厂）；
}else if（导出的类型==='object'）{
module.exports=工厂；
}否则{
root.Plugin=factory（root）；/@todo更新插件名称
}
})（此，函数（根）{
"严格使用",；
//
//变数
//
var exports={}；//公共API的对象
var支持=！！document.querySelector&&！！root.addEventListener；//功能测试
//默认设置
var默认值={
someVar:123，
callbackBefore:function（）{}，
callbackAfter:function（）{}
};
//
//方法
//
/**
*将默认值与用户选项合并
*@私人
*@param{Object}默认值默认设置
*@param{Object}options用户选项
*@返回默认值和选项的{Object}合并值
*/
var extend=函数（默认值、选项）{
for（变量输入选项）{
if（Object.prototype.hasOwnProperty.call（options，key））{
默认值[键]=选项[键]；
}
}
返回默认值；
};
/**
*用于数组、对象和节点列表的简单forEach（）实现
*@私人
*@param{Array | Object | NodeList}集合要迭代的项的集合
*@param{Function}每个迭代的回调函数
*forEach正在迭代的@param{Array | Object | NodeList}scope Object/NodeList/Array（也称为'this`）
*/
var forEach=函数（集合、回调、作用域）{
if（Object.prototype.toString.call（collection）='[Object Object]'）{
for（集合中的var prop）{
if（Object.prototype.hasOwnProperty.call（collection，prop））{
callback.call（作用域，集合[prop]，prop，集合）；
}
}
}否则{
for（var i=0，len=collection.length；i

纯Javascript没有选择器，这是jQuery的一个特性。您需要传递DOM节点。这可以接受吗？我们可以使用

querySelector

Yes，但请记住，querySelector在一些旧浏览器中不可用：是的，但我只关心现代浏览器。这就是我尝试删除jQuery的原因。在调用脚本之前，您可以对querySelector支持进行功能测试。如果您使用的是现代ES5API，那么使用jQuery的许多事情在纯本地JS中都同样“简单”，性能也更好。