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

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

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. leetcode—Best Time to Buy and Sell stocks III

    1.题目描述 Say you have an array for which the ith element is the price of a given stock on day i.   Des ...

  2. Spark生态之Spark BlinkDB

  3. [iOS基础控件 - 6.4] 汽车品牌展示 Model嵌套/KVC/TableView索引

    A.需求 1.使用汽车品牌名称头字母为一个Model,汽车品牌为一个Model,头字母Model嵌套品牌Model 2.使用KVC进行Model封装赋值 3.展示头字母标题 4.展示索引(使用KVC代 ...

  4. svn访问权限控制

    [customer:/]qa = rwreadonly = ryinqixian = r@haowu_partner_dev = r@admin = rw[customer:/branches/v1. ...

  5. ALAssetsLibrary学习总结

    添加AssetsLibrary.framework 然后引入 #import <AssetsLibrary/ALAssetsLibrary.h> 一个获取所有图片的类 #import &l ...

  6. Extjs4---Cannot read property 'addCls' of null

    用MVC做后台管理系统时遇到的问题,关于tab关闭后再打开不显示,或者报错 我在新的tabpanel中加入了一个grid,当我关闭再次打开就会报错Cannot read property 'addCl ...

  7. UVa 127 - "Accordian" Patience

    题目:52张扑克,从左到右在平面上排列,按着如下规则处理: 1.按照从左到右的顺序,如果一张牌和左边的第一张或者第三张匹配,就把它放到对应的牌上面. 2.如果可以移动到多个位置,移动到最左端的牌上面. ...

  8. (二) win8+XAML Binding(数据绑定)

    第一次接触Binding是用到listview的时候,ListView中如果要动态显示一些内容,我一开始想的就是动态生成一个item,然后插入... 其实用Binding就不用在代码中涉及listvi ...

  9. MFC 学习之 鼠标移动到Toolbar按钮上显示提示信息（tooltip）,状态栏也随之改变

    1.在ResourceView里加入Toolbar资源,命名IDR_TOOLBAR1 2.在主程序的.h文件中加入变量:           CToolBar m_toolbar;CImageList ...

  10. Python、C和Java对比

    先上一个Python小测试: #!/usr/bin/env python #coding=utf-8 ''' 等腰三角形 ''' for i in range(1,6): print ' '*(6-i ...