带你入门前端工程（三）：前端组件化

最新推荐文章于 2023-07-24 11:17:36 发布
最新推荐文章于 2023-07-24 11:17:36 发布
阅读量312 收藏
点赞数
分类专栏： 带你入门前端工程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/q411020382/article/details/112981530
版权

在了解模块化、组件化之前，最好先了解一下什么是高内聚，低耦合。它能更好的帮助你理解模块化、组件化。

高内聚，低耦合

高内聚，低耦合是软件工程中的概念，它是判断代码好坏的一个重要指标。高内聚，就是指一个函数尽量只做一件事。低耦合，就是两个模块之间的关联程度低。

仅看文字可能不太好理解，下面来看一个简单的示例。

// math.js
export function add(a, b) {
    return a + b
}

export function mul(a, b) {
    return a * b
}

// test.js
import { add, mul } from 'math'
add(1, 2)
mul(1, 2)
mul(add(1, 2), add(1, 2))

上面的 math.js 就是高内聚，低耦合的典型示例。add()、mul() 一个函数只做一件事，它们之间也没有直接联系。如果要将这两个函数联系在一起，也只能通过传参和返回值来实现。

既然有好的示例，那就有坏的示例，下面再看一个不好的示例。

// 母公司
class Parent {
    getProfit(...subs) {
        let profit = 0
        subs.forEach(sub => {
            profit += sub.revenue - sub.cost
        })

        return profit
    }
}

// 子公司
class Sub {
    constructor(revenue, cost) {
        this.revenue = revenue
        this.cost = cost
    }
}

const p = new Parent()
const s1 = new Sub(100, 10)
const s2 = new Sub(200, 150)
console.log(p.getProfit(s1, s2)) // 140

上面的代码是一个不太好的示例，因为母公司在计算利润时，直接操作了子公司的数据。更好的做法是，子公司直接将利润返回给母公司，然后母公司做一个汇总。

class Parent {
    getProfit(...subs) {
        let profit = 0
        subs.forEach(sub => {
            profit += sub.getProfit()
        })

        return profit
    }
}

class Sub {
    constructor(revenue, cost) {
        this.revenue = revenue
        this.cost = cost
    }

    getProfit() {
        return this.revenue - this.cost
    }
}

const p = new Parent()
const s1 = new Sub(100, 10)
const s2 = new Sub(200, 150)
console.log(p.getProfit(s1, s2)) // 140

这样改就好多了，子公司增加了一个 getProfit() 方法，母公司在做汇总时直接调用这个方法。

高内聚，低耦合在业务场景中的运用

理想很美好，现实很残酷。刚才的示例是高内聚、低耦合比较经典的例子。但在业务场景中写代码不可能做到这么完美，很多时候会出现一个函数要处理多个逻辑的情况。

举个例子，用户注册。一般注册会在按钮上绑定一个点击事件回调函数 register()，用于处理注册逻辑。

function register(data) {
    // 1. 验证用户数据是否合法
    /**
    * 验证账号
    * 验证密码
    * 验证短信验证码
    * 验证身份证
    * 验证邮箱
    */
    // 省略一大堆串 if 判断语句...

    // 2. 如果用户上传了头像，则将用户头像转成 base64 码保存
    /**
    * 新建 FileReader 对象
    * 将图片转换成 base64 码
    */
    // 省略转换代码...

    // 3. 调用注册接口
    // 省略注册代码...
}

这个示例属于很常见的需求，点击一个按钮处理多个逻辑。从代码中也可以发现，这样写的结果就是三个功能耦合在一起。

按照高内聚、低耦合的要求，一个函数应该尽量只做一件事。所以我们可以将函数中的另外两个功能：验证和转换单独提取出来，封装成一个函数。

function register(data) {
    // 1. 验证用户数据是否合法
    verifyUserData()

    // 2. 如果用户上传了头像，则将用户头像转成 base64 码保存
    toBase64()

    // 3. 调用注册接口
    // 省略注册代码...
}

function verifyUserData() {
    /**
    * 验证账号
    * 验证密码
    * 验证短信验证码
    * 验证身份证
    * 验证邮箱
    */
    // 省略一大堆串 if 判断语句...
}

function toBase64() {
    /**
    * 新建 FileReader 对象
    * 将图片转换成 base64 码
    */
    // 省略转换代码...
}

