javascript组件化实践-优快云博客

本文介绍了一个使用ES6 Class实现的基本前端组件案例，该组件能够监听输入框内容的变化并实时显示输入的内容长度。通过实例演示了如何运用OO模式来构建可复用的前端组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写组件的能力是一个前端工程师的基本能力。

使用OO模式是逐步搭建复杂组件的最佳编写方式。

下面是使用ES6的class方法编写一个监听input输入框，并展示输入内容的基本组件。

会持续更新，在基类中练习添加基础功能。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<script src="./oo_base_module.js"></script>

<body>
    <input type="text" id='input-container'>
    <p id='show-container'></p>
    <script>

        const config = {
            inputId: 'input-container',
            showId: 'show-container'
        }

        document.addEventListener('DOMContentLoaded',
            () => {
                var context = new Context(config);
                context.init();
                context.on('updateNum', (num) => {
                    alert(num);
                })
            }
        )
    </script>
</body>

</html>
复制代码

使用ES6语法，OO模式，使用事件订阅/监听基类

// 事件订阅/监听基类
class Event {
    constructor() { }

    // 监听函数
    on(key, listener) {
        if (!this._events) {
            this._events = {};
        }

        if (!this._events[key]) {
            this._events[key] = [];
        }

        this._events[key].push(listener);
        return this;
    }

    //通知函数
    fire(key, ...args) {
        if (!this._events || !this._events[key]) return;

        if (!args || !args.length) return;

        var listeners = this._events[key];

        var l = listeners.length;
        for (var i = 0; i < l; i++) {
            listeners[i].apply(this, args);
        }

        return this;
    }

    // 取消监听
    off(key, listener) {

        if (key && !listener) {
            delete this._events[key];
        }
        if (!this._events || !this._events[key]) return;

        var r = this._events[key];
        for (var i = 0; i < r.length; i++) {
            if (r[i] === listener) {
                r.splice(i, 1);
            }
        }

        return this;
    }
}

// 组件库基类
class Base extends Event {
    constructor(config) {
        super();
        this._config = config;
    }

    // get获取配置项
    get(key) {
        return this._config(key);
    }

    // set设置配置项
    set(key, value) {
        return this._config(key) = value;
    }

    init() {
        this.bind();
        this.render();
    }
    // 绑定事件
    bind() { }

    // 渲染界面方法
    render() { }

    // 定义销毁的方法
    destory() {
        this.off();
    }
}

// 添加事件代理、模版渲染、单向绑定
class richBase extends Base {

}

// 继承Base基类
class Context extends Base {
    constructor(config) {
        super(config);
    }

    // 私有属性
    _getNum() {
        return this._inputDom.value.length;
    }

    init() {
        this._inputDom = document.getElementById(this._config.inputId);
        this._showDom = document.getElementById(this._config.showId);
        this.bind();
        this.render();
    }

    bind() {
        var self = this;
        self._inputDom
            .addEventListener('keyup', () => {
                self.fire('updateNum', this._getNum());

                self.render();
            });
    }
    render() {
        this._showDom.innerText = this._inputDom.value;
    }
}
复制代码