文档章节

前端MVC框架

Reya滴水心
 Reya滴水心
发布于 2016/04/21 16:03
字数 181
阅读 655
收藏 7

前端MVC:V代表View,主要是展示视图;C代表Controller,主要进行事件绑定;M代表Model,主要进行数据请求和操作。

eg:View展示页面,点击View -> 触发Controller,进行事件绑定 -> 调用Model,Model执行 -> 结果展示在View。

下面直接上实例:

View:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>FrontEnd MVC</title>
    </head>
<body>
    <input type="button" value="点击前" id="btn"/>
    <script src="js/model.js"></script>
    <script src="js/controller.js"></script>
</body>
</html>

Controller:

function $(id){
    if(id && typeof id == 'string'){
        return document.getElementById(id);
    }
}

var Controller = new Object();
Controller.register = function(id,event,func,arg){
    if($(id)){
        $(id)['on'+event] = function(){
            func($(id),arg);
        }
    }
}

Controller .register('btn',"click",operator,[1,2,3,4]);

Model:

function operator(element,arg){
    if(Array.isArray(arg)){
        alert(arg.length);
        element.value = '点击后' ;
        alert(arg[0]);
        console.log(arg);
    }
}


© 著作权归作者所有

Reya滴水心
粉丝 39
博文 88
码字总数 34619
作品 0
深圳
前端工程师
私信 提问
加载中

评论(1)

juan_zi
juan_zi
79
前端框架模式的变迁

前言 前端框架的变迁,体系架构的完善,使得我们只知道框架,却不明白它背后的道理。我们应该抱着一颗好奇心,在探索框架模式的变迁过程中,体会前人的一些理解和思考 本篇将讲述的是前端框架...

zimo
2017/09/19
0
0
Web前端框架与类库的思考

说起前端框架,我也是醉了。现在去面试或者和同行聊天,动不动就这个框架碉堡了,那个框架好犀利。   当然不是贬低框架,只是有一种杀鸡焉用牛刀的感觉。网站技术是为业务而存在的,除此毫...

小近
2014/11/03
2.8K
14
Spring MVC介绍

我们知道MVC是一种经典的模式,把视图、控制器以及数据分开,解耦了各模块之间的关系。Spring Web MVC是基于Java实现的Web MVC设计模式,是一个请求驱动类型的轻量级Web框架,也就是借助MVC...

博为峰教研组
2016/11/23
24
0
使用asp.net mvc部分视图渲染html

前端渲染   使用前端模版引擎或MVC框架,例如underscore.js的template或者是使用angular.js等框架,当然也可以不用任何框架自己拼接html。 underscore.js的template渲染html...

xmgdc
2017/07/03
0
0
我的架构经验系列文章 - 前端架构

框架层面:近几年前端发展很快,前端之所以叫前端因为前端是已经可以独立成为一种职业了,js也不再是十年前的玩具了,以前富客户端RIA的应用可能会用flash/flex或是silverlight,现在可以使用...

fadevd
2014/07/29
23
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
今天
2.1K
14
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
38
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
40
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
61
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部