Javascript引导策略

javascript bootstrap strategy

本文关键字：策略 Javascript      更新时间：2023-09-26

我目前正在工作的项目有一个单一的引导文件，初始化应用程序内的所有javascript对象。类似于下面的代码

if(document.getElementById('nav')) {
  new navigation();
}
if(document.getElementById('search')) {
 new search();
}
new carousel();

然而，我担心的是，无论出于何种原因，其中一行JS错误将无法执行所有JS代码，我们几乎创建了一个单点故障。

我有兴趣听到这个问题的替代方案和解决方案，以及任何其他可能有助于缓解这个问题的引导策略。

Thanks in advance

检查一下。

如果你自己滚动，如果你可以使用data- html 5属性来指定引导关系。然后，你的bootstrap函数可以遍历它们并启动构造函数。

你也可以有一个id到构造器的映射对象。我将在这里使用这个例子。

假设标记类似如下:

<body>
    <div id="navigation"></div>
    <div id="search"></div>
</body>

定义你的bootstrap映射，创建一个bootstrap方法，并调用它:

// Declare your bindings in an object
var bootstrapBindings = {
    "navigation" : NavigationBootstrap,
    "search" : SearchBootstrap,
    "failure" : null
};
function bootstrap() {
    var i, element, instance;
    // Bind everything in the bindings
    for(i in bootstrapBindings) {
        if(bootstrapBindings.hasOwnProperty(i)) {
            try {
                element = document.getElementById(i);
                if(element) {
                    instance = new bootstrapBindings[i](element);
                    // Nestable bootstrap calls
                    instance.bootstrap();
                }
            } catch(e) {
                // Do something with error if you want
                alert('Unable to bootstrap: ' + e);
            }
        }
    }
}
bootstrap();

如果您知道其中一个调用可能失败，那么您应该有一个解决方案来捕获该错误。使用try catch块将允许您捕获异常并让您的代码继续。

try{
  if(document.getElementById('nav')) {
    new navigation();
  }
}catch(e){
  //handle exception for navigation fail
}
try{
  if(document.getElementById('search')) {
   new search();
  }
}catch(e){
  //handle exception for search fail
}
try{
  new carousel();
}catch(e){
  //handle exception for carousel fail
}

一般来说，你不想把所有的代码都包装在try - catch块中，但听起来你很有信心，有些代码会抛出异常。

您可以将init逻辑封装在单独的init函数中，然后让另一个函数调用它们并捕获结果。例如:

<body>
<div id=nav></div>
<div id=search></div>
<script>
    function initNavigation() {
        if (document.getElementById('nav')) {
            new navigation();
        }
    }
    function initSearch() {
        if (document.getElementById('search')) {
            new search();
        }
    }
    function initCarousel() {
        new carousel();
    }
    function initNoError() {
        return "ok";
    }
    /**
     * Expects a list of functions to execute, and will capture either the retVal or the error.
     */
    function init() {
        var results = [],
            result;
        for (var i = 0; i < arguments.length; i++) {
            result = {};
            try {
                result.retVal = arguments[i]();
            } catch (e) {
                result.error = e;
            }
            results.push(result);
        }
        return results;
    }
    var initResults = init(initNavigation, initSearch, initCarousel, initNoError);
    console.log(initResults);
</script>
</body>

这段代码将为我显示以下内容。ReferenceError错误是因为我没有你的构造函数。TypeError似乎是因为Firefox返回了相同id的<div>，而且这个div当然不是构造函数。

[
    Object { error=ReferenceError: navigation is not defined},
    Object { error=TypeError: search is not a constructor},
    Object { error=ReferenceError: carousel is not defined},
    Object { retVal="ok"}
]
相关文章：