jquery对象/标签映射扩展 NickName

• 授权协议: BSD
• 开发语言: JavaScript HTML/CSS
• 操作系统: 跨平台
• 软件首页: http://git.oschina.net/zhiming/nickname.git

软件介绍

jquery对象/标签映射扩展-NickName 

OTM是什么 

以往把这样的一个json对象 

var data = {};  
data.UserId = "8888";  
data.UserName = "赵六";  
data.School="湖北工业大学";  
data.schoolNo=100002;  
data.Age=23; ...  

通过jquery设置到html标签上或许得这么干， 

$("#UserId ").text(data.UserId )；
$("#UserName ").val(data.UserName )；
$("#School").attr("src",data.School)；  
$("#schoolNo").val(data.schoolNo)；  
... 

通过jquery获取html标签的值为一个json对象得这么干， 

var jsonData = {};  
data.UserId =$("#UserId ").text( );  
data.UserName =$("#UserName ").val( )；、  data.School=$("#School").attr("src")；  
data.schoolNo=$("#schoolNo").val()；  
... 

这个过程太繁琐了！突然你有一天发现也可以这么干，因为你发现了NIckname（本文要讲的东东） 

把json设置到HTML标签 

$("#namespace").NickNameSet(data);   

从HTML标签获取值为json 

var jsonData = $("#namespace").NickNameGet();//取值   

哈，怎么样？两句话搞定，世界实在是太美好了！ 

OTM，对象-标签映射（Object/Tag Mapping），它可以把一个JSON对象的值直接渲染到到web页面的各个HTML元素上，同时也能够把web页面上各个元素的值收集起来构成一个JSON对象，这一切不需要您编写额外的代码。 

OTM一词命名借鉴于ORM，对象-关系映射（Object/Relation Mapping，简称ORM），主要用于web页面中JSON对象和HTML标签的互相映射。 

NickName是什么 

NickName是借助以上思想的一个具体实现，支持几乎所有的HTML标签映射，笔者倾向于在HTML标签上额外添加一个NickName属性来完成OTM，所以取名NIckName。

NickName的授权 

作者知鸣，您可以在遵循BSD协议下使用！。 

NickName的结构 

 依赖于jquery1.4.4以上版本 

NickName示例 

页面显示效果 

点击NickNameSet按钮后效果

点击NickNameGet获取的值

{ 
    "name": "知鸣",  
    "school": "hbut",  
    "graduationDate": "2012年06月",  
    "sex": [ 

        { 

            "chk": false,  

            "val": "女" 

        },  

        { 

            "chk": true,  

            "val": "男" 

        } 

    ],  

    "degree": [ 

        { 

            "chk": true,  

            "val": "学士" 

        },  

        { 

            "chk": false,  

            "val": "硕士" 

        } 

    ],  

    "company": { 

        "href": "http://www.dangdang.com/",  

        "text": "当当网" 

    },  

    "pageimg": "http://img4.ddimg.cn/header/header2012/dangdang_logo.jpg" 

} 

     需要特别说明的是，笔者这里演示时在html标签上添加了一个nickname属性完成OTM，不必惊讶笔者为何这样做，原因在于name和id这样的属性页面编程可能多个地方使用，很有可能出现json对象的key和html标签的name，id属性值不一致情况，我们又不能随意更改其值，所以就单独添加了一个nickname属性专门做OTM，这是nickname提倡的方式。

实际上这不是必须的，您可以使用html已有的任何属性（除type外）如name，id等，此时您需要调用NickNameSetBy(“name”/”id”)或者NickNameGetBy(“name”/”id”)方法完成OTM，在NickName提供的API方法中有具体讲解，我们也在demo2.html文件中提供了这样的一个实例。  

NickName提供的API方法

温馨提示：有些情况下您可以直接查看nickname的源码和开发文件，这样也行比您看以下文档更快知道如何使用它。 

NickName支持的HTML标签

 NickName支持几乎所有的HTML标签，对于没有type属性的HTML标签需要手动为标签添加type属性，如段落标签p，我是p标签

，只有具有type属性的标签才会参与OTM。笔者提倡您根据自己的需要改变标签的默认取值或者赋值行为，笔者认为radio和checkbox默认取值赋值行为可能不一定符合您的实际使用场景，如果有需要您可以修改它并把建议Emali给笔者。

BUG

如果使用中出现bug，请将bug提交至weichengdong2008@foxmail.com  

2013年6月9日  v1.0

本文地址：https://codercto.com/soft/d/22780.html