Question

我想学习jQuery插件编写的最佳实践，我找不到这种东西的统一资源。随意批评并提出正确的编写插件的方法。

具体来说，我的代码作为jQuery插件的非标准/丑陋部分是什么？

更新：正如您所看到的，我在编写jQuery插件方面有一些技巧，基于我在谷歌上发现的教程...我只想改进它并应用最好的做法。

/*
    TARGET PLUGIN USAGE 
        $('#selector-intended-as-mainMenu').toroCaseNav(position, collapseWidth)

    PROCESS
        -on Plugin Use
            Create a submenu container based on plugin object inputs and 'toro-caseNav-main' width

        -on Main menu : mouseenter
            Hide 'toro-caseNav-menuLabel' class 
            Shrink main menu width

        -on Main menu : mouseleave
            Show 'toro-caseNav-menuLabel' class
            Bring back main menu original width
*/

+function( $ ){ "use strict";
    
    var ToroCaseNav = function ( element, options ) {
        this.element = element
        this.options = options
        return 
    }
    
    // Plugin Defaults
    //----------------
    ToroCaseNav.defaults = {
        position       : 'left',
        collapseWidth  : '50px'       
    }  

    ToroCaseNav.prototype.justCall = function( ){
       console.log( this.options )
    }

    ToroCaseNav.prototype.subMenuCreate = function( ){
        console.log( this.options )
        this.justCall()
        //var subMenu_width = $(element).width() 
        return    
    }

    ToroCaseNav.prototype.subMenuAppend = function(){  
        console.log( this.options )
        this.subMenuCreate()
        return 
    }
    
    $.fn.toroCaseNav = function( options ){
        var opt = $.extend( {}, ToroCaseNav.defaults, options )

        return this.each( function(){
            var navi = new ToroCaseNav( $(this)[0], opt )
            navi.subMenuAppend()
        })
    }
    
    $.fn.toroCaseNav.defaults = ToroCaseNav.defaults
        
}( window.jQuery )

// Invoke
//--------
$('#sidebar-wrapper').toroCaseNav({ 'position' : 'top' })

Working Code Here!

Answer 1

官方jQuery网站上有几个基本的jQuery指南。

树屋的另一个教程

Writing jQuery Plugins

我还建议您下载一些插件并检查其他人如何创建它们

jQuery Plugins

最后有jQuery Api文档和Mozilla Developer Network for JavaScript参考

Answer 2

这取决于你如何构建代码，我会简化它以使其更清晰。

/*globals jQuery, console */
(function ($) {
    "use strict";

    var defaults = {
        position       : "left",
        collapseWidth  : "50px"
    };

    var ToroCaseNav = function (element, options) {

        return {
            justCall: function () {
                console.log(options);
            },
            subMenuCreate: function () {
                console.log(options);
            },
            subMenuAppend: function () {
                console.log(options);
            }
        };
    };

    $.fn.toroCaseNav = function (additionalOptions) {
        var options = $.extend({}, defaults, additionalOptions);

        return this.each(function () {
            var nav = ToroCaseNav(this, options);
            nav.subMenuAppend();
        });
    };

    $.fn.toroCaseNav.defaults = defaults;

})(jQuery);

编写jQuery插件的标准

2 个答案: