preface

Companies often to marketing activity, new retained, making temporary activities page, broadly similar and components, in order to improve the operating efficiency, reduce development costs, based on the development of an active visual building project, through operation can, click and drag and drop components, choose the way or import data, quickly generate activities page online, Here’s a quick summary.

The core design

The general process is as follows:

Create -> Edit -> Save -> Publish -> Show

Core:

Maintains an obJ that holds a parent-child relationship between components, like a node tree, each with a unique ID, as shown in the following example

const nodeTree = {
    id: 'component0'.name: 'rootContainer'.children: [{id: 'component1'.name: 'header'
        },
        {
            id: 'component2'.name: 'content'.children: [],}]}Copy the code

  1. Create an OBJ, edit it without manipulating the DOM, just add, delete, and check the OBJ array to update the view

  2. Obj exists in the database, generates HTML files at an address on the server, static resources,

Obj is mounted on the window via template passing and generates a unique access path

  1. Changes the current active page accessibility status when publishing

  2. When displayed, the page is generated from the custom component specified by OBJ rendering

Focus on

1. Perform node operations

Instead of manipulating DOM nodes, views are updated by adding, deleting, changing, and searching array objects

2. Drag and determine

Editing involves dragging and dropping, determining where a point intersects a rectangle, setting offsets, distinguishing sibling inserts from child inserts, and prompting messages

  • Drag and drop: Instead of fully utilizing HTML5 Drag and drop events, we use them to monitor user actions and perform corresponding data transfer and add, delete, change and check actions during dragStart, dragOver, dragEnd, and drop

  • Judgment point intersects rectangle: When dragging a component to hover over the positable component area, the user may want to hover over the component area above, below, left, right (block level elements are up and down, row level elements are left and right), there are five possibilities (block level elements are up and down, row level elements are left and right), we need to divide the corresponding areas for various choices, and clear hints

See the illustration below

3. Components and rendering

Each type of custom component has a unique name, and each component has a unique ID when created in the Node tree for later editing and rendering.

The main render file is recursively called through the Node tree, and the corresponding component is rendered according to the component name and corresponding data

4. Mobile adaptation and preview

  • Due to the large difference in style and style between the mobile end and the PC end, a set of code adaptation is not considered. Each customized component corresponds to two files PC and H5. When rendering the display, the current platform is judged and the corresponding display is made
  • The H5 preview uses the IFrame. The H5 preview occupies a single route and is assigned the SRC attribute of the IFrame

5. Quick text editing

There will be a lot of text on the active page, and the user wants to change it, there are several ways

  1. Edit the button, turn it into an input field, and when you’re done, save the button,

  2. Put input fields in the property bar for relational mapping,

Neither of these possibilities is intuitive and cumbersome

After adding the contenteditable property, you can modify the text directly, double click modification, delay saving, and set anti-shaking. Most components have such requirements. Binding events directly to labels is difficult, so you can set global binding event listening to control registration and timely destruction

See the illustration below

The characteristics of

Edit and cancel rollback

After each operation, the Node tree is stored and placed in the rollback queue. The rollback and cancellation can be implemented by pointing to the previous or the next one in the queue. The browser memory usage is controlled by limiting the queue length

Components move up and down and point to parent components

  • In addition, it may be difficult to select the parent component of the current component if there are too many nested hierarchies among components. Based on these two functions,

  • The specific implementation is to traverse the Node tree to find the unique Id of the component, delete the current component, and then insert it above or below the sibling node.

Thinking and optimizing

  1. About the mind process of the activity page preservation and display: open a project alone, or open a page for the project alone, used as the activity display, according to the unique ID, get different data rendering configuration page

Question:

  • Code does not exist, the code volume is large, including all custom component templates

  • A project problem affects all pages

  • When a project or component changes, consider the impact on your online activities

So this idea is passed, every time an active page is created and saved, it will generate a unique HTML file and static resource in the server solidification, guaranteed not to be affected

  1. Optimization idea: Pass the edited ACTIVE page HTML fragment directly to the back end, which generates the rendered active page directly.

Advantages:

  • Page loading efficiency is improved without temporary rendering according to node tree.

  • Code reduction

conclusion

In general, the product needs are met, and three aspects are considered at the same time

  1. Improve the efficiency of page building and product availability

  2. Reduce the difficulty for developers to write custom components and get started, improve the maintainability and extensibility of the project

  3. Optimize user experience and improve page loading efficiency (other aspects such as readability, viewability, operability)