js數據層中間件單頁運用簡單構思和應用案例

案例1:
 


<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
     <script src="jquery-2.2.1.min.js" type="text/javascript"></script>
     <script type="text/javascript">
        $(document).ready(function () {
            //定義一個controller
            var piliController = {
                //選擇視圖
                start: function () {
                    this.view.start();
                },
                //將用戶操做映射到模型更新上
                set: function (name) {
                    this.model.setPerson(name);
                }
            };
            piliController.model = {
                //此數據從中間數據層拿json.data(經中間件(簡單作法封轉一個頁面全部的業務請求接口一個ajax請求回調搞定)批量查詢後的靜態資源)並處理填充
                piliKV: {
                    '葉小釵': '刀狂劍癡',
                    '一頁書': '百世經綸',
                    '素還真': '清香白蓮'
                },
                curPerson: null,
                //數據模型負責業務邏輯和數據存儲
                setPerson: function (name) {
                    this.curPerson = this.piliKV[name] ? name : null;
                    this.onchange();
                },
                //通知數據同步更新
                onchange: function () {
                    piliController.view.update();
                },
                //相應視圖對當前狀態的查詢
                getPiliAction: function () {
                    return this.curPerson ? this.piliKV[this.curPerson] + this.curPerson : '???';
                }
            };
            //=======================================================================
            // 如下爲界面代碼,當要調整界面,改這裏就行啦~~~
            piliController.view = {
                //用戶觸發change事件
                start: function () {
                    $('#pili').change(this.onchange);
                },
                onchange: function () {
                    piliController.set($('#pili').val());
                },
                update: function () {
                    $('#end').html(piliController.model.getPiliAction());
                }
            };
            //=======================================================================
            piliController.start();
        });
    </script>
</head>
<body>
    <select id="pili">
     <option value="葉小釵">葉小釵</option>
        <option value="一頁書">一頁書</option>
        <option value="素還真">素還真</option>
    </select>
    <div id="end"></div>
</body>
</html>


案例2


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src=" http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
        $(function () {
            var Countries = function () { }

            Countries.prototype = {
                _items: [],
                _getData: function (success) {
                     //此數據從中間數據層拿json.data(經中間件(簡單作法封轉一個頁面全部的業務請求接口一個ajax請求回調搞定)批量查詢後的靜態資源)並處理填充
                    var items = [
                       { id: 0, name: '中國' },
                       { id: 1, name: '日本' },
                       { id: 2, name: '美國' }
                    ];
                    $.extend(this._items, items);
                    success(items);
                },
                //Events
                on_selected: $.Callbacks(),
                on_inserted: $.Callbacks(),
                //Methods
                select: function () {
                    var self = this;
                    this._getData(function (items) {
                        self.on_selected.fire({
                            sender: self,
                            items: items
                        });
                    });
                },
                insert: function (item) {
                    var self = this;
                    this._items.push(item);
                    self.on_inserted.fire({ sender: self, item: item });
                }
            }

            //=======================================================================
            // 如下爲界面代碼,當要調整界面,改這裏就行啦~~~
            var countries = new Countries();
            countries.on_selected.add(function (args) {
                $(args.items).each(function () {
                    $('#countries').append($('<option>').attr('value', this.id).text(this.name));
                });
            });

            countries.on_inserted.add(function (args) {
                $('#countries').append($('<option selected="selected">').attr('value', args.item.id).text(args.item.name));
            });

            var id = 10;
            $('#btnAdd').click(function () {
                countries.insert({ id: ++id, name: $('#countryName').val() });
            });

            countries.select();
            //=======================================================================
        });

    </script>
</head>
<body>
    <select id="countries"></select>
    <div>
        <input id="countryName" /><button id="btnAdd">添加列表item</button>
    </div>
</body>
</html>
相關文章
相關標籤/搜索