es6之(模块化)用法在这里回顾一下require.js的写法假设我们又两个js文件 index.js 和 conte

在这里回顾一下require.js的写法假设我们又两个js文件 index.js 和 content.js文件然后再index.js中使用content.js的返回结果看案例
require.js

    //首先定义 
        //content.js
    define(function(){                           //使用define函数定义一个模块
        return "收购腾讯" 
    })
    //然后require
        //index.js
    require(["./cononent.js"],function(animal){  //使用require来获取模块 并将模块作为一个参数返回出来 
        console.log(animal)  //收购腾讯
    })

CommonJS是这么写的

    //index.js
    var animal = require("./content.js")
    //content.js
    module.exports = "收购腾讯"

es6写法

    //index.js
    import animal from "./content"
    //content.js
    export default "收购腾讯"
    //在这里列举了三种方式的模块 妈妈再也不用担心混淆了

export命令

模块功能主要由两个命令构成export && import
1-即export用于规定模块的对外接口 export负责进行模块化也是模块化的输出
2-import用于输入输入其他模块提供的功能 import负责把模块化引入也是模块化
3-使用了export 命令定义模块的对外接口其他js 文件就可以通过import 来加载这个模块
4-export可以把变量函数类对象进行模块化提供外部调用的接口让外部进行引用

    //temp.js文件 然后在文件中输出一个模块变量  把一个变量模块化 
    export var a = "chang";
    //index.js文件  中以import的形式引入 
    import {a} from "./temp.js";
    //这就是 一个简洁的模块的输出和引入

多变量的输出

    //声明了3个变量，需要把这3个变量都进行模块化输出，这时候我们给他们包装成对象就可以了。
    var a ='jspang';
    var b ='大兄弟儿';
    var c = 'web';
    export {a,b,c}

函数的模块化输出

export function add(a,b){
       return a+b;
}   
add(1,2)

as的用法修改变量名

    //不想暴露模块里边的变量名称，而给模块起一个更语义话的名称，这时候我们就可以使用as来操作。
    //不能用||不想用Xxxx这个变量名 使用as
    var a ='jspang';
    var b ='大兄弟儿';
    var c = 'web';
    export {
        x as a,     //！通常情况下变量就是本来的名字 但是可以使用as 关键字重命名
        y as b,
        z as c
    }

export default的使用加上default相当是一个默认的入口。在一个文件里export default只能有一个。

export和export default的区别

1.export
        export var a ='Cdd';
        export function add(a,b){
            return a+b;
        }
                                     //对应的导入方式
        import {a,add} form './temp';//也可以分开写
        
2.export defalut
        export default var a='Cdd';
                                     //对应的引入方式
        import str from './temp';

另外还有
输入的时候注意大括号里面的变量名必须和被导入的模块dejs 对外接口的名称相同
如果还希望输入的js中输出的默认值(defalut) 写在大括号外面 import animal,{say,type} from "./content" 以及模块的整体加载，详细可以参考git

了解 import&&require的区别前端常见面试题

模块加载的时间
require 运行时加载
import 编译时加载(效率更高) (由于是编译时加载所以import命令会提升整个模块的顶端)
模块的本质
require 模块即使对象输入时必须查找对象属性
import es6模块不是对象 (而是通过export命令显示指定输入的代码再通过import命令输入) (导致es6模块本身无法被引用因为它不是对象) 由于es6模块是编译时加载使得静态分析成为可能拓展js的语法

CommonJs 模块和es6模块的区别

1. commonjs 模块默认采取 非严格模式 
2. es6      自动采取严格模式 不管有没有再模块头上加 "use strict"
3. commonjs 模块输出的是一个值的拷贝 es6输出的是值的引用

//严格模式 //变量必须声明后使用
//函数的参数不能有同名属性否则报错
//不能使用with语句
//不能对只读属性赋值否则报错
//不能删除不可删除的属性否则报错
//不能删除变量delete prop会报错
//eval不hi在它的外层作用域引用变量 eval 和arguments不能被重新赋值
//arguments 不会自动反映函数参数的变化不能使用argments.callee argments.caller
//禁止this 指向全局对象
//等... !! 要注意this' 在es6模块中顶层的this指向undefined 即不应该在顶层代码中使用this

es6之(模块化)用法