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编程语言的编码规范
Oct 21 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
Jan 03 Javascript
js实现全屏漂浮广告移入光标停止移动
Dec 02 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
Dec 25 Javascript
鼠标移到图片上变大显示而不是放大镜效果
Jun 15 Javascript
jQuery表单域选择器用法分析
Feb 10 Javascript
js实现选中页面文字将其分享到新浪微博
Nov 05 Javascript
js实现动态创建的元素绑定事件
Jul 19 Javascript
javascript中的 object 和 function小结
Aug 14 Javascript
jqueryUI tab标签页代码分享
Oct 09 jQuery
Vue实现数字输入框中分割手机号码的示例
Oct 10 Javascript
node 命令方式启动修改端口的方法
May 12 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/12/13 PHP
php debug 安装技巧
2011/04/30 PHP
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
ThinkPHP模板判断输出Empty标签用法详解
2014/06/30 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
Laravel 对某一列进行筛选然后求和sum()的例子
2019/10/10 PHP
js 数组实现一个类似ruby的迭代器
2009/10/27 Javascript
jQuery 连续列表实现代码
2009/12/21 Javascript
js创建对象的区别示例介绍
2014/07/24 Javascript
原生javascript获取元素样式
2014/12/31 Javascript
jQuery对象与DOM对象之间的相互转换
2015/03/03 Javascript
JS获取图片lowsrc属性的方法
2015/04/01 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
2015/10/16 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
2015/10/28 Javascript
js父页面中使用子页面的方法
2016/01/09 Javascript
jQuery导航条固定定位效果实例代码
2017/05/26 jQuery
Vue 2.5 Level E 发布了: 新功能特性一览
2017/10/24 Javascript
详解AngularJS 过滤器的使用
2018/06/02 Javascript
JavaScript享元模式原理与用法实例详解
2020/03/09 Javascript
vue实现瀑布流组件滑动加载更多
2020/03/10 Javascript
深入浅析JavaScript中的in关键字和for-in循环
2020/04/20 Javascript
js动态生成表格(节点操作)
2021/01/12 Javascript
Python的几个高级语法概念浅析(lambda表达式闭包装饰器)
2016/05/28 Python
python 实现网上商城,转账,存取款等功能的信用卡系统
2016/07/15 Python
django+js+ajax实现刷新页面的方法
2017/05/22 Python
python使用循环打印所有三位数水仙花数的实例
2018/11/13 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
Python @property及getter setter原理详解
2020/03/31 Python
详解HTML5中垂直上下居中的解决方案
2017/12/20 HTML / CSS
大型会议接待方案
2014/03/01 职场文书
李开复演讲稿
2014/05/24 职场文书
求职教师自荐书
2014/06/19 职场文书
离职证明格式样本
2015/06/12 职场文书
公司员工奖惩制度
2015/08/04 职场文书
详解MySQL InnoDB存储引擎的内存管理
2021/04/08 MySQL