美文网首页
JS 放大模式

JS 放大模式

作者: 抽疯的稻草绳 | 来源:发表于2021-01-01 11:07 被阅读0次
    1.介绍:放大模式降低模块之间直接的联系,降低耦合,当一个模块出现错误,不会影响另一个模块的功能

    // A模块的功能自己执行自己的代码

    function Moduel2 () {
    
        this.fn = function () {
            console.log('A模块功能执行')
        }
    }
    
    let A = new Moduel2()
    
    A.fn()
    

    // 此时有模块B想使用模块A的某些功能或者属性,但是我们要降低耦合不能直接去使用模块A,此时再定义一个闭包

    // 会返回一个新的模块A,并且在新的模块中定义了一个请求数据的方法

    let Moduel = (function (mod) {
    
          mod.getData = function () {
    
              return { 
                    data: [{ name: '小美' }, { name: '小兰' }, { name: '兰馨' }], 
                            code: 200, message: '获取成功' }
            }
          
          return mod
    })(Moduel2)
    
    
    
    
    
    function Moduel3 (name) {
    
      // 初始化一下新模块A
      this.mod = Moduel
    }
    
    

    // 调用模块A的或者数据方法,将数据渲染到页面上,充分的降低了模块之间的耦合度

    Moduel3.prototype.renderData = function () {
            let user = this.mod.getData()
            let li = null
            let fragment = document.createDocumentFragment()
            user.data.forEach(item => {
                li = document.createElement('li')
                li.innerHTML = item.name
                fragment.appendChild(li)
            })
            document.getElementById('list').appendChild(fragment)
    }
    
    let B = new Moduel3()
    
    B.renderData()
    

    相关文章

      网友评论

          本文标题:JS 放大模式

          本文链接:https://www.haomeiwen.com/subject/gpfjoktx.html