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 相关文章推荐
dess中一个简单的多路委托的实现
Jul 20 Javascript
将查询条件的input、select清空
Jan 14 Javascript
js实现点击图片改变页面背景图的方法
Feb 28 Javascript
AngularJs  Understanding Angular Templates
Sep 02 Javascript
利用bootstrapValidator验证UEditor
Sep 14 Javascript
微信小程序 合法域名校验出错详解及解决办法
Mar 09 Javascript
Django使用多数据库的方法
Sep 06 Javascript
详解浏览器缓存和webpack缓存配置
Jul 06 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
Aug 07 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
Sep 18 Javascript
vue组件之间通信实例总结(点赞功能)
Dec 05 Javascript
js的Object.assign用法示例分析
Mar 05 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 网页过期时间的控制代码
2009/06/29 PHP
PHP中4种常用的抓取网络数据方法
2015/06/04 PHP
PHP 使用 Imagick 裁切/生成缩略图/添加水印自动检测和处理 GIF
2016/02/19 PHP
利用PHP判断是否是连乘数字串的方法示例
2017/07/03 PHP
PHP mkdir创建文件夹实现方法解析
2020/11/13 PHP
摘自启点的main.js
2008/04/20 Javascript
javascript innerHTML、outerHTML、innerText、outerText的区别
2008/11/24 Javascript
设置checkbox为只读(readOnly)的两种方式
2013/10/11 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
2016/10/05 Javascript
jq给页面添加覆盖层遮罩的实例
2017/02/16 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
2017/03/06 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
2017/06/04 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
2017/07/05 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
浅谈angular4实际项目搭建总结
2017/12/01 Javascript
深入了解javascript 数组的sort方法
2018/06/01 Javascript
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
js通过循环多张图片实现动画效果
2019/12/19 Javascript
JS错误处理与调试操作实例分析
2020/04/13 Javascript
js实现类选择器和name属性选择器的示例步骤
2021/02/07 Javascript
[01:11:27]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Optic
2018/04/03 DOTA
[01:02:55]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python使用QRCode模块生成二维码实例详解
2017/06/14 Python
Python cookbook(数据结构与算法)将多个映射合并为单个映射的方法
2018/04/19 Python
django如何连接已存在数据的数据库
2018/08/14 Python
用python一行代码得到数组中某个元素的个数方法
2019/01/28 Python
python统计中文字符数量的两种方法
2019/01/31 Python
如何用python免费看美剧
2020/08/11 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
如何提高SQL Server的安全性
2016/07/25 面试题
捷科时代的软件测试笔试题
2015/11/09 面试题
市场营销工作计划书
2014/05/06 职场文书
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
群众路线教育实践活动自我剖析思想汇报
2014/10/04 职场文书
优秀班集体申报材料
2014/12/25 职场文书
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android