First, let me introduce myself: buns. Been doing it for about 3 years. Now a company is the head of the front end. I usually like to study some technologies and do some design~
last year. I made an HTML5 online editor in my spare time, take this editor as an example, and talk about some experience in building web applications on the front end~
The editor is roughly like this: through some dragging and clicking, the production of an HTML5 mobile page is completed.
Here is my rough production process:
1. Technology selection.
Similar to this kind of web application, the selection of technology is very important, which is related to the later development time and the difficulty of development. There are too many projects that died because the technology selection was not well selected. So be careful. This takes into account the actual nature of the project. I chose jquery, then HTML5, because of the separation of front and back ends, as for the technology used in the backend, I won't talk much about it. I have considered angluarjs before, but considering that this editor does not interact frequently with the server, it is cumbersome to use, and other hidden problems have to be dealt with, so I gave up, because there will be more JS code, and the use of modular tools is a must , so I chose seajs.
2. Build the front-end development environment.
After choosing the technology, it is essential to develop an automated environment. Here, grunt is chosen because there are not too many CSS, and there is only one page. There is no use of sass/less here. Automation mainly deals with merging of some JS modules and so on.
3. Object-oriented programming thinking construction framework.
All set, time to write code? Don't worry, this is a common problem for many programmers - writing code in a hurry~ We haven't built the project framework yet. Think about it carefully, what are the classes that can be extracted in this project? Anyone who has played PS knows that this thing has a lot in common with PS, so I borrowed some things from PS.
Classes: Page, Single Page, Layer
Properties: animations, functions, parameters.
Relationship: The page contains a single page, and a single page consists of multiple layers. Animation is the property of the layer, function is the property of all classes, and parameter is the property of the layer.
Well, the big relationship is sorted out. I don't care about small relationships here (I'm lazy)~
Then start writing code. Create 3 new classes and inherit them layer by layer. Because functions are special, all classes involve functions. The functions are classified here.
It's better to write a separate JS to store the configuration information, so that we don't have to look around when modifying the parameters.
Of course, we can encapsulate some commonly used methods into plug-ins, such as: (drag method, slider plug-in, drag-sort, pop-up window plug-in, image upload plug-in, custom drop-down selection box, etc.) Remember: can be packaged into plug-ins They are all encapsulated into plug-ins, so that when writing code, we can focus on business logic and not disturb our thinking because of those non-logical codes~
4. Write code: from the whole to the local.
Writing code is also very particular. We first write the framework, and then modularize the code. The details can be omitted first, but the naming must be done well, but I usually write a console.log, if you If you have subordinates, then congratulations, the work of coding bricks can be handed over to them~ The whole is complete.
Then there is the code brick, the code brick, the code brick~ The important things are said three times~
If you don't have data, you can make one yourself~ Try to run it~ After there is no problem, connect the data with the background. Front and rear separation. This will also be much more efficient. My friend and I are two people, he is the backend, I do the front-end + design, and use the spare time of work to complete the system in 1 month~
5. Release online.
Before the final release, remember to merge JS, I wrote it by myself, so the modules are not too finely divided, and there are more than 30 JS files large and small. If you use it directly, you need to send more than 30 requests to the server. Considering the efficiency problem, the js is modularized and merged with grunt, and then the compression is much smaller instantly. Finally finished, you can sit down and have a cup of coffee and appreciate your own work, a sense of accomplishment inexplicably welled up in my heart~
(attached online URL: h5ds.com)