美文网首页
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 放大模式

    1.介绍:放大模式降低模块之间直接的联系,降低耦合,当一个模块出现错误,不会影响另一个模块的功能 // A模块的功...

  • requireJS

    js的模块化发展历程 函数式 对象写法 立即执行函数 放大镜模式 宽放大模式 输入全局变量

  • iPhone 各机型屏幕参数

    放大模式 支持放大模式的手机有:

  • 前端设计模式

    JS设计模式一:工厂模式jS设计模式二:单例模式JS设计模式三:模块模式JS设计模式四:代理模式JS设计模式五:职...

  • 2021-11-17 - 学习记录

    适配器模式 - js: 代理模式 - js 组合模式 - js

  • 《JS设计模式》读书笔记(一)

    标签:JS 设计模式 《JS设计模式》读书笔记(二) 《JS设计模式》读书笔记(三) 《JS设计模式》读书笔记(四...

  • 《JS设计模式》读书笔记(六)

    标签:JS 设计模式 读书笔记链接: 《JS设计模式》读书笔记(一) 《JS设计模式》读书笔记(二) 《JS设计模...

  • 《JS设计模式》读书笔记(七-完结)

    标签:JS 设计模式 其他读书笔记链接: 《JS设计模式》读书笔记(一) 《JS设计模式》读书笔记(二) 《JS设...

  • 《JS设计模式》读书笔记(二)

    标签:JS 设计模式 读书笔记链接: 《JS设计模式》读书笔记(一) 《JS设计模式》读书笔记(三) 《JS设计模...

  • 《JS设计模式》读书笔记(三)

    标签:JS 设计模式 读书笔记链接: 《JS设计模式》读书笔记(一) 《JS设计模式》读书笔记(二) 《JS设计模...

网友评论

      本文标题:JS 放大模式

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