es6的Module一丢丢

  我对Modlue的理解，js貌似 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来，其实就是A.js中导入B.js，能在A.js中使用B.js的方法变量等等，就像css有一个@import
  模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。
  下面我把我学这个时候遇到的问题详细记下:

  首先写module肯定有两个js文件，这样才能互相调用，就像vue的模块式开发一样，那个vux就是有多个子文件然后相互调用，然后在在App.js中导入一个核心的js文件，就可以调用所有的子文件中的方法或者变量了，模块式开发如果写的比较好详细的话，其实有利于后期的维护，因为不同模块可能代表的是不同的业务逻辑

注意：其实有两种导入导出的方法
第一种

//com.js
let name="es6的module";
let age=24;
function say(params) {
    console.log("这是方法")
}
//加default 
export default {
    name,age,say
}

//test.js
import name from "./com.js";
console.log(name)  //{name: "es6的module", age: 24, say: ƒ}

第二种

//com.js
let name="es6的module";
let age=24;
function say(params) {
    console.log("这是方法")
}
//加default 
export {
    name,age,say
}
/*
  还可以这样写
export let name="es6的module";
export let age=24;
export  function say(params) {
    console.log("这是方法")
}
跟上面是一样的
*/

//test.js
//假如这个文件我只需要name，就在{}加上name
import {name,age,say......} from "./com.js";
console.log(name)   //es6的module

  关于写module的格式官网有很多注意的地方，建议看看阮一峰的文档，地址：http://es6.ruanyifeng.com/?search=Proxy&x=9&y=10#docs/module

  如果你想里面撸出代码需要注意一个问题，module需要在服务器环境下启动，如果你直接用一个html这样写，那是不行的会报错滴，
区分：
本地服务器启动html

2.jpg

直接点击读取的静态html

1.jpg

  如何启动本地服务器，搭建一个小而又简单的服务器

  这里我用的是vscode编辑器，下载插件：搜索live Server

3.jpg

  然后右键点击html

34.jpg

他会自动在浏览器弹出html文件的

还有一点，在你html文件中你需要这样引入js

//type需要是module才可以
<script type="module" src="./test.js"></script>

纯手打测试，有错误请告知，感谢