【JQuery】扩展 $.val()

一、背景

公司的老项目前端还是用的jquery,也没有条件引入vue,所以对于一个实体对象的取值和赋值还是很麻烦的:
例如:

image.png

所以想扩展一下$.val()函数

二、目标

html元素上使用name结构化数据实体,
然后用val获取整个实体,可以正确处理子对象和数组对象以及多选select
例如:

三、修改方案

找到$().val的源码;
会用jquery的同学都很清楚,val有2个逻辑,不带参是get,带参是set
看源码,有一个JQuery.valHooks 对象,如果当前元素可以匹配到则会直接调用valHooks中定义好的getset方法;
所以只要在这里加入我们定义好的元素和处理函数就可以了

四、改造Get

先来改造Get



将希望处理的元素全部加进去:


五、改造Set

set方法有一个比较有意思的地方,在数组的操作中,每次都要能取出数组中的下一个元素,有点类似C#中的IEnumerator
使用时,需要将数组转为 Enumerator 再调用 .next() 方法来获取下一个值;
PS:这里有个特殊情况是