Experience in building front-end architecture_html/css_WEB-ITnose

I have been working in this company for more than half a year, so my feelings towards the company are not revealed. However, I was fortunate to take over a project that I tried my best to do in the last days. (CQM system).
From working in the first company to now, I have also squandered one and a half years of my youth on the website. From the back-end to the front-end, from unfamiliarity to familiarity, I gradually began to steadily and deeply learn the knowledge of the website. .
I have always wanted to make something decent by myself, but I can’t make up my mind every time. 1. I am not capable enough, and 2. I want to be lazy when it comes to time, so this CQM project can be regarded as a small test for me. Check it out.
Ok, let’s get to the point. I am not part of the project department in the company. Due to other reasons, I have the opportunity to be responsible for the front-end framework of this project.
Just as I thought, this is a small OA project, because I am basically fully responsible for the front-end, so the things in it are basically my own ideas.
PS: Due to some internal information, it is not convenient for me to disclose it, please forgive me.

The above picture is a directory structure. Students who have been exposed to Microsoft MVC should see it. That's right, although I do front-end work, I have learned C# and am familiar with Microsoft's MVC. Now I use MVC4. Of course, the IDE I use may also be known to students who know 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 following MVCs are all Microsoft MVC) is a good choice for me, because I only know this. . .

Put aside other folders and focus on the two expanded ones.

statics and views folders. The first [statics] contains some static files, of course ashx is placed Wrong location. This thing needs to be compiled after modification, but this thing is not used much. The second [views] contains the page file.

I am not working with the project team here, I am doing it alone, so the front-end and back-end are completely separated, and I only use some background programming for data testing.
When I was working on the front-end, my general idea was: template layout, control combination generation, and directory structure layout.
How to understand this sentence, I will use a picture to illustrate it below.
                                                                                                                                                                                                                                                                     
The two son files, because there may be an inline frame inside the second layer, the end file also comes out.
The picture below is a sketch of the page layout

As you can see from the picture above, the entire front-end page has 3 layers. Of course, it can also be made into 1 layer, but Because the frame of ifrmae changes a lot, I wrapped it in 3 layers. PS: The left navigation belongs to the second layer.
The json folder in picture 3 stores the json data format required by the website, the ashx folder is used to test server data, and the plugin folder contains various js frame.
zoeDylan is the front-end data processing layer and does not require any other js framework. dgg is the element interaction and element processing layer, using the jq framework.
In summary, that’s it for front-end static files and page data blocks. Next is the views folder.

I won’t talk about other folders, mainly the shared shared folder. .
Same as above, son is the common view file of the second layer, end is the common view file of the third layer, header is the header content, and frame is required by all layers, mainly some file references.

The files on this page are ok, and the next step is to explain the logical ideas.
I started to be very passionate when I was working on this project, but after one month, I felt that it was difficult. Because I found that my ability is not enough, but I have written tens of thousands of lines of code, there must be some use.
The logic of the entire front-end is: the background combines the view templates, and js processes the data and display.

The logic of the page from request to display is like this. The red line means it must be loaded, the green line means it may be loaded, and finally it is presented in the frmae page, {request a page address-template application- Output} Students who know MVC should know how MVC pages are processed, so I won’t go into details here.

ok, the page is loaded, what about the data?
The data I have here is completed by the interaction between json and ajax. During the page processing, a json data request address will be added to the div specified in the template or directly run js. The address will return a json format data, and then js starts processing and generates the content that is finally displayed on the page.

This is the dgg.js file, which is used to process data. Serious students 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, and _father is a function that contains the top-level framework. Why do you do this?
1: dgg inherits zoeDylan .js is to unify functions. If the company needs it, I did it.
2:_father is to call some events on the top page, such as full-screen pop-ups, status display, message push, etc.
Here we mainly talk about the function dgg.element, because the data completion of the page is basically processed by this function.
dgg.element is a handler that creates page components. You pass in a json format data, and then a component will be created based on the component name you specify, and then a jq function component will be returned.

Here are some screenshots of the dgg.element function
                                                                                                                 The latter defines the component template.
The processing logic of dgg.element is: call the development method create-internal processing: jsonSet determines the component, extracts the template style in the template tempLate---calls the corresponding component method in eleTemplate, with For processing component events---calling the setAttr method for processing public element attributes---returning jq function components
Here tempLate can be customized in json data, or you can use dgg.element.template to configure the template and Template method eleTemplate. Here is an example:

Example: Generate a component

I want to generate the above component, and the json format I pass in is

eName in json is the template name. After obtaining json, call dgg.element.create(json) to start the processing steps

1: First, jsonSet processes the data, mainly to determine whether it is multiple components

2: Create components

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

4: Common component attribute processing

This ends the note. Due to the lack of experience of the poster, there were many problems during the construction process, and there are still a lot of them now. The problem has not been solved. Since I am relaxing after the Chinese New Year, I will still work overtime after the New Year. I have learned a lot from this project, and it is easy to find my own shortcomings and lack of experience. I am writing this note this time. A summary and record of my first time writing a front-end architecture. The project is not very good. Newcomers can learn some logic from it. Please give me some advice.

I am a newbie in WEB front-end. I am in school. I am ignorant and have no skills. When I entered the society, I accidentally entered the ranks of WEB front-end. Fortunately, there was no red light for me when I started.