扩展jQuery，包括另一个对象中的jQuery构造函数

Question

说明

首先，我可能会混淆jQuery constructor和init函数，如果是这样，请忽略下面的术语。

我有一个名为SineMacula的对象，此对象目前仅充当方法库的名称空间。

但是，我将为SineMacula对象编写一些方法，我希望这些方法可以像jQuery扩展一样使用。

这里出现了麻烦，而不是使用jQuery别名$ ，我想使用SineMacula对象来运行jQuery构造。 因此，有效地我的代码将如下所示：

SineMacula('#test').dropdown();

代替：

$('#test').dropdown();

但是，如果不是我的下一点，我认为这不会太困难：

我不想别名整个jQuery，我只是想让jQuery构造函数在我调用SineMacula('something') ，然后将任何方法应用于SineMacula('something')

我的问题

提出这个问题的最好方法是通过举例说明。 以下可能吗？

SineMacula('#test').someFunction(function(){
    // Do something here
    // The jQuery object must be passed in so that
    // $(this) refers to SineMacula('#test')
});

不过，我不希望能够做到这一点（完全别名的jQuery）：

SineMacula('#test').animate(); // A regular jQuery function

我知道这可能是不可能的，但是觉得值得一问：-)

更新1

需要明确的是，这是我当前用于SineMacula对象的一些代码：

/**
 * Sine Macula Javascript  API
 * The Sine Macula API contains all base functions for use throughout
 * all websites
 * @name class.sinemacula.js
 * @author Ben Carey
 * @version 1.0
 * @date 25/10/2012
 * @copyright (c) 2012 Sine Macula MMVIII Limited (sinemacula.co.uk)
 */

function SineMacula(){

    // Only proceed if jQuery has been loaded
    if(typeof jQuery=='undefined'){
        // jQuery has not been loaded
        console.log('jQuery has not been loaded');
    }else{

        /**
         * Sine Macula Load
         * Load the Sine Macula Libraries and Plugins
         * into the current document
         *
         * The options:
         * - package: the package of libraries to load
         * - packageURL: a remote source to load the package details from
         * - libraries: any additional libraries to load
         *
         * @param object options The options for the Sine Macula load
         */
        this.load = function(options){
            // Load Sine Macula Libraries here
        }
    }
};

/**
 * Overlay
 * Place an overlay on the page
 *
 * The options:
 * - wrapper: the wrapper to prepend to
 * - fade: indicate whether or not to fade the overlay
 * - fadeSpeed: the fade speed for the overlay fade
 * - opacity: the opacity to apply to the overlay
 * - color: the color to apply to the overlay
 * - callback: the callback to be called once the function has completed
 *
 * @param boolean showHide A boolean to indicate whether to show/hide the overlay
 * @param object options The options for the overlay
 */
SineMacula.prototype.overlay = function (showHide,options){
    // Process the overlay here
};

// All libraries are extended onto the SineMacula object

SineMacula对象在每个页面的顶部启动，如下所示：

<script src="//libraries.example.net/jsapi" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">

    var sm = new SineMacula();
    sm.load();

</script>

---

更新2-忽略上方

是的，我很难解释我要达到的目标。 我将尽力在下面的步骤中完成此操作，而忽略上面的内容。

第1步

我有一个名为SineMacula的类，其中包含许多处理各种事情的方法。 将其视为类似于jQuery的库。

定义如下：

function SineMacula(){

    // Only proceed if jQuery has been loaded
    if(typeof jQuery=='undefined'){
        // jQuery has not been loaded
        console.log('jQuery has not been loaded');
    }else{
        this.load = function(options){
            // Load Sine Macula Libraries here
        }
    }
};

第2步

SineMacula类在每个页面的顶部使用以下代码启动：

<script src="//libraries.example.net/jsapi" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">

    var sm = new SineMacula();

</script>

第三步

然后， SineMacula对象通过调用例如sm.load({package:'all'})加载SineMacula对象所需的任何库和扩展。 这会将所有扩展名动态加载到网页中。

第四步

扩展的定义如下：

SineMacula.prototype.doSomething = function(){
    // Do something here
}

第5步-这会使事情变得更加复杂

到目前为止， SineMacula对象一直充当诸如doSomething()等方法的名称空间。

我现在想定义的方法不仅仅可以充当函数。

我现在想调用SineMacula.doSomething() ，现在我希望能够调用SineMacula('#test').doSomething() ，其中SineMacula('#test')作用与$('#test')在jQuery中。

所以我可以像这样访问我的函数：

SineMacula.doSomething('maybe parameters here');
SineMacula('selector').doSomethingElse('maybe parameters here');

以您可以调用的相同方式：

$.ajax('parameters');
$('selector').animate('parameters');

因此， 如果将参数传递给SineMacula对象，则使用jQuery 选择器函数对其进行处理，并将其作为主题传递给所调用的方法。

例如：

// Call doSomethingElse on the #test element
SineMacula('#test').doSomethingElse();

// Within the doSomethingElse function $(this) relates to $('#test')

总结一下...

如果提供了'selector'则SineMacula('selector')充当$('selector') ，并将其传递给子方法。 但是SineMacula不是jQuery的扩展。 我不希望SineMacula成为$的别名。

Answer 1

如果我理解这个问题，以及是否可以更改SineMacula构造函数

function SineMacula(){
     // add following 3 lines
     if(arguments.length>0) {
        return jQuery.call(null,arguments);
     }
    // Only proceed if jQuery has been loaded
    if(typeof jQuery=='undefined'){
        // jQuery has not been loaded
        console.log('jQuery has not been loaded');
    }else{

        this.load = function(options){
            // Load Sine Macula Libraries here
            console.log("ok load");
        }
    }
};