jquery - 编写 jQuery 插件的标准

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 官方网站 istself 中有几个基本的 jQuery 指南。

• Basic Plugin
• UI Widget Factory

Treehouse 的另一个教程

• Writing jQuery Plugins

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

• jQuery Plugins

最后还有 jQuery Api 文档和 Mozilla Developer Network for JavaScript 引用

• jQuery Api Docs
• MDN JavaScript Docs