「网站架构」前端模块化的工作原理和各种方法的分析及应用场景？_网站架构 如何实现多模块部署-程序员宅基地
本期我们来聊一聊前端页面模块化， 模块化也是《前端架构需要解决的问题》中最后一个还没介绍的问题 ，也是前端架构问题中最为复杂的问题。
模块化的目的，是为了降低整体项目的工作量 也就是说页面中的部分内容是可以复用的。
模块化虽然看起来很美好， 但用不好的话，反而会变成累赘 。而且，现在的模块化方案其实还有很大的改进空间。
我们讨论以下几个问题
1、模块化的原则是什么
2、现有的模块化方案
3、现今模块化的困境与我们的解决方案
1、模块化原则
首先，我们先讨论模块化的原则， 模块化虽然能降低代码量 ，但如果像这样无限级嵌套模块的话， 看上去能极大程度地降低代码量 ，但其实这样的代码维护起来是十分困难的。
我们推荐的模块化原则是， 模块只需要限制在单层，且模块之间不能互相嵌套关联， 页面分为整体层和模块层 整体层作为沙盒，引入模块且对模块进行布局， 模块层就是一个个模块，做精细页面元素布局。
这样的话，既可以保证模块的复用度（模块间不互相关联） 维护起来也是比较容易的。
这个原则其实与我们之前的《前端响应式布局》相呼应的 ，对此有疑问的小伙伴可以翻看我们之前的内容 。
2、现有的模块化方案
接下来，我们讨论现有的模块化方案，现有的模块化方案有3种
- iframe
- 插件的方式
- 使用vue-cli、react-cli等脚手架工具
（1）iframe方式
iframe是HTML原生支持的方式 ，它允许将一个页面嵌入到另外一个页面， iframe是理论上比较好的一种模块化方式， 因为被嵌入的模块是完整的页面，可以单独运行和调试， 但是，iframe的方式只适合嵌入一些较为复杂的模块，如播放器模块、即时聊天模块等。 因为如果一个页面嵌入多个iframe的话 ，那么可能会出现性能问题 ，而且这多个iframe模块之间的协调也是很麻烦的事情。
虽然iframe不能作为页面模块化常用的方法， 但是iframe可以很好地组织整个网站的页面， 有兴趣的小伙伴可以翻看往期《前端单页应用》中的iframe伪单页应用。
（2）插件的方式
接下来是插件的方式 ，这种方式也是HTML原生支持的方式 插件的方式是比较常见的。 如播放器videojs、文本编辑器CKeditor、组件工具箱BootStrap等。 如果使用vue.js的template的话，其实也是插件的方式， 插件的方式说白了就是把Css文件、JavaSript脚本打包成插件， 而HTML内容则变成字符串塞到JavaScript脚本中， 页面使用插件时，直接引用Css、JavaSript文件即可。
这种方式适合于单独发布的插件，如播放器videojs、CKEditor等。 但不适合作为页面模块化常用的方法 ，包括使用vue.js的template方式， 因为这种方式的Html部分需要塞到JavaScript脚本当中 ，这样Html部分就会变得十分不直观 ，代码维护也比较麻烦。
（3）脚手架工具
最后是vue-cli、react-cli等脚手架工具， 这类脚手架工具很大程度上也是为了更好地实现前端模块化而被制造出来 ，手架工具为模块提供了独立的HTML、CSSJavaScript（TypeScript）空间。 可以更直观地编写和使用模块 ，这类脚手架工具也是被很多人推崇 ，但是由于其加入了很多额外的辅助工具（如nodejs、npm等）和编写规则，让学习难度变大，变相提升了团队的人力成本 。而且实际项目的效果也未必那么好， 一到性能优化、项目维护升级则可能出现各种各样的问题 。
3、现今模块化的困境与我们的解决方案
前端模块化必然是前端架构的发展方向， 但是对于以上提及的现有模块化方法而言， 脚手架工具（vue-cli、react-cli）是最好的一种方式。
但是，我们认为，这些脚手架工具并不一定是最好的模块化方案， 因为这些框架工具让学习成本过大， 很多工程师也只是仅仅会初步使用 一到性能优化、维护升级时，就会有各种问题
我们认为，更好的模块化方案应该是这样的
-
应该尽量保持原生开发，降低学习成本；
-
模块的嵌入是简单的，尽量少地影响网页的性能；
-
模块本身也是完整的网页结构，可以单独调试；
-
虽然不可避免地使用辅助工具，但应该尽量保持普通原生网页开发的模式及简单性
-
模块的复用是简单的，把模块代码复制到任意工程即可工作；
当然，我们也做了这样的框架，名字叫Trick 我们官网上就有这套框架的说明 ，这套框架满足了以上我们认为的模块化更好的方式（不一定是最好的方式）。
我们的这套框架是保持原生开发的， 每个模块都是一个独立的网页且可以单独运行调试 ，网页引入模块时也只需要简单地引入 ，在开发环境运行网页时 ，页面会自动通过ajax加载模块的网页文件。
如果要在生产环境运行页面的话， 我们提供了代码生成器 ，把模块代码自动剪切合并到页面中 ，最终代码与完全原生开发无异。
后续我们会出专门的视频介绍 ，有兴趣的小伙伴可以到时候了解一下。
总结
最后，前端架构最近几年也有一些新的模块化方案，如微前端等 ，我们也深入了解过，但是没有在实际项目当中尝试 因为我们认为，网页开发本身是简单的，那何必搞那么多工具弄得那么复杂 ，所以诸如微前端的方式我们并没有介绍。
截止到本期，前端架构需要解决的问题以及对应的方案已经全部介绍完毕， 后面的内容会进入后端架构部分。
智能推荐
数据结构_串_串的模式匹配_KMP/BF_数据结构串的模式匹配指针回溯-程序员宅基地
文章浏览阅读821次，点赞2次，收藏8次。数据结构_串_串的模式匹配_KMP/BF_数据结构串的模式匹配指针回溯
基于鸢尾花（iris）数据集的逻辑回归分类实践_鸢尾花分类_基于鸢尾花(iris)数据集的逻辑回归分类实践-程序员宅基地
文章浏览阅读959次。基于鸢尾花（iris）数据集的逻辑回归分类实践 在实践的最开始，我们首先需要导入一些基础的函数库包括：numpy （Python进行科学计算的基础软件包），pandas（pandas是一种快速，强大，灵活且易于使用的开源数据分析和处理工具），matplotlib和seaborn绘图。 Step1:库函数导入## 基础函数库#numpy-数组函数库import numpy as np #pandas数据分析库import pandas as pd## 绘图函数库im_鸢尾花分类_基于鸢尾花(iris)数据集的逻辑回归分类实践
ModuleNotFoundError:No module named'pip'-程序员宅基地
文章浏览阅读196次。今天在运行pip时报错“ModuleNotFoundError:No module named’pip’”在执行“pip -m ensurepip"时显示已经存在pip,但运行时仍旧报错。解决方法选择重新安装pip1.输入”curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py“ 运行；2.输入”python get-pip.py“...
非参数估计---直方图法、Kn近邻估计法、Parzen窗法-程序员宅基地
文章浏览阅读1.1w次，点赞12次，收藏69次。当需要估计的概率密度函数的形式未知，比如我们并不能知道样本的分布形式时，我们就无法用最大似然估计方法或贝叶斯估计方法来进行参数估计，而应该用非参数估计方法。这里就介绍三种非参数估计方法。 需要知道的是，作为非参数方法的共同问题是对样本数量需求较大，只要样本数目足够大众可以保证收敛于任何复杂的位置密度，但是计算量和存储量都比较大。当样本数很少时，如果能够对密度函数有先验认识，则参数估计能取得更好的估..._非参数估计
插入数据 java_JAVA插入数据笔记-程序员宅基地
文章浏览阅读231次。1.向数组中插入元素的方法示例.import java.util.*;public class Test01 {public static void main(String[] args) {int[]list = new int[5]; //长度为5的数组Scanner input = new Scanner(System.in);System.out.println("请为数组..._java用代码先计算要插入数据库的位置,在插入数据
产品经理业务流程图的绘制流程分享_张楠 产品经理-程序员宅基地
文章浏览阅读1.4k次。图1：用即时贴与白板做的简单流程图前言：近来一段时间，忙于整理业务流程图，期间，关于流程图的绘制方法和工具也与内部团队和外部做了心得交流，恰好，个人生活也牵涉在买房，婚礼，户口迁移等流程中。不知不觉，伴随着实践与反思，个人所得的系统知识趋于完整，今儿天气极好，坐在飘窗一隅，听着间或几声鸟鸣歌唱，偶尔瞥一眼窗外的遍地绿荫，真真觉得是个写点什么的日子。所以就整理成文，如果恰好对你有所帮助，那是真真_张楠 产品经理
随便推点
我做了3道简单的字符串解码，谜底是我的联系方式（真的）_%e4%bd%a0%e5%a5%bd%e6%88%91%e6%98%af%e4%bd%a0%e7%8-程序员宅基地
文章浏览阅读4.4w次。第一题：%e5%a6%82%e6%9e%9c%e4%bd%a0%e8%83%bd%e7%9c%8b%e5%be%97%e5%88%b0%e8%bf%99%e6%ae%b5%e8%af%9d%ef%bc%8c%e8%af%b4%e6%98%8e%e4%bd%a0%e5%b7%b2%e7%bb%8f%e7%8c%9c%e5%88%b0%e4%ba%86%e7%ac%ac%e4%b8%80%e9%a2%98%e7%9a%84%e8%b0%9c%e5%ba%95%ef%bc%8c%e5%be%88%e7%ae%8_%e4%bd%a0%e5%a5%bd%e6%88%91%e6%98%af%e4%bd%a0%e7%88%b9解密,
一个C语言初学者写一个查找替换程序的历程_编写一个程序replace,采用命令行的方式,用给定的字符串替换指定文件中的目标字符-程序员宅基地
文章浏览阅读2.8k次，点赞3次，收藏4次。本人大一，正式接触C语言刚刚三个月_编写一个程序replace,采用命令行的方式,用给定的字符串替换指定文件中的目标字符
AR 技术介绍-程序员宅基地
文章浏览阅读2.2k次。增强现实（Augmented Reality，简称AR）是一种将虚拟世界的数字信息与真实世界相结合的技术。通过在现实场景中叠加虚拟的图像、声音、视频等内容，AR创造了一种增强的视听体验。_ar
maven 依赖 war包问题_maven war包依赖war包-程序员宅基地
文章浏览阅读1.6k次。1. maven中配置依赖war包配置war包插件 org.apache.maven.plugins maven-war-plugin 2.6 _maven war包依赖war包
用JS 输出 倒三角形_js倒三角-程序员宅基地
文章浏览阅读4.7k次，点赞3次，收藏15次。效果图以下是代码及 每行代码解释，仅供参考。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wi..._js倒三角
java-net-php-python-jsp大学生兼职雇佣系统计算机毕业设计程序-程序员宅基地
文章浏览阅读99次。springboot基于springboot的家居销售网站。springboot基于vue的百乐儿童玩具公司管理系统。springboot晨曦文学社在线投稿系统的设计与实现。springboot物流车辆规费管理系统的设计与实现。springboot校园课室资源预约系统设计与实现。ssm基于SSM高校教师个人主页网站的设计与实现。ssm基于Vue和mysql的智能图书管理系统。springboot编程训练系统设计与实现。ssm基于ssm的电子配件公司仓库管理系统。springboot点餐系统的设计与实现。