Front-end Architecture building experience and Architecture building experience

Front-end Architecture building experience and Architecture building experience

I have stayed in this company for more than half a year, and I will not be able to reveal my feelings, but I am lucky to have taken over a project (CQM system) that I did my best to do in the last few days ).
From the first company to the present, I have spent a year and a half on my website, from the back end to the front end, from strangers to familiarity, gradually, I began to learn website knowledge in a stable and in-depth manner.
I always wanted to do something decent by myself, but I couldn't make up my mind every time. One was that I was not capable enough, and the other was that I wanted to be lazy in time, therefore, this CQM Project is a small test for itself.
OK. I am not in the Project Department at the company. For other reasons, I have the opportunity to take charge of the front-end framework of this project.
Like what I think, this is a small OA project, because I am fully responsible for the front-end, so the content is basically my own ideas.
PS: I cannot disclose some internal information. Sorry.

The figure above shows the directory structure. If you have been familiar with Microsoft MVC, you can see that, although I am a front-end engineer, I have learned C # And I am familiar with Microsoft MVC, now I am using MVC4. Of course, the ide I use knows about Microsoft MVC.
First of all, although I am working on the front-end, I also need a simple server to process some data. MVC (the MVC below is Microsoft's MVC) is a good choice for me, because that's the only thing...

Aside from other folders, we mainly look at the expanded two.

In the statics and views folders, some static files are installed in the first [statics]. Of course, ashx is in the wrong position. After this item is modified, it needs to be compiled, but it is not used much. The second [views] contains a page file.

I am not working with the project team here, and I am doing it separately, so it is completely separate from the front and back ends. I only use some background programming for data testing.
When I was working on the front-end, the general idea was: Template layout, control combination generation, and directory structure layout.
How can we understand this sentence? I will use a diagram below to illustrate it.

These two images are the description of the statics folder. Because I have an embedded framework, I have the father and son files, because there may be an embedded framework in the second layer, the end file is displayed.
The following figure shows a sketch of the page layout.

As you can see, the entire front-end page has three layers. Of course, it can also be made into one layer. However, because the ifrmae framework has changed a lot, I wrapped it in three layers. PS: The left navigation bar belongs to the second layer.
In Figure 3, The json folder is used to store the json data format required by the website. The ashx folder is used to test server data. The plugin folder contains various js frameworks.
ZoeDylan is the front-end data processing layer without any other js framework. dgg is the element interaction and Element Processing Layer and uses the jq framework.
To sum up, the front-end static file is similar to the page data block, followed by the views folder.

Other folders are not mentioned, mainly shared folders.
Same as above, son is the second-level view public file, end is the third-level public view file, header is the header content, frame is required by all layers, mainly some file references.

The file on the page is OK, followed by a description of the logic.
I started to be very passionate when I was working on this project, but one month later I felt very hard, because I found that I was not capable enough, but I had written tens of thousands of lines of code, it is always useful.
The logic of the entire front-end is: Combine the view templates in the background to process data and display in js.

The logic of the page from request to display is as follows: the red line must be loaded, the green line may be loaded, and finally the frmae page is displayed, {request a page address-apply a template-output} mvc users should know how the mvc page is handled. I will not elaborate on it here.

OK. The page is loaded. What about the data?
The data here is interactive between json and ajax. During page processing, a json data request address is added to the div specified by the template or directly run js, the address will return a json-format data, and then js will start processing and generate the content that is finally presented on the page.

This is a dgg. js file that is used to process data. Seriously, you will find that this file will create two global functions: dgg and _ father. Yes, all pages will have these two global functions. dgg contains all common data and element processing functions. _ father is a function that contains the top-level framework. Why?
1: In dgg, the inheritance of zoeDylan. js is to unify functions. It should be required by the company. I just did this,
2: _ father is used to call some events on top-level pages, such as full-screen pop-up windows, Status display, and message pushing.
Here we will mainly talk about the dgg. element function, because the page data is basically processed by this function.
Dgg. element is a processing program for creating page components. You input a json format data, create a component based on the component name you specified, and return a jq function component.

Below are some of the dgg. element Functions

Dgg. element has only two open methods: dgg. element. create and dgg. element. template.
The former is used to create components, and the latter is used to define component templates.
Dgg. the processing logic of element is: Call the development method create-internal processing: jsonSet to determine the component and extract the tempLate style in the tempLate --- Call the corresponding component method in eleTemplate, used to process component events --- Call the setAttr method, used to process common element attributes --- components that return the jq Function
Here, the tempLate can be customized in json data, or you can use dgg. element. template to configure the tempLate and the template method eleTemplate. The following is an example:

Example: generate a component

I want to generate the above component. The json format I input is

In json, eName is the Template Name. After obtaining json, call dgg. element. create (json) to start processing.

1: jsonSet is used to process data and determine whether multiple components are used.

2: create components

3: component event writing, which is a series of processing components, including component events.

4: Common Component Property Processing

Now the note is over. N problems occurred during the construction due to the lack of experience of the landlord. Now there are still a bunch of problems that have not been solved. Due to the relaxation of the Chinese New Year, after the year, I will work overtime. I learned a lot in this project, and I can easily find my own shortcomings and lack of experience, this is the first time I wrote a summary and record of the front-end architecture. The project is not very good. New people can look at what logic is learned,

I am a WEB Front-end novice, and I am not proficient in school. When I entered the society, I accidentally mistakenly entered the WEB Front-end. Fortunately, I was not given a red light when I got started.