jQuery で使用される js モジュール パターンを理解しようとしています。私はこれを数回編集しましたが、最終的に私のスキル レベル (jquery で数か月) の良い練習になるようにします。
この投稿には直接的な質問はありません。私は、大規模な Web サイトでモジュール パターンを (jquery と一緒に) 適切に使用する方法についてのフィードバックと入力を目指しています。
更新:すべての書き方の概要を把握し、落とし穴をカバーするために、たくさんの例を追加しました..
/*
Not all browsers works with console.log, so we want to make sure that
console.log is defined. This defines the consol.log and send the messages
into an alert.
*/
if(!window.console) console = {
log: function(s) {
alert(s); // alert since we dont have the firebug console
}
};
// Check if namespace is defined
if (typeof (CompanyName) === 'undefined') {
CompanyName = {};
}
// Or if AppName under CompanyName...
if (typeof (CompanyName.AppName) === 'undefined') {
CompanyName.AppName = {};
}
// Our namespace
CompanyName.AppName = (function ($) {
// CHAINING
var _first = function () {
// Important to always start with "var"
},
_second = function () {
// Chained ( ...}, ) so it doesnt need "var"
},
_third = "Just a var", // Variables just ends with ,
_four = "Another var"; // Closing the chain with ;
var _anotherFirst = function () {
// Previous chain of var's was ended with ; so this var needed "var" in order to start.
};
g_globalVar = "I'm free!"; // When starting a var without "var", it becomes global.
g_globalMethod = function () {
alert("I'm free too!"); // Global method.
};
g_chainedGlobalVarOne = "We are free!",
g_chainedGlobalVarTwo = "We are free!";
// Private Variables
var _privateVar = "privateVar: accessed from within AppLaunch.Admin namespace";
// Private Methods
var _privateMethod = function () {
log("privateMethod: accessed only from within AppLaunch.Admin");
}; // Last variable in a chain must always end with ; before the return {}
function log() {
if (window.console && window.console.log)
window.console.log('[AppName] ' + Array.prototype.join.call(arguments, ' '));
};
return {
init: function () {
// Calling private
_privateMethod();
// Calling Public
this.myPublicMethod();
// Also Calling Public
CompanyName.AppName.myPublicMethod();
// Calling Other namespace's Public Method (when exists)
CompanyName.OtherNamespace.externalPublicMethod();
},
// Public
myPublicMethod: function() {
log("myPublicMethod");
},
// In a View (MVC), I could have a page called myPage where I want to init
// some particular functions. myPage can be called just like init.
myPage: function() {
_second();
_third();
}
}
})(jQuery);
// Initialize
jQuery().ready(function() {
CompanyName.AppName.init()
CompanyName.AppName.myPublicMethod();
});
何が起こっているのかを理解しようとしています (修正やより良い説明を自由に提供してください):
Company.AppName = (function ($) { ...
ここで名前空間 Company.AppName が作成されます。内部に ($) を設定して、$ を使用する可能性のある他のライブラリと競合することなく $ を使用できるようにします。
})(jQuery);
私の知る限り、メソッドと変数はここの名前空間に返されます ...})(); () 内に jQuery を追加することで、$ が jQuery を意味することがわかります。
初期化中
ここで何がベストプラクティスなのかはわかりませんが、これまでに知っていることを追加します。
js ファイル内での初期化:
jQuery(function() {
AppLaunch.Admin.init();
});
ファイルからの初期化:
<script type="text/javascript">
// Shorthand for jQuery(document).ready(function() { ... }
jQuery(function($) {
AppLaunch.Admin.init($('#someSelector'));
});
</script>