前端开发一年了，向大家交流下自己实践总结下来的一点点开发心得。人生难免磕磕碰碰，前进的道路很多，在学习工作上我们都得学会如何让自己过的更高效，代码亦是如此。

下面，开始介绍自己总结的前端框架搭建（布局搭建）。

1，项目文件结构。

2，index.html页面内容

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <link rel="stylesheet" href="css/layout.css">

     <link rel="stylesheet" href="css/bs.cut.min.css">

 </head>

 <body>

     <div id="container">

         <div class="header"></div>

         <div class="contain"></div>

         <div class="footer"></div>

     </div>

 </body>

 <script>

     window.APP = {};

 </script>

 <script type="text/javascript" src="/framebj/thirdparty/jquery/1.11.1/jquery.min.js"></script>

 <script src="js/controller/index.js"></script>

 <script src="js/view/common.js"></script>

 <script src="js/view/index.js"></script>

 <script>

     $(function() {

         APP.controller.index.start();

     })

 </script>

 </html>

其中页面布局样式主要在layout.css中。页面结构包含上、中、下三部分，这里重点讲的是关于js如何控制文件载入。在页面的js最开始的部分，设置一个全局对象。所有的业务方法以及属性都将与这个对象挂钩。页面上除了基本的布局之外，其他的所有程序执行，，都将通过APP.controller.index.start()方法开始执行。其中这个方法充当控制层。代码如下：

APP.controller = {};

APP.controller.index = (function() {

    var api = {};

    api.start = function() {

        APP.view.index.loadBody(function() {

            addEvent();

        });

    }

    function addEvent() {

        // add someThing

    }

    return api;

})()

其中，在start方法中，APP.view.index.loadBody()方法，充当的是MVC中的视图层，主要的作用用，就是给页面增加元素。代码如下：

APP.view.index = (function() {

    var api = {};

    api.loadBody = function(callback) {

        $('.header').html(APP.view.common.getBlueHeaderHtml());

        callback.call(this);

    };

    return api;

})()

在这里大家就会觉得，既然已经有了APP.view.index.loadBody()这个方法了，为什么我还要在这方法里面添加额外的common视图层呢？答案很简单，我们都知道，一个项目中，我们不可能只做一个页面，这里我将页面公共部分的代码抽离了出来，独立的放在一个公共的视图层js里面，这样，在创建新的界面时，就可以很快从公共模块中引用，无独有偶，既然视图层可以，控制层是不是也可以呢？这里我只做视图层的简单介绍，如果大家感兴趣可以自己研究，或者加我，很乐意和大家分享。下面是视图层的公共部分了。代码如下：

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;

})()

通过这三个模块的开发，我们可以很快的为页面头部制作不同效果，而不用手动的去修改页面结构。

当然，MVC中的模型层，这篇幅中我就不做过多的介绍了。欢迎大家指点。 附件不知道怎么传（= =），如果大家想要源码，可以直接加我。

