我正在尝试找出一种构建能够注入插件的工作的新框架的方法。这个想法是将每个文件异步加载。
这是我想如何配置我的插件:
<script id="target_root" src="assets/js/target/target.js" async="true"></script>
<script>
var target = target || {};
target.cmd = target.cmd || [];
target.cmd.push(function () {
target.loadPlugins([
{"name": "root", "src": "assets/js/target/target.root.js"},
{"name": "krux", "src": "assets/js/target/target.krux.js"}
]).then(
target.init([
{
'plugin': 'root',
'opts': {
'foo': 'bar'
}
},
{
'plugin': 'krux',
'opts': {
'foo': 'bar'
}
}
])
)
});
</script>
当我使用内联函数(在DOM中(时,我想使用的是命令队列,该命令队列将调用所有推送功能(有点像DFP的Googletag CMD(。
如在每个插件的异步加载之前所述
在这里您有我的脚本:
var target = (function(root, w, d, c) {
var queueIndex = 0,
amountPluginsLoaded = 0,
pluginsLoaded = [];
root.cmd = {
'queue': root && root.cmd ? root.cmd : [],
'push': function(fn) {
this.queue.push(fn);
this.next();
},
'next': function() {
if (this.queue.length > 0) {
this.queue.shift()();
}
}
};
root.init = function(plugins) {
};
root.loadPlugins = function(plugins) {
var i = 0,
len = plugins.length;
for(; i < len; i++) {
_loadExternalJS(plugins[i]);
}
};
function _loadExternalJS(plugin) {
var scriptRoot = d.getElementById('target_root'),
scriptElement = d.createElement('script');
scriptElement.setAttribute('type', 'text/javascript');
scriptElement.setAttribute('async', 'true');
scriptElement.onload = function() {
amountPluginsLoaded++;
pluginsLoaded.push(plugin.name);
};
scriptElement.setAttribute('src', plugin.src);
scriptRoot.parentNode.insertBefore(scriptElement, scriptRoot.nextSibling);
}
function _initPlugin(plugin) {
}
for (; queueIndex < root.cmd.queue.length; queueIndex++) {
root.cmd.next();
}
}(target || {}, window, document, console));
在这里,您具有将覆盖的基本CMD功能以及每个脚本的加载。
我似乎无法弄清楚如何启动then((。我想您会在其Onload事件中的_loadexternaljs((中跟踪它(如您在代码中可以看到的(。但是,只需添加一个if(量子ploginsloaded ===插件loade.length({fire all inits}似乎没有生产力,而不是属于该功能的东西。这就是为什么我想实现一些((功能。
有什么想法/意见?
您可以使用Promise和Promise。所有检查所有这些都已加载。
root.loadPlugins = function(plugins) {
var promiseArray = plugins.map(function(plugin){
return _loadExternalJS(plugin);
});
return Promise.all(promiseArray);
};
function _loadExternalJS(plugin) {
return new Promise((resolve, reject) => {
var scriptRoot = d.getElementById('target_root'),
scriptElement = d.createElement('script');
scriptElement.setAttribute('type', 'text/javascript');
scriptElement.setAttribute('async', 'true');
scriptElement.onload = function() {
amountPluginsLoaded++;
pluginsLoaded.push(plugin.name);
resolve(plugin.name);
};
scriptElement.setAttribute('src', plugin.src);
scriptRoot.parentNode.insertBefore(scriptElement, scriptRoot.nextSibling);
});
}
然后
root.loadPlugins().then(function(){
//initialize plugins
});
由于我没有收到有效的答案,所以我接受了我的无效想法:(
function _loadExternalJS(elem) {
var scriptRoot = d.getElementById('target_root'),
scriptElement = d.createElement('script'),
isElemPlugin = elem.isPlugin || typeof elem.isPlugin === "undefined",
loadAsync = elem.async || typeof elem.async === "undefined";
scriptElement.setAttribute('type', 'text/javascript');
scriptElement.setAttribute('async', loadAsync);
if (isElemPlugin) {
scriptElement.onload = function() {
jsLoaded++;
};
}
scriptElement.setAttribute('src', elem.src);
scriptRoot.parentNode.insertBefore(scriptElement, scriptRoot.nextSibling);
}
对于那些想知道"然后"功能的人,我已经完成了以下操作:
target.init = function (plugins) {
//do something
return {
'then': _then
}
};
function _then(fn) {
var loaded;
loaded = w.setInterval(function () {
if (jsLoaded === pluginList.length) {
w.clearInterval(loaded);
fn();
}
}, 10);
}
如果你们有一个更好的主意,请发布!!!:(