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

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

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. wxWidgets Tutorial

    wxWidgets Tutorial网站整理 两个重要的教程网站:1:点这里:2:点这里. 还有一个wxWidgets项目参考的网站:点这里. 已经翻译好的中文教程:点这里. 参考书籍:<wxW ...

  2. HDU-4686 Arc of Dream 构造矩阵

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4686 因为ai = ai-1*AX+AY ,bi = bi-1*BX+BY ,那么ai*bi=AX*B ...

  3. Keil C51汉字显示的bug问题

    一.缘起 这两天改进MCU的液晶显示方法,采用“即编即显”的思路,编写了一个可以直接显示字符串的程序.如程序调用disstr("我是你老爸");液晶屏上就会显示“我是你老爸”. 二 ...

  4. jQuery语法总结及注意事项

    1.关于页面元素的引用通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom ...

  5. Mac OS环境下媒体文件分割工具mediafilesegmenter的简单使用(生成M3U8 TS文件)

    mediafilesegmenter是苹果开发的一款用于分割媒体文件的工具,其功能与mediastreamsegmenter相似,但操作更简单. * 具体可以对比博客中的另一篇简介<Mac OS ...

  6. sublime text3的一些小技巧记录（配gif图）

    缓慢更新 1.同时操作多行数据. 示例: 选择你需要的块,然后按ctrl+shift+L键,然后再按end或者home键.

  7. Ms SQL Server 约束和规则

    一.SQL约束 约束定义关于列中允许值的规则,是强制完整性的标准机制. 使用约束优先于使用触发器.规则和默认值.查询优化器也使用约束定义生成高性能的查询执行计划. 1:类型 约束的类型一共分三种 域约 ...

  8. 剑指OFFER之丑数（九度OJ1214）

    题目描述: 把只包含因子2.3和5的数称作丑数(Ugly Number).例如6.8都是丑数,但14不是,因为它包含因子7.习惯上我们把1当做是第一个丑数.求按从小到大的顺序的第N个丑数. 输入: 输 ...

  9. 编写一个Java应用程序，设计一个汽车类Vehicle，包含的属性有车轮个数 wheels和车重weight。小车类Car是Vehicle的子类，其中包含的属性有载人数 loader。卡车类Truck是Car类的子类，其中包含的属性有载重量payload。每个 类都有构造方法和输出相关数据的方法。最后，写一个测试类来测试这些类的功 能。

    package car; public class Vehicle { //定义成员变量 private int wheels; private double weight; public int g ...

  10. CentOS 6.5 下载地址

    CentOS 6.5 主要改动 Precision Time Protocol(精确时间协议)—— 原先是项技术预览 —— 现在已获全面支持.以下驱动程序支持网络时间戳印:bnx2x.tg3.e100 ...