从 jQuery 到原生 javascript

Question

我有这段使用 jQuery 的代码，我希望它是一个普通的 javascript。

我使用了自我执行功能并摆脱了$。好吧，一旦我摆脱匿名函数之前的第一个 $ 并用 vanilla JS 重写它，它就会停止工作......

$(function() {
  $("#toc").append("<div id='generated-toc'></div>");
  $("#generated-toc").tocify({
    extendPage: true,
    context: "#content",
    highlightOnScroll: true,
    hideEffect: "slideUp",
    hashGenerator: function(text, element) {
      return $(element).attr("id");
    },
    smoothScroll: false,
    theme: "none",
    selectors: $("#content").has("h1").size() > 0 ? "h1,h2,h3,h4,h5" : "h2,h3,h4,h5",
    ignoreSelector: ".discrete"
  });

  var handleTocOnResize = function() {
    if ($(document).width() < 768) {
      $("#generated-toc").hide();
      $(".sectlevel0").show();
      $(".sectlevel1").show();
    } else {
      $("#generated-toc").show();
      $(".sectlevel0").hide();
      $(".sectlevel1").hide();
    }
  }

  $(window).resize(handleTocOnResize);
  handleTocOnResize();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

所以我这样写...但是 由于某种原因，它无法正常工作...

(function() {
  document.getElementById("toc").append("<div id='generated-toc'></div>");
  document.getElementById("generated-toc").tocify({
    extendPage: true,
    context: "#content",
    highlightOnScroll: true,
    hideEffect: "slideUp",
    hashGenerator: function(text, element) {
      return element.attr("id");
    },
    smoothScroll: false,
    theme: "none",
    selectors: document.getElementById("content").has("h1").size() > 0 ? "h1,h2,h3,h4,h5" : "h2,h3,h4,h5",
    ignoreSelector: ".discrete"
  });

  var handleTocOnResize = function() {
    if (document.width() < 768) {
      document.getElementsByName("generated-toc").hide();
      document.getElementsByClassName("sectlevel0").show();
      document.getElementsByClassName("sectlevel1").show();
    } else {
      document.getElementById("generated-toc").show();
      document.getElementsByClassName("sectlevel0").hide();
      document.getElementsByClassName("sectlevel1").hide();
    }
  }

  window.resize(handleTocOnResize);
  handleTocOnResize();
})();

Answer 1

注意：我不得不降级 jQuery 以匹配 tocify

还在依赖jQuery的情况下重写jQuery有什么意义？

目前无法访问 HTML 的结果

1. jQuery 也不起作用 - .size 已在 jQuery 3.0 中删除。 请改用 .length 属性。转换为document.querySelectorAll("#content h1").length - vanilla 没有has
2. 您的(function() { 表示您必须在文档后添加JS。而是使用window.addEventListener("load",function() {
3. append 不是原版的
4. element.attr 不是香草。 element.getAttribute("id") 或只是 element.id
5. show/hide 不是香草。您需要classList.toggle("hide") 或使用媒体查询或设置hidden 属性
6. element.resize 不是香草。 window.addEventListener("resize", handleTocOnResize); 是或element.onresize
7. getElementsByName 在 ID 上无效，如果元素具有名称，则将返回节点列表，该名称不是 div 上的有效属性。
8. getElementsByClassName您不能更改节点列表上的类 - 我已更改为 querySelector
9. document.width 不是普通的。

window.addEventListener("load", function() {
  document.getElementById("toc").innerHTML += "<div id='generated-toc'></div>";
  const $genToc = $("#generated-toc"); // seems it MUST be a jQuery object
  $genToc.tocify({
    extendPage: true,
    context: "#content",
    highlightOnScroll: true,
    hideEffect: "slideUp",
    hashGenerator: function(text, element) {
      return element.id;
    },
    smoothScroll: false,
    theme: "none",
    selectors: document.querySelectorAll("#content h1").length > 0 ? "h1,h2,h3,h4,h5" : "h2,h3,h4,h5",
    ignoreSelector: ".discrete"
  });

  var handleTocOnResize = function() {
    // https://gist.github.com/joshcarr/2f861bd37c3d0df40b30
    const w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0],x=w.innerWidth||e.clientWidth||g.clientWidth;
    const show = x < 768 // or use media queries
   // $genToc[0].classList.toggle("hide", !show);
    document.querySelector(".sectlevel0").classList.toggle("hide", show);
    document.querySelector(".sectlevel0").classList.toggle("hide", show);
  }

  window.addEventListener("resize", handleTocOnResize);
  handleTocOnResize();
});

.hide {
  display: none
}


.tocify-header {
    font-style: italic;
}

.tocify-subheader {
    font-style: normal;
    font-size: 90%;
}

.tocify ul {
    margin: 0;
 }

.tocify-focus {
    color: #7a2518; 
    background-color: rgba(0, 0, 0, 0.1);
}

.tocify-focus > a {
    color: #7a2518; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tocify/1.9.0/javascripts/jquery.tocify.min.js"></script>


<div id="content">
  <h1>Toc</h1>
  <p class="sectlevel0">Level 0</p>
  <p class="sectlevel1">Level 1</p>
</div>
<div id="toc"></div>

jQuery测试版，看看能不能让原代码工作

const handleTocOnResize = function() {
  const show = $(document).width() < 768;
  $("#generated-toc").toggle(!show);
  $(".sectlevel0").toggle(show);
  $(".sectlevel1").toggle(show);
};


$(function() {
  $("#toc").append("<div id='generated-toc'></div>");
  $("#generated-toc").tocify({
    extendPage: true,
    context: "#content",
    highlightOnScroll: true,
    hideEffect: "slideUp",
    hashGenerator: function(text, element) {
      return $(element).attr("id");
    },
    smoothScroll: false,
    theme: "none",
    selectors: $("#content h1").length > 0 ? "h1,h2,h3,h4,h5" : "h2,h3,h4,h5",
    ignoreSelector: ".discrete"
  });


  $(window).on("resize", handleTocOnResize);
  handleTocOnResize();
});

.hide {
  display: none
}

.tocify-header {
  font-style: italic;
}

.tocify-subheader {
  font-style: normal;
  font-size: 90%;
}

.tocify ul {
  margin: 0;
}

.tocify-focus {
  color: #7a2518;
  background-color: rgba(0, 0, 0, 0.1);
}

.tocify-focus>a {
  color: #7a2518;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tocify/1.9.0/javascripts/jquery.tocify.min.js"></script>

<div id="content">
  <h1>Toc</h1>
  <p class="sectlevel0">Level 0</p>
  <p class="sectlevel1">Level 1</p>
</div>
<div id="toc"></div>