这样修改以后，就比较符合高内聚、低耦合的要求了。以后即使要修改或移除、新增功能，也非常方便。

模块化、组件化

模块化

模块化，就是把一个个文件看成一个模块，它们之间作用域相互隔离，互不干扰。一个模块就是一个功能，它们可以被多次复用。另外，模块化的设计也体现了分治的思想。什么是分治？维基百科的定义如下：

字面上的解释是“分而治之”，就是把一个复杂的问题分成两个或更多的相同或相似的子问题，直到最后子问题可以简单的直接求解，原问题的解即子问题的解的合并。

从前端方面来看，单独的 JavaScript 文件、CSS 文件都算是一个模块。

例如一个 math.js 文件，它就是一个数学模块，包含了和数学运算相关的函数：

// math.js
export function add(a, b) {
    return a + b
}

export function mul(a, b) {
    return a * b
}

export function abs() { ... }
...

一个 button.css 文件，包含了按钮相关的样式：

/* 按钮样式 */
button {
    ...
}

组件化

那什么是组件化呢？我们可以认为组件就是页面里的 UI 组件，一个页面可以由很多组件构成。例如一个后台管理系统页面，可能包含了 Header、Sidebar、Main 等各种组件。

一个组件又包含了 template(html)、script、style 三部分，其中 script、style 可以由一个或多个模块组成。

从上图可以看到，一个页面可以分解成一个个组件，每个组件又可以分解成一个个模块，充分体现了分治的思想（如果忘了分治的定义，请回头再看一遍）。

由此可见，页面成为了一个容器，组件是这个容器的基本元素。组件与组件之间可以自由切换、多次复用，修改页面只需修改对应的组件即可，大大的提升了开发效率。

最理想的情况就是一个页面元素全部由组件构成，这样前端只需要写一些交互逻辑代码。虽然这种情况很难完全实现，但我们要尽量往这个方向上去做，争取实现全面组件化。

Web Components

得益于技术的发展，目前三大框架在构建工具（例如 webpack、vite…）的配合下都可以很好的实现组件化。例如 Vue，使用 *.vue 文件就可以把 template、script、style 写在一起，一个 *.vue 文件就是一个组件。

<template>
    <div>
        {{ msg }}
    </div>
</template>

<script>
export default {
    data() {
        return {
            msg: 'Hello World!'
        }
    }
}
</script>

<style>
body {
    font-size: 14px;
}
</style>

如果不使用框架和构建工具，还能实现组件化吗？

答案是可以的，组件化是前端未来的发展方向，Web Components 就是浏览器原生支持的组件化标准。使用 Web Components API，浏览器可以在不引入第三方代码的情况下实现组件化。

实战

现在我们来创建一个 Web Components 按钮组件，点击它将会弹出一个消息 Hello World!。点击这可以看到 DEMO 效果。

Custom elements（自定义元素）

浏览器提供了一个 customElements.define() 方法，允许我们定义一个自定义元素和它的行为，然后在页面中使用。

class CustomButton extends HTMLElement {
    constructor() {
        // 必须首先调用 super方法 
        super()

        // 元素的功能代码写在这里
        const templateContent = document.getElementById('custom-button').content
        const shadowRoot = this.attachShadow({ mode: 'open' })

        shadowRoot.appendChild(templateContent.cloneNode(true))

        shadowRoot.querySelector('button').onclick = () => {
            alert('Hello World!')
        }
    }

    connectedCallback() {
        console.log('connected')
    }
}

customElements.define('custom-button', CustomButton)

上面的代码使用 customElements.define() 方法注册了一个新的元素，并向其传递了元素的名称 custom-button、指定元素功能的类 CustomButton。然后我们可以在页面中这样使用：

<custom-button></custom-button>

这个自定义元素继承自 HTMLElement（HTMLElement 接口表示所有的 HTML 元素），表明这个自定义元素具有 HTML 元素的特性。

使用 <template> 设置自定义元素内容
<template id="custom-button">
    <button>自定义按钮</button>
    <style>
        button {
            display: inline-block;
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
            text-align: center;
            box-sizing: border-box;
            outline: none;
            margin: 0;
            transition: .1s;
            font-weight: 500;
            padding: 12px 20px;
            font-size: 14px;
            border-radius: 4px;
            color: #fff;
            background-color: #409eff;
            border-color: #409eff;
            border: 0;
        }

        button:active {
            background: #3a8ee6;
            border-color: #3a8ee6;
            color: #fff;
        }
      </style>
