javascript语法（一） 极客时间

脚本和模块

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”     指令序言只能放在第一行  它之前不能有代码