interface Web
js tutoriel
Explication détaillée de l'encapsulation d'une propre instance de module
Explication détaillée de l'encapsulation d'une propre instance de module
Essayez d'encapsuler un module glisser-déposer. J'ai connu quelques rebondissements dans le processus. Au début, j'avais prévu de n'utiliser que style.left, mais cela nécessitait une position de réglage : absolue. Cela peut avoir un certain impact sur le code. Bien que la transformation CSS affectera la compatibilité, j'utilise toujours ici la traduction de cet attribut pour terminer le déplacement.
Code complété avec le style uniquement
Pas grand chose à dire, passons directement au code :
html et css, la position doit être définie ici, c'est la première fois J'écris ce code je l'avais oublié à l'époque, mais au final, même si le JS était écrit correctement, l'effet ne pouvait pas sortir du tout... C'était vraiment court-circuité
<!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>Le point ! ! 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');Ce code est relativement facile à comprendre. Lorsque j'ai regardé pour la première fois le code de Bo Dashen, je n'ai en fait pas compris l'utilisation de la traduction car je n'ai pas réfléchi à la raison pour laquelle les expressions régulières étaient utilisées. ......
Bien que ce soit relativement simple, il faut quand même analyser le principe de ce code :
1 Il y a un constructeur Drag() dans la fonction auto-exécutable. . Les méthodes et propriétés que nous définissons dans la fonction sont uniques à chaque instance de constructeur, comme leurs informations de localisation, etc. Il existe trois méthodes dans le prototype : getPosition() pour obtenir des informations sur la position de l'élément, setPosition() pour définir la position de l'élément et setDrag() pour lier les événements. Puisque ces trois méthodes sont publiques, afin d'économiser des ressources, nous les mettons dans le fichier. prototype.
2. Le principe d'exécution de ce code est le suivant : lorsque la souris est enfoncée, les informations de position initiale de l'élément sourceX/Y et les informations de position initiale de la souris startX/Y sont obtenues ; le mouvement est terminé, la nouvelle position de la souris est obtenue currentX/Y, soustrayez les deux positions de la souris pour obtenir la distanceX/Y que la souris déplace, qui est également la distance parcourue par l'élément. Ensuite, nous attribuons cette valeur à celle de l'élément. style.left/top. Le glissement des éléments est réalisé.
La combinaison de la transformation et du style
En raison du développement de la technologie, de plus en plus d'appareils commencent à prendre en charge CSS3. De plus, le style consomme plus de ressources et a des problèmes d'efficacité, c'est pourquoi nous. Pensez à utiliser transform.
Écriture compatible avec le navigateur
Nous ajoutons d'abord un attribut privé avant la fonction Drag() :
var transform = getTransform();
Ajoutez une méthode privée ci-dessous :
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 : N'oubliez pas la méthode createElement(), elle sera utile la prochaine fois pour déterminer la compatibilité des navigateurs !
Nous devons également ajouter une fonction sous getPosition() sous la même forme :
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 : La raison pour laquelle nous devons déterminer si transformValue vaut none est parce que dans l'état d'initialisation Oui, l'élément n'a pas été défini avec l'attribut transform, donc le tableau après régularisation ne peut pas trouver [4][5], nous définissons donc les deux attributs de val à 0, qui sont les valeurs de TranslateX et TranslateY qui deviendront transform plus tard .
Continuez à écrire du code. Dans le paragraphe ci-dessus, nous avons utilisé pour extraire les valeurs X et Y de translation. Regardez le paragraphe suivant :
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;
},Faites attention au contenu du code ci-dessus que nous avons modifié. Ici, nous avons ajouté un jugement : lorsqu'un navigateur prenant en charge l'attribut transform existe, nous utiliserons l'attribut transform. pour modifier l'élément Value, attribuez les x et y précédemment obtenus dans getTranslate aux x et y de pos.
Dans le morceau de code ci-dessus, nous utiliserons différentes méthodes pour obtenir la même valeur selon le navigateur. La valeur de val provient de getTranslate(), que nous extrayons de la transformation de l'élément. De même, dans setPosition() ci-dessous, nous devons également définir le jugement if.
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';
}
},Il n'y a rien à dire dans ce paragraphe, il s'agit simplement d'attribuer des valeurs sous différentes formes.
À ce stade, le module est empaqueté. Examinons ensuite le code complet :
;
(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');Recommandations associées :
implémentation du module d'encapsulation de variables globales javascript code_javascript skills
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
![Le module d'extension WLAN s'est arrêté [correctif]](https://img.php.cn/upload/article/000/465/014/170832352052603.gif?x-oss-process=image/resize,m_fill,h_207,w_330)
Le module d'extension WLAN s'est arrêté [correctif]
Feb 19, 2024 pm 02:18 PM
S'il y a un problème avec le module d'extension WLAN sur votre ordinateur Windows, cela peut entraîner une déconnexion d'Internet. Cette situation est souvent frustrante, mais heureusement, cet article propose quelques suggestions simples qui peuvent vous aider à résoudre ce problème et à rétablir le bon fonctionnement de votre connexion sans fil. Réparer le module d'extensibilité WLAN s'est arrêté Si le module d'extensibilité WLAN a cessé de fonctionner sur votre ordinateur Windows, suivez ces suggestions pour le réparer : Exécutez l'utilitaire de résolution des problèmes réseau et Internet pour désactiver et réactiver les connexions réseau sans fil Redémarrez le service de configuration automatique WLAN Modifier les options d'alimentation Modifier Paramètres d'alimentation avancés Réinstaller le pilote de la carte réseau Exécuter certaines commandes réseau Examinons-le maintenant en détail
Le module d'extensibilité WLAN ne peut pas démarrer
Feb 19, 2024 pm 05:09 PM
Cet article détaille les méthodes permettant de résoudre l'événement ID10000, qui indique que le module d'extension LAN sans fil ne peut pas démarrer. Cette erreur peut apparaître dans le journal des événements du PC Windows 11/10. Le module d'extensibilité WLAN est un composant de Windows qui permet aux fournisseurs de matériel indépendants (IHV) et aux fournisseurs de logiciels indépendants (ISV) de fournir aux utilisateurs des fonctionnalités de réseau sans fil personnalisées. Il étend les fonctionnalités des composants réseau Windows natifs en ajoutant la fonctionnalité par défaut de Windows. Le module d'extensibilité WLAN est démarré dans le cadre de l'initialisation lorsque le système d'exploitation charge les composants réseau. Si le module d'extension LAN sans fil rencontre un problème et ne peut pas démarrer, vous pouvez voir un message d'erreur dans le journal de l'Observateur d'événements.
Exemples SVM en Python
Jun 11, 2023 pm 08:42 PM
Support Vector Machine (SVM) en Python est un puissant algorithme d'apprentissage supervisé qui peut être utilisé pour résoudre des problèmes de classification et de régression. SVM fonctionne bien lorsqu'il s'agit de données de grande dimension et de problèmes non linéaires, et est largement utilisé dans l'exploration de données, la classification d'images, la classification de textes, la bioinformatique et d'autres domaines. Dans cet article, nous présenterons un exemple d'utilisation de SVM pour la classification en Python. Nous utiliserons le modèle SVM de la bibliothèque scikit-learn
Explication détaillée du fonctionnement d'Ansible
Feb 18, 2024 pm 05:40 PM
Le principe de fonctionnement d'Ansible peut être compris à partir de la figure ci-dessus : l'extrémité de gestion prend en charge trois méthodes locales, ssh et zeromq pour se connecter à l'extrémité gérée. La valeur par défaut est d'utiliser une connexion basée sur ssh. Cette partie correspond au module de connexion. dans le diagramme d'architecture ci-dessus ; il peut être connecté par type d'application. La classification HostInventory (liste d'hôtes) est effectuée d'autres manières. Le nœud de gestion implémente les opérations correspondantes via divers modules. Un seul module et l'exécution par lots d'une seule commande peuvent être appelés. -hoc ; le nœud de gestion peut implémenter un ensemble de tâches multiples via des playbooks. Implémenter un type de fonctions, telles que l'installation et le déploiement de services Web, la sauvegarde par lots de serveurs de base de données, etc. Nous pouvons simplement comprendre les playbooks au fur et à mesure que le système passe
Cet article résume les méthodes classiques et la comparaison des effets de l'amélioration et de la personnalisation des fonctionnalités dans l'estimation du CTR.
Dec 15, 2023 am 09:23 AM
Dans l'estimation du CTR, la méthode traditionnelle utilise l'intégration de fonctionnalités + MLP, dans lesquels les fonctionnalités sont très critiques. Cependant, pour les mêmes caractéristiques, la représentation est la même dans différents échantillons. Cette façon de saisir le modèle en aval limitera la capacité d'expression du modèle. Afin de résoudre ce problème, une série de travaux connexes ont été proposés dans le domaine de l'estimation du CTR, appelés module d'amélioration des fonctionnalités. Le module d'amélioration des fonctionnalités corrige les résultats de sortie de la couche d'intégration en fonction de différents échantillons pour s'adapter à la représentation des caractéristiques de différents échantillons et améliorer la capacité d'expression du modèle. Récemment, l'Université de Fudan et Microsoft Research Asia ont publié conjointement une étude sur les travaux d'amélioration des fonctionnalités, comparant les méthodes de mise en œuvre et les effets de différents modules d'amélioration des fonctionnalités. Maintenant, introduisons un
Ansible Ad-Hoc (mode peer-to-peer)
Feb 18, 2024 pm 04:48 PM
Documentation officielle : https://docs.ansible.com/ansible/latest/command_guide/intro_adhoc.html Introduction La commande ad-hoc est une commande temporairement saisie et exécutée, généralement utilisée pour les tests et le débogage. Ils n'ont pas besoin d'être enregistrés de manière permanente. En termes simples, l'ad hoc est une "commande instantanée". Modules couramment utilisés 1. module de commande (module par défaut) Le module par défaut n'est pas aussi puissant que le shell. Fondamentalement, le module shell peut prendre en charge les fonctions du module de commande. 【1】Aide ansible-doccommand# Il est recommandé d'utiliser le ansible-doccomm suivant
Exemple de démarrage de VUE3 : création d'un lecteur vidéo simple
Jun 15, 2023 pm 09:42 PM
Alors que la nouvelle génération de frameworks front-end continue d'émerger, VUE3 est apprécié comme un framework front-end rapide, flexible et facile à utiliser. Ensuite, apprenons les bases de VUE3 et créons un simple lecteur vidéo. 1. Installez VUE3 Tout d'abord, nous devons installer VUE3 localement. Ouvrez l'outil de ligne de commande et exécutez la commande suivante : npminstallvue@next. Ensuite, créez un nouveau fichier HTML et introduisez VUE3 : <!doctypehtml>
Découvrez des exemples de bonnes pratiques de conversion de pointeur dans Golang
Feb 24, 2024 pm 03:51 PM
Golang est un langage de programmation puissant et efficace qui peut être utilisé pour développer diverses applications et services. Dans Golang, les pointeurs sont un concept très important, qui peut nous aider à exploiter les données de manière plus flexible et plus efficace. La conversion de pointeur fait référence au processus d'opérations de pointeur entre différents types. Cet article utilisera des exemples spécifiques pour découvrir les meilleures pratiques de conversion de pointeur dans Golang. 1. Concepts de base Dans Golang, chaque variable a une adresse, et l'adresse est l'emplacement de la variable en mémoire.
