8

如何快速将你的应用封装成 js-sdk?

 3 years ago
source link: https://www.infoq.cn/article/DRl0Y302CvC4OmzUVyVO
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

前言

本文将介绍 前端 如何封装一款 js-sdk 以及如何快速将你的应用变成 js-sdk ，我们将总结一些封装 js-sdk 的原则和案例，来帮大家更快的上手 SDK 开发。其中笔者还会以 H5-Dooring 为例子，介绍如何将 H5 页面编辑器 封装成一个 js-sdk 供他人使用。

iAVfMba.png!mobile

正文

在开始文章之前，笔者先来介绍一下什么是 SDK。

SDK，即软件开发工具包，一般是一些软件工程师为特定的软件包、软件框架、硬件平台、操作系统等建立应用软件时的开发工具的集合。

对于 js-sdk 而言，我们能举出很多例子，如下:

  • UI 组件库

  • 性能监控工具，如阿里 arms

  • 统计分析工具

  • 阿里云智能验证 SDK

  • 极验验证 SDK

SDK 的目的是提高我们开发项目的效能，安全性和便捷性等问题，所以我们在设计 SDK 时一定要遵循一些原则，如下：

zUv263A.png!mobile

  • 最小可用性原则：也就是没有必要的功能/代码尽量不额外添加，使代码达到最简

  • 最少依赖原则：也就是没有必要的依赖坚决不添加，以达到最低限度的外部依赖

  • 易扩展：插件化，最大限度支持扩展和自定义

  • 稳定性：绝不能导致宿主应用崩溃，向后兼容，可测试

在熟悉以上的背景和原则之后，我们来看看如何实现一个 SDK 的案例。

将 H5-Dooring 封装成一个 js-sdk

笔者在这拿 开源页面制作工具 H5-Dooring 来作为案例（当然将其封装成 SDK 也是我们迭代中的一部分，甚至后期会做成 NPM 包）, 介绍如何封装 js-sdk，我们先看一张抽象图：

ARNNjqV.png!mobile

我们的 SDK 就好像一个完整系统的一个零件，可以和系统中的其他模块通信，互相交换数据。总体而言 SDK 是为宿主系统服务的，在 dooring-sdk 中，我们一方面要提供对外的接口支持，另一方面需要支持宿主能控制 H5 编辑器 的界面，所以综合分析下来我们有如下的初步规划图：

r67nQbm.png!mobile

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK