在Javascript中实现依赖于jquery的模块模式

Implementing module pattern in Javascript with dependency on jquery

本文关键字：模块 模式 jquery 依赖于 Javascript 实现      更新时间：2023-09-26

当模块代码依赖第三方库(例如jQuery)时，实现模块模式的最佳方式是什么?

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文件的时尚库。

正如您在getData()方法中看到的，我计划进行ajax调用。我想使用jQuery库。现在我如何编写javascript模块，而依赖于jQuery ?

我应该让我的整个库一个jQuery插件代替吗?

可以在这里或这里找到一个很好的教程/示例。我知道这不是模块模式，但它提供了与揭示模块模式相同的好处，并且允许您在需要时跨文件扩展名称空间。下面是该示例的代码:

//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
}

您可以尝试这样做:

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
          $.ajax( /* ... */ );
              return privateMethod() + this.publicMethod() + privateVar;
          }
     }
 })(jQuery); //the parens here cause the anonymous function to execute and return
someModule.getData();

请确保在执行此代码之前包含jQuery.js

相关文章：