JS encapsulation plug-in case
This time I will bring you a JS encapsulation plug-in case. What are the precautions for JS encapsulation plug-in? The following is a practical case, let’s take a look.
Due to project reasons, I haven’t written a plug-in in js for more than a year. The project is too mature, and I usually use packaged functional plug-ins. I feel so low... In the past two days, I wanted to take the time to write aWhat is encapsulation?
My understanding is Making a function into a separate component is like making dumplings. In the past, to make dumplings, you had to first make dumpling wrappers with flour, then make dumpling fillings, and then make dumplings by hand. But now people have invented automatic dumpling making machines. Although the inside of the machine Each step is the same as making dumplings yourself, but in fact there is only one thing you need to do now, which is to put the ingredients. The machine here is the packaged plug-in, and the raw materials are the parameters you want to pass Why should we encapsulate js functions into plug-ins? I think there are the following points 1. Facilitate code reuse 2. Avoid interference from components with the same function. There may be some issues with scope. 3. Easy to maintain and conducive to project accumulation 4. Don’t you think copying and pasting all the time is very low... There seem to be two kinds of encapsulation I saw on the Internet, one is the native encapsulation of js, and the other is the encapsulation ofjquery. Let me talk about native encapsulation first.
When encapsulating, we will put the js code into a self-executingfunction to prevent variable conflicts.
(function(){
......
......
}()}(function(){
var demo = function(options){
......
}
}())(function(){
var demo = function(options){
......
}
window.demo = demo;
}())var ss = new demo({
x:1,
y:2
})；new demo({
x:2,
y:3
})；(function(){
var demo = function(options){
this.options = $.extend({
"x" : 1,
"y" : 2,
"z" : 3
},options)
}
window.demo = demo;
}())(function(){
var demo = function(options){
this.options = $.extend({
"x" : "1",
"y" : "2",
"z" : "3"
},options);
this.init();
};
demo.prototype.init = function(){
alert("x是"+this.options.x+" y是"+this.options.y+" z是"+this.options.z);
};
window.demo = demo;
}());
new demo({
"x" :"5",
"y" :"4"
});
</script>object? I'll check it out later..........
Another thing that needs to be mentioned is that when encapsulating js, we must consider everything, such as its scalability and compatibility, as well as its performance. If there is no need, there is no need to encapsulate... Be selective . There are countless plug-ins that have been completed on the Internet, and their functions are very powerful. However, sometimes we only use a small part of a large plug-in, so we need to modify it ourselves. It suits us, and the styles of some projects are different from the current plug-in styles, so the key is to suit your own projects. I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website! Recommended reading:How Vuejs operates page regionalization
detailed explanation of using webpack2 React
JQUERY gets the value of the attribute through the current tag name
The above is the detailed content of JS encapsulation plug-in case. 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
PyCharm Beginner's Guide: Comprehensive understanding of plug-in installation!
Feb 25, 2024 pm 11:57 PM
PyCharm is a powerful and popular Python integrated development environment (IDE) that provides a wealth of functions and tools so that developers can write code more efficiently. The plug-in mechanism of PyCharm is a powerful tool for extending its functions. By installing different plug-ins, various functions and customized features can be added to PyCharm. Therefore, it is crucial for newbies to PyCharm to understand and be proficient in installing plug-ins. This article will give you a detailed introduction to the complete installation of PyCharm plug-in.
![Error loading plugin in Illustrator [Fixed]](https://img.php.cn/upload/article/000/465/014/170831522770626.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
Error loading plugin in Illustrator [Fixed]
Feb 19, 2024 pm 12:00 PM
When launching Adobe Illustrator, does a message about an error loading the plug-in pop up? Some Illustrator users have encountered this error when opening the application. The message is followed by a list of problematic plugins. This error message indicates that there is a problem with the installed plug-in, but it may also be caused by other reasons such as a damaged Visual C++ DLL file or a damaged preference file. If you encounter this error, we will guide you in this article to fix the problem, so continue reading below. Error loading plug-in in Illustrator If you receive an "Error loading plug-in" error message when trying to launch Adobe Illustrator, you can use the following: As an administrator
Share three solutions to why Edge browser does not support this plug-in
Mar 13, 2024 pm 04:34 PM
When users use the Edge browser, they may add some plug-ins to meet more of their needs. But when adding a plug-in, it shows that this plug-in is not supported. How to solve this problem? Today, the editor will share with you three solutions. Come and try it. Method 1: Try using another browser. Method 2: The Flash Player on the browser may be out of date or missing, causing the plug-in to be unsupported. You can download the latest version from the official website. Method 3: Press the "Ctrl+Shift+Delete" keys at the same time. Click "Clear Data" and reopen the browser.
What is the Chrome plug-in extension installation directory?
Mar 08, 2024 am 08:55 AM
What is the Chrome plug-in extension installation directory? Under normal circumstances, the default installation directory of Chrome plug-in extensions is as follows: 1. The default installation directory location of chrome plug-ins in windowsxp: C:\DocumentsandSettings\username\LocalSettings\ApplicationData\Google\Chrome\UserData\Default\Extensions2. chrome in windows7 The default installation directory location of the plug-in: C:\Users\username\AppData\Local\Google\Chrome\User
WebSocket and JavaScript: key technologies for implementing real-time monitoring systems
Dec 17, 2023 pm 05:30 PM
WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology
Does PyCharm Community Edition support enough plugins?
Feb 20, 2024 pm 04:42 PM
Does PyCharm Community Edition support enough plugins? Need specific code examples As the Python language becomes more and more widely used in the field of software development, PyCharm, as a professional Python integrated development environment (IDE), is favored by developers. PyCharm is divided into two versions: professional version and community version. The community version is provided for free, but its plug-in support is limited compared to the professional version. So the question is, does PyCharm Community Edition support enough plug-ins? This article will use specific code examples to
Detailed explanation of how to install and set up the EclipseSVN plug-in
Jan 28, 2024 am 08:42 AM
Detailed explanation of how to install and set up the EclipseSVN plug-in Eclipse is a widely used integrated development environment (IDE) that supports many different plug-ins to extend its functionality. One of them is the EclipseSVN plugin, which enables developers to interact with the Subversion version control system. This article will detail how to install and set up the EclipseSVN plug-in and provide specific code examples. Step 1: Install the EclipseSVN plug-in and open Eclipse
JavaScript and WebSocket: Building an efficient real-time weather forecasting system
Dec 17, 2023 pm 05:13 PM
JavaScript and WebSocket: Building an efficient real-time weather forecast system Introduction: Today, the accuracy of weather forecasts is of great significance to daily life and decision-making. As technology develops, we can provide more accurate and reliable weather forecasts by obtaining weather data in real time. In this article, we will learn how to use JavaScript and WebSocket technology to build an efficient real-time weather forecast system. This article will demonstrate the implementation process through specific code examples. We
