js 对象使用的小技巧实例分析


Posted in Javascript onNovember 08, 2019

本文实例讲述了js 对象使用的小技巧。分享给大家供大家参考,具体如下:

js中中,Object,Array ,Function 等都属于引用类型,他们的变量名都是指向对象的指针。

这样就有一个好处,当处理一个复杂json树的时候,想要单独改变其中某一个子对象属性时,不需要根据对象id遍历查找到这个对象了,而是可以直接通过事件方式将这个对象通过参数的方式赋值给一个专属变量,这个变量就指向这个对象,这样就可以随意改变对象属性了。改变这个变量对应的对象,整个json树中的这个对象也被相应的改变。

下面举个栗子,有点类似于双向绑定,点击哪个对象就可以单独修改这个对象,修改后会在json树中更新数据

js 对象使用的小技巧实例分析

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div >
            <ul id="classmates">
            </ul>
            <div class="edit">
                <span>姓名:</span>
                <input type="text" value="" name="name"/>
                <br />
                <span>年龄:</span>
                <input type="text" value="" name="age"/>
            </div>
        </div>
        <script type="text/javascript">
            //保存选中的同学
            var classmate={
                name:"",
                age:""
            }
            //同学列表
            var arr=[
                {
                    name:"小明",
                    age:22
                },
                {
                    name:"小黑",
                    age:23
                },
                {
                    name:"小红",
                    age:24
                },
                {
                    name:"小白",
                    age:25
                }
            ];
            var nameNode=document.querySelector("input[name='name']");
            var ageNode=document.querySelector("input[name='age']");
            nameNode.addEventListener("keyup",function(){
                classmate.name=nameNode.value;
                update()
                //console.log(classmate)
            })
            ageNode.addEventListener("keyup",function(){
                classmate.age=ageNode.value;
                update()
            })
            //进行双向绑定
            Object.defineProperty(classmate,'name',{
                get:function(){
                    return classmate['name']
                },
                set:function(val){
                    classmate['name'] = val;
                }
            })
            Object.defineProperty(classmate,'age',{
                get:function(){
                    return classmate['age']
                },
                set:function(val){
                    classmate['age'] = val;
                }
            })
            //重绘ul列表
            function update(){
                document.querySelector("#classmates").innerHTML="";
                for(var i=0;i<arr.length;i++){
                    var classmate=arr[i];
                    var li="<li>姓名:"+classmate.name + ";年龄:"+classmate.age +"</li>";
                    var liNode=parseElement(li);
                    liNode.addEventListener("click",showClassmate(classmate))
                    document.querySelector("#classmates").appendChild(liNode)
                }
            }
            update()
            //点击同学
            function showClassmate(data){
                return function(){
                    classmate=data;
                    nameNode.value=classmate.name;
                    ageNode.value=classmate.age;
                }
            }
            //将字符串变成node对象
            function parseElement(htmlString){
                return new DOMParser().parseFromString(htmlString,'text/html').body.childNodes[0]
            }
        </script>
    </body>
</html>

这里面的json数据较简单,如果面对复杂的多层关系树,通过这种方式修改数据会很方便

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Javascript调用C#代码
Jan 17 Javascript
JSON 数字排序多字段排序介绍
Sep 18 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
May 22 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
Jan 25 Javascript
JavaScript页面实时显示当前时间实例代码
Oct 23 Javascript
json数据处理及数据绑定
Jan 25 Javascript
JS验证字符串功能
Feb 22 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
Oct 18 Javascript
详解vue 2.6 中 slot 的新用法
Jul 09 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
Sep 26 Javascript
vue中在vuex的actions中请求数据实例
Nov 08 Javascript
使用JS来动态操作css的几种方法
Dec 18 Javascript
JS对日期操作封装代码实例
Nov 08 #Javascript
vue之组件内监控$store中定义变量的变化详解
Nov 08 #Javascript
js 递归json树实现根据子id查父id的方法分析
Nov 08 #Javascript
BootstrapValidator验证用户名已存在(ajax)
Nov 08 #Javascript
微信小程序在text文本实现多种字体样式
Nov 08 #Javascript
浅谈vuex的基本用法和mapaction传值问题
Nov 08 #Javascript
微信小程序select下拉框实现源码
Nov 08 #Javascript
You might like
php 在线打包_支持子目录
2008/06/28 PHP
PHP实现算式验证码和汉字验证码实例
2015/03/09 PHP
PHP中header函数的用法及其注意事项详解
2016/06/13 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
JSQL 批量图片切换的实现代码
2010/05/05 Javascript
jquery实现表格本地排序的方法
2015/03/11 Javascript
jquery实现标题字体变换的滑动门菜单效果
2015/09/07 Javascript
js操作数组函数实例小结
2015/12/10 Javascript
JavaScript学习笔记整理之引用类型
2016/01/22 Javascript
jQuery Mobile页面返回不需要重新get
2016/04/26 Javascript
AngularJS Ajax详解及示例代码
2016/08/17 Javascript
AngularJS中$http使用的简单介绍
2017/03/17 Javascript
JavaScript函数柯里化原理与用法分析
2017/03/31 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
前端跨域的几种解决方式总结(推荐)
2017/08/16 Javascript
用ES6写全屏滚动插件的示例代码
2018/05/02 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
2018/10/25 Javascript
js代码编写无缝轮播图
2020/09/13 Javascript
[02:14]DOTA2英雄基础教程 修补匠
2013/12/23 DOTA
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
使用python删除nginx缓存文件示例(python文件操作)
2014/03/26 Python
Python实现对字典分别按键(key)和值(value)进行排序的方法分析
2018/12/19 Python
浅析Python 读取图像文件的性能对比
2019/03/07 Python
Python字典常见操作实例小结【定义、添加、删除、遍历】
2019/10/25 Python
Python中的X[:,0]、X[:,1]、X[:,:,0]、X[:,:,1]、X[:,m:n]和X[:,:,m:n]
2020/02/13 Python
Python新手学习raise用法
2020/06/03 Python
Python hashlib模块的使用示例
2020/10/09 Python
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
草莓网化妆品日本站:Strawberrynet日本
2017/10/20 全球购物
京东奢侈品:全球奢侈品牌
2018/03/17 全球购物
Ajax和javascript的区别
2013/07/20 面试题
大专生求职信
2014/06/29 职场文书
大学生预备党员自我评价
2015/03/04 职场文书
2015年员工工作表现评语
2015/03/25 职场文书
大学生军训心得体会5篇
2019/08/15 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书