基于mvc结构的前端页面框架搭建的更多相关文章

  1. [Vue 牛刀小试]：第十六章 - 针对传统后端开发人员的前端项目框架搭建

    一.前言 在之前学习 Vue 基础知识点的文章中,我们还是采用传统的方式,通过在 html 页面上引用 vue.js 这个文件,从而将 Vue 引入到我们的项目开发中.伴随着 Node.js 的出现, ...

  2. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（2）-easyui构建前端页面框架[附源码]

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(2)-easyui构建前端页面框架[附源码] 开始,我们有了一系列的解决方案,我们将动手搭建新系统吧. 用 ...

  3. 基于SpringMVC下的Rest服务框架搭建【1、集成Swagger】

    基于SpringMVC下的Rest服务框架搭建[1.集成Swagger] 1.需求背景 SpringMVC本身就可以开发出基于rest风格的服务,通过简单的配置,即可快速开发出一个可供客户端调用的re ...

  4. Struts2是一个基于MVC设计模式的Web应用框架

    Struts2是一个基于MVC设计模式的Web应用框架,它本质上相当于一个servlet,在MVC设计模式中,Struts2作为控制器(Controller)来建立模型与视图的数据交互. Struts ...

  5. 基于MVC设计模式的Web应用框架：struts2的简单搭建（一）

    Struts2的初步介绍 Struts2是apache项目下的一个web 框架,普遍应用于阿里巴巴.京东等互联网.政府.企业门户网站.虽然之前存在了很大的安全漏洞,在2013年让苹果.中国移动.中国联 ...

  6. [原创]基于VueJs的前后端分离框架搭建之完全攻略

    首先请原谅本文标题取的有点大,但并非为了哗众取宠.本文取这个标题主要有3个原因,这也是写作本文的初衷: (1)目前国内几乎搜索不到全面讲解如何搭建前后端分离框架的文章,讲前后端分离框架思想的就更少了, ...

  7. 基于Python3.7 Robot Framework自动化框架搭建

    一.Robot Framework 和 Selenium 的区别(面试常问) 主流自动化测试框架有Robot Framework 和 Selenium,请根据实际场景选用不同的框架,以下总结各自优缺点 ...

  8. 基于MVC和Bootstrap的权限框架解决方案 一．搭建HTML

    因为某些原因,因为需要,最新要做一套客户管理系统,但是不满足于仅有的框架. 看了很多大牛写的框架,强大是强大,代码也太TM多了,乱七八糟话不多说,开始吧 随便在网上找到一套好看的HTML,看起来还不错 ...

  9. ASP.NET MVC5+EF6+EasyUI 后台管理系统（2）-easyui构建前端页面框架[附源码]

    系列目录 前言 为了符合后面更新后的重构系统,本文于2016-10-31日修正一些截图,文字 我们有了一系列的解决方案,我们将动手搭建新系统吧. 后台系统没有多大的UI视觉,这次我们采用的是标准的左右 ...

随机推荐

  1. HDU-4671 Backup Plan 构造解

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4671 假设是3 m,首先按照第一列按照1 2 3 1 2 3 1...排下去,然后个数就是一个 (m/ ...

  2. 【转】可执行程序包括BSS段、数据段、代码段

    可执行程序包括BSS段.数据段.代码段(也称文本段). 一.BSS BSS(Block Started by Symbol)通常是指用来存放程序中未初始化的全局变量和静态变量的一块内存区域.特点是:可 ...

  3. nyoj 16 矩形嵌套

    矩形嵌套 时间限制:3000 ms  |  内存限制:65535 KB 难度:4   描述 有n个矩形,每个矩形可以用a,b来描述,表示长和宽.矩形X(a,b)可以嵌套在矩形Y(c,d)中当且仅当a& ...

  4. [iOS基础控件 - 6.2] LOL英雄列表 UITableView单项显示

    A.需求 1.使用只有一个section的TableView来显示LOL 的英雄列表 2.内容包括标题.副标题.图标 3.使用plain样式 4.使用MVC模式     heros.plist 文件结 ...

  5. MFRCC522 SPI无法通讯【worldsing笔记】

    用单片机于MRFC522与单片接时,加上485通讯后出现很诡异的像: 只要485芯片上有收到外部发送的信号时RC522就死掉,经过仿真卡在了SPI的收发部分(等待回复) u8 MFRC522Write ...

  6. sizeof _countof _tcslen的比较

    sizeof ----用于计算数组或其他对象的大小,以字节为单位,含\0结束符. _countof----一个宏,用于计算数组的实际元素个数 ,含\0结束符: _tcslen----c++求数组长度的 ...

  7. Android项目实战--手机卫士24--程序锁的实现以及逻辑

    昨天我们已经把程序全部读取出来,显示到界面上了,那今天,我们就来讲一下那个程序锁的实现啦.其实也很简单啦,我们主要就是把用户要锁定的程序放到一个表里面,然后就监听手机里面的任务栈,如果发现任务栈里面出 ...

  8. Fragment详解

    1 Fragment简介 1.1 Fragment的设计初衷 Android3.0引入Fragment的初衷是为大屏幕的设备提供更加灵活的动态UI设计,由于大屏设备可以容纳更多的UI组件,且这些UI组 ...

  9. flex开发小技巧集锦

    关于flex开发网上有非常多的相关信息介绍,因此我们要想学习关于flex开发的知识信息技能是一件非常简单和方便的事情.而针对于flex开发小编要告诉大家的是一些flex开发小技巧.利用这些小技巧能够有 ...

  10. 【转】Android studio 导入github工程

    http://blog.csdn.net/feixiaku/article/details/45155587/ 从github下载两个开源项目: PagerSlidingTabStrip    |   ...