依靠jquery在Javascript中实现模块模式 [英] Implementing module pattern in Javascript with dependency on jquery

问题描述

实现模块模式的最佳方法是什么，而模块代码取决于例如jQuery之类的第三方库?

What is the best way to implement module pattern, while the module code depends on third party libraries like jQuery for example?

var someModule = (function(){
    //private attributes
    var privateVar = 5;

    //private methods
    var privateMethod = function(){
        return 'Private Test';
    };

    return {
        //public attributes
        publicVar: 10,
        //public methods
        publicMethod: function(){
            return ' Followed By Public Test ';
        },

        //let's access the private members
        getData: function(){
            //make ajax call and do some processing and generate output
            return privateMethod() + this.publicMethod() + privateVar;
        }
    }
})(); //the parens here cause the anonymous function to execute and return

someModule.getData();

我的问题是:我打算将所有代码都放在时尚的库中，例如javascript文件中.

My question is: I am planning to put all the code in a library like fashion in a javascript file.

如您在getData()方法中所看到的，我计划进行ajax调用.我想为此使用jQuery库.现在，我如何在依靠jQuery的同时编写javascript模块?

As you see in the getData() method, I plan to make ajax calls. I want to use jQuery library for this. Now how do I code a javascript module, while relying on jQuery ?

我应该将整个库变成一个jQuery插件吗?

Should I make my whole library a jQuery plugin instead?

推荐答案

可以找到一个很棒的教程/示例

A great tutorial/example can be found here or here. I know this isn't the module pattern, but it offers the same benefits of the revealing module pattern along with allowing you to extend the namespace across files if needed. Below is the code from that example.

//Self-Executing Anonymous Func: Part 2 (Public & Private)
(function( skillet, $, undefined ) {
    //Private Property
    var isHot = true;

    //Public Property
    skillet.ingredient = "Bacon Strips";

    //Public Method
    skillet.fry = function() {
        var oliveOil;

        addItem( "\t\n Butter \n\t" );
        addItem( oliveOil );
        console.log( "Frying " + skillet.ingredient );
    };

    //Private Method
    function addItem( item ) {
        if ( item !== undefined ) {
            console.log( "Adding " + $.trim(item) );
        }
    }    
}( window.skillet = window.skillet || {}, jQuery ));

//Public Properties
console.log( skillet.ingredient ); //Bacon Strips

//Public Methods
skillet.fry(); //Adding Butter & Frying Bacon Strips

//Adding a Public Property
skillet.quantity = "12";
console.log( skillet.quantity ); //12

//Adding New Functionality to the Skillet
(function( skillet, $, undefined ) {
    //Private Property
    var amountOfGrease = "1 Cup";

    //Public Method
    skillet.toString = function() {
        console.log( skillet.quantity + " " + 
                     skillet.ingredient + " & " + 
                     amountOfGrease + " of Grease" );
        console.log( isHot ? "Hot" : "Cold" );
    };    
}( window.skillet = window.skillet || {}, jQuery ));

try {
    //12 Bacon Strips & 1 Cup of Grease
    skillet.toString(); //Throws Exception
} catch( e ) {
    console.log( e.message ); //isHot is not defined
}

这篇关于依靠jquery在Javascript中实现模块模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！