美文网首页架构相关
浅谈模块化开发

浅谈模块化开发

作者: 这里王工头 | 来源:发表于2019-02-01 12:48 被阅读0次

    欢迎访问我的博客https://qqqww.com/,祝所有码农同胞们早日走上人生巅峰,迎娶白富美~~

    @[TOC]

    1 前言

    前段时间做的项目,其中也用到了模块化编程的思路,所以就想来总结下,方便以后使用,欢迎道友们踩点

    1.1 什么是模块化

    将一个项目按照功能划分,理论上一个功能一个模块,互不影响,在需要的时候载入,尽量遵循高内聚低耦合,关于高内聚低耦合可以看我的另一篇博客ES6中的Symbol中的章节1.4中有对耦合性内聚性的解释

    1.2 引入模块化的意义

    以往在javascript中,没有明确的模块化的概念,不能够将一个大的项目分成一些相互依赖的小文件,这对于项目的开发就很难受,看看以往我们载入js文件

    <script src = '1.js'></script>
    <script src = '2.js'></script>
    <script src = '3.js'></script>
    <script src = '4.js'></script>
    <script src = '5.js'></script>
    <script src = '6.js'></script>
    
    1. 这里解释一下src,想必很多人都知道,src相当于下载文档,且当执行src嵌入文件时,下面的程序都不会执行,将src指向的内容嵌入到文档标签所在位置,向更加深入理解移步这里src和href的区别
    2. 那么我们理解了src是直接嵌入内容到指定标签之后再去加载很多js文件,就会知道,它会产生很多问题:
      1. 变量冲突,脚本过多,不利于维护等
      2. 必须按照严格的依赖文件顺序
      3. src对文件的加载时必须要将当前src加载的文件加载完成才会执行下面的代码,当过多的脚本载入页面,就增加了页面等待时间,影响用户体验

    由于诸如以上的原因,引入模块化的解决方案

    2 CommonJS

    请移步我的另一篇博客模块化开发之CommonJS规范

    3 AMD 规范

    请移步我的另一篇博客模块化开发之AMD规范

    4 CMD规范

    请移步我的另一篇博客模块化开发之CMD规范

    5 AMD VS CMD

    1. 依赖规范AMD 依赖 RequireJS,而 CMD 依赖 SeaJS
    2. 依赖模块AMD提前执行CMD延迟执行,不过 RequireJS2.0开始,也改成可以延迟执行(根据写法不同,处理方式不同)
    3. API职责AMDAPI默认是一个当多个用CMDAPI 严格区分,推崇职责单一,比如 AMD 里,require 分全局 require 和局部 require,都叫 requireCMD 里,没有全局 require,而是根据模块系统的完备性,提供 seajs.use 来实现模块系统的加载启动。CMD 里,每个 API简单纯粹

    6 ES6中的Module

    请移步我的另一篇博客ES6中Module语法与加载实现

    7 ES6 中的模块与 CommonJS 模块差异

    1. CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用
    2. CommonJS 模块是运行时加载,其中的require全部下载模块,ES6 模块是编译时输出接口,其中的import可以按需加载

    9 参考文章

    相关文章

      网友评论

        本文标题:浅谈模块化开发

        本文链接:https://www.haomeiwen.com/subject/vjfdsqtx.html