Что касается внешнего интерфейса, почему бы не попробовать «подключаемую» разработку?

Разработка компонентов интерфейса

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

Как решить проблему повторного использования кода, быстрой разработки

Как «зрелые продукты с четкими функциями», так и «продукты с неясными функциями для предприятий или подразделений» имеют некоторые общие характеристики.

• Большинство логических функций одинаковы, и их можно использовать во многих системах.
• Эти функции необходимо поддерживать, и невозможно поддерживать функцию для ее изменения в N системах.
• Изменение определенной части функции не повлияет на другие функции, и она может быть запущена в любое время.Стоимость возврата на весь сайт слишком высока.

И моя общая идея заключается в прогрессивной инкапсуляции визуального развития.

1. Создайте внутреннюю библиотеку компонентов пользовательского интерфейса (небольшая степень детализации инкапсуляции)
2. Создайте библиотеку бизнес-компонентов на основе библиотеки компонентов пользовательского интерфейса (общая гранулярность инкапсуляции с некоторой функциональной логикой)
3. Создайте библиотеку подключаемых модулей на основе библиотеки компонентов пользовательского интерфейса и библиотеки бизнес-компонентов (большая степень детализации инкапсуляции, включая полную бизнес-логику).
4. * Компилировать и генерировать код страницы на основе шаблона, разработанного плагином
5. * Платформа разработки с низким кодом, основанная на визуальной конфигурации платформы + компиляция шаблона

Что такое разработка плагинов

Заимствуя идею ядра + разработка прикладного ПО, во-первых, есть ядро ​​для планирования плагинов. При поддержке этого ядра можно разрабатывать приложения, поддерживающие это ядро. Я называю эти приложения «плагинами». ", а плагин - это полная логика. Приложение, которое не зависит ни от каких других плагинов, нужно только полагаться на ядро, чтобы работать независимо в системе.

основной контент

• Плагин планирования
• Базовый компонент (самостоятельные или сторонние ссылки)
• Основные услуги
• http сервис
• преобразование формата данных
• преобразование времени и т. д.
• автобус событий
• разное
• Автоматически загружать файлы плагинов (асинхронно)

Ядро системы подключаемых модулей, как зависимость подключаемого модуля от среды, обеспечивает базовые службы, планирование подключаемых модулей, события и другие основные функции для подключаемого модуля.Взаимные вызовы между плагинами могут проходить через ядро ​​плагина, и этот вызов является развязанным и не влияет на внутреннюю логику плагина. Базовые компоненты и бизнес-компоненты, предоставляемые ядром подключаемого модуля, исходят из внешних зависимостей, поэтому ядро ​​подключаемого модуля представляет собой относительно упрощенное ядро, к которому можно получить доступ через внешние зависимости.расширятьОсновной функционал плагина.

Ядро плагина я опубликовал в NPM, и его можно установить напрямую через NPM.

Плагин системы npm ссылка

Разработка плагина DEMO

Я также сделал DEMO для разработки плагинов, и заинтересованные студенты могут попробовать его.

Вызов каждого плагина является асинхронным.

как использовать

В настоящее время выпущена только DEMO React, а DEMO Vue будет разработана позже.

Шаг 1: Установите ядро ​​плагина в проект

npm i react-plugin-system

Шаг второй: добавьте плагин в WebPack.config.js псевдоним, укажите каталог плагинов

// webpack.config.js
{    alias: {        "@plugins": path.resolve("./src/plugins"),    }}

Шаг 3: Зарегистрируйте плагин в файле ввода

// src/index.jsimport { register } from "react-plugin-system";
let pages = require.context("@plugins", true, /\/.*config\.js$/);
pages.keys().map(key => { 
  let config = pages(key).default;  
  // reigster plugins  
  register(config); 
  return config;
});

Шаг 4: Напишите плагин. Плагин содержит файлы конфигурации и файлы кода. Файл конфигурации используется для указания уникального идентификатора плагина и определить файл входа. Ядро можно найти Конкретное расположение плагина через файл конфигурации. Файл кода плагина используется для записи конкретного бизнеса плагина.

// src/plugins/add/config.js
export default { 
   id: "add",  
   index: "add/index.js"
};

// scr/plugins/add/index.js
import { message } from "antd";
export default function(config = {}) {
  const { calllBack = () => {} } = config;
  message.success("Add success!");
  calllBack();
}

Шаг 5: Используйте плагин

// src/pages/*/*.jsx
import React from "react";
import { callPlugin, Plugin } from "react-plugin-system";
export defalut class ButtonBox extends React.Component {
    constructor(props) {        
        super(props);        
        this.state = {};
    }
    /**     
    * add     
    */    
    addHandle = async () => {       
         // callPlugin        
        const path = (callPlugin('add'));        
        const plugin = await import("@plugins/" + path);        
        (plugin.default)({ a: 1 });    
    } 
    /**
    * infoClose
    */
    infoCloseHandel = (data) => {
        console.log(data)    
    }
    render() {
        const path = (callPlugin('info'));
        return <div>
            <Button icon="plus" onClick={this.addHandle}>ADD</Button>            
            <Plugin importComponent={() => { return import("@plugins/" + path) }} onClose={this.infoCloseHandel} />
        </div>
    }
}

Он включает в себя два метода вызова: метод компонента и метод функции.

Позднее планирование

Открытый исходный код все еще находится в зачаточном состоянии. С точки зрения структуры, VUE будет поддерживаться на более позднем этапе; с точки зрения сообщества будет создан рынок подключаемых модулей для публикации разработанных подключаемых модулей на платформе, а также можно будет выполнять поиск и предварительный просмотр подключаемых модулей. на платформе; с точки зрения инструментов будет разработан интерфейс командной строки, который может быстро инициализировать стандартную среду разработки плагинов, которая может быстро преобразовывать обычный код в плагины и быстро устанавливать плагины, выпущенные платформой; На более глубоком уровне будет разработана платформа визуализации на основе компиляции ejs, и онлайн-конфигурация будет выполняться через визуальную платформу, а также скомпилирована и сгенерирована вторичная разработка на основе подключаемых модулей.Платформа разработки с низким кодом.

Проект чисто личных предпочтений, заинтересованные студенты, возможно, пожелают выдвинуть свои взгляды или вовлечены в проект завершен, проект, если они чувствуют себя немного означают, добро пожаловать в мою домашнюю звезду, о, о.