


A brief introduction to the structural flyweight pattern of js design patterns
This article mainly introduces the relevant information of the structural flyweight pattern of js design pattern in detail. It has certain reference value. Interested friends can refer to it
Effective use of sharing technology It supports a large number of fine-grained objects to avoid unnecessary overhead caused by having the same content between objects.
The flyweight model mainly separates the sharing of data and methods, and divides the data and methods into internal data, internal methods and external data and external methods. Internal methods and internal data refer to similar or shared data and methods, so extract them to reduce overhead.
var Flyweight = function() { // 已创建的元素 var created = []; // 创建一个新闻包装容器 function create() { var dom = document.createElement('p'); // 将容器插入新闻列表容器中 document.getElementById('container').appendChild(dom); // 缓存新创建的元素 created.push(dom); // 返回创建的新元素 return dom; } return { // 获取创建新闻元素方法 getp: function() { // 如果已创建的元素小于当前页元素总个数(5个),则创建 if(created.length < 5) { return created(); } else { // 获取第一个元素,并插入去后面 var p = created.shift(); created.push(p); return p; } } } }
The above creates a flyweight class. Since only 5 news items can be displayed on each page, 5 elements are created and stored inside the flyweight class. You can use the getp method to get the created element. Next, we need to implement external data and external methods. External data is all the news content we want to display. Since each content is different, it cannot be shared.
var paper = 0, num = 5, len = article.length; // 添加五条新闻 for(var i = 0; i < 5; i++) { if(article[i]) // 通过享元类获取创建的元素并写入新闻内容 Flyweight.getp().innerHTML = article[i]; }
// 下一页按钮绑定事件 document.getElementById('next_page').onclick = function() { // 如果新闻内容不足5条则返回 if(article.length < 5) { return; } var n = ++paper * num % len, // 获取当前页的第一条新闻索引 j = 0; // 插入5条新闻 for(; j < 5; j++) { // 如果存在n+j条则插入 if(article[n + j]) { Flyweight.getp().innerHTML = article[n + j]; // 否则插入起始位置第n+j-len条 } else if(article[n + j - len]) { Flyweight.getp().innerHTML = article[n + j - len]; } else { Flyweight.getp().innerHTML = ""; } } }
After using flyweight mode to reconstruct the page, each operation only needs to operate 5 elements, so Performance can be improved a lot.
The application of flyweight mode is to improve the execution efficiency and system performance of the program. Therefore, it is widely used in the development of large systems to avoid data duplication in the program. When applying, you must find out the internal state and external state correctly, so that you can extract and separate them more reasonably.
The above is the detailed content of A brief introduction to the structural flyweight pattern of js design patterns. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

2024 is the first year of AI mobile phones. More and more mobile phones integrate multiple AI functions. Empowered by AI smart technology, our mobile phones can be used more efficiently and conveniently. Recently, the Galaxy S24 series released at the beginning of the year has once again improved its generative AI experience. Let’s take a look at the detailed function introduction below. 1. Generative AI deeply empowers Samsung Galaxy S24 series, which is empowered by Galaxy AI and brings many intelligent applications. These functions are deeply integrated with Samsung One UI6.1, allowing users to have a convenient intelligent experience at any time, significantly improving the performance of mobile phones. Efficiency and convenience of use. The instant search function pioneered by the Galaxy S24 series is one of the highlights. Users only need to press and hold

In the Java framework, the difference between design patterns and architectural patterns is that design patterns define abstract solutions to common problems in software design, focusing on the interaction between classes and objects, such as factory patterns. Architectural patterns define the relationship between system structures and modules, focusing on the organization and interaction of system components, such as layered architecture.

The decorator pattern is a structural design pattern that allows dynamic addition of object functionality without modifying the original class. It is implemented through the collaboration of abstract components, concrete components, abstract decorators and concrete decorators, and can flexibly expand class functions to meet changing needs. In this example, milk and mocha decorators are added to Espresso for a total price of $2.29, demonstrating the power of the decorator pattern in dynamically modifying the behavior of objects.

Design patterns solve code maintenance challenges by providing reusable and extensible solutions: Observer Pattern: Allows objects to subscribe to events and receive notifications when they occur. Factory Pattern: Provides a centralized way to create objects without relying on concrete classes. Singleton pattern: ensures that a class has only one instance, which is used to create globally accessible objects.

1. Factory pattern: Separate object creation and business logic, and create objects of specified types through factory classes. 2. Observer pattern: allows subject objects to notify observer objects of their state changes, achieving loose coupling and observer pattern.

TDD is used to write high-quality PHP code. The steps include: writing test cases, describing the expected functionality and making them fail. Write code so that only the test cases pass without excessive optimization or detailed design. After the test cases pass, optimize and refactor the code to improve readability, maintainability, and scalability.

The Adapter pattern is a structural design pattern that allows incompatible objects to work together. It converts one interface into another so that the objects can interact smoothly. The object adapter implements the adapter pattern by creating an adapter object containing the adapted object and implementing the target interface. In a practical case, through the adapter mode, the client (such as MediaPlayer) can play advanced format media (such as VLC), although it itself only supports ordinary media formats (such as MP3).

The Guice framework applies a number of design patterns, including: Singleton pattern: ensuring that a class has only one instance through the @Singleton annotation. Factory method pattern: Create a factory method through the @Provides annotation and obtain the object instance during dependency injection. Strategy mode: Encapsulate the algorithm into different strategy classes and specify the specific strategy through the @Named annotation.
