mpd*_*dio 13 javascript design-patterns
我正在启动一个新项目,我正在审查我的最佳实践,试图防止出现任何问题,同时也看看我遇到了什么样的坏习惯.
我对使用模块/子模块模式在Javascript中处理初始化序列的方式感到非常满意.
让我们说,我的代码最终会有类似的东西
FOO.init()
FOO.module1.init()
FOO.module2.init()
FOO.module3.init()
FOO.module4.init()
在全球范围内.
我本质上是这样做的(错误检查和细节因为简洁而被忽略):
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);
用于初始化.
我知道我之前已经阅读过此内容,但我现在无法找到正确的搜索字词来查找文章.是否有经过深思熟虑和测试的模式处理像这样的情景中的初始化？
谢谢.
编辑:重读这个,我认为一些上下文将告知答案.
在我的例子中,每个模块/子模块都在自己的文件中.基本模块定义站点的基本功能,子模块启用不同的功能.例如,子模块可以在搜索框上连接自动完成,而另一个子模块可以将静态标题图像转换为旋转横幅.CMS启用/禁用子模块,因此我确实希望在基本模块内离开显式调用,以便CMS可以管理所有内容.我还有CMS特定的方法来实现这一点,但我寻找一个通用的Javascript模式来实现这一点,以提供可能使用不同CMS的项目之间的一致性和可重用性.
Ray*_*nos 18
我个人有不同的编码风格.这是其中之一.另一种基本上是对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函数驱动模块进行初始配置,其余部分完全由事件驱动.
[编辑]
鉴于编辑过的问题,我对此有不同的模式.在我的情况下,每个文件都定义了某个对象的函数$.FooBar.plugins
(function() {
var foo = function() { ... };
var bar = (function() { ... }());
myNamespace.plugins["MyPlugin"] = function() {
... do stuff
... bind to evevnts
};
}());
然后我们使用类似这样的引导strapper:
(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);
}
};
}());
这是很多差距和伪代码,但你应该得到这个想法.如果不是obvouis感到质疑它.
然后在页面上我们有类似的东西
<html>
<head>
<script type="text/javascript">
var pageSpecific = {
"pluginName": {
"cssClass": "foobar",
"submitOnEnter": false,
...
},
...
};
</script>
<script src="bootstrapper.js" />
...
</head>
<body>
...
</body>
</html>