Javascript 如何编写一个简单的jQuery插件

Javascript 如何编写一个简单的jQuery插件,javascript,jquery,jquery-plugins,Javascript,Jquery,Jquery Plugins,我想使用jquery创建简单的插件。 在编写jQuery插件时,也向我推荐标准做法 请大家给我一些更好的建议。一个好的开始模式如下: (function($){ $.fn.yourplugin = function() { }; }(jQuery)); 我在几年前创建了一个简单的模板,现在仍然非常有效: (函数($){ 如果(!$.myExample){//检查您的插件名称空间不存在 $.extend({//这将允许您将插件添加到jQuery库 myExample:functio

我想使用jquery创建简单的插件。 在编写jQuery插件时,也向我推荐标准做法


请大家给我一些更好的建议。

一个好的开始模式如下:

(function($){
   $.fn.yourplugin = function() {
   };
}(jQuery));

我在几年前创建了一个简单的模板,现在仍然非常有效:
(函数($){
如果(!$.myExample){//检查您的插件名称空间不存在
$.extend({//这将允许您将插件添加到jQuery库
myExample:function(elm、command、args){
//请记住,此时您可能需要执行类或数据检查,以确定调用的方向
//例如,在初始化元素上的插件时,可以将插件名称添加为类,
//这样,当调用它时,您可以看到alrady拥有该类并且可能正在调用命令,
//因此,做出一个if声明来推动流程
返回elm.each(函数(索引){
//在每个元素通过时对其进行处理
//一定要使用类似于
//返回elm.each(函数(e){dor work});
//作为您的最终声明,以保持“链接性”
});
}
});

$.fn.extend({//这提供了$funcs的可链接性功能,如:$(“#eleID”).css(“颜色”、“红色”)查看一下(非常简短和简单)或。我写了一个关于如何创建jQuery下拉阴影插件的分步指南,您可能想在这里查看:-通过非常简单的代码,您可以创建一个功能完整的jQuery插件。
(function($){
  // $('p').greenify() turns all text in p elements green.
  $.fn.greenify = function() {
    this.css( "color", "green" ); // set text color
    return this; // for chaining;
  };
})(jQuery);
(function($) {
    if (!$.myExample) { // check your plugin namespace does not already exist
        $.extend({  //  this will allow you to add your plugin to the jQuery lib
            myExample: function(elm, command, args) {
                //  keep in mind, right here you might want to do a class or data check to determine which direction this call is going
                //  for example, upon init the plugin on an element you may add the plugin name as a class, 
                //      this way, when it's recalled, you can see it alrady has that class and might be calling a command,
                //          thus make an if statemnt to push the process through
                return elm.each(function(index){
                    // do work to each element as its passed through
                    // be sure to use something like
                    //    return elm.each(function(e) { dor work });
                    // as your final statement in order to maintain "chainability"
                });
            }
        });
        $.fn.extend({   //  this gives the chainability functionality seen with $ funcs like: $("#eleID").css("color", "red") <--returns original element object
            myExample: function(command) {
                return $.myExample($(this), command, Array.prototype.slice.call(arguments, 1));
            }
        });
        $.myExample.props = {   //  Here you can establish specific properties to your plugin, prehaps even make them "Over-writable"
            key1: "value",
            key2: "value"
        };
        $.myExample.methods = { //  Here you can establish specific methods/functions for your plguin to carry out and maintain your namespace as well
            key1: function(param) {
                /*  do work */
            },
            key2: function(param) {
                /*  do work */
            }
        };
        //  This next part is not seen in many plugins but useful depending on what you're creating
        $.myExample.init = function(param) {    //  If you have an initialize method to apply, namespace it in here and calll on initializing your plugin
            var key = "value",
                key2 = {
                    subKey: "value"
                };
                /*
                /  run any number of initializing functions here
                /  I prefer to make my param a value that can be a
                /   string with a possible object
                /   the string for holding a base configuration
                /   the object for any change in properties or base values for that config
                */
        };
        $.myExample.defaults = {    //  establish base properties here that can be over-written via .props, but their values should never truly change
            key1: "value",
            key2: {
                prop1: {
                    subKey1: "value",
                    subKey2: "value"
                },
                prop2: {
                    subKey1: "value"
                }
            },
            key3: function(param) {

            }
        };
    }
})(jQuery);