Backbone.js同步机制 #

Sync职责
├── 模型CRUD操作
├── 集合批量操作
├── RESTful API交互
└── 数据持久化

var User = Backbone.Model.extend({
    urlRoot: '/api/users'
});

var user = new User({ id: 1 });
user.fetch();

var User = Backbone.Model.extend({
    urlRoot: '/api/users'
});

var user = new User({ id: 1 });

user.fetch({
    success: function(model, response) {
        console.log('获取成功:', model.toJSON());
    },
    error: function(model, response) {
        console.log('获取失败:', response.status);
    }
});

var Users = Backbone.Collection.extend({
    url: '/api/users'
});

var users = new Users();

users.fetch({
    success: function(collection, response) {
        console.log('获取成功:', collection.length);
    }
});

user.fetch({
    data: { fields: 'name,email' },
    reset: true,
    parse: true,
    success: function() {},
    error: function() {}
});

user.fetch().then(function() {
    console.log('获取成功');
}).fail(function() {
    console.log('获取失败');
});

var user = new User();

user.save({ name: '张三', email: 'zhangsan@example.com' }, {
    success: function(model) {
        console.log('创建成功, ID:', model.id);
    }
});

var user = new User({ id: 1 });

user.fetch().then(function() {
    user.save({ name: '李四' });
});

user.save(attrs, {
    wait: true,
    validate: true,
    patch: false,
    success: function() {},
    error: function() {}
});

user.save({ name: '新名字' }, { patch: true });

user.save({ name: '张三' }, {
    wait: true,
    success: function() {
        console.log('保存成功');
    }
});

var user = new User({ id: 1 });

user.destroy({
    success: function() {
        console.log('删除成功');
    }
});

user.destroy({
    wait: true,
    success: function() {},
    error: function() {}
});

user.destroy({
    wait: true,
    success: function() {
        console.log('服务器确认删除');
    }
});

var user = new User();

user.destroy();

user.on('request', function(model, xhr, options) {
    console.log('请求已发送');
});

user.fetch();

user.on('sync', function(model, response, options) {
    console.log('同步成功');
});

user.fetch();

user.on('error', function(model, response, options) {
    console.log('同步失败:', response.status);
});

user.fetch();

user.on('destroy', function(model, collection, options) {
    console.log('模型已销毁');
});

user.destroy();

Backbone.sync = function(method, model, options) {
    console.log('方法:', method);
    console.log('模型:', model);
    console.log('选项:', options);
    
    return Backbone.ajaxSync(method, model, options);
};

var User = Backbone.Model.extend({
    urlRoot: '/api/users',
    
    sync: function(method, model, options) {
        options = options || {};
        options.headers = {
            'X-Custom-Header': 'value'
        };
        
        return Backbone.sync(method, model, options);
    }
});

var AuthModel = Backbone.Model.extend({
    sync: function(method, model, options) {
        options = options || {};
        options.headers = _.extend({
            'Authorization': 'Bearer ' + localStorage.getItem('token')
        }, options.headers);
        
        return Backbone.sync(method, model, options);
    }
});

var LoadingModel = Backbone.Model.extend({
    fetch: function(options) {
        var self = this;
        
        this.trigger('loading:start');
        
        options = options || {};
        var success = options.success;
        var error = options.error;
        
        options.success = function() {
            self.trigger('loading:end');
            if (success) success.apply(this, arguments);
        };
        
        options.error = function() {
            self.trigger('loading:end');
            if (error) error.apply(this, arguments);
        };
        
        return Backbone.Model.prototype.fetch.call(this, options);
    }
});

var RetryModel = Backbone.Model.extend({
    maxRetries: 3,
    
    sync: function(method, model, options) {
        var retries = 0;
        var self = this;
        
        function attempt() {
            return Backbone.sync(method, model, options)
                .fail(function(xhr) {
                    if (xhr.status >= 500 && retries < self.maxRetries) {
                        retries++;
                        console.log('重试第', retries, '次');
                        return attempt();
                    }
                });
        }
        
        return attempt();
    }
});

var CachedModel = Backbone.Model.extend({
    cache: {},
    cacheTTL: 5 * 60 * 1000,
    
    fetch: function(options) {
        options = options || {};
        
        if (options.cache !== false) {
            var cached = this.getCache();
            if (cached) {
                this.set(cached.data);
                return $.Deferred().resolve().promise();
            }
        }
        
        var self = this;
        return Backbone.Model.prototype.fetch.call(this, options)
            .done(function() {
                self.setCache();
            });
    },
    
    getCache: function() {
        var key = this.url();
        var cached = this.cache[key];
        
        if (cached && Date.now() - cached.timestamp < this.cacheTTL) {
            return cached;
        }
        
        return null;
    },
    
    setCache: function() {
        var key = this.url();
        this.cache[key] = {
            data: this.toJSON(),
            timestamp: Date.now()
        };
    }
});