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

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

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. 如何使用 SPICE client (virt-viewer) 来连接远程虚拟机桌面?

    如何使用 SPICE client (virt-viewer) 来连接远程虚拟机桌面? 什么是SPICE? SPICE (Simple Protocol for Independent Computi ...

  2. 在多线程中进行UI操作

    那么在子线程中的UI操作如何处理呢?有两种方法: 一:在子线程,你需要进行的UI操作前添加dispatch_async函数,即可将代码块中的工作转回到主线程 dispatch_async(dispat ...

  3. Javascript注意事项一【防止浮点数溢出】

    num = 0.1+0.2; //0.30000000000000004 a = (1+2)/10; //0.3(浮点数中的整数运算时精确的)

  4. 查看mysql的注册表路径

    原文地址:http://www.cppblog.com/lanshengsheng/archive/2012/11/23/195592.html

  5. SQL Server里一些未公开的扩展存储过程

    SQL Server里一些未公开的扩展存储过程 [转帖] 博客天地 www.inbaidu.com SQL Server里一些未公开的扩展存储过程 扩展存储过程(xp)是直接运行在SQL Server ...

  6. 剑指OFFER之二叉树中和为某一值的路径（九度OJ1368）

    题目描述: 输入一颗二叉树和一个整数,打印出二叉树中结点值的和为输入整数的所有路径.路径定义为从树的根结点开始往下一直到叶结点所经过的结点形成一条路径. 输入: 每个测试案例包括n+1行: 第一行为2 ...

  7. jeewx的使用_01 接入和验证

    jeewx是java语言的用于开发微信公共平台的一个框架,有人说很臃肿,但个人感觉还不错,仁者见仁智者见智吧, 下面简单介绍工作原理: 1.下载 要使用jeewx需要先下载其源码 jeewx介绍:ht ...

  8. <property name="current_session_context_class">thread</property> 属性

    <property name="current_session_context_class">thread</property>这个属性的作用:这样配置是本 ...

  9. Jfinal极速开发微信系列教程（一）--------------Jfinal_weixin demo的使用分析

    概述: Jfinal_weixin已经出了有好一段时间了!一直在关注当中......最近工作上有需要到这个东西,所以,话了两个小时来看看这个东西,看完demo以后,豁然开朗,原理微信和一般的web项目 ...

  10. Linux下查看CPU型号,内存大小,硬盘空间命令

    1 查看CPU 1.1 查看CPU个数 # cat /proc/cpuinfo | grep "physical id" | uniq | wc -l 2 **uniq命令:删除重 ...