SOURCE

// 控制器将用户操作映射到model上
const nameList = {
    start: function () {
        views.keyDown()
    },
    submit: function () {
        views.inpSubmit()
    },
    update: function () {
        views.appendList()
        let _list = model.listGet()
        console.log(_list)
    }
}
// 视图绑定用户操作
const views = {
    keyDown: function () {
        model.inpHtml.addEventListener('keydown', function(event) {
            if(event.keyCode == "13") {
                nameList.submit()
            }
        })
    },
    inpSubmit: function () {
        model.inpSet(model.inpHtml.value)
        model.listSet(model.inpHtml.value)
        nameList.update()
    },
    appendList: function () {
        let _li = document.createElement('li')
        _li.innerHTML = model.inpGet()
        model.listUl.appendChild(_li)
    }
}
// 数据模型负责业务逻辑和数据存储
const model = {
    inpValue: '',
    list: [],
    inpHtml: document.querySelector('.inp'),
    listUl: document.querySelector('ul'),
    inpGet: function () {
        return this.inpValue
    },
    inpSet: function (val) {
        this.inpValue = val
    },
    listGet: function () {
        return this.list
    },
    listSet: function (val) {
        this.list.push(val)
    }
    
}
nameList.start()

<input class="inp" type="text" placeholder="输入回车增加用户列表" />

<ul class="list"></ul>