带有自定义HTML元素的Javascript MVC-通知控制器

Question

我已经编写了自定义HTML元素，其构造函数和定义本身在类中。我这样做是为了创建视图。但是，我需要使用MVC，模型视图控制器设计模式创建一个应用程序。我看过几篇文章，但所有文章都涉及标准HTML元素。如何使用自定义HTML元素（不是Web组件；它们不使用影子DOM）来做到这一点]

ps：我没有使用Jquery，而是使用了标准选择器。

Answer 1

您可以像使用标准Javascript一样将MVC模式用于自定义元素。

定义：

• 控制器的一个object（或class）
• 一个用于Model
• 一个用于视图

有很多方法可以定义和互连模型，视图和控制器。

---

特定于自定义元素

适应自定义元素，您可以：

• 将自定义元素类（扩展HTMLElement）定义为Controller
• 将自定义元素类定义为View
• 在自定义元素class]中定义Model
，View和Controller）>
• 在自定义元素class之外定义3个实体
• 等

---

示例

在下面实现的简约示例中：

• 自定义元素class定义Controller
• << [Model
在控制器中声明为function然后，
• View
在控制器中也被声明为function这样，视图可以直接访问模型（用于读取数据）和控制器。

//CONTROLLER
class PersonController extends HTMLElement {
    connectedCallback() {             
        let controller = this 
        let elem = this

        //MODEL
        function PersonModel () {
            //Model API
            this.load = async id => {
                let res = await fetch( `https://reqres.in/api/users/${id}` )
                let json = await res.json()
                Object.assign( this, json.data )
                controller.updateView()
            }
        }                

        let model = new PersonModel

        //VIEW
        function PersonView () {
            elem.innerHTML = `
                Id : <input id=index type=number>
                <div id=card>Loading data
                </div>` 

            let card = elem.querySelector( 'div#card' )
            let index = elem.querySelector( 'input#index' )

            index.onchange = () => controller.init( index.value)               
            
            //View API
            this.update = () => {
                card.innerHTML = `
                    <div>Name : ${model.first_name} ${model.last_name}</div>
                    <div><img src=${model.avatar}></div>`
                index.value = model.id    
            }              
        }

        let view = new PersonView

        //Controller API
        this.init = id => model.load( id )               
        this.updateView = () => view.update() 

        //Init with some data 
        this.init( 4 )
    }
}

customElements.define( 'person-card', PersonController )

person-card { display: inline-block ; background-color: lightblue }
person-card input { width: 50 }
<person-card></person-card>

此示例使用MVC模式创建一个<person-card>元素，该元素将从REST Web服务中获取一些数据（在reqres.in处，并显示一个人的姓名，ID和化身。