js模块化类型

命名空间模块化

模块化 - 图1

YUI3 通过沙箱机制，解决了命名空间带来的问题。
模块化 - 图2

commonJs规范

一个文件为一个模块,通过 module.exports 暴露模块接口 ,通过 require 引入模块 ,适用于node.js服务端同步执行 。

模块化 - 图3

AMD/CMD/UMD

  1. [AMD（Async Module Definition

    ）](https://github.com/amdjs/amdjs-api/wiki/AMD)

使用 define 定义模块，使用 require 加载模块 ， 依赖前置，提前执行,比较著名的是required.js库
模块化 - 图4
模块化 - 图5

  1. CMD（Common Module Definition ）

一个文件为一个模块 ,尽可能懒延迟，使用define 来定义一个模块，使用require 来加载一个模块 ，比较出名的SeaJS
模块化 - 图6

UMD(Universal Module Definition

) 通用解决方案 ,
三个步奏,判断是否支持 AMD ,判断是否支持 CommonJS ,如果都没有 使用全局变量
模块化 - 图7

ES6

一个文件一个模块 ,export / import

webpack对模块化
尽管之前我们有遇到过这么多类型的模块化规范，但是在webpack 中推荐使用的是ES6 module，所以在如今的开发过程中，我们可以选择ES6 模块规范深入了解掌握，就可以满足我们的使用。由于webpack 基于 nodejs 的工具，在 nodejs 中是采用的模块化规范是 CommonJS ，所以我们除去ES6 外再掌握 CommonJS 就可以了。所以掌握 Commonjs 和 ES6 modules，而对于AMD & CMD 大家了解就可以了。

css模块化

可以说是css的一种设计模式

  • OOCSS

OOCSS是object-oriented CSS的缩写. 主要有两个意思: 结构和设计分离 容器和内容分离 使用这种结构, 开发人员获得可以在不同地方使用的CSS类. 通常这时候总是会有两个消息(一个好消息和一个不好的消息): 好消息: 通过复用来减少代码量(DRY原则) 不好的消息: 维护非常困难(复杂). 当你修改某一个具体的元素的样式的时候, 大部分情况下, 除了修改CSS本身(因为多数的CSS类是通用的), 你还不得不添加更多的标记类(markup).


模块化 - 图8

  • Atomic CSS （bootstrap中的工具类）

是CSS架构的一种方法, 它的好处是写出基于视觉功能的小的, 单用途CSS类. 使用Atomic CSS, 为每个可重用的属性创建单独的CSS类. 例如, margin-top: 1px; 就可以创建一个类似于mt-1的CSS类, 或者width: 200px; 对应的CSS类为w-200. 这种样式允许您通过重用声明来最大程度地减少您的CSS代码数量, 并且也能很轻松的更改模块, 例如, 更改以技术任务时. 然而, 这种方法有很大的缺点: CSS类名是属性名称的描述, 而不是元素的自然语义. 这种想象很容易使人在开发过程中变得迷茫. 开发本身也十分容易复杂化. 直接在HTML中进行显示设置.
模块化 - 图9

  • MCSS （多层级）

多层级的css，将css分层模块化 - 图10

  • SMACSS

SMACSS是可扩展和模块化结构CSS的简称. 该方法的主要目标是减少代码量并简化代码维护. Jonathan Snook把它归纳为5个部分: 基本规则(Base rules): 这些是网站的主要元素的样式, 如body, input, button, ul, ol等. 在这一步中, 我们主要使用HTML标签和属性选择器, 在特殊情况下, 使用CSS类(如: 如果您有JavaScript-Style选择); 布局规则(Layout rules): 主要是些全局元素, 顶部, 页脚, 边栏等模块的大小. Jonathan建议使用ID选择器, 因为这些模块不太可能在同一个页面上出现多次. 然而, 本文作者认为这是个很不好的习惯(每当ID出现在样式文中, 感觉世界顿时变得灰暗, 有一股莫名的哀伤). 模块规则(Modules rules): 模块(类似于卡片布局)可以在一个页面中使用多次. 对于模块CSS类, 不建议使用ID和tag选择器(这是为了方便重用以及上下文独立). 状态规则(State rules): 在这一步中, 规定了模块的各种状态以及网站的基础部分. 这是唯一允许使用”!important”的地方. 主题规则(Theme rules): 设计您可能需要更换的样式.

模块化 - 图11

  • AMCSS （属性css）

对属性进行编码，针对属性进行css设计模块化 - 图12

  • BEM

Block （块）
header, container, menu, checkbox, input
Element(元素)
menu item, list item, checkbox caption, head title
Modifier （状态）
disabled, highlighted, checked, fixed, size big, color red
模块化 - 图13

CSS Modules

Webpack 中使用css modules非常简单是需要通过使用css-loader 开启 module 这个参数就可以了