How to quickly package your application into js-sdk?

Preface

This article will introduce how to encapsulate a front-end js-sdk and how to quickly turn your application into it js-sdk . We will summarize some encapsulation js-sdk principles and cases to help you get started sdk development faster . The author will also take H5-Dooring as an example to explain how Package the H5 page editor into one js-sdk for others to use.

text

Before starting the article, I will first introduce what is sdk .

SDK is a software development kit, which is generally a collection of development tools used by software engineers to build application software for specific software packages, software frameworks, hardware platforms, and operating systems.

For this js-sdk , we can cite many examples, as follows:

UI component library
Performance monitoring tools, such as Ali arms
Statistical analysis tools
Alibaba Cloud Smart Verification SDK
Extreme verification sdk

sdk The purpose is to improve the efficiency, safety and convenience of our development projects, so we sdk must follow some principles when designing , as follows:

Minimum usability principle: that is, unnecessary functions/codes should not be added as much as possible, so that the code is the simplest
The principle of least dependence: that is, no necessary dependence is resolutely not added to achieve the minimum external dependence
Easy to expand: plug-in, maximum support for expansion and customization
Stability: Never cause the host application to crash, backward compatible, testable

After being familiar with the above background and principles, let's take a look at how to implement a sdk case.

Package H5-Dooring into a js-sdk

The author here takes the open source page authoring tool H5-Dooring as a case (of course, packaging it into sdk is also part of our iteration, and even an npm package later), to introduce how to package js-sdk, let's look at an abstract Figure: Our sdk is like a part of a complete system, which can communicate with other modules in the system and exchange data with each other. In general, the sdk serves the host system. In the dooring-sdk, we need to provide external Interface support, on the other hand, we need to support the host to control the interface of the H5 editor, so we have the following preliminary plan after comprehensive analysis:

First of all, we sdk adopt the js dynamic loading iframe mode to realize it, and iframe realize the props transmission through communication . At this time, there are two more reliable communication schemes:

Use to postmessage achieve cross-domain and cross-system communication
Use url parameter communication

Due postmessage to the relatively high requirements for the host system, the host needs to manually configure the origin whitelist, which is not friendly to the pluggable experience, so the author adopts a more common url way here, here needs to analyze the parameters, and finally achieve a relatively simple access The way, as follows:

var dooringOpts = {
    container: '',  // 挂载到哪个dom节点上
    iframeStyle: {  // iframe自定义样式
        width: '',
        height: '',
        border: ''
    },
    controls: {
      gallery: false,  // 是否启动图片库
      template: false, // 是否启用模版库
      saveTemplate: true,  // 参数可以是true/false,表示是否启动下载代码, 也可以是函数, 用来自定义下载代码逻辑
      save: true,  // 参数可以是true/false,表示是否启动下载代码, 也可以是函数, 用来自定义下载代码逻辑
      downCode: true, // 参数可以是true/false,表示是否启动下载代码, 也可以是函数, 用来自定义下载代码逻辑
      isPhoneTest: false,
      helpPage: true,   // false/true表示隐藏/显示帮助页面
      uploadApi: '',  // 自定义上传api
      formApi: '',  // 自定义表单提交api
      screenshotsApi: ''  // 自定义截图提交api
    }
};

Users only need to define the configured props sum globally, and callback they can customize it freely H5-Dooring. Next, we only need to introduce the dooring-sdk (note that the global variables are defined first, and then the sdk is introduced):

<script src="http://49.234.61.19/dooring-sdk.js"></script>

The above is just the determined js-sdk plan and the final call effect. Next, let's take a look at how to implement it. That is dooring-sdk , what work has been done internally. Let's first look at an implementation mechanism diagram:

FIG apparent from the above analysis we advance to the global parsed into user-defined configuration url parameters, and then dynamically creates iframe a src property to dooring url + parmasstructure, in particular to achieve the following:

(function(){
      let iframe = document.createElement('iframe');
      let tid = Date.now();
      let sdk_domain_path = 'http://xxxx/xxxx';
      iframe.src = sdk_domain_path + '/h5_plus/editor?tid=' + tid + '&' + getDooringApiStr(dooringOpts) + '&isOpen=1';

      iframe.style.border = 'none';
      iframe.style.width = '100vw';
      iframe.style.height = '100vh';
      if(dooringOpts && dooringOpts.iframeStyle) {
          iframe.style.border = dooringOpts.iframeStyle.border || 'none';
          iframe.style.width = dooringOpts.iframeStyle.width || '100vw';
          iframe.style.height = dooringOpts.iframeStyle.height || '100vh';
      }

      document.querySelector(dooringOpts.container || 'body').appendChild(iframe);

      function getDooringApiStr(opt) {
          let controls = Object.assign({
              gallery: false,
              template: false,
              saveTemplate: true,  // 参数可以是true/false,表示是否启动下载代码, 也可以是函数, 用来自定义下载代码逻辑
              save: true,  // 参数可以是true/false,表示是否启动下载代码, 也可以是函数, 用来自定义下载代码逻辑
              downCode: true, // 参数可以是true/false,表示是否启动下载代码, 也可以是函数, 用来自定义下载代码逻辑
              isPhoneTest: false,
              helpPage: true,   // false/true表示隐藏/显示帮助页面
              uploadApi: '',
              formApi: '',
              screenshotsApi: ''
          }, opt.controls || {})

          let params = '';
          for(let key in controls) {
              params += key + '=' + encodeURI(controls[key]) + '&'
          }
          return params.slice(0, params.length -1)
      }
})()

The above is just a simple realization idea, is it a bit of a traditional feeling of writing a jquery plug-in? At the same time, we also need to cooperate h5-dooring internally to support parsing parmas and other operations. If you are interested here, you can study by yourself . Of course sdk , there are many ways to achieve it, I look forward to everyone Exploration.

At last

The author of the above scheme has been integrated into H5-Dooring, you can experience it in the form of sdk.

github address: WYSIWYG H5 page editor H5-Dooring

Wonderful review

Relax