通過使用jQuery構造應用程序

Question

我將構建一個應用程序，因爲它不是太豐富，否則我可以使用angularjs來實現此目的。我想將我的JS代碼組織成適當的模塊化編程方法。

E.g

var SignUpModule = { 
    elem: $('#id'), // unable to access jquery object here 
    init: function (jQuery) { 
     alert(jQuery('.row').html()); 
    } 
}; 

var application = { 
modules: [], 
addModule: function (module) { 
    this.modules.push(module); 
}, 
run: function (jQuery) { 
    _.each(this.modules, function (module) { 

     //Iterate each module and run init function 
     module.init(jQuery); 
    }); 


    } 
    } 


jQuery(document).ready(function() { 
    application.addModule(SignUpModule);//add module to execute in application 

    application.run(jQuery);//Bootstrap application 

}); 

請現在就來看看它我已經更新了我的問題與實際代碼

Answer 1

你是使用由$.each法採取的匿名函數匿名第一個參數所做的最大的錯誤。第一個參數只是索引，第二個參數是您正在查找的元素。您可以在下面找到工作代碼。

不，你不需要傳遞jQuery對象。這是全球性的。它已經是無處不在。你可以在下面的代碼中看到它。

var SignUpModule = { 
 
    elem: $('.row'), //jQuery works fine here 
 
    init: function() { 
 
    alert(this.elem.html()); 
 
    } 
 
}; 
 

 
var application = { 
 
    modules: [], 
 
    addModule: function (module) { 
 
    this.modules.push(module); 
 
    }, 
 
    run: function() { 
 
    $.each(this.modules, function (index, module) { //this function takes 2 parameters 
 
     //Iterate each module and run init function 
 
     module.init(); 
 
    }); 
 
    } 
 
} 
 

 
//document.ready 
 
$(function() { 
 
    application.addModule(SignUpModule);//add module to execute in application 
 
    application.run();//Bootstrap application 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row">alert <b>me!</b></div>