「这是我参与2022首次更文挑战的第21天，活动详情查看：2022首次更文挑战」
-
什么是模块化？
- 将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合使用
- 块(文件)的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信交换
-
什么是组件化？
- 组件是以项目页面构成，将页面进行单元文件查分，用于复用重组页面结构
- 组件包含页面构成(template)，样式(css)，功能(js+模块调用)
-
组件和模块
-
模块化优点(可维护性)
- 灵活架构，焦点分离（单一职能）
- 方便模块间组合、分解
- 方便单个模块功能调试、升级
- 多人协作互不干扰
-
模块化缺点(性能损耗)
-
系统分层，调用链会很长
-
模块间通信,模块间发送消息会很耗性能
-
模块环境分类
-
页面环境：传统页面构建模块化环境，主要基于模块化插件
RequireJS、CommonJS和SeaJS-
AMD (Asynchronous Module Definition-异步模块定义):
- ==是RequireJS提出的==一个依赖前置、异步定义的模块化加载框架，在构建功能的同时如果需要用到别的模块，需在最前面定义好模块文件的引入。
-
CMD (Common Module Definition通用模块定义):
- 是淘宝团队开发的==SeaJS提出的==一个依赖就近，同步加载的模块框架，在构建功能时什么地方使用到模块，就在什么地方加载模块，即用即返。
-
CommonJS (通用JS)
- CommonJS是一个JS开发的统一规范定义，该规范致力于提供一个类似java、python等语言的标准库，使JS可以开发服务器端应用程序、命令行工具、桌面图形界面应用程序
- NodeJS 就是基于 CommonJS 规范构建的一套基于服务器端的模块系统架构
-
-
独立环境构建(开发环境构建)
-
多数前端模块框架都需要基于一个固定的开发环境，构建独立的模块开发系统，这些系统多数都基于 NodeJS 和 webpack 进行环境搭建
- NodeJS 独立JS运行环境和模块系统支持（基于commonJS语法开发的）
- webpack 前端构成工作流工具库
-
App.vue文件
- App.vue文件为模块化项目的基础构成组件，该组件用于统一管理vue组件的构成和页面结构
单文件组件
-
App.vue 为vue提供的一种特殊的 组件定义文件，该文件用于描述模块化项目中，组件的基本构成代码
- 包含页面结构 template
- 组件功能 script
- 组件样式 style
-
单文件组件在模块化项目运行时，通过
import方法时装载前，会被vue构造成 组件创建时的构成配置
基本样式规则
- 在单文件组件中，提供 style 标签可以完成组件样式的定义 默认是全局样式定义
- 单文件组件，可以通过对
<style scoped>标签定义 scoped 属性，完成将样式限制于当前组件的标签上 - 单文件组件在定义样式时，并不限制 style 标签的出现次数
