Organization of code for form Designer series

The first reason to turn the front-end, is because the write JS code does not have to deploy the environment, convenient, free. However, it is because of freedom that we have a headache in organizing our code. Here, I would like to thank kener-Lin Feng @Kener-Lin Feng of the #echarts #, it is many times to read the source of echarts, just let me know how to organize the code, thank you!

Firstblood, Modular development

The advantages of modular development are not discussed here, of course, there are a lot of modules loading framework, such as I used in the system before the SEAJS. In the form designer, I still use the echarts inside the esl.js. Document structure such as:

The corresponding ESL configuration is as follows:

Require.config ({packages: [{name: ' Designer ', Location: ' Js/autotable/statement/src ', main: ' Designer ' }],paths:{Designer: ' Js/autotable/statement/src ', form: ' Js/autotable/statement/form ', main: ' js/autotable/ Statement/formmain '}}); require ([' main '], function (main) {Main.init ({saveurl: ', Editid: '});

Throw the Ace in the path (a JS code plugin) to read the 3 paths inside the paths:

1. The designer contains all the code blocks needed for the form design to be called by the form

2. form is the underlying implementation of the form designer, including business data storage, event handling, Dom generation, etc.

3. Using main to specify a program entry to invoke form, if we want to do some initialization of the form designer (especially the generation of reports, etc.) is also in main specified in this JS file.

In particular, according to the 3rd, we can specify different main in different scenarios to implement different requirements, as shown in this example: Formmain.js is just a portal to the form designer and does not do other initialization operations. In Tabmain.js, in addition to opening the form design program, the report header and some fixed report entries are initialized in the form designer.

Secondblood, Form.js

Form.js inside the implementation I was completely reference echarts the bottom of the zrender.js to design and implementation, the main points are:

1. Defines the _form object, which contains interfaces such as generating templates, adding form input objects, merging, splitting cells, for which the main object mentioned earlier has been called by some components. The final implementations of these interfaces are all not on the object, and the final implementation is all in the following 3 constructors

2. Storage, as the name implies, all the data is inside the constructor. It should be explained that all the methods and writing of the constructor in Zrender are not implemented by the prototype chain, and are implemented in the following way:

   
   

3. function Storage () {var self = this;self.xxx = '; self.xxxx = function () {}}

   There are also many Set/get methods available in storage to set or return some data

4. Painter, well, this guy is used to draw the DOM, and all the toolbox classes are put in him, and we'll talk about the Toolbox class later.

5. Handler, which contains the event capture and assignment on the page, especially the form's subject section, such as the drag of the table size, the right-click popup add panel, and so on is here to listen.

In general, Form.js implements these functions.

Thirdblood, see the Sky through the Mist

Opening SRC, we can see the structure of the document:

4 folders:

1. Componet, which contains all the Toolbox method implementations,

2. Nav, nav? Yes, that's the navigation, in the first article in this series, there is an interface where the top navigation in the interface is not written in the page, but is actually generated by invoking the navinit of the form in Formmain,tabmain, Because we may use different navigation bar tools in different application requirements.

3. Shape, all form objects include plain text, Input, select these are all in shape

4. tool, including in the daily development, we all need some special method set to implement some functions, tool inside JS file provides these methods, such as Div drag and so on

First, let's start with shape and see what's Inside:

Each of these JS files corresponds to the form object that we need to add in the right mouse button. Here, take input.js as an example to see what the code says:

Define (    function (require)  {         Function input ()  {            this.type  =  ' input ';        }         input.prototype =  {        create :  function (Params, _form) {        var dom =  This.createdom ();        this._form = _form;         if (Undefined != params.callback)  params.callBack.call (this) ;        return dom;         },            createdom : function ()  {var wrapdiv =&Nbsp;document.createelement (' div '),                input = document.createelement (' input ');input.type =  "text"; This.formTag  = input;wrapdiv.appendchild (Input);                 return wrapDiv;             },            getconfig :  function ()  {                return  ' <li><span>id</span><strong>:</strong><input type= ' Text " name=" id " /></li><li><span>name</span><strong>:</strong ><input type= "text"   name= "name"   /></li><li><span> Chinese name < /span><strong>:</strong><input type= "text"   name= "CNAME"   /></li><li><span > Verify </span><strong>:</strong><input type= "Text"  class= "Validate-input"   readonly= "readonly"  /><a class= "Config-panel-btn validate-add" ></a></li> <li><span> Default value </span><strong>:</strong><input type= "text"  name= " Defaultval "></input></li><li><span> Read Only </span><strong>:</strong> <input type= "checkbox"  name= "readonly" ></input></li><li><span> description id< /span><strong>:</strong><input type= "text"  name= "Relevanceid" ></input> </li><li class= "Btn-wrap-li" ><a class= "remove-btn panel-btn" ><i></i > Delete the control </a></li> ';             }      &nBsp;  };        var shape = require ('.. /shape ');         shape.define (' Input ',  new input ());         return input;    });

Basically, each form object corresponding to the JS file will have the type, configuration, create DOM methods or properties.

A careful friend may have already released a shape at the end of the code, so what does this shape do? Look directly at the code:

Define (    function (/*require*/)  {    var _ =  Require (' Designer/tool/undersore ');//provide some independent methods          var  self = {};        var _shapelibrary = {};      //shape Library         self.define =  function (Name, clazz)  {            _ shapelibrary[name] = clazz;            / /extended             _.extend for each graph implementation (clazz.__proto__,  {                 Attrinject : function (obj)  {//attr injection                  for (var i in obj)  {                 this._form.setattr (I, obj[i]);                 }                 },                 setdefaultval : function (val) {                 if (This.formtag)  this.formTag.value  = val;                 },                 Setreadyonly : function (flag) {                 IF (flag) {                 This.formTag.setAttribute (' readonly ',  ' readonly ');                 }                 else {                 this.formtag.removeattribute (' readonly ');                 }                 },                 dictionaryinit : function (DICID) {                 this._form.getdictionary (this.dom,  DICID);                 }             })             return  self;        };         Self.get = function (name)  {             return _shapeLibrary[name];        };         return self;    });

By define this sentence in this method:

_shapelibrary[name] = Clazz;

As we can tell, shape is a mapping between a Form object name and an instance object using the _shapelibrary object. and returns the instance in its get method. At the same time, if our extensions to each Form object are also implemented in shape (you can, of course, create a Form object base class that allows each form object to inherit and see a personal preference).

The complete add process is as follows:

1, call an Add method inside storage to place the form object you want to add into the array

2, perform painter Refresh method, in the method will first go to storage inside to add (of course, also include to delete) collection, according to the collection to traverse, the resulting method will return to the form object inside the Create method, and execute the required initialization method (depending on callback). It is important to note that the addition may also implicitly produce delete operations, such as a TD that already has a Form object, you need to delete the operation.

3. Adjust the width and height of the table according to the Add/remove operation.

PS: Why first say this form element of the addition process, because I think this piece is actually should be more interested in the part. If you have additional requirements, you can divert add additional form objects (more likely, of course, the components you encapsulate).

Then we go back to componet .

Personally, I don't like to use JQ, so you see ajax.js here. Aside from this JS, each JS and its corresponding role relationship is as follows:

1. Addformbox.js when we right click on the table, the popup added interface, including the inside of the Click event, has been added to the call in the JS code inside

2. Configpanel.js the configuration panel for each form object, including change initialization for configuration content, and linkage between the DOM of the Form object is implemented, this place feels more appropriate for MVVM

3. Linerowmanger.js us to the right-click Add/delete row of the table to manipulate the code

4. Modelpanel.js Template line Configuration processing JS code

5. Shadowdiv.js the relative code of the translucent matte layer that is generated when you right-click or left-click a form block

According to my explanation of the spa in Uncle Tom's blog, the 5 functions listed above should be organized in such a way, including the dialog,undersore provided in tools, and the monving of the Div movement, which is just a slight distinction made by function.

Finally, let's look at the Nav folder, which reads as follows:

In this each JS file corresponds to the navigation toolbar each function, or that sentence, we can according to different needs to freely organize the function of the navigation bar. Let's take an example: look at the entry Formmain.js file in front of you.

Define (function (require) {var self = {};  /** * Entry Method */self.init = function (config) {var self = This,tab = document.getElementById (' tab-wrap '); var    _form = require (' form '). init (tab, config, function () {this.navinit ([' Name ', ' code ', ' relevance ', ' view ', ' Save ');}); } return self;})

There is a Navinit method, passed in the Official navigation toolbar object, a look is an array we all understand.

The article on Storage, Painter, handler and did not do too much to explain the details of its implementation you can refer to Zrender.js

Overall, the whole development process to use the content is not too difficult, we need to do is to do every detail, thank you for reading.

Organization of code for form Designer series