preface

This article will introduceThe front endHow to encapsulate a modeljs-sdkAnd how do you quickly turn your app intojs-sdk, we will summarize some encapsulationjs-sdkPrinciples and cases, to help you get started fastersdkDevelopment. Among them the author still can withH5-DooringFor example, how toH5 page editorEncapsulate into ajs-sdkFor the use of others.

The body of the

Before I start this article, LET me explain what the SDK is.

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

For JS-SDK, we can give many examples, as follows:

  • The UI component library
  • Performance monitoring tools such as Ali Arms
  • Statistical analysis tool
  • Ali Cloud intelligent verification SDK
  • Verify the SDK

sdkThe purpose of the design is to improve the efficiency, safety and convenience of our development projects and so onsdkThere are a few principles that you should follow:

  • Minimum usability principle: no additional functionality/code is required to minimize code
  • The principle of least dependencies: do not add any dependencies that are not necessary to achieve the minimum number of external dependencies
  • Easy to extend: plug-in, maximum support for extension and customization
  • Stability: never crash the host application, backward compatible, testable

With the above background and principles in mind, let’s take a look at how to implement an SDK.

Encapsulate H5-Dooring as a JS-SDK

I got it hereOpen source page creation tools H5-DooringAs an example (of course, packaging jS-SDK is also part of our iteration, and even will be made into NPM package later), to introduce how to package JS-SDK, let’s first look at an abstract diagram:Our SDK is like a part of a complete system that can communicate with other modules in the system and exchange data with each other. In general, SDK is for the host system service, in The Dooring – SDK we need to provide external interface support on the one hand, on the other hand, we need to support host controlH5 editor, so we have the following preliminary planning diagram after comprehensive analysis:

First of all, our SDK adopts js dynamic loading iframe mode to implement, and implements props passing through iframe communication. At this time, there are two reliable communication schemes:

  • usepostmessageTo achieve cross-domain and cross-system communication
  • useurlParameters of the communication

Since Postmessage has high requirements on the host system and requires the host to manually configure the Origin whitelist, which is not friendly to the pluggable experience, the author adopts the common URL passway here, which needs to parse the parameters, and finally achieve a relatively simple access way, as follows:

var dooringOpts = {
    container: ' '.// Which DOM node to mount to
    iframeStyle: {  // iframe custom style
        width: ' '.height: ' '.border: ' '
    },
    controls: {
      gallery: false.// Whether to start the image library
      template: false.// Whether to enable the template library
      saveTemplate: true.// The argument can be true/false, which indicates whether to start the download code, or a function, which defines the download code logic
      save: true.// The argument can be true/false, which indicates whether to start the download code, or a function, which defines the download code logic
      downCode: true.// The argument can be true/false, which indicates whether to start the download code, or a function, which defines the download code logic
      isPhoneTest: false.helpPage: true.// False /true: hide/display the help page
      uploadApi: ' '.// Customize the upload API
      formApi: ' '.// Customize the form submission API
      screenshotsApi: ' '  // Customize the screenshot submission API}};Copy the code

The user only needs to define the configured props and callback globally, and is free to customize H5-Dooring. Then we just need to introduce the dooring- SDK again (note that we define the global variables first and then introduce the SDK):

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

That’s just for surejs-sdkWe’ll take a look at how to implement it. That isdooring-sdkWhat exactly is being done inside. Let’s start with an implementation diagram:

From the above analysis, we need to parse the user-defined global configuration into URL parameters in advance, and then set the SRC attribute of the dynamically created iframe to the structure of dooring URL + parmas. The specific implementation is as follows:

(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.// The argument can be true/false, which indicates whether to start the download code, or a function, which defines the download code logic
              save: true.// The argument can be true/false, which indicates whether to start the download code, or a function, which defines the download code logic
              downCode: true.// The argument can be true/false, which indicates whether to start the download code, or a function, which defines the download code logic
              isPhoneTest: false.helpPage: true.// False /true: hide/display the help page
              uploadApi: ' '.formApi: ' '.screenshotsApi: ' '
          }, opt.controls || {})

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

This is just a simple implementation idea. Is it like writing a traditional jquery plugin? At the same time, we need to work with H5-Dooring internally to support parsing parmas and other operations, which can be studied on your own if you are interested here. Of course, there are many ways to implement the SDK, and I look forward to your exploration.

The last

The above solutions have been integrated into H5-Dooring and can be experimented with using the SDK.

Github: WHAT you see is what you get H5 Page editor H5-Dooring

More recommended

  • React+Koa based h5 page visualization editor -Dooring
  • How to realize H5 editor real-time preview and real machine scan code preview function
  • H5 editor image upload and image library design scheme
  • Introduction to online IDE development: Implement an online code editor from scratch
  • How to design the template library in the H5 editor and realize the automatic generation of cover art