¿Cómo empaquetar rápidamente su aplicación en js-sdk?

Prefacio

Este artículo presentará cómo encapsular un front-end js-sdk y cómo convertir rápidamente su aplicación en él js-sdk . Resumiremos algunos js-sdk principios y casos de encapsulación para ayudarlo a comenzar el sdk desarrollo más rápido . El autor también tomará H5-Dooring como ejemplo para explicar cómo Empaquete el editor de páginas H5 en uno js-sdk para que otros lo usen.

texto

Antes de comenzar el artículo, primero presentaré lo que es sdk .

SDK es un kit de desarrollo de software, que generalmente es una colección de herramientas de desarrollo que utilizan los ingenieros de software para crear software de aplicación para paquetes de software específicos, marcos de software, plataformas de hardware y sistemas operativos.

Para ello js-sdk , podemos citar muchos ejemplos, como sigue:

Biblioteca de componentes de IU
Herramientas de monitoreo del desempeño, como Ali Arms
Herramientas de análisis estadístico
SDK de verificación inteligente en la nube de Alibaba
SDK de verificación extrema

sdk El propósito es mejorar la eficiencia, seguridad y conveniencia de nuestros proyectos de desarrollo, por lo que sdk debemos seguir algunos principios a la hora de diseñar , como sigue:

Principio de usabilidad mínima: es decir, no se deben agregar tanto como sea posible funciones / códigos innecesarios, para que el código sea el más simple
El principio de mínima dependencia: es decir, no se añade resueltamente ninguna dependencia necesaria para lograr la mínima dependencia externa.
Fácil de expandir: plug-in, soporte máximo para expansión y personalización
Estabilidad: nunca haga que la aplicación de host se bloquee, sea compatible con versiones anteriores, se pueda probar

Después de estar familiarizado con los antecedentes y principios anteriores, echemos un vistazo a cómo implementar un sdk caso.

Empaquete H5-Dooring en un js-sdk

El autor aquí toma la herramienta de creación de páginas de código abierto H5-Dooring como un caso (por supuesto, empaquetarlo en sdk también es parte de nuestra iteración, e incluso más tarde se convertirá en un paquete npm), para presentar cómo empaquetar js-sdk, veamos un resumen Figura: Nuestro sdk es como parte de un sistema completo, que puede comunicarse con otros módulos en el sistema e intercambiar datos entre sí. En general, el sdk sirve al sistema host. En el dooring-sdk, necesitamos proporcionar Soporte de interfaz, por otro lado, necesitamos ayudar al host para controlar la interfaz del editor H5, por lo que tenemos el siguiente plan preliminar después de un análisis exhaustivo:

En primer lugar, sdk adoptamos el modo de js carga dinámica iframepara realizarlo y iframe realizar la props transmisión a través de la comunicación.En este momento, hay dos esquemas de comunicación más confiables:

Úselo para postmessage lograr una comunicación entre dominios y sistemas
Usar url comunicación de parámetros

Debido postmessage a los requisitos relativamente altos para el sistema host, el host necesita configurar manualmente la origin lista blanca, lo que no es amigable con la experiencia conectable, por lo que el autor adopta una forma más común url aquí, aquí necesita analizar los parámetros y finalmente lograr un acceso relativamente simple El camino, de la siguiente manera:

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
    }
};

Los usuarios solo necesitan definir la props suma configurada globalmente, y callback pueden personalizarla libremente H5-Dooring. A continuación, solo necesitamos introducir el dooring-sdk (tenga en cuenta que las variables globales se definen primero y luego se introduce el sdk):

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

Lo anterior es solo el js-sdk plan determinado y el efecto de la llamada final. A continuación, echemos un vistazo a cómo implementarlo. Es decir dooring-sdk , qué trabajo se ha realizado internamente. Veamos primero un diagrama de mecanismo de implementación:

FIG que se desprende del análisis anterior, avanzamos al análisis global en url parámetros de configuración definidos por el usuario , y luego crea dinámicamente iframe una src propiedad para dooring url + parmasestructura, en particular para lograr lo siguiente:

(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)
      }
})()

Lo anterior es solo una idea simple de realización, ¿es un sentimiento un poco tradicional de escribir un complemento de jquery? Al mismo tiempo, también debemos cooperar h5-dooring internamente para admitir el análisis parmas y otras operaciones. Si está interesado aquí, puede estudiar por sí mismo . Por supuesto sdk , hay muchas formas de lograrlo, espero que todos Exploración.

Al final

El autor del esquema anterior se ha integrado en H5-Dooring, puede experimentarlo en forma de sdk.

Dirección de github: editor de página WYSIWYG H5 H5-Dooring

Maravillosa reseña

Momento de relax