脚本和模块

javascript有两种源文件,一种叫脚本,一种叫模块。这个区分主要是在ES6引入的,ES5及之前版本只有一种源文件类型(只有脚本)。

脚本是可以有浏览器或者node环境引入执行的,而模块只能有javascript代码用import引入执行。

从概念上来讲,我们可以认为脚本具有主动性的javascript代码段,是控制宿主完成一定任务的代码;而模块是被动性的javascript代码段,是等待被调用的库。

不难发现,实际上模块和脚本之间的区别仅仅在于是否包含import和export。

脚本是一个兼容之前版本的定义,在这个模式下,没有import就不需要处理加载.js文件问题。

现代浏览器可以支持用script标签引入模块或者脚本,如果要引入模块,必须给script标签添加type=“module”。如果引入脚本,则不需要type。

    <script type="module" src="xxxx.js"></script>

脚本中可以包含语句,模块中可以包含import声明、export声明、语句。

import声明:

import声明有两种用法,一个是直接import一个模块,另一个是带from的import,它能引入模块内的一些信息。

    import "mod";//引入一个模块
import v from "mod";//把模块默认的导出值放入变量v

直接import一个,模块,只能保证这个模块代码被执行,引入它的模块是无法获得他的任何信息的。

带from的import意识是引入模块中的一部分信息,可以把他们变成本地变量。

带from的import细分又有三种用法:

    import x from "./a.js";//引入模块中导出的默认值
import {a as x,modify} from "./a.js";//引入模块中的变量
import * as x from "./a.js";//把模块中所有的变量以类似对象属性的方式引入

第一种方式还可以和后两种方式组合使用。

    import d,{a as x,modify} from "./a.js";
import d,* as x from "./a.js";

语法要求不带as的默认值永远在最前。注意,这里的变量实际上仍然可以受到原来模块的控制。例如:

模块a:

    export var a=1;
export function modify(){
a=2;
}

模块b:

    import {a,modify} from "./a.js";
console.log(a);//1
modify();
console.log(a);//2

导入后的变量只是改变了名字,它仍然与原来的变量是同一个。

export声明:

与import相对,export声明承担的是导出的任务。

模块中导出变量的方式有两种,一种是独立使用export声明,另一种是直接在声明型语句前添加export关键字。

独立使用export声明就是一个export关键字加上变量名列表:

    export {a,b,c}

页可以直接在声明型语句前添加export关键字,这里的export关键字,这里的export可以加在任何声明性质的语句之前,整理如下:

var、function(含async和generator)、class、let、const

export还有一种特殊用法,就是跟default联合使用。export default表示导出一个默认变量值,它可以用于function和class。这里导出的变量是没有名称的,可以使用import x from “./a.js”这样的语法,在模块中引入。

export还支持一种语法,后面跟一个表达式:

    var a={};
export default a;

但是这里的行为跟导出变量是不一致的,这里导出的是值,导出的就是普通变量a的值,以后a的变化与导出的值就无关了,修改变量a,不会使得其他模块中引入的default值发生改变。

在import语句前无法加入export,但是我们可以直接胡搜用export from语法。

    export a from "./a.js";

函数体:

函数体就是函数花括号中间的部分。

函数体实际上有4中:

普通函数体:

    function foo(){
//code
}

异步函数体:

    async function foo(){
//code
}

生成器函数体:

    function *foo(){
//code
}

异步生成器函数体:

    async function *foo(){
//code
}

上面4中函数体的区别在于:能否使用await或者yield语句。

预处理:其实指的就是变量提升,在javascript脚本执行之前,会先把体内含有的变量先声明一下。。

指令序言:指的就是严格模式“use strict”     指令序言只能放在第一行  它之前不能有代码

