重学前端
程劭非(winter)
前手机淘宝前端负责人
立即订阅
32878 人已学习
课程目录
已完结 58 讲
0/4登录后,你可以任选4讲全文学习。
开篇词+学习路线+架构图 (3讲)
开篇词 | 从今天起,重新理解前端
免费
明确你的前端学习路线与方法
列一份前端知识架构图
模块一:JavaScript (15讲)
JavaScript类型:关于类型,有哪些你不知道的细节?
JavaScript对象:面向对象还是基于对象?
JavaScript对象:我们真的需要模拟类吗?
JavaScript对象:你知道全部的对象分类吗?
JavaScript执行(一):Promise里的代码为什么比setTimeout先执行?
JavaScript执行(二):闭包和执行上下文到底是怎么回事?
JavaScript执行(三):你知道现在有多少种函数吗?
JavaScript执行(四):try里面放return,finally还会执行吗?
JavaScript词法:为什么12.toString会报错?
(小实验)理解编译原理:一个四则运算的解释器
JavaScript语法(预备篇):到底要不要写分号呢?
JavaScript语法(一):在script标签写export为什么会抛错?
JavaScript语法(二):你知道哪些JavaScript语句?
JavaScript语法(三):什么是表达式语句?
JavaScript语法(四):新加入的**运算符,哪里有些不一样呢?
模块二:HTML和CSS (16讲)
HTML语义:div和span不是够用了吗?
HTML语义:如何运用语义类标签来呈现Wiki网页?
CSS语法:除了属性和选择器,你还需要知道这些带@的规则
HTML元信息类标签:你知道head里一共能写哪几种标签吗?
CSS 选择器:如何选中svg里的a元素?
CSS选择器:伪元素是怎么回事儿?
HTML链接:除了a标签,还有哪些标签叫链接?
CSS排版:从毕升开始,我们就开始用正常流了
HTML替换型元素:为什么link一个CSS要用href,而引入js要用src呢?
HTML小实验:用代码分析HTML标准
CSS Flex排版:为什么垂直居中这么难?
CSS动画与交互:为什么动画要用贝塞尔曲线这么奇怪的东西?
HTML语言:DTD到底是什么?
CSS渲染:CSS是如何绘制颜色的?
CSS小实验:动手做,用代码挖掘CSS属性
HTML·ARIA:可访问性是只给盲人用的特性么?
模块三:浏览器实现原理与API (9讲)
浏览器:一个浏览器是如何工作的?(阶段一)
浏览器:一个浏览器是如何工作的?(阶段二)
浏览器:一个浏览器是如何工作的(阶段三)
浏览器:一个浏览器是如何工作的?(阶段四)
浏览器:一个浏览器是如何工作的?(阶段五)
浏览器DOM:你知道HTML的节点有哪几种吗?
浏览器CSSOM:如何获取一个元素的准确位置
浏览器事件:为什么会有捕获过程和冒泡过程?
浏览器API(小实验):动手整理全部API
模块四:前端综合应用 (5讲)
性能:前端的性能到底对业务数据有多大的影响?
工具链:什么样的工具链才能提升团队效率?
持续集成:几十个前端一起工作,如何保证工作质量?
搭建系统:大量的低价值需求应该如何应对?
前端架构:前端架构有哪些核心问题?
特别加餐 (9讲)
新年彩蛋 | 2019,有哪些前端技术值得关注?
用户故事 | 那些你与“重学前端”的不解之缘
期中答疑 | name(){}与name: function() {},两种写法有什么区别吗?
答疑加餐 | 学了这么多前端的“小众”知识,到底对我有什么帮助?
加餐 | 前端与图形学
加餐 | 前端交互基础设施的建设
期末答疑(一):前端代码单元测试怎么做?
期末答疑(二):前端架构中,每个逻辑页面如何可以做到独立发布呢?
加餐 | 一个前端工程师到底需要掌握哪些技能?
尾声 (1讲)
尾声 | 长风破浪会有时,直挂云帆济沧海
重学前端
登录|注册

JavaScript语法(一):在script标签写export为什么会抛错?

winter 2019-03-28
你好,我是 winter,今天我们进入到语法部分的学习。在讲解具体的语法结构之前,这一堂课我首先要给你介绍一下 JavaScript 语法的一些基本规则。

脚本和模块

