待整理笔记(表单序列化操作多态函数对象的状态队列管理模式)

Posted 2020-08-03 君寻不惑

1.jquery的表单序列化操作

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

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

2.编程的多态性思想

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

例如：

store: function(namespace, data, remove){

　　//存储内容
　　//namespace: 命名空间
　　//data： 存储的数据对象
　　//利用多态去处理
　　if(arguments.length > 2) {
　　　　localStorage.removeItem(namespace);
　　}else if(arguments.length > 1){
　　　　localStorage.setItem(namespace, JSON.stringify(data));
　　}else {
　　　　var strobj = localStorage.getItem(namespace);
　　　　return (strobj && JSON.parse(strobj)) || {};
　　}
}

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

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

　　　　　　　当参数数组长度为1时，执行存储操作;

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

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

　　然后由　　var　　targetMap = {

　　　　　　　　　　　　‘首页’:homeModule,

　　　　　　　　　　　　‘排名页‘: rankModule,

　　　　　　　　　　　　‘表单页‘: formModule,

　　　　　　　　　　　　‘城市列表页‘: citylistModule

　　　　　　　　　　}

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

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

　　targetList.current = null;

　　targetList.index = -1;

　　targetList.next = function() {

　　　　targetList.index++;

　　　　targetList.current　　&&　　targeList.current.leave　　&&　　targetList.current.leave();//第一步执行当前操作模块的leave方法

　　　　var key  = targetList[targetList.index];//第二步找到即将进入的模块，并执行它的enter()方法

　　　　var module = targetMap[key];

　　　　module　　&&　　module.enter();

　　　　targetList.current = module;　　//最后让　　当前操作模块 = 即将进入的模块赋值;

　　}

　　targetMap[targetList[targetList.length - 1]].leave = function() {};//重载状态序列末位的对象的leave方法;

　　targetList.next();//显示第一个模块;

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

　　优雅地实现跳转的目标;