In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-01-16 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/02 Report--
This article mainly introduces the relevant knowledge of "how to realize the shared meta-pattern of javascript design pattern". The editor shows you the operation process through an actual case, the operation method is simple and fast, and it is practical. I hope this article "how to realize the shared meta-pattern of javascript design pattern" can help you solve the problem.
one。 Understanding the meta-model of sharing
Shared meta-pattern: a pattern for performance optimization, whose core is the use of sharing technology to effectively support a large number of fine-grained objects.
In popular terms, it is to find out the least kind of attribute classification of many attributes of things, using the number of attribute values to classify. For example, if a factory needs 20 male models and 20 female models to wear 40 new clothes for photo promotion, if we do not use the sharing model, we need to hire 40 models. This will cause huge economic losses, and it is not necessary. If we use the sharing model to distinguish by gender, only two models are needed. Let's take a look at the code implementation.
two。 The specific implementation of the code 1. Do not use the shared meta pattern to implement the above case
Analysis: this is a normal code implementation, we have created a total of 40 objects, our daily code may not pay attention to this situation, but in actual development, if we encounter the creation of tens of thousands or even hundreds of thousands of objects, it will cause serious performance loss and waste of memory.
Let Model = function (sex, underwear) {this.sex = sex; this.underwear = underwear;} Model.prototype.takePhoto = function () {console.log ('sex=' + this.sex +' underwear ='+ this.underwear);} for (let I = 0; I
< 20 ; i++){ new Model('男', 'underwear' + i).takePhoto(); } for(let i = 0; i < 20 ; i++){ new Model('女', 'underwear' + i).takePhoto(); }2. 使用享元模式重构上述代码 分析:代码重构后,我们只创建了两个对象便完成了同样的任务,无论需要多少对象,但是我们只需要创建两个对象,大大提高了性能。 let ModelR = function( sex ) { this.sex = sex; } let ModelF = new ModelR( '女' ); let ModelM = new ModelR('男'); ModelR.prototype.takePhoto = function () { console.log('sex=' + this.sex + 'underwear = ' + this.underwear); } for(let i = 0; i < 20 ; i++) { ModelF.underwear = 'underwear' + i; ModelF.takePhoto(); } for(let i = 0; i < 20 ; i++) { ModelM.underwear = 'underwear' + i; ModelM.takePhoto(); } 总体分析: 现在我们对享元模式有了一个大致的了解,思想其实很简单,利用所有对象相同的属性来初始化创建对象,上述例子中利用人的性别这个属性来创建对象,而性别这个属性只有男女这两种,因此我们只需要创建两个对象,将衣服作为其他不同的属性添加到对象中便完成了对象的替换,相当于拥有 40 个不同的对象,但是实际只创建了两个。 因此,我们就引出了一个新的概念,内部状态与外部状态。 3. 享元模式的状态 内部状态:也就是我们上文提到的属性分类最少的一种,也就是性别,只有两种,可以被对象共享。 外部状态:其他属性,不能被共享。 结论:剥离了外部状态的对象成为了共享对象,外部对象在必要时被传入共享对象来组装成一个完整的对象,组装外部对象需要花费一定的时间,但节省了大量内存损耗,因此,享元模式是一种时间换空间的优化模式。 三. 享元模式实际应用 假如我们需用对文件上传,现在假设有两种上传方式 flash 和 plugin,每一次上传都对应一次 js 对象的创建,如果我们按部就班,当大量文件上传时就会造成浏览器假死状态,因此我们用享元模式来设计代码,首先我们来确定文件的内部状态和外部状态,我们思考下文件有什么属性,文件大小,文件类型,文件上传方式,文件大小和文件类型都是不可控属性,文件上传方式只有两种,因此将文件上传方式作为外部状态,现在我们来编写代码。 let Upload = function(uploadType) { this.uploadType = uploadType; } Upload.prototype.delFile = function( id ) { uploadManager.setExternalState(id, this); if(this.fileSize < 3000) { return this.dom[xss_clean].removeChild(this.dom); } } // 使用工厂模式来创建对象 let UploadFactory = function() { let cache = {}; return { create(uploadType) { if(cache[uploadType]){ return cache[uploadType]; } return cache[uploadType] = new Upload( uploadType ); } } }() // 创建一个管理器封装外部状态 let uploadManager = function() { uploadDatabase = {}; return { add(id, uploadType, fileName, fileSize){ let uploadObj = UploadFactory.create( uploadType ); let dom = document.createElement('div'); dom[xss_clean] = `文件名称: ${ fileName },文件大小:${fileSize} 删除`; dom.querySelector('#del').onclick = function() { uploadObj.delFile( id ); } document.body.appendChild( dom ); uploadDatabase[ id ] = { fileName, fileSize, dom } return uploadObj; }, setExternalState(id, uploadObj){ let uploadData = uploadDatabase[id]; for(let i in uploadData) { uploadObj[i] = uploadData[i]; } } } }(); let id = 0; window.startUpload = function(uploadType, files) { for(let i = 0,file; file = files[i++];){ let uploadObj = uploadManager.add(++id, uploadType, file.fileName, file.fileSize); // 进行上传 } }; startUpload('plugin', [ { fileName: '1.txt', fileSize: 1000 }, { fileName: '2.txt', fileSize: 1000 }, { fileName: '3.txt', fileSize: 3000 } ]) startUpload('flash', [ { fileName: '4.txt', fileSize: 1000 }, { fileName: '5.txt', fileSize: 1000 }, { fileName: '6.txt', fileSize: 3000 } ])扩展:再谈内部状态和外部状态 现在我们思考下,如果没有内部状态或者没有外部状态那有该怎么办。 没有内部状态享元:此时,所有属性作为外部享元,相当于内部享元只有一种空,因此我们只需要创建一个对象,此时便相当于之前所提单的单例模式。 没有外部状态享元:这时引入一个新的概念,对象池。 四. 对象池 对象池的应用十分广泛,数据库的连接池就是其重要用武之地。对象池的大多数使用场景就是 DOM 操作,因为 DOM 的创建和删除是 js 种最消耗性能的操作。 理解对象池非常简单,比如说我们想做一个圆形的月饼,只需要制造一个圆形的模具便可以做无数的圆形月饼,当我们想做方形月饼时,只需要制造一个方形模具,同时将圆形模具保留下来,等再次使用时拿出来直接用便可。对象池就是这样的原理,我们看一下其通用实现代码。 let objectPoolFactory = function( fn ) { let pool = []; return { create(...args){ let obj = (pool.length === 0)? fn.apply(this, args) : pool.shift(); return obj; }, recover(obj) { pool.push(obj); } } } 实际应用 我们在地图上搜索几个不同的位置,第一次搜索显示北京的两个景区位置,第二次搜索北京三个饭店的位置。 分析:第一次需要两个 DOM 节点,因此创建两个节点,之后将其回收,第二次需要三个DOM节点,使用之前的两个,只需要再创建一个新的节点便可,大大提高了代码性能。 // 创建 dom 节点 let createDomFactory = objectPoolFactory(()=>{let div = document.createElement ('div'); document.body.appendChild (div); return div;}); let ary = []; / / for recycling let name = [' Tiananmen', "Great Wall"]; for (let I = 0, l = name.length; I < l; iTunes +) {let dom = createDomFactory.create () Dom [XSS _ clean] = name [I]; ary.push (dom);} for (let I = 0, l = ary.length; I < l; I + +) {createDomFactory.recover [I];} let name1 = ["Hotel 1", "Hotel 2", "Hotel 3"]; for (let I = 0, l = name1.length; I < l Let dom +) {let dom = createDomFactory.create (); dom[ XSS _ clean] = name1 [I];} that's all for "how to implement the shared meta-pattern of the javascript design pattern". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.
Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.