簡潔的先後端分類框架

(function(){

    window.Youmi = {};

    Youmi.VERSION = "友吃1.2";

    var Events = Youmi.Events = {

        on: function(name, callback, context) {
            this._events || (this._events = {});
            var events = this._events[name] || (this._events[name] = []);
            events.push({callback: callback, context: context, ctx: context || this});
            return this;
        },
        trigger:function(name,opts){
            var events = this._events[name];
            for(var i = 0; i < events.length; i++){
                events[0].callback.call(events[0].ctx,opts);
            }
        }

    }


    var eventSplitter = /\s+/;


    var View = Youmi.View = function(options){

        this.setElement();
        this.delegateEvents();
        options || (options = {}); // 配置的可選項
        _.extend(this, _.pick(options, 'model'))
        this.initialize.apply(this, arguments);

    }
    var delegateEventSplitter = /^(\S+)\s*(.*)$/;

    _.extend(View.prototype,Events,{

        initialize: function(){},

        render: function() {
            return this;
        },
        delegateEvents: function(events) {

            if (!(events || (events = _.result(this, 'events')))) return this;

           // this.undelegateEvents();
            for (var key in events) {
                var method = events[key];
                if (!_.isFunction(method)) method = this[events[key]];
                if (!method) continue;

                var match = key.match(delegateEventSplitter);
                var eventName = match[1], selector = match[2];

                method = _.bind(method, this);
                eventName += '.delegateEvents';

               //$(selector).on(eventName, method);

                this.$el.on(eventName, selector, method);
            }
            return this;
        },

        undelegateEvents: function() {
            this.$el.off('.delegateEvents' + this.cid);
            return this;
        },

        setElement: function(){

            this.$el = this.el ? $(this.el) : $("body");

            this.el = this.$el[0];
        }

    });

    var Model = Youmi.Model =  function(attributes,options){

        var attrs = attributes || {}; // 數據
        options || (options = {}); // 配置的可選項
        this.changed = {};// 記錄當前model有那些東西更改了
        this.initialize.apply(this, arguments); // 初始化

    }

    _.extend(Model.prototype, Events, {

        initialize: function(){},

        toJSON: function(options) {
            return _.clone(this.attributes);
        },
        set:function(key,val){

            var  attrs,next,curr;

            if( typeof key == "object"){
                attrs = key;
            }else{
                (attrs = {})[key] = val;
            }
            curr = this.attrs;
            next = _.extend({},curr,attrs);
            this.attrs = next;

            return this;
        },
        get:function(attr){
            return this.attrs[attr];
        },
        has: function(attr) {
            return this.get(attr) != null;
        }

    })

    var extend = function(protoProps, staticProps) {
        var parent = this;
        var child;
        if (protoProps && _.has(protoProps, 'constructor')) {
            child = protoProps.constructor;
        } else {
            child = function(){ return parent.apply(this, arguments); };
        }

        _.extend(child, parent, staticProps);

        var Surrogate = function(){ this.constructor = child; };
        Surrogate.prototype = parent.prototype;
        child.prototype = new Surrogate;


        if (protoProps) _.extend(child.prototype, protoProps);


        child.__super__ = parent.prototype;

        return child;
    };
    /*
    var extend = function(protoProps, staticProps) {
        var parent = this;
        var child;

        if (protoProps && _.has(protoProps, 'constructor')) {
            child = protoProps.constructor;
        } else {
            child = function(){ return parent.apply(this, arguments); };

        }
        _.extend(child, parent, staticProps);

        var Surrogate = function(){ this.constructor = child; };
        Surrogate.prototype = parent.prototype;
        child.prototype = new Surrogate;

        if (protoProps) _.extend(child.prototype, protoProps);
        child.__super__ = parent.prototype;
        return child;
    };*/

    Model.extend = View.extend  = extend;


})()

　　

define(['text!home/homeTpl.html','../static/js/TouchSlide.1.1.js'], function (tpl) {

    var homeView = Youmi.View.extend({
        el: '#content', //render在哪位置

        events: {
            'tap .discount-list li': 'clickSpan'     //使用代理監聽交互，好處是界面即便從新rander了，事件還能觸發，不須要從新綁定。若是使用zepto手工逐個元素綁定，當元素刷新後，事件綁定就無效了
        },

        initialize: function () {
            this.model.on('tplEvent', this.render, this);      //監聽事件
        },

        render: function () {

            this.$el.html(_.template(tpl, this.model.get('data')));     

            // banner
            TouchSlide({
                slideCell:"#banner",
                mainCell:".bd1 ul",
                effect:"left",
                interTime:5000,
                switchLoad:"_src",
                autoPage:false,//自動分頁
                autoPlay:true //自動播放
            });
            this.waitLoad($('.money-product li img'))
            $(window).on("scroll",this.bindFunction(this,this.waitLoad,$('.money-product li img')))
        },
        waitLoad:function(tag){
            var loadTag = tag;

            setTimeout(function(){
                $.each(loadTag,function(i,v){
                    var self = $(v);
                    if(($(window).height() + $(window).scrollTop() > self.offset().top) && !self[0].show){
                        var img = new Image();
                        self[0].show = true;
                        img.node = self;
                        img.onload = function(){
                            this.node.css("opacity",0);
                            this.node.attr("src",this.node.attr("_src"));
                            this.node.animate({opacity:100},300);
                        };

                        img.src = self.attr("_src")
                    }
                });


            },200);
        },
        clickSpan: function (e) {
       //   alert( $(e.currentTarget).index());
        },
        bindFunction:function(obj, func,agrs){
            return function(){
                func.call(obj, agrs);
            }
        }
    });

    return homeView;
});

　　

define([],function(){

    var homeModel = Youmi.Model.extend({

        //定義一些方法
        fetch:function(){

            var self = this;
            $.ajax({
                type: 'POST',
                url: youmiApp.WapSiteUrl + youmiApp.Ports["home"],
                dataType: 'json',
                success: function (data) {
                    self.set({data:data.result});

                    self.trigger("tplEvent");
                }
            });
        }

    });

    return homeModel;

});