放大模式

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()

javascript----放大模式的更多相关文章

  1. javascript运行模式:并发模型 与Event Loop

    看了阮一峰老师的JavaScript 运行机制详解:再谈Event Loop和[朴灵评注]的文章,查阅网上相关资料,把自己对javascript运行模式和EVENT loop的理解整理下,不一定对,日 ...

  2. Javascript原型模式总结梳理

    在大多数面向对象语言中,对象总是由类中实例化而来,类和对象的关系就像模具跟模件一样.Javascript中没有类的概念,就算ES6中引入的class也不过是一种语法糖,本质上还是利用原型实现.在原型编 ...

  3. JavaScript严格模式详解

    转载自阮一峰的博客 Javascript 严格模式详解   作者: 阮一峰 一.概述 除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict m ...

  4. (转)深入理解JavaScript 模块模式

    深入理解JavaScript 模块模式 (原文)http://www.cnblogs.com/starweb/archive/2013/02/17/2914023.html 英文:http://www ...

  5. JavaScript严谨模式(Strict Mode)

    下面的内容翻译自It’s time to start using JavaScript strict mode,作者Nicholas C.Zakas参与了YUI框架的开发,并撰写了多本前端技术书籍,在 ...

  6. 深入理解JavaScript 模块模式

    http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html 模块模式是JavaScript一种常用的编码模式.这是一般的 ...

  7. Javascript编程模式(JavaScript Programming Patterns)Part 1.(初级篇)

    JavaScript 为网站添加状态,这些状态可能是校验或者更复杂的行为像拖拽终止功能或者是异步的请求webserver (aka Ajax). 在过去的那些年里, JavaScript librar ...

  8. (" use strict")Javascript 严格模式详解

    Javascript 严格模式详解 转载别人的博客内容,浏览了一遍,没有全部吸收,先保存一下链接 http://www.ruanyifeng.com/blog/2013/01/javascript_s ...

  9. JQuery日记6.5 Javascript异步模式(一)

    理解力JQuery前实现异步队列,有必要理解javascript异步模式. Javascript异步其实并不严重格异步感,js使某些片段异步方式在将来运行,流不必等待继续向下进行. 在多线程的语言中最 ...

  10. 浅析JavaScript工厂模式

    这里主要介绍两种工厂模式,第一种“简单工厂模式”,第二种“工厂方法模式” 简单工厂模式 1.定义 由一个工厂对象决定对象创建某一种产品对象的的实例.主要用来创建同一类对象. 2.具体需求 现在有一个登 ...

随机推荐

  1. Caused by: java.lang.ClassCastException: class java.lang.Double cannot be cast to class org.apache.hadoop.io.WritableComparable

    错误: Caused by: java.lang.ClassCastException: class java.lang.Double cannot be cast to class org.apac ...

  2. thinkphp5.1+ 使用 Redis 缓存

    修改 config/cache.php 将其配置成多个缓存类型,示例 <?php // +---------------------------------------------------- ...

  3. foreach 里少用&$v

    foreach ( $prize_list as $k => $v ) { $prize_list[$k]['prize_view'] = DB::name('dati_prize_catego ...

  4. thinkphp 5 一些常见问题

    ##  请求缓存 request_cache        

  5. JavaScript Array every()&some()&reduce()方法

    every()方法测试数组的所有元素是否都通过了指定函数的测试. // 每一项都要满足条件才会返回true,只要有一项不满足返回false var arr = [1, 2, 3, 4]; let bl ...

  6. 前端程序员难翻身,没有好的学习方法,你永远无法成功,vue.js专题

    学习vue正确思路,是先学vue-cli,再学vue.js单文件引用的用法,这样会在极短时间内撤底撑握vue, 如果先学vue.js单文件用法,再去学vue-cli4,可以说是重新学vue,,,,难处 ...

  7. Blockchain

    一.中心化 中心化原则是我们日常比较常见的支付手段. 科普文章喜欢用网购举例: 1.你在某宝支付了一件商品,钱先到马云爸爸手中,通知商家发货: 2.商家发货,你收货后确认无误,点击确认收货: 3.马云 ...

  8. Codeforces 1323 div2题解ABC

    A. Even Subset Sum Problem 签到题 #include <bits/stdc++.h> using namespace std; template <type ...

  9. USACO Training Section 1.1 贪婪的送礼者Greedy Gift Givers

    P1201 [USACO1.1]贪婪的送礼者Greedy Gift Givers 题目描述 对于一群(NP个)要互送礼物的朋友,GY要确定每个人送出的钱比收到的多多少.在这一个问题中,每个人都准备了一 ...

  10. OSG程序设计之Hello World 2.0

    现在为Hello World添加一些键盘响应事件. //需要多添加两个库:osgGAd.lib.osgd.lib 代码如下: #include <osgDB/ReadFile> #incl ...