JavaScript模块模式和子模块初始化模式 [英] Pattern for Javascript Module Pattern and Sub-Module Initialization
问题描述
我正在启动一个新项目,我正在审查我的最佳做法,以防止出现任何问题,也可以看到我遇到的不好的习惯。
I am starting up a new project and I am reviewing my best-practices to try to prevent any problems, and also to see what bad habits I have gotten into.
我不太高兴使用模块/子模块来处理Javascript中的初始化序列。
I am not terribly pleased with how I am handling initialization sequences in Javascript using the module / submodule pattern.
我们的代码最终会像
FOO.init()
FOO.module1.init()
FOO.module2.init()
FOO.module3.init()
FOO.module4.init()
在全球范围内。
我基本上是做(错误检查和详细信息为简洁起见):
I am essentially doing (error checking and details omittied for brevity):
var FOO = (function (me) {
me.init = function () {
for (var i in me.inits) {
me.inits[i]();
}
}
return me;
}(FOO || {}));
var FOO = (function (parent) {
var me = parent.module1 = parent.module1 || {};
me.init = function () {
}
parent.inits.push(me.init);
return parent;
}(FOO || {}));
$(document).ready(FOO.init);
初始化
我知道我以前已经阅读过了,但是现在我找不到文章找不到正确的搜索字词。有没有一个深思熟虑的测试模式来处理像这样的场景中的初始化?
I know I have read up on this before, but I can't come up with the right search terms to find the articles now. Is there a well thought out and tested pattern that handles initialization in sitiation like this?
谢谢。
编辑:在重新阅读之后,我认为有一点上下文会通知答案。
Upon re-reading this, I think a little context will inform answers.
在我的情况下,每个模块/子模块都在自己的文件中。基本模块定义了站点的基本功能,子模块支持不同的功能。例如,子模块可以在搜索框上连线自动完成,另一个可以将静态标题图像转换成旋转横幅。子模块由CMS启用/禁用,所以我真的想离开基本模块中的显式调用,所以一切都可以由CMS管理。我也有CMS具体的方法来实现这一点,但是我正在寻找一个通用的Javascript模式,以便在可能使用不同CMS的项目之间提供一致性和可靠性。
In my case, each module / submodule is in its own file. The base module defines the basic functionality of the site, and sub-modules enable different features. For example, a sub-module may wire up auto-completion on a search box, and another may turn a static header image into a rotating banner. Sub-modules are enabled/disabled by the CMS, so I really do want to divorce explicit calls inside the base module so everything can be managed by the CMS. I also that there are CMS specific ways to accomplish this, but I looking for a generic Javascript pattern for doing this to provide consistency and resuablity between projects that may use a different CMS.
推荐答案
我个人对此有不同的编码风格。这是其中之一。另一个基本上是模仿 backbone.js 中使用的风格
I personally have a different coding style to that. This is one of them. The other is basically an imitation of the style used in backbone.js
var myProgram = (function() {
var someGlobal, someGlobal2;
var subModule1 = (function() {
...
var init = function() {
};
...
init();
return {
"someMethod": someMethod,
...
};
}());
var OtherSubModule = (function() {
...
var init = function(param) { ... };
...
return {
"init": init,
...
};
}());
var init = function(param) {
...
OtherSubModule.init({
"foo": param.foo,
"bar": param.bar,
...
});
};
return {
"init": init,
"somePublic": OtherSubModule.foobar,
...
}
}());
取决于我是否需要向其他用户提供公共API,哪个骨干网好多了。我更喜欢使用 init
函数驱动模块进行初始配置,其余完全由事件驱动。
Depends whether I need to supply a public API to other users, which backbone does a lot better. I prefer to make modules driven by an init
function for initial configuration and for the rest completely event driven.
鉴于编辑过的问题,我有一个不同的模式。每个文件在我的情况下定义一个对象的函数,它是 $。FooBar.plugins
Given the edited question I have a different pattern for this. Each file defines a function on some object in my case it was $.FooBar.plugins
(function() {
var foo = function() { ... };
var bar = (function() { ... }());
myNamespace.plugins["MyPlugin"] = function() {
... do stuff
... bind to evevnts
};
}());
然后我们使用一个这样的启动绑定器:
Then we use a boot strapper that was something like this :
(function() {
var needed = function() {
// Feature detection
};
var load = function() { ... };
var getOptions = function() {
// Call something on a page by page basis.
};
for (var plugin in pluginList) {
if (needed(plugin)) {
load(plugin, function() {
// get page specific options
var options = getOptions();
// run plugin
myNameSpace.plugins[plugin](options);
// If all have been loaded trigger ready handlers
if (pluginCurrentCount == pluginCount) {
readyTrigger();
}
});
pluginCount++;
}
}
// start loading plugins after all have been counted
load.startLoading();
var readyTrigger = function() {
// Run all ready handlers
}
// Implement your own DOM ready function to run when all plugins
// have loaded.
myNameSpace.ready = function(handler) {
if (isReady) {
handler();
} else {
readyList.push(handler);
}
};
}());
这是很多差距和伪代码,但你应该得到这个想法。
That's a lot of gaps and pseudo code but you should get the idea. If it's not obvouis feel to question it.
然后在页面上我们有这样的东西
Then on the page we have something like this
<html>
<head>
<script type="text/javascript">
var pageSpecific = {
"pluginName": {
"cssClass": "foobar",
"submitOnEnter": false,
...
},
...
};
</script>
<script src="bootstrapper.js" />
...
</head>
<body>
...
</body>
</html>
这篇关于JavaScript模块模式和子模块初始化模式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!