Detaillierte Erläuterung der Kapselung einer eigenen Modulinstanz
Versuchen Sie, ein Drag-and-Drop-Modul zu kapseln. Ich habe dabei einige Wendungen durchgemacht. Zuerst hatte ich geplant, nur style.left zu verwenden, aber dafür muss man position: absolute festlegen. Es kann Auswirkungen auf den Code haben. Obwohl die CSS-Transformation die Kompatibilität beeinträchtigt, verwende ich hier immer noch die Übersetzung dieses Attributs, um den Umzug abzuschließen.
Code nur mit Stil vervollständigt
Es gibt nicht viel zu sagen, gehen wir direkt zum Code:
HTML und CSS, die Position muss hier festgelegt werden, dies ist das erste Mal Ich schreibe diesen Code, den ich damals vergessen habe, aber am Ende konnte der Effekt überhaupt nicht erzielt werden, obwohl der JS korrekt geschrieben wurde ... Es war wirklich kurzgeschlossen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学习</title>
<style>
*{
margin: 0;
padding: 0;
}
#box{
width: 200px;
height: 200px;
background: #6f6;
font-size: 20px;
cursor:move;
position: absolute;
}
</style>
</head>
<body>
<p id="box"></p>
<script src="js/drag_module.js"></script>
</body>
</html>Der Punkt! ! JS
; //这个分号是为了防止其他的模块最后忘记加分号，导致错误。
(function() {
//构造函数，属于每一个实例
function Drag(selector) {
this.elem = typeof selector == 'object' ? selector : document.getElementById(selector);
//鼠标初始位置
this.startX = 0;
this.startY = 0;
//元素初始位置
this.sourceX = 0;
this.sourceY = 0;
this.init();
}
//原型，共有的
Drag.prototype = {
constructor: Drag,
init: function() {
this.setDrag();
},
//用于获取元素当前的位置信息
getPosition: function() {
var that = this;
var pos = {};
pos = {
x: that.elem.offsetLeft,
y: that.elem.offsetTop
};
return pos;
},
//用来设置当前元素的位置
setPosition: function(pos) {
this.elem.style.left = pos.x + 'px';
this.elem.style.top = pos.y + 'px';
},
//该方法用来绑定事件
setDrag: function() {
var self = this;
this.elem.addEventListener('mousedown', start, false);
function start(event) {
self.startX = event.pageX;
self.startY = event.pageY;
var pos = self.getPosition();
self.sourceX = pos.x;
self.sourceY = pos.y;
document.addEventListener('mousemove', move, false);
document.addEventListener('mouseup', end, false);
}
function move(event) {
//总体思想：鼠标距浏览器距-鼠标距元素距离
var currentX = event.pageX; //当前的鼠标x位置
var currentY = event.pageY; //当前的鼠标y位置
var distanceX = currentX - self.startX; //鼠标移动的距离x
var distanceY = currentY - self.startY; //鼠标移动的距离y
self.setPosition({
x: self.sourceX + distanceX,
y: self.sourceY + distanceY
});
}
function end(event) {
document.removeEventListener('mousemove', move);
document.removeEventListener('mouseup', end);
}
}
};
//暴露在外
window.Drag = Drag;
})();
new Drag('box');Dieser Code ist relativ einfach zu verstehen. Als ich mir Bo Dashens Code zum ersten Mal ansah, verstand ich die Verwendung von Translate tatsächlich nicht, weil ich nicht darüber nachdachte, warum reguläre Ausdrücke verwendet wurden. ......
Obwohl es relativ einfach ist, müssen wir noch das Prinzip dieses Codes analysieren:
1 Es gibt einen Konstruktor Drag() in der selbstausführenden Funktion Die Methoden und Eigenschaften, die wir in der Funktion festlegen, sind für jede Konstruktorinstanz eindeutig, z. B. ihre Standortinformationen usw. Der Prototyp enthält drei Methoden: getPosition() zum Abrufen von Elementpositionsinformationen, setPosition() zum Festlegen der Elementposition und setDrag() zum Binden von Ereignissen. Da diese drei Methoden öffentlich sind, setzen wir sie ein, um Ressourcen zu sparen Prototyp.
2. Das Prinzip der Ausführung dieses Codes lautet: Wenn die Maus gedrückt wird, werden die Anfangspositionsinformationen des Elements sourceX/Y und die Anfangspositionsinformationen des Mauselements startX/Y abgerufen Wenn die Bewegung abgeschlossen ist, wird die neue Position der Maus als aktuelle X/Y-Position ermittelt. Subtrahieren Sie die beiden Mauspositionen, um die Entfernung X/Y zu erhalten, um die sich die Maus bewegt. Dies ist auch die Entfernung, um die sich das Element bewegt. Anschließend weisen wir diesen Wert dem Element zu style.left/top. Das Ziehen von Elementen wird erreicht.
Die Kombination aus Transformation und Stil
Aufgrund der technologischen Entwicklung beginnen immer mehr Geräte, CSS3 zu unterstützen. Darüber hinaus beansprucht Stil immer mehr Ressourcen und hat Probleme mit der Effizienz Erwägen Sie die Verwendung von transform.
Browserkompatibles Schreiben
Wir fügen zunächst ein privates Attribut vor der Funktion Drag() hinzu:
var transform = getTransform();
Fügen Sie unten eine private Methode hinzu:
function getTransform() {
var transform = "",
pStyle = document.createElement('p').style,
transformArr = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'oTransform'],
i = 0,
l = transformArr.length;
for (; i < l; i++) {
if (transformArr[i] in pStyle) {
return transform = transformArr[i];
}
}
return transform;
}PS: Denken Sie an die Methode createElement(), sie wird beim nächsten Mal nützlich sein, um die Browserkompatibilität zu bestimmen!
Wir müssen auch eine Funktion unter getPosition() in der gleichen Form hinzufügen:
getTranslate: function() {
var val = {};
var transformValue = document.defaultView.getComputedStyle(this.elem, false)[transform];
if(transformValue=='none'){
val={x:0,y:0};
}else{
var transformArr = transformValue.match(/-?\d+/g);
val = {
x: Number(transformArr[4]),
y: Number(transformArr[5])
};
}
return val;
},PS: Der Grund, warum wir feststellen müssen, ob transformValue „none“ ist, liegt im Initialisierungszustand Ja, das Element wurde nicht mit dem Transformationsattribut festgelegt, sodass das Array nach der Regularisierung [4][5] nicht finden kann. Daher setzen wir die beiden Attribute von val auf 0. Dies sind die Werte von TranslateX und TranslateY, die später zu Transformation werden .
Weiter Code schreiben. Im obigen Absatz haben wir die X- und Y-Werte der Übersetzung extrahiert. Schauen Sie sich den folgenden Absatz an:
getPosition: function() {
var that = this;
var pos = {};
if(transform){
var val=this.getTranslate();
pos={
x:val.x,
y:val.y
};
}else{
pos = {
x: that.elem.offsetLeft,
y: that.elem.offsetTop
};
}
return pos;
},Achten Sie auf den Inhalt des obigen Codes, den wir geändert haben. Hier haben wir ein Urteil hinzugefügt: Wenn ein Browser vorhanden ist, der das Transformationsattribut unterstützt, verwenden wir das Transformationsattribut Um den Elementwert zu ändern, weisen Sie das zuvor in getTranslate erhaltene x und y dem x und y von pos zu.
Im obigen Codeteil verwenden wir je nach Browser unterschiedliche Methoden, um den gleichen Wert zu erhalten. Der Wert von val kommt von getTranslate(), das wir aus der Transformation des Elements extrahieren. In ähnlicher Weise müssen wir in setPosition() unten auch das if-Urteil festlegen.
setPosition: function(pos) {
if (transform) {
this.elem.style[transform] = 'translate(' + pos.x + 'px' + ',' + pos.y + 'px)';
} else {
this.elem.style.left = pos.x + 'px';
this.elem.style.top = pos.y + 'px';
}
},In diesem Absatz gibt es nichts zu besprechen, es geht lediglich um die Zuweisung von Werten in verschiedenen Formen.
Zu diesem Zeitpunkt ist das Modul verpackt. Schauen wir uns als Nächstes den vollständigen Code an:
;
(function() {
//私有属性
var transform = getTransform();
//构造函数，属于每一个实例
function Drag(selector) {
this.elem = typeof selector == 'object' ? selector : document.getElementById(selector);
//鼠标初始位置
this.startX = 0;
this.startY = 0;
//元素初始位置
this.sourceX = 0;
this.sourceY = 0;
this.init();
}
//原型，共有的
Drag.prototype = {
constructor: Drag,
init: function() {
this.setDrag();
},
//用于获取元素当前的位置信息
getPosition: function() {
var that = this;
var pos = {};
if(transform){
var val=this.getTranslate();
pos={
x:val.x,
y:val.y
};
}else{
pos = {
x: that.elem.offsetLeft,
y: that.elem.offsetTop
};
}
return pos;
},
//获取translate值
getTranslate: function() {
var val = {};
var transformValue = document.defaultView.getComputedStyle(this.elem, false)[transform];
if(transformValue=='none'){
val={x:0,y:0};
}else{
var transformArr = transformValue.match(/-?\d+/g);
val = {
x: Number(transformArr[4]),
y: Number(transformArr[5])
};
}
return val;
},
//用来设置当前元素的位置
setPosition: function(pos) {
if (transform) {
this.elem.style[transform] = 'translate(' + pos.x + 'px' + ',' + pos.y + 'px)';
} else {
this.elem.style.left = pos.x + 'px';
this.elem.style.top = pos.y + 'px';
}
},
//该方法用来绑定事件
setDrag: function() {
var self = this;
this.elem.addEventListener('mousedown', start, false);
function start(event) {
self.startX = event.pageX;
self.startY = event.pageY;
var pos = self.getPosition();
self.sourceX = pos.x;
self.sourceY = pos.y;
document.addEventListener('mousemove', move, false);
document.addEventListener('mouseup', end, false);
}
function move(event) {
//总体思想：鼠标距浏览器距-鼠标距元素距离
var currentX = event.pageX; //当前的鼠标x位置
var currentY = event.pageY; //当前的鼠标y位置
var distanceX = currentX - self.startX; //鼠标移动的距离x
var distanceY = currentY - self.startY; //鼠标移动的距离y
self.setPosition({
x: self.sourceX + distanceX,
y: self.sourceY + distanceY
});
}
function end(event) {
document.removeEventListener('mousemove', move);
document.removeEventListener('mouseup', end);
}
}
};
//私有方法，用来获取transform的兼容写法
function getTransform() {
var transform = "",
pStyle = document.createElement('p').style,
transformArr = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'oTransform'],
i = 0,
l = transformArr.length;
for (; i < l; i++) {
if (transformArr[i] in pStyle) {
return transform = transformArr[i];
}
}
return transform;
}
//暴露在外
window.Drag = Drag;
})();
new Drag('box');Verwandte Empfehlungen:
Javascript Global Variable Encapsulation Module Implementation Code_Javascript Skills
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Kapselung einer eigenen Modulinstanz. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1386
52
![WLAN-Erweiterungsmodul ist gestoppt [Fix]](https://img.php.cn/upload/article/000/465/014/170832352052603.gif?x-oss-process=image/resize,m_fill,h_207,w_330)
WLAN-Erweiterungsmodul ist gestoppt [Fix]
Feb 19, 2024 pm 02:18 PM
Wenn es ein Problem mit dem WLAN-Erweiterungsmodul Ihres Windows-Computers gibt, kann dies dazu führen, dass Sie nicht mehr mit dem Internet verbunden sind. Diese Situation ist oft frustrierend, aber glücklicherweise enthält dieser Artikel einige einfache Vorschläge, die Ihnen helfen können, dieses Problem zu lösen und Ihre drahtlose Verbindung wieder ordnungsgemäß funktionieren zu lassen. Behebung, dass das WLAN-Erweiterbarkeitsmodul nicht mehr funktioniert Wenn das WLAN-Erweiterbarkeitsmodul auf Ihrem Windows-Computer nicht mehr funktioniert, befolgen Sie diese Vorschläge, um das Problem zu beheben: Führen Sie die Netzwerk- und Internet-Fehlerbehebung aus, um drahtlose Netzwerkverbindungen zu deaktivieren und wieder zu aktivieren. Starten Sie den WLAN-Autokonfigurationsdienst neu. Ändern Sie die Energieoptionen. Ändern Erweiterte Energieeinstellungen Netzwerkadaptertreiber neu installieren Einige Netzwerkbefehle ausführen Schauen wir uns das nun im Detail an
Das WLAN-Erweiterungsmodul kann nicht gestartet werden
Feb 19, 2024 pm 05:09 PM
In diesem Artikel werden Methoden zur Behebung des Ereignisses ID10000 beschrieben, das darauf hinweist, dass das WLAN-Erweiterungsmodul nicht gestartet werden kann. Dieser Fehler kann im Ereignisprotokoll des Windows 11/10-PCs erscheinen. Das WLAN-Erweiterbarkeitsmodul ist eine Komponente von Windows, die es unabhängigen Hardwareanbietern (IHVs) und unabhängigen Softwareanbietern (ISVs) ermöglicht, Benutzern angepasste Features und Funktionen für drahtlose Netzwerke bereitzustellen. Es erweitert die Funktionalität nativer Windows-Netzwerkkomponenten durch Hinzufügen von Windows-Standardfunktionen. Das WLAN-Erweiterungsmodul wird im Rahmen der Initialisierung gestartet, wenn das Betriebssystem Netzwerkkomponenten lädt. Wenn beim WLAN-Erweiterungsmodul ein Problem auftritt und es nicht gestartet werden kann, wird möglicherweise eine Fehlermeldung im Protokoll der Ereignisanzeige angezeigt.
SVM-Beispiele in Python
Jun 11, 2023 pm 08:42 PM
Support Vector Machine (SVM) in Python ist ein leistungsstarker überwachter Lernalgorithmus, der zur Lösung von Klassifizierungs- und Regressionsproblemen verwendet werden kann. SVM eignet sich gut für den Umgang mit hochdimensionalen Daten und nichtlinearen Problemen und wird häufig in den Bereichen Data Mining, Bildklassifizierung, Textklassifizierung, Bioinformatik und anderen Bereichen eingesetzt. In diesem Artikel stellen wir ein Beispiel für die Verwendung von SVM zur Klassifizierung in Python vor. Wir werden das SVM-Modell aus der scikit-learn-Bibliothek verwenden
Ausführliche Erklärung der Funktionsweise von Ansible
Feb 18, 2024 pm 05:40 PM
Das Funktionsprinzip von Ansible kann aus der obigen Abbildung verstanden werden: Die Verwaltungsseite unterstützt drei Methoden: Lokal, SSH und Zeromq, um eine Verbindung zur verwalteten Seite herzustellen. Dieser Teil entspricht der Verbindung Im obigen Architekturdiagramm können Sie den Anwendungstyp HostInventory (Hostliste) verwenden, um entsprechende Vorgänge über verschiedene Module zu implementieren und einen einzelnen Befehl auszuführen -hoc; Der Verwaltungsknoten kann eine Reihe von Aufgaben über Playbooks implementieren, z. B. die Installation und Bereitstellung von Webdiensten, die Stapelsicherung von Datenbankservern usw. Wir können Playbooks einfach so verstehen, wie das System vergeht
Dieser Artikel fasst die klassischen Methoden und den Effektvergleich der Funktionsverbesserung und Personalisierung bei der CTR-Schätzung zusammen.
Dec 15, 2023 am 09:23 AM
Bei der CTR-Schätzung verwendet die Mainstream-Methode Feature-Einbettung + MLP, wobei Features sehr wichtig sind. Für dieselben Merkmale ist die Darstellung jedoch in verschiedenen Stichproben gleich. Diese Art der Eingabe in das nachgeschaltete Modell schränkt die Ausdrucksfähigkeit des Modells ein. Um dieses Problem zu lösen, wurde eine Reihe verwandter Arbeiten im Bereich der CTR-Schätzung vorgeschlagen, die als Feature-Enhancement-Modul bezeichnet werden. Das Feature-Enhancement-Modul korrigiert die Ausgabeergebnisse der Einbettungsschicht basierend auf verschiedenen Samples, um sie an die Feature-Darstellung verschiedener Samples anzupassen und die Ausdrucksfähigkeit des Modells zu verbessern. Kürzlich haben die Fudan-Universität und Microsoft Research Asia gemeinsam einen Bericht über die Arbeit zur Funktionsverbesserung veröffentlicht, in dem die Implementierungsmethoden und Auswirkungen verschiedener Funktionserweiterungsmodule verglichen werden. Lassen Sie uns nun a vorstellen
Ansible Ad-Hoc (Peer-to-Peer-Modus)
Feb 18, 2024 pm 04:48 PM
Offizielle Dokumentation: https://docs.ansible.com/ansible/latest/command_guide/intro_adhoc.html Einführung Ein Ad-hoc-Befehl ist ein Befehl, der vorübergehend eingegeben und ausgeführt wird und normalerweise zum Testen und Debuggen verwendet wird. Sie müssen nicht dauerhaft gespeichert werden. Einfach ausgedrückt ist Ad-hoc ein „Sofortbefehl“. Häufig verwendete Module 1. Befehlsmodul (Standardmodul) Das Standardmodul ist nicht so leistungsfähig wie die Shell. Grundsätzlich kann das Shell-Modul die Funktionen des Befehlsmoduls unterstützen. 【1】Help ansible-doccommand# Es wird empfohlen, das folgende ansible-doccomm zu verwenden
VUE3-Erste-Schritte-Beispiel: Erstellen eines einfachen Videoplayers
Jun 15, 2023 pm 09:42 PM
Da die neue Generation von Front-End-Frameworks weiter auf dem Vormarsch ist, erfreut sich VUE3 als schnelles, flexibles und benutzerfreundliches Front-End-Framework großer Beliebtheit. Als Nächstes lernen wir die Grundlagen von VUE3 kennen und erstellen einen einfachen Videoplayer. 1. VUE3 installieren Zuerst müssen wir VUE3 lokal installieren. Öffnen Sie das Befehlszeilentool und führen Sie den folgenden Befehl aus: npminstallvue@next Erstellen Sie dann eine neue HTML-Datei und führen Sie VUE3 ein: <!doctypehtml>
Erfahren Sie Best-Practice-Beispiele für die Zeigerkonvertierung in Golang
Feb 24, 2024 pm 03:51 PM
Golang ist eine leistungsstarke und effiziente Programmiersprache, mit der sich verschiedene Anwendungen und Dienste entwickeln lassen. In Golang sind Zeiger ein sehr wichtiges Konzept, das uns helfen kann, Daten flexibler und effizienter zu verwalten. Die Zeigerkonvertierung bezieht sich auf den Prozess der Zeigeroperation zwischen verschiedenen Typen. In diesem Artikel werden anhand konkreter Beispiele die Best Practices der Zeigerkonvertierung in Golang erläutert. 1. Grundkonzepte In Golang hat jede Variable eine Adresse, und die Adresse ist der Speicherort der Variablen im Speicher.
