javascript----放大模式
放大模式
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----放大模式的更多相关文章
- javascript运行模式:并发模型 与Event Loop
看了阮一峰老师的JavaScript 运行机制详解:再谈Event Loop和[朴灵评注]的文章,查阅网上相关资料,把自己对javascript运行模式和EVENT loop的理解整理下,不一定对,日 ...
- Javascript原型模式总结梳理
在大多数面向对象语言中,对象总是由类中实例化而来,类和对象的关系就像模具跟模件一样.Javascript中没有类的概念,就算ES6中引入的class也不过是一种语法糖,本质上还是利用原型实现.在原型编 ...
- JavaScript严格模式详解
转载自阮一峰的博客 Javascript 严格模式详解 作者: 阮一峰 一.概述 除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict m ...
- (转)深入理解JavaScript 模块模式
深入理解JavaScript 模块模式 (原文)http://www.cnblogs.com/starweb/archive/2013/02/17/2914023.html 英文:http://www ...
- JavaScript严谨模式(Strict Mode)
下面的内容翻译自It’s time to start using JavaScript strict mode,作者Nicholas C.Zakas参与了YUI框架的开发,并撰写了多本前端技术书籍,在 ...
- 深入理解JavaScript 模块模式
http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html 模块模式是JavaScript一种常用的编码模式.这是一般的 ...
- Javascript编程模式(JavaScript Programming Patterns)Part 1.(初级篇)
JavaScript 为网站添加状态,这些状态可能是校验或者更复杂的行为像拖拽终止功能或者是异步的请求webserver (aka Ajax). 在过去的那些年里, JavaScript librar ...
- (" use strict")Javascript 严格模式详解
Javascript 严格模式详解 转载别人的博客内容,浏览了一遍,没有全部吸收,先保存一下链接 http://www.ruanyifeng.com/blog/2013/01/javascript_s ...
- JQuery日记6.5 Javascript异步模式(一)
理解力JQuery前实现异步队列,有必要理解javascript异步模式. Javascript异步其实并不严重格异步感,js使某些片段异步方式在将来运行,流不必等待继续向下进行. 在多线程的语言中最 ...
- 浅析JavaScript工厂模式
这里主要介绍两种工厂模式,第一种“简单工厂模式”,第二种“工厂方法模式” 简单工厂模式 1.定义 由一个工厂对象决定对象创建某一种产品对象的的实例.主要用来创建同一类对象. 2.具体需求 现在有一个登 ...
随机推荐
- Hadoop的下载和安装
Hadoop的下载和安装 一:Hadoop的简介 Apache的Hadoop是一个开源的.可靠的.可扩展的系统架构,可利用分布式架构来存储海量数据,以及实现分布式的计算. Hadoop许使用简单的编程 ...
- vue.js click点击事件获取当前元素对象
Vue.js可以传递$event对象 <body id="app"> <ul> <li v-on:click="say('hello!', ...
- qt 鼠标拖动窗口 跳动 解决
因为获取当前的位置,似乎没有把标题栏的高度记进去. 所以移动前,得考虑到标题栏的高度. 用以下方式获取标题栏高度: QApplication::style()->pixelMetric(QSty ...
- Linux 如何通过 iscsi target name 获取 ip
by Mike Andrews # lsscsi -t [:::] disk iqn.-.com.blockbridge:t-pjxfzufjkp-illoghjk,t,0x1 /dev/sda [: ...
- [SketchUp]-绘制自己的家
[SketchUp]-绘制自己的家 softsketchuphome 简介 最近已经完成了 毕业论文, 等待盲审的过程中, 将过去几年做的东西也都一一整理了, 硬盘中好几个不敢动的文件夹 也都可以删除 ...
- Spring Boot JPA中java 8 的应用
文章目录 Optional Stream API CompletableFuture Spring Boot JPA中java 8 的应用 上篇文章中我们讲到了如何在Spring Boot中使用JPA ...
- atom 之 前端必备插件
一. 语法支持 1. Language-label Ø ES2016.ESNext.JXS语法扩展 2. Language-postcss Ø Postcss语法高亮 二. 自动补全 1. Autoc ...
- 信息竞赛进阶指南--区间最值问题的ST算法
void ST_prework() { for (int i = 1; i <= n; i++) f[i][0] = a[i]; int t = log(n) / log(2) + 1; for ...
- 你这些知识点都不会,你学个锤子SQL数据库!
全套的数据库的知识都在这里,持续更新中ing 快戳我查看,快戳戳,不管是Oracle还是mysql还是sqlsever,SQL语言都是基础. 一.关系 单一的数据结构----关系 现实世界的实体以及实 ...
- 图论--差分约束--POJ 3169 Layout(超级源汇建图)
Like everyone else, cows like to stand close to their friends when queuing for feed. FJ has N (2 < ...