javascript - .js 文件适用于 chrome 和 firefox 但不适用于 IE

Question

在 IE11 中测试我的网站时，它的某些部分不起作用，我认为问题在于我的“custom.js”文件，因为所有问题都链接到该 js。但是，该页面在 Chrome 和 Firefox 中运行良好。

我在页面的页脚加载名为“custom.js”的 .js 文件以及其他页面特定插件(jquery 和 bootstrap 在头部加载)，如下所示:

<!-- JS Implementing Plugins -->
<script type="text/javascript" src="/js/back-to-top.js"></script>
<script type="text/javascript" src="/js/smoothScroll.js"></script>
<script type="text/javascript" src="/js/jquery.parallax.js"></script>
<script type="text/javascript" src="/js/masterslider.min.js"></script>
<script type="text/javascript" src="/js/jquery.easing.min.js"></script>
<script type="text/javascript" src="/js/owl.carousel.min.js"></script>
<script type="text/javascript" src="/js/jquery.cubeportfolio.min.js"></script>

<!-- JS Customization -->
<script type="text/javascript" src="/js/custom.js"></script>

<!-- JS Page Level -->
<script type="text/javascript" src="/js/app.js"></script>
<script type="text/javascript" src="/js/owl-carousel.js"></script>
<script type="text/javascript" src="/js/master-slider-fw.js"></script>
<script type="text/javascript" src="/js/jquery.owl-filter.js"></script>
<script type="text/javascript" src="/js/material.min.js"></script>

<script type="text/javascript">
    jQuery(document).ready(function() {
        App.init();
        App.initCounter();
        App.initParallaxBg();
        FancyBox.initFancybox();
        MSfullWidth.initMSfullWidth();
        OwlCarousel.initOwlEvent();
        OwlCarousel.initOwlSingle();
        OwlCarousel.initOwlTwo();
        OwlCarousel.initOwlAbout();

    });
    $(document).ready(function(){
        $('.owl-carousel').owlCarousel({
            nav:true,
            loop:true
        });
    });

</script>

<!--[if lt IE 9]>
<script src="/plugins/respond.js"></script>
<script src="/plugins/html5shiv.js"></script>
<script src="/plugins/placeholder-IE-fixes.js"></script>

custom.js 文件的内容是:

$(".helpform-container:not(.displayblock)").hide();
    $(".helpform")
        .on('mouseover focus', function(e) {
            $(this).addClass("link-div-hover")
        })
        .on('mouseout blur', function(e) {
            $(this).removeClass("link-div-hover")
        })
        .on('touchstart', function(e) {
            $(this).addClass("link-div-hover")
        })
        .on('touchend', function(e) {
            $(this).removeClass("link-div-hover")
        })
        .on('click', function(e) {
            $(this).toggleClass("active");
            e.preventDefault();

            if ($(".helpform-container").is(":hidden")) {
                $(".helpform-container").slideDown(400).addClass("displayed");
                analyticsevent('How can we help form', 'open');
            } else {
                $(".helpform-container").slideUp(400).removeClass("displayed");
                $("#sticky-wrapper").css("height","auto");
                analyticsevent('How can we help form', 'closed');
            }

            if (sitewidth < 1024) {
                $('html,body').animate({ scrollTop: $("#howcanwehelp").offset().top - 60 }, 250);
            } else {
                $('html,body').delay(500).animate({ 
                    scrollTop: $("#howcanwehelp").offset().top 
                }, 400);
            }
        })

    //FORM METRICS
    if ($('.formsent').length){
         analyticsevent('Contact form completed', 'consultation/quote/info/media');
    }

//Homepage news articles

var divs = $(".owl-news > .news-v2");
let array = [
  { length: 1, num: 4 },
  { length: 2, num: 3 },
  { length: 2, num: 3 },
  { length: 3, num: 2 }  
];

let i = 0;


for (let item of array) {
  divs.slice(i, i+item.length).wrapAll(`<div id='news-${item.num}' class='col-md-${item.num}'></div>`);
  i += item.length;
}

$("#news-4").before("<div class='col-md-4'><h3 id='title_featured'>Featured News</h3></div><div class='col-md-8'><h3 id='title_latest'>Latest News</h3></div>");

Answer 1

问题:2013 年发布的 Internet Explorer 11 不运行 ECMAScript 2015(原因很明显)。

肮脏的方式:Babel (独立)

最快但效率最低的方法。不要在生产中使用。

<!-- Load the in-browser babel compiler.  Make sure page encoding is UTF-8. -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- Set script type to text/babel for on-the-fly conversion and execution -->
<script type="text/babel" src="custom.js"></script>
<!-- Babel need to read the script through ajax, same origin policy applies. -->

---

痛苦的方式:用ES5重写

简单的用ES5重写custom.js的最后几行，以后注意不要使用任何ES6/7/8+的特性:

var divs = $(".owl-news > .news-v2"),
   array = [
      { length: 1, num: 4 },
      { length: 2, num: 3 },
      { length: 2, num: 3 },
      { length: 3, num: 2 }  
   ],
   i = 0;

array.forEach( function( item ) {
  divs.slice(i, i+item.length).wrapAll( "<div id='news-"+item.num+"' class='col-md-"+item.num+"'></div>" );
  i += item.length;
} );

---

系统方法:构建脚本

适当的构建系统可以帮助您管理项目，例如自动测试和部署到测试和生产系统。他们可以做的一件事是在部署时将您的 ES6 代码转换为 ES5，并可能缩小/混淆它们，例如 Babel , Traceur , 或 Closure .

“构建系统”可以像批处理文件一样简单。如果你告诉你的老板，这将保护有值(value)的公司知识产权，他可能会给你适当学习知识产权所需的时间。

---

拯救网络:不支持 IE 11

我知道，我知道。您不会问它是否是一个选项。

但您的老板可能没有意识到 IE 支持需要花费更多的开发时间，这意味着更高的成本、更慢的交付速度和更少的利润。

很少有人 (3.2%) 在现实世界中使用 IE 11 - 少于“UC 浏览器”(8%)、“Firefox”(6%)、“三星互联网”(3.6%) 或“Opera”( 3.4%)。 (统计计数器 May 2017 global stat 。)如果用户或客户问您为什么不支持 Samsung browser , 说没有人使用它不是一个好的借口，因为 IE 11 的用户更少。

大多数 IE 用户都知道，如果它在 IE 中不起作用，请尝试使用 Chrome。鼓励他们先使用 Chrome，最后使用 IE 就好了。它们更安全，网络更明亮，每个人都很开心。