课后作业： mvvm demo 实现 vue 例子开发

<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clip

第十一节课问题收集 about 2019.03 HOT 2 OPEN

caihuiji commented on June 26, 2024

第十一节课问题收集

from 2019.03.

Comments (2)

evilrescuer commented on June 26, 2024

请问老师，下面这个mvvm demo的例子中：
Object.defineProperty的get方法，怎么直接返回model.text的值 (就是不用另外设置一个变量randomStr，而是直接返回被设置的新的值)；如果不写get方法，又会是undefined

<!DOCTYPE html>
<html>
    <div id="container">
        <!-- view 部分 (model.text表示取model.text的数据) -->
        <p id="p" data="{{model.text}}"><p>
    </div>

    <script>
        /** model 部分 **/
        let model = {
            text: '',
        }
        
        // 监听model.text数据变化(重点)
        Object.defineProperty(model, 'text', {
            set: (value) => {
                // model.text变化，新的值是value
                render() // 重新render p 元素 (把Model的数据同步到View显示出来)
            },
            // get: () => model.text    //(死循环)
            get: () => randomStr
        })

        // 模拟数据变化(每秒)
        let randomStr = ''
        setInterval(() => {
            // 设置一个随机数
            randomStr = Math.floor(Math.random() * 10000) + ''
            model.text = randomStr
        }, 1000)

        // DIY 一个render方法：模拟渲染p元素(根据p元素的属性data的模板语法)
        const render = () => {
            const p = document.querySelector('#container p');
            const expression = /\{\{([^{}]*)\}\}/.exec(p.getAttribute('data'))[1];  // model.text
            // 根据模板变量，修改p的文本
            p.innerText = eval(expression);
        }
    </script>
</html>

from 2019.03.

caihuiji commented on June 26, 2024

(function (model, name , value){
          
        Object.defineProperty(model, name, {
            set: (newValue) => {
                value = newValue;
              
                render() 
                return value;
            },
          
            get: () => {
              return value
            }
        })
      })(model,'text');

Object.defineProperty 改成这个部分，不然一直 mode.text 会进入一直 get 死循环

from 2019.03.

Related Issues (20)

Recommend Projects