设计一个基于svg的涂鸦组件(一)

1,597 阅读4分钟

基于svg写了一个涂鸦组件,说项目之前先附上几张效果图:

项目地址:https://github.com/linmingdao/SVGraffiti

效果预览:

image
image
image

功能演示:

image

由于篇幅问题,本文先总体介绍一下项目的大概情况,重点介绍一下组件间的通信方式。

一、项目说明

image

该项目是基于webpack@3.x.x构建的多页应用,使用ES6开发,以组件的方式组织代码。 git clone项目后(文末附上该项目github仓库地址),npm i安装相关依赖,npm run dev运行项目,默认会打开应用的首页,也就是上面的效果预览对应的界面。开发过程会单独地为一些功能编写一些测试代码,所以该项目提供了不同的页面对应于不同的功能,比如:

color picker组件测试页:

image

组件消息通信框架测试页:

image

svg底层绘制api测试页:

image

二、组件间通信

image

1、组件间为了实现最大程度的封装与解耦,不直接进行互相通信,而是通过“消息订阅/发布管理中心”(以下简称“消息中心”)进行间接通信。组件通过声明自己为不同的角色从而拥有对应的通信能力:

  • 组件声明为订阅者(Subscriber)并通过@Topics注解的形式从“消息中心”订阅自己感兴趣的主题消息,对应的消息会通过notify接口告知组件;
  • 组件声明为发布者(Publisher),可以通过Publisher角色注入的publish方法发布主题消息;
  • 组件声明为发布/订阅者(SubScatterer),同时拥有订阅者和发布者的通信能力。

这里以项目中的中间区域的画板组件为例,因为画板组件只是接收Toolbar组件发来的切换绘制能力、清空绘制内容以及Settings组件发来的设置绘制参数信息,所以该组件只是一个消息订阅者角色,编码设计如下:

首先导入对应的角色类:

import Subscriber from '../../supports/pubsub/base/subscriber';
import Topics from '../../supports/pubsub/base/topics';

编写对应的组件:

// 通过@Topics的形式订阅感兴趣的消息类型
@Topics(['function', 'resident_function', 'set_preference'])
export default class Sketchpad extends Subscriber {
    // 构造器
    constructor(sketchpad) {
        super();
        this.sketchpad = sketchpad;
        // ...
    }
    
    /**
     * 该接口由【PubSub消息管理中心】负责调用,画板组件在此接口处理接收到的消息类型
     * 1、处理Toolbar组件发送的 “切换画板绘制状态” ,对应的消息类型为:“function”
     * 2、处理Toolbar组件发送的 “清空绘制内容” ,对应的消息类型为:“resident_function”
     * 3、处理Settings组件发送的 “设置画板绘制参数” ,对应的消息类型为:“set_preference”
     * @param {String} topic 消息主题标识
     * @param {Object} entity 消息实体对象
     */
    notify(topic, entity) {
       // 在此处理接收到的消息
    }
}

注:@Topics是静态的,若有些主题是需要运行时订阅也可以调用Subscriber角色提供的subscribe方法动态订阅消息。

2、PubSub(消息订阅/发布管理中心)的实现 既然是底层通用能力就一定要实现的不带任何具体的业务,无论是在命名规范还是编码实现上都要保证它是一个通用模块

PubSub的实现:

/**
 * 主题订阅发布中心
 */
export default class PubSub {

    // 缓存主题和主题的订阅者列表
    static topics = {};

    /**
     * 发布主题消息
     * @param {String} topic 主题
     * @param {*} entity 消息体 
     */
    static publish(topic, entity) {
        if (!PubSub.topics[topic]) return;

        // 获取该主题的订阅者列表
        const subscribers = PubSub.topics[topic];

        // 向所有该主题的订阅者发送主题消息
        for (let subscriber of subscribers) {
            subscriber.notify && subscriber.notify(topic, entity);
        }
    }

    /**
     * 一次登记一个主题
     * @param {String} topic 
     */
    static registerTopic(topic) {
        const topics = PubSub['topics'];
        !topics[topic] && (topics[topic] = []);
    }

    /**
     * 同时登记多个主题
     * @param {Array} topics 
     */
    static registerTopics(topics = []) {
        topics.forEach(topic => {
            this.registerTopic(topic);
        });
    }

    /**
     * 添加主题订阅者
     * @param {String} topic 主题
     * @param {Object} subscriber 实现了notify接口的订阅者
     */
    static addSubscriber(topic, subscriber) {
        const topics = PubSub['topics'];
        !topics[topic] && (topics[topic] = []);

        // 将该主题的订阅者登记到对应的主题
        topics[topic].push(subscriber);
    }
    
    /**
     * 删除对应的订阅者
     * @param subscriber 
     */
    static removeSubscriber(subscriber) {
        const subs = [];
        // 遍历所有主题下的订阅者列表,将对应订阅者删除
        const topics = PubSub.topics;
        Object.keys(topics).forEach(topicName => {
            const topic = topics[topicName];
            for (let i = 0; i < topic.length; ++i) {
                if (topic[i] === subscriber) {
                    subs.push(topics[topic].splice(i, 1));
                    break;
                }
            }
        });
        return subs;
    }
}

Subscriber的实现:

import PubSub from '../pubsub';

const addSubscribe = (topics = [], context) => {
    topics.forEach(topic => {
        PubSub.addSubscriber(topic, context);
    });
}

/**
 * 主题订阅者
 */
export default class Subscriber {
    constructor() {
        addSubscribe(this.__proto__.constructor.topics, this);
    }

    subscribe(topic) {
        PubSub.addSubscriber(topic, this);
    }
}

为了方便订阅主题,再提供一个@Topics注解:

import PubSub from '../pubsub';

/**
 * 订阅者主题装饰器
 * @param {Array} topics
 */
export default function Topics(topics) {
    return target => {
        target.topics = topics;
        PubSub.registerTopics(topics);
    }
}

Publisher的实现:

import PubSub from '../pubsub';

/**
 * 主题消息发布者
 */
export default class Publisher {
    publish(topic, entity) {
        PubSub.publish(topic, entity);
    }
}

SubScatterer的实现:

import PubSub from '../pubsub';
import Subscriber from './subscriber';

/**
 * 主题订阅者 and 主题消息发布者
 */
export default class SubScatterer extends Subscriber {
    publish(topic, entity) {
        PubSub.publish(topic, entity);
    }
}

本篇介绍了项目的大概情况,重点分析了如何以发布/订阅的形式实现组件间的通信,接下来还会抽时间写几个篇分别介绍“svg底层绘制能力的封装”、“画板不同绘制状态的实现与管理”、“如何开发一个通用的ColorPicker”等等与本项目相关的文章,写得不好求亲喷。

项目地址:https://github.com/linmingdao/SVGraffiti

感兴趣的同学们欢迎star一起交流。