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格式化数字的函数代码
Nov 30 Javascript
推荐20家国外的脚本下载网站
Apr 28 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
Nov 07 Javascript
jQuery中ready事件用法实例
Jan 19 Javascript
Javascript 高阶函数使用介绍
Jun 15 Javascript
jQuery下拉美化搜索表单效果代码分享
Aug 25 Javascript
javascript实现表单验证
Jan 29 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
Jan 19 Javascript
Angular1.x复杂指令实例详解
Mar 01 Javascript
基于jQuery实现一个marquee无缝滚动的插件
Mar 09 Javascript
React中嵌套组件与被嵌套组件的通信过程
Jul 11 Javascript
vue cli3 配置proxy代理无效的解决
Oct 30 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 将图片按创建时间进行分类存储的实现代码
2010/01/05 PHP
DedeCMS 核心类TypeLink.class.php摘要笔记
2010/04/07 PHP
zf框架的session会话周期及次数限制使用示例
2014/03/13 PHP
PHP实现GIF图片验证码
2015/11/04 PHP
php的api数据接口书写实例(推荐)
2016/09/22 PHP
php 判断页面或图片是否经过gzip压缩的方法
2017/04/05 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
JS 日期验证正则附asp日期格式化函数
2009/09/11 Javascript
JavaScript iframe的相互操作浅析
2009/10/14 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
2014/02/07 Javascript
jquery控制select的text/value值为选中状态
2014/06/03 Javascript
javascript的push使用指南
2014/12/05 Javascript
JS+CSS实现简易实用的滑动门菜单效果
2015/09/18 Javascript
快速学习JavaScript的6个思维技巧
2015/10/13 Javascript
日常收藏的jquery技巧
2015/12/02 Javascript
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
2017/09/06 NodeJs
js注册时输入合法性验证方法
2017/10/21 Javascript
从零开始搭建vue移动端项目到上线的步骤
2018/10/15 Javascript
layui实现数据分页功能(ajax异步)
2019/07/27 Javascript
vue路由教程之静态路由
2019/09/03 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
2020/04/30 Javascript
JavaScript中的各种宽高属性的实现
2020/05/08 Javascript
Python探索之SocketServer详解
2017/10/28 Python
查看端口并杀进程python脚本代码
2019/12/17 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
Python sqlalchemy时间戳及密码管理实现代码详解
2020/08/01 Python
丝芙兰法国官网:SEPHORA法国
2016/09/01 全球购物
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
Otiumberg官网:英国半精致珠宝品牌
2021/01/16 全球购物
品质管理部岗位职责范文
2014/03/01 职场文书
资料员岗位职责范本
2015/04/13 职场文书
办公室年度工作总结2015
2015/05/21 职场文书
党风廉政建设心得体会(2016最新版)
2016/01/22 职场文书
学习心理学心得体会
2016/01/22 职场文书
python可视化之颜色映射详解
2021/09/15 Python