javaScript-模块化开发

本文主要是介绍javaScript-模块化开发，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

开发一个模块管理引擎

注意，模块仅在开始时定义一次
后续所有的使用都是使用最初实例化的模块（这也正是我们所需要的）

  let module = (function () {
    const moduleList = {};
    function define(name, modules, action) {
      modules.map((m, i) => {
        modules[i] = moduleList[m];
      });
      moduleList[name] = action.apply(null, modules);
    }
    return { define };
  })();
  module.define("a", [], function () {
    return {
      site: "后盾人",
      url: "houdunren.com"
    };
  });
  module.define("b", ["a"], function (a) {
    a.site = "hdcms";
  });
  module.define("c", ["a"], function (a) {
    console.log(a);
  });

模块的基本使用

导出：

class Lesson {
  data = [];
  init() {
    this.data = [{ name: "js" }, { name: "vue.js" }];
  }
  get() {
    return this.data;
  }
}
let obj = new Lesson();
obj.init();
export { obj };

引入：

    import { title, url, show } from "./ss.js";

注意：在html中使用模块要标记module属性

<script type="module">
  import { title, url, show } from "./hd.js";
  show();
</script>

模块延迟解析与严格模式

使用模块后 模块内的代码会被延迟加载
所有模块化操作都为严格模式

每一个模块都有自己的独立作用域

模块的预解析

模块只会解析一次（使得需要的模块不会重复获取浪费时间）

模块的具名导出

一定要给个名字，无论是函数还是变量
语法：
导入

  import { site, show, User } from "./ss/m7.js";

导出：

function show() {
  return "show function";
}
class User {
  static render() {
    return "user static render";
  }
}
export { site, show, User };

批量导入导出

建议不要这么做用什么直接导入：

  import { site } from "./modules/m8.js";
  console.log(site);

导入：

  import * as api from "./modules/m8.js";
  console.log(api.site);
  console.log(api.show());
  console.log(api.User.render());

导出：

let site = "sss";
function show() {
  return "show function";
}
class User {
  static render() {
    return "user static render";
  }
}
export { site, show, User };

默认导出

导入：

  import ss from "./modules/ss.js";

导出：

export default class User {
  static render() {
    return "user static render";
  }
}
// export { User as default };

混合导入导出

导入：（导入全部用default使用）

  import ss, { site } from "./modules/ss.js";
  // import * as api from "./modules/ss.js";
  console.log(api.default.render());
  console.log(api.site);

导出：

let site = "ss";
class User {
  static render() {
    return "user static render";
  }
}
export { User as default, site };

合并导出规范

导入名字一般都用问价夹名称
导入规则：

import * as m131 from "./m13.1.js";
import * as m132 from "./m13.2.js";
export { m131, m132 };

按需动态加载模块

如下即可实现按需加载

  document.querySelector("button").addEventListener("click", () => {
    import("./modules/m14.js").then(({ site, url }) => {
      console.log(site, url);
    });
  });

这篇关于javaScript-模块化开发的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！