正文 

当前位置： 首页 > IT > java教程

[创意料理]介绍一个不要脸的jquery扩充函数-jquery-model(代码片段)

petewell petewell     2022-12-23     528

关键词：

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


    
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


创意秀

1.写代码直播，livecoding2.断舍离：做一个app帮你丢掉不要的东西3.失恋app4.每个人的歌单书单，共享给别人，需要自己的信息质量高来换取5.目标：慰藉都市人做一档美食节目，用拍电影的手法，器材不要太好，食材也普通，所有... 查看详情

jquery介绍(代码片段)

jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。jQuery的版本分为1.x系列和2.x、3.x系列，1.x系列兼容低版本的浏览器，2.x、3.... 查看详情

关于jquery中ajax介绍

jQuery底层AJAX实现。简单易用的高层实现见$.get,$.post等。$.ajax()返回其创建的XMLHttpRequest对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。回调函数在我们使用的时候，如果要处理$... 查看详情

jquery遍历数组之grep()方法介绍

...用于数组元素过滤筛选。grep(array,callback,boolean);方法参数介绍。array  ---待处理数组callback ---这个回调函数用来处理数组中的每个元素,并过滤元素,该函数包含两个参数,第一个参数是当前数组元素的值,第二个参数是当... 查看详情

下厨房(代码片段)

题目描述牛牛想尝试一些新的料理，每个料理需要一些不同的材料，问完成所有的料理需要准备多少种不同的材料。输入描述:每个输入包含1个测试用例。每个测试用例的第i行，表示完成第i件料理需要哪些材料，各个材料用空... 查看详情

编程题下厨房

【编程题】下厨房题目描述　　牛牛想尝试一些新的料理，每个料理需要一些不同的材料，问完成所有的料理需要准备多少种不同的材料。输入描述:　　每个输入包含1个测试用例。每个测试用例的第i行，表示完成第i件料理需... 查看详情

matlab数据长度不一样,怎么扩充

答:matlab数据长度不一样,这么扩充:定义一个长度为I相较于T缺少数据个数的全0向量I=[I;z];%数组扩展,得到新纵轴数据,与横轴数据长度相等plot(T,I);gridon;%作图,...matlab将数扩大为整数,MATLAB整数类型1.uint64()应用时要尽可能用字节数少... 查看详情

函数定义_deepen

...后面deffuns(a,*food)　　passfuns("中餐","西餐","日本菜","印度料理")所示,a="中餐",food会吧"西餐","日本菜","印度料理"都提取进去.而当利用多种传参方式的时候,形参上面拟定 查看详情

牛客网-下厨房（网易）

题目描述牛牛想尝试一些新的料理，每个料理需要一些不同的材料，问完成所有的料理需要准备多少种不同的材料。输入描述:每个输入包含1个测试用例。每个测试用例的第i行，表示完成第i件料理需要哪些材料，各个材料用空... 查看详情

牧场onweb的攻略玩法

...级时要的材料/钱/时间。缺点：游戏单调。第二种：种植+料理中餐可以酸青瓜→凉拌果盘这样升上去；西餐可以南瓜布丁→菠菜罐头/炸薯条升级；饮料可以玉米汁/草莓汁→番茄汁→草莓奶昔升级。优点：初期基本可以自给自足... 查看详情

jquery自定义网页滚动条样式插件mcustomscrollbar的介绍和使用方法

如果你构建一个很有特色和创意的网页，那么肯定希望定义网页中的滚动条样式，这方面的jQuery插件比较不错的，有两个：jScrollPane 和 mCustomScrollbar。关于jScrollPane，大家见过的可能比较多，但是这个插件太过于古老而且... 查看详情

不要62

...。杭州交通管理局经常会扩充一些的士车牌照，新近出来一个好消息，以后上牌照，不再含有不吉利的数字 查看详情

jquery四大核心函数

jQuery核心函数以及jQuery对象一、jQuery核心函数　　首先介绍jQuery的几个核心函数，在jQuery中它们起着至关重要的作用，在实际的前端开发过程中用到最多的也是它们。1、jQuery(elements)　　将一个或多个DOM元素转化为jQuery对象。　... 查看详情

为心爱的人做一个超具创意的表白网页吧❤(告白气球)html+css+javascript

为心爱的人做一个超具创意的表白网页吧????(告白气球)HTML+CSS+JavaScript是不是还没有给心爱的人准备小礼物呀，但是别担心，精心创作了一个“告白气球”网页，按照下面这个教程就可以给Ta做一个创意满满的祝福了呀~（很简单... 查看详情

16/8/23-jquery子调用匿名函数

...{　　//...}());方法三：!function(){　　//...}();jQuery.extend使用介绍jQuery.extend([deep],target,obj 查看详情

这是不是需要递归 CTE、创意窗口函数、循环？

】这是不是需要递归CTE、创意窗口函数、循环？【英文标题】：DoesthisrequirerecursiveCTE,justcreativewindowfunctions,aloop?这是否需要递归CTE、创意窗口函数、循环？【发布时间】：2016-02-1101:34:50【问题描述】：我这辈子都不知道如何获得X... 查看详情

jquery入门知识点介绍

一、JQ的简单介绍JQ是js的一个库，封装了开发时常用的一些功能，初期学习JQ主要是学习操作DOM的一些方法，调用JQ中封装的一些API来进行DOM的操作，大部分都是方法。JQ的两大特点：1、链式编程，如.show()和.html()可以写成一个.sh... 查看详情

不要62

...。杭州交通管理局经常会扩充一些的士车牌照，新近出来一个好消息，以后上牌照，不再含有不吉利的数字了，这样一来，就可以消除个别的士司机和乘客的心理障碍，更安全地服务大众。不吉利的数字为所有含有4或62的号码。... 查看详情