首页 > Web开发 > 详细

06 模块化设计|单例设计模式|CommonJS | ES6Module

时间:2021-06-13 19:02:47      阅读:13      评论:0      收藏:0      [点我收藏+]

单例设计模式

  • 利用对象【单独堆内存】来分组管理,避免全局变量污染
  • 每一个对象都是Object的单独实例,基于每一个实例对象来管理自己的属性和方法,实现分组的效果
  • person1/person2 : namespace 命名空间
  • 把描述同一个事物的属性和方法,放在相同的命名空间中,以此避免全局变量污染

  let person1 = {
    name:‘小王‘,
    age:42,
    friend:true
  };
  let person2 = {
    name:‘小李‘,
    age:18,
    friend:false
  };
 
 
  • 利用闭包的思想【单独的执行上下文】来分组管理,避免全局变量污染
(function(){
  let name=‘小王‘;
  let age =42;
  let friend =true;
  const query = ()=>{};
  //暴露api,挂载到GO中【不宜挂载过多,因为挂载过多也会冲突】
  window.query = query;
})();

(function(){
  let name=‘小李‘;
  let age =42;
  let friend =false;
  query();
})();
 
  • 高级单例设计模式,原生JS实现模块管理
let Amodule = (function(){
  let n = 10;
  const query = () =>{}
  const sum = () =>{}

 

  //暴露api
  return{
    query
  };
})();

 

let Bmodule = (function(){
  let n =20;
  const sum = () =>{}
  Amodule.query();
  return{
    //B模块想要暴露的api,给其他模块用
  }
})();
 
  • 单例设计模式需要自己写代码管理,并且如果每一个模块是一个单独的JS,最后导入JS的时候,需要认真管理先后倒入的顺序【按照模块之间的依赖去处理】
  • AMD:按需倒入,有效管理模块之间依赖【requires】,所有依赖的模块必须前置导入,不能随用随导入
  • CommonJS规范【只能在Node环境下运行,随用随导入,无需依赖前置导入】
    • 导入:require(url)
    • 导出:module.exports = { }
  • seajs(淘宝玉伯大佬),把CommonJS规范搬到浏览器端运行,‘CMD‘
  • ECMA官方模块规范:ES6Module
    • 导出:export & export default { } 
    • 导入:import * as from ‘./A.js‘
    • 依赖前置,浏览器可以直接支持,nodejs环境不支持
  • import a from ‘.///’ 和 import { a } from ‘.///’的区别,{a}是直接解构赋值了,使用export default{}导出,不需要{}导入,直接可以使用对应导出方法;使用export导出,需要使用{}导入
  • export default { } 只能有一个

   

06 模块化设计|单例设计模式|CommonJS | ES6Module

原文:https://www.cnblogs.com/zhoujingye/p/14880238.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!