Question

我正在尝试编写一个简单的jquery插件，但代码变得庞大而混乱下面是解释我想要实现的想法的一部分。

(function( $ ) {


 $.fn.pageBuilder = function( options ) {

    var lb = $.extend({

        self:                   this,
        modal_edit:             $("#vz_edit_modal"),
        modal_delete:           $("#vz_delete_modal"),
        onSlideElements:        function() {},
        onInsertElement:        function() {},
        onSaveElement:          function() {},

    }, options);


    // Disabling all link clicks default action within page layout builder
    this.on( 'click', 'a', function(event) {
        event.preventDefault();
    });


    // Changing class of layout builder elements while dragging for cursor change purposes
    this.on('mousedown', '.element .inner', function(){
        $(this).addClass('grabbing');
    }).on('mouseup', '.element .inner', function(){
        $(this).removeClass('grabbing');
    });     
 };

}( jQuery ));

所以这段代码是插件的核心，并希望保留在jquery.myplugin.js中现在当我尝试创建一个新文件jquery.myplugin.elements.js并添加此代码时：

(function( $ ){

 $.extend($.fn, {

    pageBuilder: function( options ){ 

        // Extended action
        this.find(".element a").on('click', function() {
            console.log( lb.modal_edit ); // Access to core plugin option
        });
    }

 });

})( jQuery );

问题是我无法使扩展插件工作，this.find（“。element a”）。on（'click'，function（）{不起作用，我的意思是console.log永远不会被解雇的天气无法访问lb.modal_edit或以错误的方式延伸......

此外，我需要两种功能来运行核心插件和扩展插件，扩展插件不应该停用核心功能..

提前致谢。

Answer 1

您可以采取两种方法。首先，您可以将另一个选项传递给核心插件，以允许您执行回调函数。

第二种方法是核心插件的extend the prototype。像这样：

$.fn.pageBuilder.prototype.newFunction = function() {};

至于lb变量，要获得对它的访问权限，你需要在核心插件中公开它，因为它是一个内部变量。

this.lb = lb;

（不确定这是否会完全正常，但你需要以某种方式公开它。）

jquery插件代码分隔多个文件

1 个答案: