es6模块化的一个简单小例子

概述

在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

export 命令

模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

demo

• modules
  • index.html
  • index.js
  • module.js

module.js

let str = 'string';
let obj = {
    
    
    name: 'rose'
};
let fn = () => {
    
    
    console.log('module test')
}

export {
    
    
    str,
    obj,
    fn
}

export default {
    
     a: 1 }//默认输出

import 命令

使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。

index.js

import {
    
     str as string, obj, fn } from './module.js'//如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名。
import foo from './module.js'  //可以用任意名字加载export的默认输出
console.log('name', obj.name);
//console.log('str', str);
console.log('string', string);
console.log('fn', fn());
console.log(foo)

运行

index.html

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

直接打开网页报错

由报错信息可知是跨域问题
跨源请求只支持协议方案:http，数据，chrome, chrome-extension, chrome-untrusted, https。

解决方法：
通过搭建本地一个服务器去进行资源的问题来解决跨域问题
例如：node 打开

windows用户打开cmd
查看有没有安装node node -v
没有的话先安装node（百度上很多）

已安装的话下载http-server ： npm install http-server -g

然后进入到该项目地址 输入http-server命令，如下图：

然后用上面的地址访问，进到对应项目即可预览

结果

一个小小例子~~