css体模-后端 - 模块化

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

在后端开发领域，模块可以是JS模块，CSS模块，也可以是Template等模块。

js模块

1、模块是一段具有统一基本书写格式的JavaScript代码。

2、通过基本的交互规则，各模块可以互相参考、协同工作。

通过清晰地描述这两点提到的基本书写格式和基本交互规则，就可以建立一个模块体系。 对书写格式和交互规则的详细描述是模块定义规范。

大约从 2009 年到 2010 年，CommonJS 社区聚集了优秀的人才。 CommonJS 最初称为 ServerJS。 Modules/1.0规范推出后，在Node.js等环境中取得了非常好的实践。

2009年下半年，这些咄咄逼人的姑娘们想将ServerJS的成功经验进一步推广到浏览器端，于是她们将社区更名为CommonJS，并激烈争论下一版本的Modules规范。 分歧和冲突由此产生，逐渐产生了三个主要流派：

1. CommonJS规范和Node.js的ES模块。

CommonJS

模块局部变量将是私有的，因为模块被 Node.js 包装在函数中（请参阅 ）

由于 require() 的同步特性，很难使用它来加载 ECMAScript 模块文件。 尝试这样做会引发 ERR_REQUIRE_ESM 错误。 使用 import() 代替。

.mjs 扩展名是为无法通过 require() 加载的 ECMAScript 模块保留的。

对于CommonJS模块规范，我们通过require函数导出模块。 那么当我们使用 require 函数导出模块时，函数内部会发生什么呢？ 这里我们通过调用栈来了解一下require的流程：

节点版本v16.13.1

从上图可以看出，当使用require导出模块时，会调用Module对象的load方法来加载模块。 该方法的实现如下：

// lib/internal/modules/cjs/loader.js
Module.prototype.load = function(filename) {
  this.filename = filename;
  this.paths = Module._nodeModulePaths(path.dirname(filename));
 
  const extension = findLongestRegisteredExtension(filename);
 
  Module._extensions[extension](this, filename);
  this.loaded = true;
  // 省略部分代码
};

在上面的代码中，两个重要的步骤是：

第一步：根据文件名找到扩展名；

步骤2：通过解析出的扩展名在Module._extensions对象中找到匹配的加载器。

Node.js 中外部安装了三个不同的加载器，用于加载 Node、json 和 js 文件。

节点文件加载器

// lib/internal/modules/cjs/loader.js
Module._extensions['.node'] = function(module, filename) {
  return process.dlopen(module, path.toNamespacedPath(filename));
};

json 文件加载器

// lib/internal/modules/cjs/loader.js
Module._extensions['.json'] = function(module, filename) {
 const content = fs.readFileSync(filename, 'utf8');
 try {
    module.exports = JSONParse(stripBOM(content));
 } catch (err) {
   err.message = filename + ': ' + err.message;
   throw err;
 }
};

js文件加载器

// lib/internal/modules/cjs/loader.js
Module._extensions['.js'] = function(module, filename) {
  // If already analyzed the source, then it will be cached.
  const cached = cjsParseCache.get(module);
  let content;
  if (cached?.source) {
    content = cached.source;
    cached.source = undefined;
  } else {
    content = fs.readFileSync(filename, 'utf8');
  }
  // 省略部分代码
  module._compile(content, filename);
};

下面我们来分析一下比较重要的js文件加载器。 通过观察上面的代码我们可以知道js加载器的核心处理流程也可以分为两步：

第一步：使用fs.readFileSync加载js文件内容；

步骤2：使用module._compile编译加载的js代码。

虽然了解了require函数的工作流程后，我们可以扩展Node.js的加载器。 Node.js为我们提供了模块预加载机制：

ES模块

Node.js 默认将 JavaScript 代码视为 CommonJS 模块。 可以通过 .mjs 文件扩展名、package.json“type”字段或 --input-type 标志告诉 Node.js 将 JavaScript 代码视为 ECMAScript 模块。