javascript语法(一) 极客时间的更多相关文章

  1. 【视频合集】极客时间 react实战进阶45讲 【更新中】

    https://up2.v.sharedaka.com/video/ochvq0AVfpa71A24bmugS5EewhFM1553702519936.mp4 01 React出现的历史背景及特性介绍 ...

  2. Mysql实战45讲 06讲全局锁和表锁:给表加个字段怎么有这么多阻碍 极客时间 读书笔记

    Mysql实战45讲 极客时间 读书笔记 Mysql实战45讲 极客时间 读书笔记 笔记体会: 根据加锁范围:MySQL里面的锁可以分为:全局锁.表级锁.行级锁 一.全局锁:对整个数据库实例加锁.My ...

  3. java爬虫系列第四讲-采集"极客时间"专栏文章、视频专辑

    1.概述 极客时间(https://time.geekbang.org/),想必大家都知道的,上面有很多值得大家学习的课程,如下图: 本文主要内容 使用webmagic采集极客时间中某个专栏课程生成h ...

  4. "做中学"之“极客时间”课程学习指导

    目录 "做中学"之"极客时间"课程学习指导 所有课程都可以选的课程 Java程序设计 移动平台开发 网络攻防实践 信息安全系统设计基础 信息安全专业导论 极客时 ...

  5. 如何将极客时间课程制作成kindle电子书

    订阅了几个极客时间的专栏,一直没有时间去看. 最近,想着如果把内容制作成电子书,利用上下班时间学习一下,岂不是很方便? 在网上搜到一个很好用的开源软件,几分钟就可以把极客时间的专栏做成电子书,简直太棒 ...

  6. 极客时间_Vue开发实战_汇总贴

    视频地址: https://time.geekbang.org/course/intro/163 https://github.com/tangjinzhou/geektime-vue-1 电脑dem ...

  7. 左耳朵耗子:我为什么要在极客时间 App 开设独家专栏?

    参考链接:https://www.infoq.cn/article/2018/01/why-geektime 不少朋友都知道我在极客时间App 上开了一个收费专栏<左耳听风>,这个专栏会开 ...

  8. 极客时间 Mysql实战45讲 07讲行锁功过:怎么减少行锁对性能的影响笔记 极客时间

    极客时间 Mysql实战45讲 07讲行锁功过:怎么减少行锁对性能的影响笔记 极客时间极客时间 Mysql实战45讲 07讲行锁功过:怎么减少行锁对性能的影响笔记 极客时间 笔记体会: 方案一,事务相 ...

  9. Mysql实战45讲 05讲深入浅出索引(下)极客时间 读书笔记

    极客时间 Mysql实战45讲 04讲深入浅出索引(下)极客时间 笔记体会: 回表:回到主键索引树搜索的过程,称为回表覆盖索引:某索引已经覆盖了查询需求,称为覆盖索引,例如:select ID fro ...

  10. Mysql实战45讲 04讲深入浅出索引(上)读书笔记 极客时间

    极客时间 Mysql实战45讲 04讲深入浅出索引 极客时间(上)读书笔记  笔记体悟 1.索引的作用:提高数据查询效率2.常见索引模型:哈希表.有序数组.搜索树3.哈希表:键 - 值(key - v ...

随机推荐

  1. 快播王欣发布匿名IM社交软件“马桶MT”

    2019年1月14日,快播王欣推出了一款匿名IM社交软件——马桶MT,它的灵感像是来自于美国的匿名分享应用Secret(已关闭). 原快播创始人王欣近日在微博预告了其新公司云歌人工智能推出一款全新社交 ...

  2. Swing中支持自动换行的WrapLayout

    http://www.cnblogs.com/TLightSky/p/3482454.html ———————————————————————————————————————————————————— ...

  3. Java知多少(21)this关键字详解

    this 关键字用来表示当前对象本身,或当前类的一个实例,通过 this 可以调用本对象的所有方法和属性.例如: public class Demo{ public int x = 10; publi ...

  4. python进行数据分析

    1.  python进行数据分析----线性回归 2. python进行数据分析------相关分析 3. python进行数据分析---python3卡方 4. 多重响应分析,多选题二分法思路 5. ...

  5. Go指南_切片的长度与容量

    源地址 https://tour.go-zh.org/moretypes/11 一.描述 切片拥有 长度 和 容量. 切片的长度就是它所包含的元素个数. 切片的容量是从它的第一个元素开始数,到其底层数 ...

  6. X-Frame-Options 配置

    最近在修改ASP老网站,使用是iframe框架部署上去后出现“此内容不能显示在一个框架中”错误 以下错误解决方案是需要配置:X-Frame-Options X-Frame-Options: 他的值有三 ...

  7. OpenGL 太阳系行星拾取例子(GL_SELECT) VS2008 + glut实现

    太阳系:Solar System 以太阳(Sun)为中心,由内到外分别是: 水星(Mercury) 金星(Venus) 地球(Earth) 火星(Mars) 木星(Jupiter) 土星(Saturn ...

  8. [Converge] Weight Initialiser

    From: http://www.cnblogs.com/denny402/p/6932956.html [, ] fully connected w = tf.Variable(tf.truncat ...

  9. iOS Xcode, 解决“Could not insert new outlet connection”的问题。

    在Xcode中,我们能够在StoryBoard编辑界面或者是xib编辑界面中通过"Control键+拖拽"的方式将某个界面元素和相应的代码文件连接起来,在代码文件里创建outlet ...

  10. python-docx 设置标题heading的中文字体类型+设置正文的中文字体类型

    依赖包: from docx import Document from docx.shared import Pt from docx.shared import Inches from docx.o ...