Front-end page framework construction based on mvc structure and mvc front-end framework construction
After one year of front-end development, I would like to share with you a little bit of development experience I 've learned from my practice. There are many ways to move forward. We have to learn how to make ourselves more efficient in learning and work, as is code.
Next, we will introduce how to set up the front-end framework (layout ).
1. project file structure.
2. index.html page content
1 <!DOCTYPE html> 2
The page layout is in layout.css. The page structure consists of three parts: Top, middle, and bottom. Here we will focus on how js controls file loading. Set a global object in the initial part of js on the page. All business methods and attributes will be linked to this object. In addition to the basic layout, all programs executed on the page will be executed through the APP. controller. index. start () method. This method acts as the control layer. The Code is as follows:
APP.controller = {};APP.controller.index = (function() { var api = {}; api.start = function() { APP.view.index.loadBody(function() { addEvent(); }); } function addEvent() { // add someThing } return api;})()
In the start method, the APP. view. index. loadBody () method acts as the view layer in MVC. The main function is to add elements to the page. The Code is as follows:
APP.view.index = (function() { var api = {}; api.loadBody = function(callback) { $('.header').html(APP.view.common.getBlueHeaderHtml()); callback.call(this); }; return api;})()
Now that you have the APP. view. index. loadBody () method, why should I add an additional common view layer in this method? The answer is simple. We all know that in a project, we cannot only make one page. Here, I extract the code of the public part of the page and put it in a public view layer js independently, in this way, when a new interface is created, it can be quickly referenced from the public module. Coincidentally, since the view layer can be used, can the control layer be used? Here I will only give a brief introduction to the view layer. If you are interested, you can study it yourself or add me to it. I would like to share it with you. Below is the public part of the view layer. The Code is as follows:
APP. view ={}; APP. view. common = (function () {var api ={}; api. getBlueHeaderHtml = function () {return ['<div class = "banner">', '<div class = "page"> ', '<ul class = "pull-right nav icon-nav">,' <li> <A href =" "> homepage </a> </li> ',' <li> <A href =" "> test </a> </li> ',' <li> <A href =" "> score query </a> </li> ',' <li> <A href =" "> personal center </a> </li> ',' </ul> ',' <div class =" logo "> ', '
Through the development of these three modules, we can quickly create different effects for the page header, instead of manually modifying the page structure.
Of course, I will not introduce the model layer in MVC too much. Thank you for your advice. Attachments do not know how to upload (=). If you want the source code, you can directly add it to me.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
