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

这个不要脸的 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-model、c-model-number、c-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 即可。

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 对象的集合。

如果只需要取得集合中的一个，则需带入识别用的 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");

最后提醒三件事：

尽量将 c-model 或 c-model-number 声明在最后面
当应用在集合的时候，识别用的 HTML 组件必须要是输入类型的，如果识别值不需要显示出来，则可以考虑使用，然后尽量将识别用的组件放置在第一个。
在想要输出 JSON 对象的 HTML 组件范围内，输入类型组件上不要重复 property 名称。

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