</template>

从上面的代码可以发现，我们为这个自定义元素设置了内容 <button>自定义按钮</button> 以及样式，样式放在 <style> 标签里。可以说 <template> 其实就是一个 HTML 模板。

Shadow DOM（影子DOM）

设置了自定义元素的名称、内容以及样式，现在就差最后一步了：将内容、样式挂载到自定义元素上。

// 元素的功能代码写在这里
const templateContent = document.getElementById('custom-button').content
const shadowRoot = this.attachShadow({ mode: 'open' })

shadowRoot.appendChild(templateContent.cloneNode(true))

shadowRoot.querySelector('button').onclick = () => {
    alert('Hello World!')
}

元素的功能代码中有一个 attachShadow() 方法，它的作用是将影子 DOM 挂到自定义元素上。DOM 我们知道是什么意思，就是指页面元素。那“影子”是什么意思呢？“影子”的意思就是附加到自定义元素上的 DOM 功能是私有的，不会与页面其他元素发生冲突。

attachShadow() 方法还有一个参数 mode，它有两个值：

  1. open 代表可以从外部访问影子 DOM。
  2. closed 代表不可以从外部访问影子 DOM。
// open，返回 shadowRoot
document.querySelector('custom-button').shadowRoot
// closed，返回 null
document.querySelector('custom-button').shadowRoot
生命周期

自定义元素有四个生命周期：

  1. connectedCallback: 当自定义元素第一次被连接到文档 DOM 时被调用。
  2. disconnectedCallback: 当自定义元素与文档 DOM 断开连接时被调用。
  3. adoptedCallback: 当自定义元素被移动到新文档时被调用。
  4. attributeChangedCallback: 当自定义元素的一个属性被增加、移除或更改时被调用。

生命周期在触发时会自动调用对应的回调函数，例如本次示例中就设置了 connectedCallback() 钩子。

最后附上完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Web Components</title>
</head>
<body>
    <custom-button></custom-button>

    <template id="custom-button">
        <button>自定义按钮</button>
        <style>
            button {
                display: inline-block;
                line-height: 1;
                white-space: nowrap;
                cursor: pointer;
                text-align: center;
                box-sizing: border-box;
                outline: none;
                margin: 0;
                transition: .1s;
                font-weight: 500;
                padding: 12px 20px;
                font-size: 14px;
                border-radius: 4px;
                color: #fff;
                background-color: #409eff;
                border-color: #409eff;
                border: 0;
            }

            button:active {
                background: #3a8ee6;
                border-color: #3a8ee6;
                color: #fff;
            }
          </style>
    </template>

    <script>
        class CustomButton extends HTMLElement {
            constructor() {
                // 必须首先调用 super方法 
                super()

                // 元素的功能代码写在这里
                const templateContent = document.getElementById('custom-button').content
                const shadowRoot = this.attachShadow({ mode: 'open' })

                shadowRoot.appendChild(templateContent.cloneNode(true))

                shadowRoot.querySelector('button').onclick = () => {
                    alert('Hello World!')
                }
            }

            connectedCallback() {
                console.log('connected')
            }
        }

        customElements.define('custom-button', CustomButton)
    </script>
</body>
</html>

小结

用过 Vue 的同学可能会发现，Web Components 标准和 Vue 非常像。我估计 Vue 在设计时有参考过 Web Components（个人猜想，未考证）。

如果你想了解更多 Web Components 的信息，请参考 MDN 文档。

