表单序列化操作、多态函数、对象的状态队列管理模式

1.jquery的表单序列化操作

　　$('.form').serializeArray();通过serializeArray()方法得到表单form（class=“form”）的dom结点下所有含有name值的节点的value值的一个数组;

　　这个数组由多个对象构成，每个对象有name和value两个key值.

2.编程的多态性思想

　　利用函数的参数数组arguments，通过判断数组的长度来选择性执行某个功能；

例如：

 1 store: function(namespace, data, remove){
 2 
 3 　　//存储内容
 4 　　//namespace: 命名空间
 5 　　//data： 存储的数据对象
 6 　　//利用多态去处理
 7 　　if(arguments.length > 2) {
 8 　　　　localStorage.removeItem(namespace);
 9 　　}else if(arguments.length > 1){
10 　　　　localStorage.setItem(namespace, JSON.stringify(data));
11 　　}else {
12 　　　　var strobj = localStorage.getItem(namespace);
13 　　　　return (strobj && JSON.parse(strobj)) || {};
14 　　}
15 }

如上函数所示，当参数数组长度大于2时，执行remove操作

　　　　　　　当参数数组长度大于1时，执行存储操作

　　　　　　　当参数数组长度为1时，执行取值操作;

3.状态队列管理的编程模式;(对象)　　!important

　　例如有五个对象，由他们的对象名构成数组　　var targetList = ['首页', '排名页', '表单页', '城市列表页']。我们可以直观地通过 targetMap 数组了解到该项目的对象结构和执行顺序(按照数组的索引值排序);

　　然后由　　var　　targetMap = {

　　　　　　　　　　　　‘首页’:homeModule,

　　　　　　　　　　　　'排名页': rankModule,

　　　　　　　　　　　　'表单页': formModule,

　　　　　　　　　　　　'城市列表页': citylistModule

　　　　　　　　　　}

　　的对象表来进行定位到执行对象;

　　现在来实现各个模块的跳转，感受一下在这种模式下代码是如何优雅的。

var targetList = ['首页', '排名页', '表单页', '城市列表页'];
　　　　
var targetMap = {

　　‘首页’:homeModule,

　　'排名页': rankModule,

　　'表单页': formModule,

　　'城市列表页': citylistModule

};

targetList.current = null; 
targetList.index = -1;
targetList.next = function() {
　　var key,
　　　　module;
　　targetList.index++;
　　targetList.current　　&&　　targeList.current.leave　　&&　　targetList.current.leave();//第一步执行当前操作模块的leave方法
　　key  = targetList[targetList.index];//第二步找到即将进入的模块，并执行它的enter()方法
　　module = targetMap[key];
　　module　　&&　　module.enter();
　　targetList.current = module;　　//最后让　　当前操作模块 = 即将进入的模块赋值;
} 
targetMap[targetList[targetList.length - 1]].leave = function() {};//重载状态序列末位的对象的leave方法;
targetList.next();//显示第一个模块;

　　这样在对象的绑定事件例如点击事件发生时，调用next()方法，每个对象不需要知道下一个转到哪里，跳转目标由targetlist和targetMap管理.

　　优雅地实现跳转的目标,而且代码的可维护性非常高，例如需要替换排名页与表单页的显示顺序，只需要修改targetList数组：targetList = ['首页', '表单页', '排名页', '城市列表页'];仅仅一点改动就可以完美得实现这一新的需求;

　　期待以后的项目中能够真正发挥出这类代码的强大能力，进过实践的锤炼我也才能真正理解编写出那种真正优雅的代码所能带来的无限好处;

4.html5和css3时代，实现动画效果的方式

　　1）在css3中：animation + keyframes

　　2）在css3中，transition过渡属性

　　3）在html5中的canvas标签

　　4）最原始的实现动画的方式：js运动;setTimeout与setInterval;

　　5）html5环境下支持的js函数：window.requestAnimationFrame();相对方法四浏览器针对该函数的动画效果做了很多优化，动画效果更加平滑;

表单序列化操作、多态函数、对象的状态队列管理模式

推荐阅读