js ES6 模块化

js ES6 模块化

什么是模块化

历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来(多个script标签引入的js默认是相互独立的, 而不是依赖的)。其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。

ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。

export default命令

为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。

其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。

		单个数据
         import {myName} from "./test.js";
         console.log(myName);
         多个数据
         import {myName,myAge,myfn} from "./test.js";
         console.log(myAge);
         myfn();
        全部数据
         import *as obj from "./test.js";
         console.log(obj.myName);
        混合数据
        import myObj,{myName} from "./test.js";
        console.log(myName);
        console.log(myObj());
         //js文件
        // let myName="凯文";
        // let myAge=19;
        // let myfn=function(){
        //     console.log("我是凯文");
        // };
        // export {myName,myAge,myfn};
        export default function(){
            return "默认导出一个方法";
        }
        export let myName="凯文";

复合写法

//新建一个文件public
//public里面的db.js文件
    export const db = {
      url: "127.0.0.1",
      user: "admin",
      passWord: "123456",
    };
//public里面的user.js文件
    export const user = {
        user: "remi",
        passWord: "123456",
      };
//public里面的index.js文件
    export { db } from "./db.js";
    export { user } from "./user.js";

//demo文件和public平级
     <script type="module">
            import {db, user} from "./public/index.js";

            console.log(db);
            console.log(user);

      </script>