3

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

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

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

new carousel();

然而，我担心的是，无论出于何种原因，其中一行 JS 错误都不会执行，并且我们几乎创建了一个单点故障。

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

提前致谢

4

3 回答 3

0

如果您知道您的某个调用可能会失败，那么您也应该有一个解决方案来捕获该错误。使用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 块中，但听起来您相当有信心某些代码会引发异常。

于 2013-04-03T21:12:11.340 回答
0

您可以将 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 正在返回<div>相同 id 的，而这个 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"}
]
于 2013-04-03T21:43:38.550 回答
0

检查这个小提琴。

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

id您还可以有一个用于构造函数的映射对象。我将在这里使用该示例。

假设标记类似于： 

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

定义引导映射，创建引导方法并调用它： 

// 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();
于 2013-04-03T22:37:44.543 回答