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

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

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. android sdk api结构解析

    一.系统级:android.accounts android.app     1.OS 相关         android.os         android.os.storage         ...

  2. 【转载】svn代码回滚命令

    [说明]转载自 http://www.cnblogs.com/jndream/archive/2012/03/20/2407955.html 取消对代码的修改分为两种情况:   第一种情况:改动没有被 ...

  3. VMware 克隆虚拟机或加载新的已安装虚拟机时System eth0不能使用的解决方法

    近年来的大数据应用特别热,特别是Hadoop和Spark.但大家使用这些分布式文件系统和计算框架都需要一个分布式的集群环境,而大家手头一般没有多余的机器部署master和多个slave节点,就只能在V ...

  4. [转载]mac下homebrew的使用

    该文转自:https://www.zybuluo.com/phper/note/87055 mac系统也是基于unix的系统,所以也继承类很多unix的特性,包括软件的编译,安装等.ubuntu下有快 ...

  5. 【noip2007】树网的核

    题解: 首先我们要知道一个性质:如果有多条直径 这个核不论在哪条直径上 答案都是一样的 这样我们就可以随便找一条直径 在这条直径上枚举核的位置 并且dfs预处理maxlon[i] (i在直径上) 表示 ...

  6. Poj2002 Squares

    题意描述:有一堆平面散点集,任取四个点,求能组成正方形的不同组合方式有多少.相同的四个点,不同顺序构成的正方形视为同一正方形. 思路变迁: 1.最简单的方法,直接暴力搜索,即依次取四个顶点,根据其坐标 ...

  7. SpringMVC日期参数自动绑定

    Controller: @RequestMapping("/addUser") public String addUser(User user) { ... } Model: pu ...

  8. Qt on_pushButton_clicked()的用法【worldsing笔记】

    在Qt里按钮控件默认对应一个on_pushButton_clicked()成员,如果想用点击信号,在代码中实现on_pushButton_clicked()成员即可. 最近看了一段代码,里面并没有co ...

  9. Excel数据导入导出

    1.将sql数据库表中的数据导入到Excel表格里: 方法一.使用StreamWrite对象,这里要注意的是 用“\t”换列,StreamWrite对象的WriteLine方法 一行一行写入. pub ...

  10. IsPostBack

    1.IsPostBack介绍Page.IsPostBack是一个标志:当前请求是否第一次打开. 调用方法为:Page.IsPostBack或者IsPostBack或者this.IsPostBack或者 ...