码迷,mamicode.com
首页 > Web开发 > 详细

[创意料理] 介绍一个不要脸的 jQuery 扩充函数 - jquery-model

时间:2019-09-16 13:35:41      阅读:89      评论:0      收藏:0      [点我收藏+]

标签:for   hid   实现   范围   推荐   字符   css   mdi   语法   

这个不要脸的 jQuery 扩充函数 - jquery-model 是在下的拙作,原本是我个人用 jQuery 在开发前端程序时所使用的,同事也拿去用了之后受到好评,应该也可以推荐给大家,它不是一个什么高大上的东西,只是让我在将 UI 上的内容兜成 JSON 对象时可以少写一些程序。


缘起

会搞这个东西有两个原因,第一个原因是“有时候前端的 MVVM 框架太沉重了”,使用 MVVM 的前端框架来开发 SPA 程序真的非常合适,只要专注在 Model 上,以及事先声明好状态与 UI 的关系,后续就交给框架来处理,相当轻松,但是当我的页面是无状态的时候,引用 MVVM 前端框架就显得有点杀鸡用牛刀的感觉。

第二个原因是“团队以 jQuery 为主要的前端工具”,我们公司的 UI 设计师强项在 HTML 跟 CSS,JavaScript 就弱了一些,所以经常会去找一些现成的 jQuery Plugin 回来自己调模式,以实现页面上一些特殊的交互功能,那么 MVVM 前端框架大都无法跟 jQuery Plugin 直接无缝接轨,运气好一点是可以找到有大大缝合好的版本,没有的话就要自己缝了。

基于这两个原因,我就在想能不能有一个简便的方法,直接将 HTML 组件的内容转成一个 JSON 对象,以及将 JSON 对象更新到 HTML 组件上? 因此 jquery-model 就诞生了。

jquery-model

受到 MVVM 框架的启发,它采用声明式语法,只有三个:c-modelc-model-numberc-model-html(这个稍后会介绍到),如果 property 是字符串型态就用 c-model,是数值型态就用 c-model-number,attribute 的值为 property 的名称。

formDiv

如果要输出 JSON 对象,就使用 model() 方法:

$("#formDiv").model();

// result: { abcText: "abc", abcNumber: 123, myOpt: "opt2" }

如果要将 JSON 对象更新到 HTML 组件上,就用 model({...})model("property", value) 方法:

$("#formDiv").model({ abcText: "cba", abcNumber: 456 });

// --or--

$("#formDiv").model("abcText", "cba");
$("#formDiv").model("abcNumber", 456);

radio

radio 是用 name attribute 组成一个群组的,所以 radio 组件必须指定 name attribute 及其群组名称,另外 radio 群组中只需要其中一个组件声明 c-model 或 c-model-number 即可。

formDiv

4a 44b 444c

checkbox

checkbox 如果有指定 value attribute,有勾选就会输出?property,没有勾选就不会;如果没有指定 value attribute 就视为是 boolean 类型。

formDiv

some text
some text
some text

非输入类型的 HTML 组件

如果想要显示数据在

、... 这种非输入类型的 HTML 组件上,也是可以的,直接声明 c-model 就好了,显示的数据是 HTML 内容的话,则声明 c-model-html。

formDiv

由于非输入类型的 HTML 组件交互性较低,所以在输出成 JSON 对象时,会自动略过这些非输入类型的 HTML 组件。

formDiv

除此之外,非输入类型的 HTML 组件在更新数据时,是可以接受 function 的。

formDiv

集合

jquery-model 是有支持集合的,如果确定 jQuery Select 出来的 HTML 组件是一集合,可以调用 models() 方法,输出一个 JSON 对象的集合。

  • 44

如果只需要取得集合中的一个,则需带入识别用的 property 名称及值。

$("#list > li").models("id", 11);

// result: { id: 11, name: "22", age: 33 }

再来是将集合的值更新到 HTML 组件上,使用的是?models([{...}, ...], "keyName") 方法,第一个参数是指定更新的集合,第二个参数是指定识别用的 property 名称。

var collection = [
    { id: 11, name: "二二二", age: 33 },
    { id: 44, name: "五五五", age: 66 },
    { id: 77, name: "八八八", age: 99 }
];

$("#list > li").models(collection, "id");

如果只需要更新集合中的其中一个项目,可以使用 models({...}, "keyName") 方法。

$("#list > li").models({ id: 11, name: "二二二", age: 33 }, "id");
最后提醒三件事:
  1. 尽量将 c-model 或 c-model-number 声明在最后面
  2. 当应用在集合的时候,识别用的 HTML 组件必须要是输入类型的,如果识别值不需要显示出来,则可以考虑使用 ,然后尽量将识别用的组件放置在第一个。
  3. 在想要输出 JSON 对象的 HTML 组件范围内,输入类型组件上不要重复 property 名称。


原文:大专栏  [创意料理] 介绍一个不要脸的 jQuery 扩充函数 - jquery-model


[创意料理] 介绍一个不要脸的 jQuery 扩充函数 - jquery-model

标签:for   hid   实现   范围   推荐   字符   css   mdi   语法   

原文地址:https://www.cnblogs.com/petewell/p/11526593.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!