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 相关文章推荐
用js 让图片在 div或dl里 居中,底部对齐
Jan 21 Javascript
谷歌浏览器 insertCell与appendChild的区别
Feb 12 Javascript
javascript 解决表单仍然提交即使监听处理函数返回false
Mar 14 Javascript
jQuery中对节点进行操作的相关介绍
Apr 16 Javascript
JavaScript获取Url里的参数
Dec 18 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
基于Three.js插件制作360度全景图
Nov 29 Javascript
AngularJS表单基本操作
Jan 09 Javascript
vue.js删除列表中的一行
Jun 30 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
Oct 08 Javascript
js通过循环多张图片实现动画效果
Dec 19 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 Vue.js
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中用foreach来操作数组的代码
2011/07/17 PHP
PHP实现读取一个1G的文件大小
2013/08/24 PHP
PHP 提取图片img标记中的任意属性的简单实例
2013/12/10 PHP
PHP计算加权平均数的方法
2015/07/16 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
js限制文本框只能输入整数或者带小数点的数字
2015/04/27 Javascript
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
AngularJS基础 ng-include 指令简单示例
2016/08/01 Javascript
Bootstrap组合上、下拉框简单实现代码
2017/03/06 Javascript
vue2.0实现导航菜单切换效果
2017/05/08 Javascript
vue.js国际化 vue-i18n插件的使用详解
2017/07/07 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
javascript填充默认头像方法
2018/02/22 Javascript
详解Next.js页面渲染的优化方案
2019/01/27 Javascript
Swiper.js实现移动端元素左右滑动
2019/09/08 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
2020/04/25 Javascript
原生JS实现多条件筛选
2020/08/19 Javascript
python+django加载静态网页模板解析
2017/12/12 Python
Python 利用切片从列表中取出一部分使用的方法
2019/02/01 Python
Python中的字符串切片(截取字符串)的详解
2019/05/15 Python
Pytorch mask_select 函数的用法详解
2020/02/18 Python
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
工商管理应届生求职信
2013/10/07 职场文书
师范应届生语文教师求职信
2013/10/29 职场文书
公司成立感言
2014/01/11 职场文书
3分钟英语演讲稿
2014/04/29 职场文书
党在我心中演讲稿
2014/09/02 职场文书
二人合伙经营协议书
2014/09/13 职场文书
2014年世界艾滋病日演讲稿
2014/11/28 职场文书
2016大学生党校学习心得体会
2016/01/06 职场文书
共青团优秀团员申请书(范文)
2019/08/15 职场文书
MySQL8.0 Undo Tablespace管理详解
2022/06/16 MySQL
Apache自带的ab压力测试工具的实现
2022/07/23 Servers
Zabbix6通过ODBC方式监控Oracle 19C的详细过程
2022/09/23 Servers