Front-end page framework construction based on mvc structure_html/css

Front-end page framework construction based on mvc structure_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:39:59

Original

1558 people have browsed it

I have been developing front-end for a year, and I would like to share with you a little bit of development experience that I have summarized from my own practice. Life is bound to be bumpy and bumpy, and there are many ways forward. We all have to learn how to make ourselves more efficient when it comes to study and work, and the same is true for code.

Next, I will introduce the front-end framework construction (layout construction) that I summarized.

1. Project file structure.

2, index.html page content

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>index</title> 6     <link rel="stylesheet" href="css/layout.css"> 7     <link rel="stylesheet" href="css/bs.cut.min.css"> 8 </head> 9 <body>10     <div id="container">11         <div class="header"></div>12         <div class="contain"></div>13         <div class="footer"></div>14     </div>15 </body>16 <script>17     window.APP = {};18 </script>19 <script type="text/javascript" src="/framebj/thirdparty/jquery/1.11.1/jquery.min.js"></script>20 <script src="js/controller/index.js"></script>21 <script src="js/view/common.js"></script>22 <script src="js/view/index.js"></script>23 <script>24     $(function() {25         APP.controller.index.start();26     })27 </script>28 </html>

Copy after login

The page layout style Mainly in layout.css. The page structure consists of upper, middle and lower parts. The focus here is on how js controls file loading. At the very beginning of the page's js, set a global object. All business methods and properties will be linked to this object. In addition to the basic layout on the page, all other program execution will be started 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;})()

Copy after login

Among them, 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;})()

Copy after login

Here you will think that since there is already the method APP.view.index.loadBody(), why do I Do I need to add an additional common view layer to this method? The answer is simple. We all know that in a project, we cannot only make one page. Here I extracted the code of the public part of the page and put it independently in a common view layer js. In this way, when creating a new interface, it can be quickly referenced from the public module. Coincidentally, since the view layer can do it, can the control layer also do it? Here I will only give a brief introduction to the view layer. If you are interested, you can study it yourself, or add me. I will be happy 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" style="top: 16px;">',            '<li><img src="http://placehold.it/48x48"><a href="">首页</a></li>',            '<li><img src="http://placehold.it/48x48"><a href="">考试</a></li>',            '<li><img src="http://placehold.it/48x48"><a href="">成绩查询</a></li>',            '<li><img src="http://placehold.it/48x48"><a href="">个人中心</a></li>',            '</ul>',            '<div class="logo">',            '<h1>福建业余无线电操作能力考试</h1>',            '</div>',            '</div>',            '</div>'        ].join('');    }    api.getGreenHeadHtml = function() {        // do same different html    }    return api;})()

Copy after login

Through the development of these three modules, we can quickly create different effects for the page header without having to do it manually. Modify the page structure.

Of course, I won’t introduce too much about the model layer in MVC in this article. Welcome everyone's advice. I don’t know how to upload the attachment (==). If you want the source code, you can add me directly.