Good code – magic script

This article is the fourth in a series on the use and implementation of code systems. Can read first a few introduction

  • Opening: the correct way to open the code
  • How did Ma Liang design a highly scalable online web production platform
  • The magic brush has been opened. How can I use it
  • Component development

Star break thousand

Last week, Shanghai again ushered in the Import Expo, we were “forced” to take a three-day holiday and return from the holiday, pleasantly surprised to find that the number of star has broken 1000 mark, welcome congratulations.

Last week we opened up all of our projects before the holidays, including Gods – Pen-server

Code good server, gods- Pen-admin

The code manages the back end and gods- Pen, which has been open source since July

Good code editor, so far, good code declared completely open source.

We have also released a tool, Gods – Pen-CLI, to assist you in running and deploying your project. Please refer to the source deployment documentation for details.

Enter the text of this article, well scripted.

What is the script

Most H5 editors on the market focus on providing users with a visual editing experience by providing rich templates and a large number of components to meet the diverse functional needs of users. This is indeed a good direction, and Moliang platform has a similar mechanism (although the components are not enough, and the templates are not beautiful enough).

But that was not enough.

Consider the following scenario, where we add 10 buttons to a page that need to record the click time, component ID and send to the server (i.e., log the click and submit) when clicked. Break down the requirements:

  1. Since the button component itself does not have the click logging and sending function, this function needs to be extended;
  2. You need to add this same functionality for all the buttons in the set.

Before we have scripting capabilities, we need to develop a new button component with these capabilities. Regardless of the cost and permissions required to develop components (any user can develop their own components on MDB, but not on other platforms), this solution meets the above requirements. However, the requirements change slightly, not only the button, other components need this function, also have to develop, really troublesome.

The script mechanism of Ma Liang is proposed to solve such problems.

The code script has the following basic features:

  • Scripts can extend component functionality.
  • Scripts can be reused.
  • Scripts have almost complete component control

With this kind of power, the other H5 editor platform can not implement the rich interaction, heavy logic page, all can be done.

Not intuitive enough? Have outings.

Write a script and click component Alert to display the current time and component ID

Upload the script and add it to another component

Script development

return {
  mounted: function () {
    console.log('hello world')}}Copy the code

These are just a few lines of code to implement a super simple script! Components that use this script print hello World during their Mounted life cycle.

So, as shown above, the script is a Vue configuration object (Option Object). Yes, it’s that simple!

In addition to the native Vue configuration properties, you can add custom properties and custom methods to components.

Custom properties

First, we add a who property to the component using vue syntax, which will alert “Hello XXX” during the mounted life cycle of the component.

return {
  props: {
    who: String,},mounted: function () {
    window.alert('hello ' + this.who)
  }
}
Copy the code

How does the editor recognize this property and provide the appropriate input control to continue modifying the script above

return {
  props: {
    who: {
      type: String.default: 'world'./ / the default value
      editor: {
        type: 'input'.// Provide a text input box
        label: 'who'.// The name that the field actually displays in the editor
        desc: 'Who is it?'.// Hover displays field description information to help understand the meaning of fields}}},mounted: function () {
    window.alert('hello ' + this.who)
  }
}
Copy the code

Add the above script to a component, one for each property configuration panelwhoThe configuration properties

As you can see, we added the Editor field to the vUE property configuration object. Editor. label and editor.desc make the who property more user-friendly in the editor. Editor. type specifies what input control the editor should provide for the property. Refer to the documentation for more editor.type input types.

Custom method

Custom methods are often used to handle callbacks, respond to events, etc.

For example, the component has a property successCall that represents a callback method for the success of an operation, and its editor.type is function.

After you add a custom method to your component, you can select it in the component’s successCall Properties configuration panel.

return {
  editorMethods: {                 // How is the configuration custom method displayed in the Component Configuration panel
    workLate: {                    // The name of the method, which corresponds to a method in 'methods'
      label: 'Punch out'.// Customize the method display name
      params: [                    // A list of parameters that can be entered in the editor
        {                
          label: 'Punch time'.// The name of parameter 1
          desc: 'Leave on time, don't stay'.// This parameter is optional
          type: 'string'./ / parameter 1 type, support ` string | number | Boolean | array | object `
          default: '2:00'         Parameter 1 Default value
        },
        // Parameter 2 Parameter 3...]}},methods:{
    workLate (ts){
      // do something}}}Copy the code

Add the above script to a component and add theworkLateMethod to click action

Compared to a normal VUE component, it’s just an editorMethods configuration.

Obtaining a component instance

this.$parent.getComponent(anotherComponentId)
Copy the code

Set component display to hide

var $com = this.$parent.getComponent(id)
$com.visible = true // false
Copy the code

Refer to the documentation for more common methods and properties of component instances

A simple complex example

Out again before doing simple version of the mentally disabled bot (dialogue API from www.ownthink.com/robot.html)

Draw the structure of the page using buttons, lists, text, and so on

Add a script for the send button and write the processing logic

In a word

At its core, the script is a common Vue option object, with descriptions of the props and methods, and some basic generic methods and properties for the code component. Once you have some vUE development fundamentals, you can unleash your imagination and creativity to create interactive, logic-heavy pages.

Code good pen, worth having!

Routine for experience, routine for star.