js examples

js_example.js

/*
  demo1: do not repeat yourself
*/

$.ajax({
  'url': '/user',
  'data': 'dept=aaa&active=true&_=' + Math.random(),
  'dataType': 'json',
  'headers': {
    'X-CSRF-Token': $('#csrf').attr('content');
  },
  'type': 'GET',
  'success': function(ret) {
    if(ret.result === 0) {
      console.log('data: ' + JSON.stringify(ret.data));
    } else {
      console.log('request error: ' + ret.msg);
    }
  },
  'error': functoin(jqXHR, textStatus, errorThrown) {
    console.log('ajax error...')
  }
});

/*
  1. 全局的ajaxError
*/
$(document).ajaxError(function() {
  console.log('ajax error...')
});

/*
  2. 全局的ajaxSetup
*/
$.ajaxSetup({
  'dataType': 'json',
  'headers': {
    'X-CSRF-Token': $('#csrf').attr('content');
  },
  'cache': false
});

/*
  3. 使用快捷方法
*/
$.get('/user', function(ret) {
  // ....
});

/*
  4. 统一的错误处理
*/
var showErrorTips = function(ret) {
  console.log('request error: ' + ret.msg)
};
var Ajax = {
    get: function(url, callback) {
      $.get(url, function(ret) {
        if(ret.result === 0) {
          if(ret.data) {
            callback(ret.data);
          } else {
            callback(ret);
          }
        } else {
          showErrorTips(ret);
        }
      });
    },
    post: function(url, data, callback) {
      $.post(url, data, function (ret) {
        if(ret.result === 0) {
          if(ret.data) {
            callback(ret.data);
          } else {
            callback(ret);
          }
        } else {
          showErrorTips(ret);
        }
      });
    }
  };
  
/*
  result  
*/
Ajax.get('/user' + '?dept=aaa&active=true', function(data) {
  console.log('data: ' + JSON.stringify(data));
})

demo2: cache data

/* tiny_store.js */

function Store() {
  this._data = {};
}

Store.prototype.set = function(key, value) {
  this._data[key] = value;
};

Store.prototype.get = function(key) {
  return this._data[key];
};

Store.prototype.clear = function() {
  this._data = {};
};

var store = new Store();
Ajax.get('/user', function(data) {
  store.set('user', data);
});
console.log(store.get('user')); // use user anywhere else..

demo3: use high level function

// sum a array
var sum = function(arr) {
  var sum = 0;
  for(var i=0,l=arr.length; i<l; i++) {
    sum += i;
  }
  return sum;
};

// same, but less code 
var sum2 = function(arr) {
  return arr.reduce(function(s, i) {
    return s + i;
  }, 0);
};

demo4: user chain

// use underscore.js, from http://underscorejs.org/#chain
var stooges = [
  {name : 'curly', age : 25}, 
  {name : 'moe', age : 21},
  {name : 'larry', age : 23}];
var youngest = _.chain(stooges)
  .sortBy(function(stooge){ return stooge.age; })
  .map(function(stooge){ return stooge.name + ' is ' + stooge.age; })
  .first()
  .value();
console.log(youngest);

demo4: user chain

// use underscore.js, from http://underscorejs.org/#chain
var stooges = [
  {name : 'curly', age : 25}, 
  {name : 'moe', age : 21},
  {name : 'larry', age : 23}];
var youngest = _.chain(stooges)
  .sortBy(function(stooge){ return stooge.age; })
  .map(function(stooge){ return stooge.name + ' is ' + stooge.age; })
  .first()
  .value();
console.log(youngest);