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的结构 

序号 

文件名 

作用 

1 

NIckName.js 

核心文件,该文件引入您的项目才能使用 

2 

Demo.html 

示例文件，提供了入门的使用示例 

3 

Demo2.html 

另一个示例文件 

4 

Develop.html 

开发文件，NIckName的开发与测试文件 

5 

NickName文档 

即本文档，v1.0 

 依赖于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的源码和开发文件，这样也行比您看以下文档更快知道如何使用它。 

方法名称

作用

参数

返回值

$(s).NickNameSetBy(attr,jsonData)

把json值按照key键设置到html标签属性attr=key的标签上，attr可以是html已有的属性如name，id等或者你自定义添加的一些属性，它们同样能够识别。

attr html标签的某个属性名称

this

$(s).NickNameSet(jsonData)

相当于$(s).NickNameSetBy(“NickName”,jsonData)，既把jsonData的值设置到属性NickName=key的html标签上

this

$(s).NickNameGetBy(attr)

获取元素含有attr属性的标签的值并组成一个json对象，attr可以是html已有的属性如name，id等或者你自定义添加的一些属性，它们同样能够识别。

json 

$(s).NickNameGet()

相当于

$(s).NickNameGetBy(“NickName”)

既获取含有NickName属性标签的值并组成一个json对象

json 

NickName支持的HTML标签

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

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

标签名

type

默认赋值行为

默认取值行为

p

type="p"

$(s).text(obj)

obj=$(s).text()

table->tr->td

type="td"

同上

同上

table->tr->th

type="th"

同上

同上

div

type="div"

同上

同上

span

type="span"

同上

同上

input->radio

单选按钮组

type="radio"

array=[obj0,obj1,obj2,...]

其中obj={chk:false,val:1}

依次设置到每个checbox上

$(s).attr("checked"obj.chk);$(s).val(obj.val);

依次获取每个checkbox

obj={

chk:$(s).attr(“checked”),

val:$(s).val()

}组成

array=[obj0,obj1,obj2,...]

input->checkbox

复选按钮组

type="checkbox"

同上

同上

image

type="image"

$(s).attr("src",obj)

obj=$(s).attr("src")

input->number

type="number"

$(s).val(obj)

obj=$(s).val()

input->submit

type="submit"

同上

同上

input->hidden

type="hidden"

同上

同上

input->button

type="button"

同上

同上

input->password

type="password"

同上

同上

input-> text

type="text"

同上

同上

input->reset

type="reset"

同上

同上

textarea

type="textarea"

同上

同上

BUG

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

2013年6月9日  v1.0

您可能感兴趣的文章: