脏话：Babel（独立）

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。

＆＃34;构建系统＆＃34;可以像批处理文件一样简单。如果你告诉你的老板它会保护宝贵的公司知识产权，他可能会给你正确的学习时间。

保存网络：不支持IE 11

我知道，我知道。你不会问它是不是一个选择。

但是你的老板可能不知道IE支持需要更多的开发时间，这意味着更高的成本，更慢的交付和更少的利润。

很少有人（3.2％）在现实世界中使用IE 11 - 少于＆＃34; UC浏览器＆＃34; （8％），＆＃34; Firefox＆＃34; （6％），＆＃34;三星互联网＆＃34; （3.6％），或者＃34; Opera＆＃34; （3.4％）。（Statcounter May 2017 global stat。）如果用户或客户询问为什么不支持 Samsung browser，说没有人使用它不是一个好借口，因为IE 11的用户更少。

大多数IE用户都了解到，如果它在IE中无效，请尝试使用Chrome。鼓励他们先使用Chrome，IE最后会很好。它们更安全，网络更亮，每个人都很开心。

Answer 2

您使用的是javascript let关键字，该关键字仅适用于IE11。更多信息here ...

如果问题仍然存在并且您确定代码正在编译，那么您应该激活浏览器的调试器以确定发生了什么...只需将关键字debugger;放在代码中的某个位置，浏览器就会在该停止处暂停执行，允许您检查变量......

这样的事情：

debugger;
$(".helpform-container:not(.displayblock)").hide();
...
$("#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 3

轻松检查文件是否具有非ES5语法的方法：

npm install -g es-check
es-check es5 offendingFile.js

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

3 个答案:

脏话：Babel（独立）

痛苦的方式：在ES5中重写

系统方式：构建脚本

保存网络：不支持IE 11