Как изолировать части на веб-странице, чтобы одна часть не влияла на другие части

Я управляю проектом, в котором разработка выполняется несколькими разработчиками, работающими на разных частях веб-страницы. Мы сталкиваемся с проблемами интеграции при объединении частей веб-страницы из-за побочных эффектов.

Если веб-часть содержит ошибку, плохо написана или заблокирована веб-фильтром, это влияет на отрисовку других частей веб-страницы.

Есть ли способ четко разделить веб-страницу?

Мое исследование показало только веб-части share point, но не подход или рамки для этой точной проблемы. Изоляция IFrame связана, но это решение сродни помещению квадратного колышка в круглое отверстие.

1 ответ

  1. Если веб-часть имеет ошибку или плохо написана или если она заблокирована веб-фильтрацией, это влияет на отрисовку других частей веб-страницы.

    Используйте блоки try/catch:

    window.addEventListener("error", function(e){return false;}, true);
    try{angular.run();}
    catch(e){console.log(e.toString() )};
    $("body").append("<div>Hi</div>");
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    или ленивая загрузка:

    void(function foo()
      {
      /* get head element */
      var head = document.getElementsByTagName("head")[0];
    
      /* create script element */
      var jQueryJS = document.createElement("script");
    
    
      /* define script src attribute to lazy load */
      jQueryJS.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js";
    
      /* append script */
      head.appendChild(jQueryJS);
    
    
      /* call tests after jQuery loads */
      jQueryJS.onload = function () 
        {
        $("body").append("<h1>Hi</h1>");
        }
      }() 
    );

    Другие подходы включают:

    • HTML5 sandbox / CSP-архитектура безопасности
    • TreeHouse: Web workers песочница архитектура
    • JSand: безопасная архитектура песочницы с поддержкой ECMAScript(SES)
    • ADSafe: виртуальные кадры

    Ссылки на литературу