谭光志
关注
专栏目录
前端组件化
long8313002的博客
09-02 5198
传统的开发方式 概述 根据页面的渲染过程来编写代码结构。像：init -> getData -> processData -> bindevent -> report -> xxx 。 方法之间线性跳转，你大概也能感受这样代码弊端。随着页面逻辑越来越复杂，这条” 过程线“ 也会越来越长，并且越来越绕。加之缺少规范约束，其他项目成员根据各自需要，在” 过程线“ 加插各自逻辑，最终这个页面的逻辑变得难以维护。 面向过程 ...
《Vue入门到精通系列之二》--- 组件化开发与前端模块化
2401_84097798的博客
04-20 747
首先，如果不是一个函数，Vue直接就会报错。其次，原因是在于Vue让每个组件对象都返回一个新的对象，因为如果是同一个对象的，组件在多次使用后会相互影响6.父子组件通信技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。
浅谈前端组件化
zhu_zhu_xia的博客
03-02 450
什么是前端工程化、模块化、组件化？ 前端工程化 工程化是一种思想而不是某种技术(当然为了实现工程化我们会用一些技术) 再用一句通俗的话来概括前端工程化:前端工程化就是用做工程的思维看待和开发自己的项目,而不再是直接撸起袖子一个页面一个页面开写 前端模块化 前端工程化是一个高层次的思想,而模块化和组件化是为工程化思想下相对较具体的开发方式,因此可以简单的认为模块化和组件化是工程化的表现形式。 模块化开发，一个模块就是一个实现特定功能的文件，有了模块我们就可以更方便的使用别人的代码，要用什么功能就加载
javascript个人学习总结：包括数据结构与算法，前端工程化等方面，助你快速入门
03-02
凹凸实验室前端代码规范 vuejs风格指南 代码安全指南 二.组件库与工具 zarm 基于react移动端组件库 antd-design 基于react pc端组件库 三.数据结构与算法 用JavaScript实现的算法和数据结构 labuladong的算法小抄 ...
JavaScript：前端框架入门：React基础
最新发布
07-14
### JavaScript：前端框架入门：React基础 #### 一、React简介与环境搭建 ##### 1. React的历史与特点 **1.1 React的历史** React是由Facebook开发并维护的一个用于构建用户界面的JavaScript库。它最初在2013年...
前端组件开发入门
08-31
"前端组件开发入门"这个主题旨在帮助初学者理解并掌握如何进行有效的前端组件化开发。以下是对相关知识点的详细说明： 1. **组件的概念**： 前端组件是可重用的代码单元，它封装了特定的功能或UI部分，可以独立于...
前端mvvm组件化框架
08-10
前端mvvm组件化框架
深入理解Vue.js轻量高效的前端组件化方案
10-17
主要介绍了深入理解Vue.js轻量高效的前端组件化方案 ,需要的朋友可以参考下
webpack+vue.js构建前端工程化的详细教程
11-20
本篇主要介绍三块知识点： node.js ,vue.js,webpack前端工程化 ，希望对您能有所帮助。 本文来自于csdn,由火龙果软件Alice编辑推荐。 node.js基本入门 node.js介绍 node.js可以让javascript程序在后端运行起来。我们...
前端组件化概述
m0_67388537的博客
07-24 198
对于前端来说，我们为用户创造价值才是特别需要关注的一个问题，这么多年过去了，前端到底为用户创造了什么价值呢？70 年代，施乐公司做的一个软件管理的流程图软件，那个时代，整个的界面就是这个样子，施乐已经算比较先进的了。再到 90 年代，当时这个画面还是很惊艳，按钮键是立体的。现在来看这个东西就有不那么美观了。2006 年左右的时候，Vista 的界面已经开始有了一个非常大的变化了，这时已经是设计师在主导这个界面的了，但是性能并不佳。
前端组件化（二）：面向对象
Johnny Liao的博客
12-03 329
首先，我们来实现类的机制，因为JavaScript不存在类的概念， 所以我们就参考别人的写法，写出一个类： （这是拿John Resig的class简单修改了下） var Class = (function() { var _mix = function(r, s){ for (var p in s){ if (s.hasOwnProperty(p)) { r[p] = s[p...
前端组件化（一）：从一个简单的例子讲起
dianyingtan8093的博客
04-11 127
很多课程一上来就给大家如何配置环境、怎么写 React.js 组件。但是本课程还是希望大家对问题的根源有一个更加深入的了解，其实很多的库、框架都是解决类似的问题。只有我们对这些库、框架解决的问题有深入的了解和思考以后，我们才能得心应手地使用它们，并且有新的框架出来也不会太过迷茫————因为其实它们解决都是同一个问题。 这两节课我们来探讨一下是什么样的问题导致了我们需要前端页面进行组件化...
Lesson 2 前端组件化（一）：从一个简单的例子讲起
Mr_zzr的博客
07-13 781
Lesson 2 前端组件化（一）：从一个简单的例子讲起
Vue前端工程化：模块化与Webpack入门
在"Day06_vue前端工程化.md"中，主要内容围绕前端工程化展开，特别是对模块化相关规范进行了深入讲解。首先，文章提到了传统开发中存在的问题，如命名冲突和文件依赖，这些问题促使开发者引入模块化来提升代码组织和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值