精华内容
下载资源
问答
  • <div><p>Please make tag for 1.4 version and push to cocoapods please....I see commit ...OAuthSwift/OAuthSwift</p></div>
  • 原文章参考:https://www.jianshu.com/p/ea9d556d6529 本文主要通过 JS 的 Object.defineProperty 和Element.addEventListener() 来实现 数据<-->元素 的 双向数据绑定 用于监听 js 数据对象。MVVM 中的 ...

    原文章参考:https://www.jianshu.com/p/ea9d556d6529

    本文主要通过 JS 的 Object.defineProperty 和 Element.addEventListener() 来实现

    数据<-->元素双向数据绑定

    用于监听 js 数据对象。MVVM 中的 model

    Object.defineProperty   

    用于监听 js 数据对象。MVVM 中的 model

    Element.addEventListener() 

     


    什么是MVVM?

    • 概念介绍
      • MVVM分为三个部分:分别是M(Model,模型层 ),V(View,视图层),VM(ViewModel,V与M连接的桥梁,也可以看作为控制器)
        1、 M:模型层,主要负责业务数据相关;
        2、 V:视图层,顾名思义,负责视图相关,细分下来就是html+css层;
        3、 VM:V与M沟通的桥梁,负责监听M或者V的修改,是实现MVVM双向绑定的要点;
      • MVVM支持双向绑定,意思就是当M层数据进行修改时,VM层会监测到变化,并且通知V层进行相应的修改,反之修改V层则会通知M层数据进行修改,以此也实现了视图与模型层的相互解耦;

    关于Object.defineProperty

    用法:

     Object.defineProperty( ) 可以再一个对象中定义或者修改一个属性,然后返回这个对象,并且可对该属性的可写行可便利性存取描述符(get、set)等进行设定;

    参数:

    Object.defineProperty(obj, prop, descriptor);
    • obj: 需要进行定义或修改属性的对象;
    • prop: 需要进行定义或者修改的属性;
    • descriptor: 该属性的描述符(包含存取描述符和数据描述符),该参数以一个对象的形式传入,该参数有六个选项:
      • value: 设定该属性的值;
      • writable: 布尔,该属性是否可写入(是否可改变其value);
      • enumerable: 布尔,该属性是否可被遍历得到(for...in, Object.keys等);
      • configurable: 布尔,设定该属性是否可被删除,且除writable外的其他描述符是否可被修改;
      • get: 函数,该属性的值被获取时执行的回调函数(例如console.log(prop)),默认为undefined;
      • set: 函数,该属性的值被设置时执行的回调函数,默认为undefined
      // 没有get和set
            let obj = {
    
            }
            Object.defineProperty(obj, 'a', {
                value: 123, // 该属性值为123
                enumerable: false, // 不可被遍历得到
                writable: false, // 不可被重新写入
                configurable: false // 不可被删除,且enumerable和value不能通过Object.defineProperty重新定义
            })
            // 使用get和set
            let obj = {
                // 设定默认值
                _data: {
                    a: 123
                }
            }
            Object.defineProperty(obj, 'a', {
                get() {
                    // 当获取a时执行
                    console.log('a被获取了')
                    return obj._data.a
                },
                set(value) {
                    // 当修改a时执行
                    obj._data.a = value
                    console.log('a的值被修改了')
                }
            })

    数据描述符和存取描述符
    descriptor的六个选项中,有数据描述符和属性描述符,他们是不可共存的,否则会报错(因为功能上有所重复和冲突),其中

    • 数据描述符:value,writable;
    • 存取描述符:get,set;
    • 两者皆可共存:configurable,enumerable;
    • 报错例子
         let obj = {
    
            }
            Object.defineProperty(obj, 'a', {
                value: 123,
                get() {
                    // 当获取a时执行
                    console.log('a被获取了')
                    return obj._data.a
                },
                set(value) {
                    // 当修改a时执行
                    obj._data.a = value
                    console.log('a的值被修改了')
                }
            })

    • 兼容性
      至少IE8以上

    使用 Object.defineProperty( )  和 Element.addEventListener( ) 实现MVVM的表单数据双向绑定

    有这么一个表单和一个person对象

    • 需要实现的功能(该表单与person对象的双向绑定)
      • 1.用户在表单中输入的数据实时绑定在person对象的同名属性中;
      • 2.在person对象中进行属性的修改会实时反映在表单中;
    • 获取form的DOM节点,并且设置默认值,该默认值在Vue中就是data对象中的数据;

    • 实现用户输入数据与person对象内同名属性的同步修改

    • 一、用Object.defineProperty为person对象设定name和age两个属性,并且他们的get获取的是_data里的数据

    • 二、监听form表单中的input事件,并且将获取的目标DOM节点的value值赋值给person对象中的响应属性即可完成用户输入与对象值间的绑定

      •  

        效果图:

         

    • 实现person对象同名属性的修改同步用户表单框中的输入值

       

       

       

      效果图:修改直接修改person对象中的name和age属性的值,可以同步显示在输入框中

       

    • 这时候其实已经完成了数据的双向绑定


    • 完整例子:

    • <html lang="en">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>无标题文档</title>
        <style>
      
        </style>
      </head>
      
      <body>
      <form id="form">
        name:<input id="nameInput" type="text" name="name">
        age:<input id="ageInput" type="text" name="age">
      </form>
      </body>
      <script>
      
        let person={
          data:{
            name:"",
            age:""
          }
        }
      
        Object.defineProperty(person,"name",{
          get(){
            console.log("name被获取了")
            return person.data.name
          },
          set(value){
            console.log("name被修改了")
            person.data.name=value
            document.getElementById("nameInput").value=value
      
          }
        })
      
        Object.defineProperty(person,"age",{
          get(){
            console.log("age被获取了")
            return person.data.age
          },
          set(value){
            console.log("age被修改了")
            person.data.age=value
            document.getElementById("ageInput").value=value
          }
        })
      
        var form=document.getElementById("form")
      
        form.addEventListener("input",(e)=>{
          let value=e.target.value
          let name=e.target.getAttribute("name") //触发Object.defineProperty(person,"name",{get()} 的get 函数
          person[name]=value
        })
      
      </script>
      
      </html>
      

      封装函数后完整例子:

      <html lang="en">
      <head>
          <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
          <title>无标题文档</title>
          <style>
      
          </style>
      </head>
      
      <body>
      <form id="form">
          name:<input id="name" type="text" name="name">
          age:<input id="age" type="text" name="age">
      </form>
      
      </body>
      <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
      <script>
      
          let person={
              data:{
                  name:"",
                  age:""
              }
          }
      
          //封装函数
          function binding(obj,key){
              Object.defineProperty(obj,key,{
                  get(){
                      console.log(key+"被获取了")
                      return obj.data[key]  //用data存放属性值并返回给get函数,相当于在获取这个属性值时获得了存放在data里面的值
                  },
                  set(val){
                      console.log(key+"被修改了")
                      obj.data[key]=val
                       document.getElementById(key).value=val
                  }
              })
          }
      
          var key
          for(key in person.data){
              binding(person,key)
          }
      
          var form=document.getElementById("form")
      
          form.addEventListener("input",(e)=>{
              let value=e.target.value
              let name=e.target.getAttribute("name")
              person[name]=value  //设置person属性值。把触发Object.defineProperty(){} 的set 函数
              console.log(person[name])})
      
      </script>
      
      </html>
      

       实现双向绑定:


    PS:

    function binding(obj,key){
            Object.defineProperty(obj,key,{
                get(){
                    console.log(key+"被获取了")
                    return obj.data[key]
                },
                set(val){
                    console.log(key+"被修改了")
                    obj.data[key]=val
                     document.getElementById(key).value=val
                }
            })
        }

    疑问:1. Object.defineProperty( ) 里面的

    get 函数:return obj.data[key]  
    set 函数:obj.data[key]=val,

    这两个 obj.data[key] 为什么不直接使用 obj[key] 来赋值呢?为什么person 对象里的 name和 age 属性外面还要再加一层data呢?

    回答:因为传入 Object.defineProperty(obj,key,{}) 的是 obj 和 key 这两个变量。Object.defineProperty(obj,key,{}) 会对 obj.key 的属性值进行监听,在获取值时,会自动调用get( ) 函数;设置值时,会自动调用 set( ) 函数。

    所以,如果在 get 和set 函数中直接使用 obj.key,就会一直触发 get() 和 set( ) 函数,导致死循环,堆栈溢出。

    因此,需要在 person 对象的 name 和 age 属性外面再加一层 data,用于在get和set 中使用。也就是说,使用 person.data.name 来存放 person.name 的值。 也就是说,person 对象有属性值有

    • person.data.name
    • person.data.age
    • person.name
    • person.age

         Object.defineProperty(obj,key,{
                get(){
                    console.log(key+"被获取了")
                    return obj.data[key]
                },
                set(val){
                    console.log(key+"被修改了")
                    obj.data[key]=val
                     document.getElementById(key).value=val
                }

     直接使用 obj.name 导致堆栈溢出:

    展开全文
  • i need update guide.

    2021-01-12 01:44:15
    <div><p>I upgraded from ...<img alt="2018-07-11 13 06 13" src="https://img-blog.csdnimg.cn/img_convert/f6b0dc8269f7b54c19a57816e06d6529.png" /></p><p>该提问来源于开源项目:lusaxweb/vuesax</p></div>
  • ~ 07 51 46" src="https://img-blog.csdnimg.cn/img_convert/d6529ac2b2bf1a0d4705450141b62fa4.png" /></p> <p>Before: ~ 07 50 09" src=...
  • <div><h2>Summary <p>Content container is aligned to the right edge of the ...<img alt="align3" src="https://img-blog.csdnimg.cn/img_convert/1d21d4d6529c8c9f10cea4a20637f744.png" /> <p><strong>Firefox ...
  • <p><img alt="image" src="https://user-images.githubusercontent.com/390760/52967379-d6529b80-33a1-11e9-901e-4017f4822d46.png" /></p> <h4>Proposed changelog entry for your changes: <ul><li>No changelog ...
  • <div><p>Previously FilePicker was working fine, but for some reason now I'm getting a status code: 500 error. <pre><code> 2014-12-09 11:40:43.083 iOS[6732:1528414] __75+[FPLibrary uploadAsset:...
  • <p><img alt="tube2" src="https://img-blog.csdnimg.cn/img_convert/04b134d6529b71c41791eb88c73d8d7a.png" /> with tube2() <p><img alt="tube3" src=...
  • <h3>Bagaimana alurnya sampai ...<img alt="format UB" src="https://img-blog.csdnimg.cn/img_convert/11b218cd22d6529e50c3bfad5608c172.png" /></p><p>该提问来源于开源项目:OpenSID/OpenSID</p></div>
  • <img src="https://cloud.githubusercontent.com/assets/8628591/4594472/f4d6529e-508f-11e4-8eb2-ab1058f4ab35.png" /></li><li><strong>Drag to reorder</strong></li> <h3>Expected <p>The position-block you...
  • <div><h2>TLDR <p>I have read and understood how mesh is working using ...See https://gist.github.com/giminni/1ab53616d6529baeace0f2e6d2eac65a</p><p>该提问来源于开源项目:moby/libnetwork</p></div>
  • <img alt="image" src="https://f.cloud.github.com/assets/6008469/1797294/d4d6529e-6ac8-11e3-888a-efe2351ebd5e.png" /> only show selected 체크했습니다. 잘못된 것이 있는지요? validate bundles하면, No ...
  • <p><img alt="still-needs-to-happen" src="https://img-blog.csdnimg.cn/img_convert/a183b2b4ffc2f47cd5d6529df660797b.png" /></p> <h4>Testing instructions: <ul><li>Go to /wp-admin/admin.php?page=...
  • Kernel is not reproducible

    2020-12-31 12:35:56
    For <a href="https://github.com/osresearch/heads/commit/488d6529e463a9732f653f1d6bb89080f4768237">example</a>: Click on the green check, and it will show you CircleCI and GitlabCI clickable builds....
  • 020000000001018e1a14d3a5034658cd710b8650918bb972d2a65dda95a47a3362b05925e4d0690000000000b400000001fd4c16000000000017a9146ec607612bccfc200d4b8f6dbb53bc361f427a23870347304402206c890b4d823be2b641aec69a...
  • handleChange to arrow function (<a href="https://github-redirect.dependabot.com/formium/formik/issues/2832">#2832)</li><li><a href="https://github.com/formium/formik/commit/0887819e80645d167d31d6529...
  • <img alt="image" src="https://img-blog.csdnimg.cn/img_convert/750579d6529d68ccdb08d12ca4c29bdb.png" /> <ol><li>If I use the dependency through pod file by uncommenting the line from PodFile and then ...
  • 4177d0f6529d972bb3f51dbe9f9f7268c2d19c9faf7e8990964e3a624926b558 digest in image header 4177d0f6529d972bb3f51dbe9f9f7268c2d19c9faf7e8990964e3a624926b558 ap_name=voip, action=stop Location: ...
  • <p><img width="448" alt="48da62af6a7582345e5051d3fe9c9f18" src="https://cloud.githubusercontent.com/assets/10481547/19620654/e483c660-9836-11e6-8919-d6a8d0e1dca6.png" /></p> <p>Full error: <p><code>...
  • <div><p>facing the same ...<img alt="androiderr" src="https://img-blog.csdnimg.cn/img_convert/9d6529c625f12b96a0e5f8ec8f6d872e.png" /></p><p>该提问来源于开源项目:wordpress-clients/hybrid</p></div>
  • Trigger names

    2020-12-29 14:33:23
    <p><img width="1286" alt="Screen Shot 2020-01-21 at 4 09 28 PM" src="https://img-blog.csdnimg.cn/img_convert/0fa6529e1d5664406b5b40e323ea3be9.png" /></p><p>该提问来源于开源项目:microsoft/Bot...
  • HTML5 canvas 之 小丑鱼

    2010-01-27 15:28:08
    之前使用canvas做过复杂的应用,性能还不错 :) ...[img]http://dl.iteye.com/upload/picture/pic/53845/4c2bed52-7553-3816-8ecb-953d2ce6529d-thumb.png[/img] element 介绍 [code="java"] ...
    使用html 的新特性绘制的小丑鱼,的确很丑哦。
    之前使用canvas做过复杂的应用,性能还不错 :)

    小丑鱼图片:
    [img]http://dl.iteye.com/upload/picture/pic/53845/4c2bed52-7553-3816-8ecb-953d2ce6529d-thumb.png[/img]

    <canvas> element 介绍

    <canvas id="tutorial" width="150" height="150"></canvas>

    <canvas id="stockGraph" width="150" height="150">
    current stock price: $3.15 +0.15
    </canvas>


    创建canvas

    var canvas = document.getElementById('tutorial');
    var ctx = canvas.getContext('2d');



    页面前端代码

    <body>
    <!-- Start Draw View Range -->
    <div id="placeholder" style="WIDTH: 600px; HEIGHT: 600px"></div>
    <!-- End Draw View Range -->
    </body>

    页面canvas代码,支持IE版本

    function constructCanvas() {
    function makeCanvas(width, height) {
    var c = document.createElement('canvas');
    c.width = width;
    c.height = height;
    if ($.browser.msie) // excanvas hack
    c = window.G_vmlCanvasManager.initElement(c);
    return c;
    }
    canvasWidth = target.width();
    canvasHeight = target.height();
    target.html(""); // clear placeholder
    if (target.css("position") == 'static')
    target.css("position", "relative"); // for positioning labels and overlay

    if (canvasWidth <= 0 || canvasHeight <= 0)
    throw "Invalid dimensions for plot, width = " + canvasWidth + ", height = " + canvasHeight;

    if ($.browser.msie) // excanvas hack
    window.G_vmlCanvasManager.init_(document); // make sure everything is setup

    // the canvas
    canvas = $(makeCanvas(canvasWidth, canvasHeight)).appendTo(target).get(0);
    ctx = canvas.getContext("2d");

    // overlay canvas for interactive features
    overlay = $(makeCanvas(canvasWidth, canvasHeight)).css({ position: 'absolute', left: 0, top: 0 }).appendTo(target).get(0);
    octx = overlay.getContext("2d");
    octx.stroke();
    }




    [img]http://dl.iteye.com/upload/picture/pic/53845/4c2bed52-7553-3816-8ecb-953d2ce6529d-thumb.png[/img]

    实例请见附件
    展开全文
  • <div><h1>Description ...<p><img alt="image" src="https://img-blog.csdnimg.cn/img_convert/d97fac6529ffe14efd0bbab072bd655c.png" /></p><p>该提问来源于开源项目:Catfriend1/syncthing-android</p></div>
  • <div><p>Hey after playing...<img alt="screen" src="https://img-blog.csdnimg.cn/img_convert/6529b211f40de2d06cb144b6a901d981.gif" /> )</p><p>该提问来源于开源项目:intercom/ember-undo-stack</p></div>
  • 程序乱码的原因

    2013-08-23 16:15:03
    [img]http://dl2.iteye.com/upload/attachment/0088/5616/dbf6529a-94a0-34b4-984d-6119f9f84280.jpg[/img] 问题就产生在图中圈圈的位置,程序在运行时jvm会按照系统默认的编码将信息转换为UNICOD...
    编写程序的时候,经常遇到乱码问题,网上不少文章都有解决办法,我不才精炼了一下: 
    1.乱码产生的原因
    [img]http://dl2.iteye.com/upload/attachment/0088/5616/dbf6529a-94a0-34b4-984d-6119f9f84280.jpg[/img]
    问题就产生在图中圈圈的位置,程序在运行时jvm会按照系统默认的编码将信息转换为UNICODE进行处理,如果输入的信息与当前系统的默认编码不一致,jvm依然会使用系统默认编码进行转换,造成乱码。例如,输入的信息是utf-8,系统编码是gbk,这样jvm就会把utf-8编码的信息按照gbk编码转换为UNICODE,造成乱码。
    2.解决办法
    方法很简单,网上很多,我摘抄一段:
    new String(str.getBytes("utf-8"), "gbk");
    展开全文
  • TTreplace2

    2021-01-09 18:06:51
    Total: 34764 W: 6565 L: 6529 D: 21670 http://tests.stockfishchess.org/tests/view/55ca5c290ebc591b934bd68f</p> <p>Calculate TT replace value as depth minus eight times relative age. For some background...
  • 00000000: 0540 d109 8040 085d e54d d03a 7d1f 6529 .@...@.].M.:}.e) 00000010: 8882 3eb0 b63f 4e8b 3ba7 31e6 8ed6 1cac ..>..?N.;.1..... 00000020: 8054 6561 5402 acdf e205 13f2 b1d6 4550 .TeaT...
  • Add Nightmare Zone plugin

    2021-01-08 06:07:44
    <div><h3>Features: <ul><li>Send tray ...<img alt="" src="https://img-blog.csdnimg.cn/img_convert/d2899662ea27db8c6529ce6847e0061a.png" /></p><p>该提问来源于开源项目:runelite/runelite</p></div>

空空如也

空空如也

1 2 3 4 5 ... 8
收藏数 141
精华内容 56
关键字:

d6529