确定模块类型

当作为初始输入传递给 Node 时，或者由 ES 模块代码中的 import 语句引用时，Node.js 将以下内容视为 ES 模块：

以 .mjs 结尾的文件。

当最新的父 package.json 文件包含值为“module”的顶级“type”字段时，以 .js 结尾的文件。

字符串作为参数传递给 --eval，或通过 STDIN 通过管道传输到节点，并带有标志 --input-type=module。

Node.js 会将所有其他形式的输入视为 CommonJS，例如最新父 package.json 文件不包含顶级“type”字段的 .js 文件，或不带 --input-type 标志的字符串输入。 此行为是为了保持向后兼容性。 另外，既然 Node.js 同时支持 CommonJS 和 ES 模块，最好尽可能明确。 当作为初始输入传递给 Node 或由 ES 模块代码中的 import 语句引用时，Node.js 将以下内容视为 CommonJS：

以 .cjs 结尾的文件。

当最新的父 package.json 文件包含值为“commonjs”的顶级数组“type”时，以 .js 结尾的文件。

字符串作为参数传递给 --eval 或 --print，或者通过 STDIN 通过管道传输到节点，带有标志 --input-type=commonjs。

包作者应该包含“type”字段css体模，即使在所有源都是 CommonJS 的包中也是如此。 如果 Node.js 中的默认类型发生更改，显式声明包的类型将使包能够适应未来的需要，这也将使构建工具和加载器更容易确定应如何解释包中的文件。

2. RequireJS遵循AMD规范。

3.Sea.js符合CMD规范。

4.ES模块

CSS 模块

CSS 的痛点

我们都知道CSS上手容易，但是深入则比较难，而且样式简单，维护起来比较困难。 CSS的痛点也很多

1、CSS规则是全局的，任何组件的样式规则对整个页面都有效。 相信写css的人都会遇到样式冲突（污染）的问题。

2、为了解决全局污染问题，我们把类名写长一点，多加一层父选择器，减少冲突的概率，让CSS命名混乱

3.组件依赖管理不完善。 组件应该相互独立。 当引入一个组件时，只需要引入它需要的CSS样式。

4、代码无法复用，出现了sassless等工具

CSS模块化方案分类

后端开发很快，每天都有新轮子。 天然的 CSS 模块化解决方案有很多css体模，但主要分为三类：

1. 命名约定

规范化 CSS 的解决方案，例如：BEM、OOCSS、AMCSS、SMACSS

OOCSS

OOCSS（面向对象的 CSS）于 2009 年首次提出，是围绕两个原则构建的规范。 第一个原则是结构和样式分离，这意味着定义结构（布局）的 CSS 不应该与定义样式（颜色、字体等）的 CSS 混合在一起，这样我们就可以轻松地定义新的样式一个应用程序。 皮肤; 第二个原则是将容器与内容分离，并将元素视为可重用的对象。 关键核心点是，无论在页面上的哪个位置使用对象，它看起来都应该相同。

OOCSS提供了成熟的指导规范，并没有明确强调具体的实现规范。 后来出现的SMACSS采用了其核心概念，但添加了更多细节并使其更易于使用。

SMACSS

SMACSS（CSS for Scalable Modular Framework）是2011年出现的一种设计模式，它将CSS分为5个不同的类别——基础规范、布局规范、模块、状态规范和样式规范。 SMACSS 还有一些推荐的命名规则。 对于布局规范，使用l-或layout-作为前缀； 对于状态规范，使用 is-hidden 或 is-collapsed 作为前缀。

与OOCSS相比，SMACSS有更详细的规范，而CSS规则应该定义为哪一类规范，这是一个需要仔细考虑的问题。 后来出来的BEM改进了这方面，并且变得更容易使用。

边界元法

BEM（Blocks，Elements，Modifiers）是2010年出现的规范，其思想主要是将用户界面切割成独立的块。块是一个可重用的组件（作为表单搜索的反例，它可以被定义为像这样