【无标题】import和 require的区别

import 和 require 都是被模块化所使用,是node编程中最重要的思想就是模块化。在 ES6 当中,用 export 导出接口,用 import 引入模块。但是在 node 模块中,使用module.exports导出接口,使用 require 引入模块。

两者的区别如下:

遵循规范:

  • require 是 AMD 规范引入方式
  • import是 ES6 的一个语法标准,如果要兼容浏览器的话必须转化成 ES5 的语法

调用时间:

  • require是运行时调用,所以require理论上可以运用在代码的任何地方
  • import是编译时调用,所以必须放在文件开头

本质:

  • require 是赋值过程。module.exports后面的内容是什么,require的结果就是什么,比如对象、数字、字符串、函数等,然后再把require的结果赋值给某个变量,它相当于module.exports的传送门
  • import 是解构过程,但是目前所有的引擎都还没有实现import,我们在node中使用babel支持ES6,也仅仅是将ES6转码为ES5再执行,import语法会被转码为require

import 虽然是 es6 中的语法,但就目前来说,所有的引擎都还没有实现import。

我们在 node 中使用 babel 支持ES6(在 node 当中,比如 node.js 代码,也不能直接使用 import 来导入,必须使用 babel 支持才能使用 import 语法),实际上也是将 ES6 转码为 ES5 再执行,import 语法实际上会被转码为 require。这也是为什么在模块导出时使 module.exports,在引入模块时使用 import 仍然起效,因为本质上,import 会被转码为 require 去执行。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现这个功能可以分为两个步骤: 1. 使用markdown-it解析Markdown文本,并将解析后的HTML嵌入到Vue组件中显示文档内容。 ``` <template> <div class="markdown-it-container"> <div class="markdown-it-content" v-html="html"></div> </div> </template> <script> import MarkdownIt from 'markdown-it' export default { data () { return { text: '## 标题2\n\n这是文档内容' } }, computed: { html () { const md = new MarkdownIt() return md.render(this.text) } } } </script> ``` 2. 根据文档内容生成基于标题的导航,并实现点击标题导航跳转到对应的文档内容。 ``` <template> <div class="markdown-it-container"> <div class="markdown-it-nav"> <ul> <li v-for="(item, index) in toc" :key="index"> <a :href="`#heading-${index}`">{{ item.text }}</a> </li> </ul> </div> <div class="markdown-it-content" v-html="html"></div> </div> </template> <script> import MarkdownIt from 'markdown-it' export default { data () { return { text: '## 标题2\n\n这是文档内容' } }, computed: { html () { const md = new MarkdownIt() const toc = [] const result = md.render(this.text, { // 添加anchor插件,用于生成标题锚点 plugins: [ require('markdown-it-anchor') ], // 生成目录 toc: true, tocCallback: (tocMarkdown, tocArray, tocHtml) => { toc.splice(0, toc.length) toc.push(...tocArray) } }) // 将目录保存到data中 this.toc = toc return result } } } </script> <style scoped> .markdown-it-nav { position: fixed; top: 0; right: 0; width: 20%; max-height: 100vh; overflow-y: auto; border-left: 1px solid #ccc; padding: 20px; } .markdown-it-content h2, .markdown-it-content h3, .markdown-it-content h4, .markdown-it-content h5, .markdown-it-content h6 { margin-top: 80px; } </style> ``` 在上面的代码中,我们使用了`markdown-it-anchor`插件来生成标题锚点,并通过`toc`选项生成目录,然后将目录保存到data中。在导航中,我们遍历目录生成导航列表,并将每个标题的锚点设置为对应的跳转链接,然后在文档内容中给每个标题添加唯一的id,用于实现跳转。同时,在样式中为导航和文档内容设置样式,使其呈现出左右两栏的效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值