学习MCRV模式

引用 《前端开发中的MCRV模式 》

随着系统页面的脚本控制越来越多，大量的数据处理和界面控制代码散落在页面的角落，系统的修改越来越费劲，感觉js已经不不能仅仅作为网页特效的控制工 具，在了解的很多资料后，前端设计也慢慢变成一个和后台代码一样重要的东西了，他也需要良好的代码和系统结构，而不仅仅作为一个单纯的页面辅助的脚本了。 在后端（这里就是后台代码）mvc盛行的今天，他其实也可以用在js方面。在百度前端上看到篇文章《前端开发中的MCRV模式 》，这里下面的实例代码基本都是借鉴于原文的代码。

本文的代码主要是用jsfiddle 来写代码的，它实在太方便了。当然除了这样原生态（基本不依赖第三方，除了jquery）的写法还是很好理解的，但是这在大系统里面还是可以考虑类似Knockout.js等框架的适用，毕竟其强调模板和绑定可以节约大量时间。

<div id="demo"></div>
<div id="message"></div>
<div class="update">
    <div><label>ID</label><input id="txtId" type="text"></div>
    <div><label>Value</label><input id="txtValue" type="text"></div>
</div>
<div>
    <button id="btnSet">Set</button>
</div>​

 

table{ border:1px solid black; border-collapse:collapse;}
table td{ border:1px solid black; width:200px; height:30px; text-align:center}
.update{ position: relative ; margin-top : 10px; }
.update div{ margin: 5px; }
.update label{ display: block;text-align: right; left: 0; position: absolute; width:100px;}
.update input{ width: 100px; position: relative; margin-left: 120px;}​

 

$(document).ready(function() {
    function FlightModel() {
        this.init = function() {
            this.data = [
                { id: 1, airline: "HO1252"},
                { id: 2, airline: "MU5138"}
            ];
        }

        this.getFlightList = function() {
            return this.data;
        }

        this.getFlightById = function(id) {
            for (var i = 0; i < this.data.length; i++) {
                if (this.data[i].id == id) return this.data[i];
            }
            return null;
        }
    }

    function FlightRenderer() {
        this.init = function() {
            var me = this;
            $('.getprice').live('click', function() {
                var id = $(this).attr('cid');
                me.controller.beginUpdate(id);
            });
            $("#btnSet").bind("click", function() {
                me.controller.setAirline($("#txtId").val(), $("#txtValue").val());
            });
        }
        
        this.beginUpdate=function(flight){
            $("#txtId").val(flight.id);
            $("#txtValue").val(flight.airline);
        }
        this.updateFlight = function(flight) {
            if (flight) {
                var html = "";
                html += "<td>" + flight.airline + "</td>";
                html += "<td><button class='getprice' cid='" + flight.id + "'>getprice</button></td>";
                $("#tr" + flight.id).html(html);
            }
        }
        this.renderFlightList = function(flightList) {
            var html = [];
            $.each(flightList, function() {
                html.push("<tr id='tr" + this.id + "'>");
                html.push("<td>" + this.airline + "</td>");
                html.push("<td><button class='getprice' cid='" + this.id + "'>getprice</button></td>");
                html.push("</tr>");
            });
            $("#demo").append("<table>" + html.join("") + "</table>");
        }
    }

    function FlightController() {
        this.init = function() {
            this.initFlightList();
        }
        this.initFlightList = function() {
            var list = this.model.getFlightList();
            this.renderer.renderFlightList(list);
        }
        this.showMessage = function(id) {
            var flight = this.model.getFlightById(id);
        }
        this.beginUpdate=function(id){
            var flight=this.model.getFlightById(id);
            this.renderer.beginUpdate(flight);
        }
        
        this.setAirline = function(id, airline) {
            var flight = this.model.getFlightById(id);
            if (flight) {
                flight.airline = airline;
                this.renderer.updateFlight(flight);
            }
        }
    }

    function MCR(Controller, Model, Renderer) {
        this.controller = new Controller();
        this.model = new Model();
        this.renderer = new Renderer();
        this.controller.model = this.model;
        this.controller.renderer = this.renderer;
        this.model.controller = this.controller;
        this.renderer.controller = this.controller;
        if (typeof this.model.init == "function") {
            this.model.init();
        }
        if (typeof this.renderer.init == "function") {
            this.renderer.init();
        }
        if (typeof this.controller.init == "function") {
            this.controller.init();
        }
    }
    var mcr = new MCR(FlightController, FlightModel, FlightRenderer);
});​