Как быстро инкапсулировать ваше приложение в js-sdk?

JavaScript визуализация данных

предисловие

Эта статья познакомитвнешний интерфейсКак упаковатьjs-sdkи как быстро превратить ваше приложение вjs-sdk, мы суммируем некоторые инкапсуляцииjs-sdkпринципы и кейсы, которые помогут вам быстрее начать работуsdkСреди них автор также будет использоватьH5-DooringКак пример, какРедактор страницы H5упакован вjs-sdkдля использования другими.

текст

Прежде чем начать статью, автор сначала представит, что такоеsdk .

SDK означает комплект для разработки программного обеспечения, который обычно представляет собой набор инструментов разработки, используемых некоторыми разработчиками программного обеспечения для создания прикладного программного обеспечения для определенных пакетов программного обеспечения, программных сред, аппаратных платформ, операционных систем и т. д.

дляjs-sdk, мы можем привести много примеров, например:

  • библиотека компонентов пользовательского интерфейса
  • Инструменты мониторинга производительности, такие как руки Alibaba
  • Инструменты статистического анализа
  • SDK для смарт-аутентификации в облаке Alibaba
  • Экстремальная проверка SDK

sdkЦель состоит в том, чтобы повысить эффективность, безопасность и удобство наших проектов разработки, поэтому мы разрабатываемsdkНеобходимо соблюдать некоторые принципы, а именно:

  • Принцип наименьшей доступности: То есть ненужные функции/коды не добавляются как можно больше, чтобы код можно было свести к минимуму.
  • принцип наименьшей зависимости: То есть никакие необходимые зависимости решительно не добавляются для достижения минимума внешних зависимостей
  • Легко расширить: Плагин, максимальная поддержка расширения и настройки
  • стабильность: не должно вызывать сбоев в работе хост-приложения, обратно совместимо, тестируемо

Познакомившись с предысторией и принципами, изложенными выше, давайте посмотрим, как реализоватьsdkслучай.

Инкапсулировать H5-Dooring в js-sdk

Автор берет это здесьКонструктор страниц с открытым исходным кодом H5-DooringВ качестве примера (конечно, инкапсуляция его в sdk также является частью нашей итерации, и позже он даже будет преобразован в пакет npm), чтобы представить, как инкапсулировать js-sdk, давайте сначала посмотрим на абстрактную диаграмму:Наш sdk является частью полной системы, которая может взаимодействовать с другими модулями в системе и обмениваться данными друг с другом. Вообще говоря, sdk обслуживает хост-систему. В Dooring-sdk нам необходимо обеспечить поддержку внешнего интерфейса на с одной стороны. , с другой стороны, он должен поддерживать хост может контролироватьРедактор H5интерфейса, поэтому после всестороннего анализа имеем следующую предварительную планировочную схему:

Во-первых, мыsdkиспользоватьjsдинамическая нагрузкаiframeспособ достижения и черезiframeобщение для достиженияpropsНа данный момент есть еще две надежные схемы связи:

  • использоватьpostmessageРеализовать междоменное межсистемное взаимодействие
  • использоватьurlпередача параметров

из-заpostmessageТребования к хост-системе относительно высоки, и хост необходимо настраивать вручную.originБелый список недостаточно удобен для подключаемых модулей, поэтому здесь автор использует наиболее часто используемые из них.urlДля общего метода здесь необходимо проанализировать параметры, и, наконец, достигается относительно простой метод доступа, как показано ниже:

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

Пользователям нужно только определить конфигурацию в глобальномpropsа такжеcallback, вы можете свободно настроитьH5-DooringДалее нам нужно только ввести dooring-sdk (обратите внимание, что сначала определяются глобальные переменные, а затем вводится sdk):

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

Выше это точноjs-sdkСхема и эффект финального вызова, посмотрим как реализовать.dooring-sdkКакая работа была проделана внутри. Давайте сначала посмотрим на схему механизма реализации:

Из анализа приведенного выше рисунка видно, что нам нужно разобрать определяемую пользователем глобальную конфигурацию наurlпараметры, которые затем будут создаваться динамическиiframeизsrcсвойство установлено наdooring url + parmasСтруктура реализована следующим образом:

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

Вышеупомянутое является просто простой идеей реализации.Не слишком ли традиционно писать подключаемый модуль jquery?В то же время нам также необходимо сотрудничатьh5-dooringВнутренний для поддержки синтаксического анализаparmasи другие операции, интересующиеся могут изучить сами.sdkЕсть еще много способов реализовать это, и я с нетерпением жду вашего исследования.

наконец

Автор вышеуказанной схемы был интегрирован вH5-Dooring, вы можете использоватьsdkспособ испытать это.

адрес гитхаба:WYSIWYG Редактор страниц H5 H5-Dooring

больше рекомендаций

Категории