首先,JavaScript 有两种源文件,一种叫做脚本,一种叫做模块。这个区分是在 ES6 引入了模块机制开始的,在 ES5 和之前的版本中,就只有一种源文件类型(就只有脚本)。
脚本是可以由浏览器或者 node 环境引入执行的,而模块只能由 JavaScript 代码用 import 引入执行。
从概念上,我们可以认为脚本具有主动性的 JavaScript 代码段,是控制宿主完成一定任务的代码;而模块是被动性的 JavaScript 代码段,是等待被调用的库。
我们对标准中的语法产生式做一些对比,不难发现,实际上模块和脚本之间的区别仅仅在于是否包含 import 和 export。
脚本是一种兼容之前的版本的定义,在这个模式下,没有 import 就不需要处理加载“.js”文件问题。
现代浏览器可以支持用 script 标签引入模块或者脚本,如果要引入模块,必须给 script 标签添加 type=“module”。如果引入脚本,则不需要 type。
<script type="module" src="xxxxx.js"></script>
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《重学前端》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(28)

  • Leo
    当你认为你已经掌握了JS,JS会反手给你一巴掌。
    2019-03-28
    63
  • 以勒
    前面学的宏观任务和微观人物 还记得的同学举个手,点个赞
    2019-04-01
    54
  • _CountingStars
    作为一个非前段程序员 看了老师的专栏发现 js 坑真多 各种奇怪的语法和表现 感觉像语言的 bug 一样
    2019-03-28
    7
  • 无羡
    能否讲讲为什么导出的无论是基本类型还是引用类型,都会和原模块的变量有绑定关系?
    2019-03-29
    1
    6
  • 让时间说真话
    首先讲了脚本和模块,而这次老师讲的模块补缺我近段时间用模块时的一些疑问,Js的预处理语法让我更加理解了以前经常用到的作用域。感谢winter!!!
    2019-03-30
    5
  • 许童童
    通过@babel/parser解析模块文件,然后通过遍历ExportNamedDeclaration,找出所有export的变量,
    spec参考:https://github.com/babel/babel/blob/master/packages/babel-parser/ast/spec.md#exports
    2019-03-28
    5
  • 阿成
    https://github.com/aimergenge/get-exported-names-via-babel
    2019-03-28
    1
    4
  • xwchris
    console.log(foo);

    if (true) {
          function foo() {}
    }

    为什么这段代码 我在chrome73中执行得到的是ƒ foo() {}

    作者回复: 老内核和新内核不一样

    2019-04-08
    3
  • K4SHIFZ
    相反,我看了老师的文章后,以前觉得是语言bug的地方,现在觉得不是bug了
    2019-03-28
    3
  • 二狗
    作为一个非前端程序员,日常工作觉得简单的js都会写,复杂的js都能看懂 现在已经一脸问号???
    2019-09-30
    1
  • 阿成
    * 预处理机制让我对 js 中的声明有了更全面的认识,很多文章中提到的一个词是“提升”,与这里提到的预处理机制不无关联。
    * 关于声明这块儿,这篇文章讲得也有点意思,不知道winter老师怎么看:
    https://zhuanlan.zhihu.com/p/28140450
    * 在我看来,if中的function声明在预处理阶段的”赋值“行为好像被if形成的块级作用域”拦截“了,导致这个赋值行为推迟到if语句块执行开始之前。(这里只是一种隐喻,并不准确)。
    * let,const,class这些在js中的”后来者“由于没有历史包袱,行为大多更加正常(符合直觉,及早抛错)。这让我想到了一篇文章中介绍的temporal dead zone机制:http://es6.ruanyifeng.com/#docs/let#%E6%9A%82%E6%97%B6%E6%80%A7%E6%AD%BB%E5%8C%BA
    2019-03-28
    1
    1
  • 阿成
    想问一个问题:import 进来的引用为什么可以获取到最新的值,是类似于 getter 的机制吗?
    2019-03-28
    1
  • Geek_gaoqin
    “如果我们不用 IIFE”的那个例子,我跑出来为什么也是0到19,而不是老师说的全是20呢?!好想贴个截图,可这个应用没看到上传图片的地方
    2019-10-12
    1
  • 洛克不菲勒
    看了之后好像明白了,但是又好像什么都没学到,是否需要多看几遍?

    作者回复: 读完以后可以自己查阅相关资料,补充自己的能力体系。

    2019-09-03
  • 板栗
    这篇文章是站在全局的高度对 js 进行了解释。可执行代码:文件、模块、函数体。以及代码的处理方式:预处理、执行序言。666
    2019-08-19
  • Geek_7e2326
    闭包那边解释的不对吧,闭包应该可以看做一个函数,可以让外部访问函数内部的变量,而不会污染全局。
    你说的是访问外部的变量。

    作者回复: 光秃秃的一个论点,没来源没分析,就说我讲错了,我还真不知道该怎么反驳你……

    2019-07-26
  • 五十四
    第一次a不能赋值,这样才能不被改变,这是为什么呢?

    a.js

    let a

    let setTestA = function(n){
      a = n
    }

    export default{
      a,
      setTestA
    }

    b.js

    import x from './script/a'
    x.setTestA(123)
    console.log(x.a) // undefined


    ---------------
    a.js

    let a = {}

    let setTestA = function(n){
      a.bb = n
    }

    export default{
      a,
      setTestA
    }

    b.js

    import x from './script/a'
    x.setTestA(123)
    console.log(x.a.bb) // 123
    2019-07-13
  • 学聪
    export a from "a.js"
    这语法没问题吗?是不是得改成
    export {a} from "a.js"
    2019-07-11
  • 奋逗的码农哥
    看完老师的文章,再看看大家的留言评论,能够体会到交流学习的乐趣。:-)
    2019-07-05
  • 温木
    函数提升分为赋值和不赋值两种情况。
    2019-05-05
收起评论
28
返回
顶部