mvvm和函数柯里化

原创

已于 2025-02-24 22:44:22 修改 · 361 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

于 2024-03-22 14:38:24 首次发布

MVVM架构模式和函数柯里化 Object相关静态方法

1.MVVM架构模式

2.函数柯里化

01-MVVM架构模式【重点】

`概念`： MVVM是一种架构/设计模式。 MVVM是Model,View和ViewModel的简称

	Model: 模型层。 提供数据
    View: 视图层。 渲染页面
    ViewModel: 视图模型层 连接模型层和视图层的桥梁
    
 `核心`：实现了数据的双向绑定。数据驱动视图：当数据发生变化，视图会自动更新。
 
 `Object.defineProperty()实现MVVM架构`:
  <div id="app"></div>

    <script>
        // MVVM核心：数据的双向绑定，数据驱动视图

        // Model: 模型层  提供数据
        var model = {
   
   
            uname: '小妲己'
        }

        // ViewModel: 视图模型层  连接模型层和视图层
        /* 
            考虑：1. 什么时候访问了数据；2. 什么时候更新了数据
        */
        // 数据劫持
        var _uname = model.uname
        Object.defineProperty(model, 'uname', {
   
   
            get: function () {
   
   
                // 当访问了被监听的属性时触发
                console.log(new Date(), 'uname属性被访问了');
                // 注意：这里不能返回被监听的属性，否则会一直触发get方法，变成死循环
                // 解决：可以在劫持之前，将被监听的属性赋值给另一个临时变量
                return _uname
            },
            set: function (newVal) {
   
   
                // 当修改了被监听的属性时触发
                console.log(new Date(), 'uname属性被修改了', newVal);
                // 修改模型层的数据
                _uname = newVal
                // 通知视图层更新
                watch()
            }
        })


        // View: 视图层 渲染页面
        function render() {
   
   
            app.innerHTML = `<span>${
     
     model.uname}</span><button onclick="changeUname()">戳我呀~</button>`
        }

        render()

        function changeUname() {
   
   
            // 修改了被监听的属性，会触发set方法
            model.uname = '小貂蝉'
        }

        function watch() {
   
   
            render