封装一个自己的模块实例详解
试着封装了一个拖拽模块。过程中经历了一些曲折，最开始我是打算只用style.left的方式，但是这个需要设置position：absolute。可能对代码造成一定影响。虽然CSS的transform会影响兼容，但这里我还是使用了这个属性的translate来完成移动。
只用style完成的代码
话不多说，直接上代码：
html和css，这里必须设置position，第一次写这段代码的时候忘了，结果尽管JS写对了，效果完全出不来....真是短路了
<!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>重点！！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');这段代码是比较好理解的，在一开始看波大神的代码时，对于translate的运用实际上我没看太明白，因为没想到为啥要用到正则......
虽然比较简单，但是我们还是要分析一下这段代码的原理：
1.自执行函数里有一个构造函数Drag（），在构造函数里我们设置的方法和属性时每一个构造函数实例独有的，比如他们的位置信息等。而在原型里的有三个方法：分别是获取元素位置信息的getPosition（）、设置元素位置的setPosition（）和绑定事件的setDrag（），这三个因为是公用的，为了节省资源，我们就放在原型里了。
2.这段代码执行的原理是：当鼠标按下时，获取元素初始位置信息sourceX/Y、鼠标初始位置信息startX/Y；当鼠标移动完成时，获取鼠标新的位置currentX/Y，两个鼠标位置相减就能得到鼠标移动的距离distanceX/Y，这同时也是元素移动的距离，然后，我们把这个值赋给元素的style.left/top。元素的拖拽就实现了。
transform和style的结合
由于技术的发展，越来越多的设备开始支持CSS3了，加上style的资源占用的更多，效率方面存在问题，所以我们考虑使用transform。
浏览器的兼容写法
我们首先在函数Drag（）前加上私有属性：
var transform = getTransform();
在下面再加上私有方法：
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：记住createElement（）这个方法，下次判断浏览器兼容时用得着！
我们还需要在getPosition（）的下面加上一个函数，用同样的形式：
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：之所以要判断transformValue是否为none，是因为在初始化状态是，元素未被设置transform属性，这样正则之后的数组是找不到[4][5] 的，所以我们让val的两个属性为0，也就是稍后会成为的transform的translateX和translateY的值。
继续写代码。上面一段我们用来提取translate的X、Y值。看下面一段：
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;
},注意上面一段代码我们修改的的内容，在这里我们增加了一个判断：即当支持transform属性的浏览器存在时，我们会用transform属性修改元素的值，把之前在getTranslate中得到的x、y赋值给pos的x、y。
在上面一段代码中，我们会根据浏览器的情况，用不同的方法取到相同的值，val的值来自getTranslate（），是我们从元素的transform中提取出来的。同样，在下面的setPosition（）中，我们也要设置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';
}
},这一段没什么好讲的，就是用不同的形式赋值而已。
到这里，这个模块就封装完毕了。接下来让我们看看完整代码：
;
(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');相关推荐：
javascript全局变量封装模块实现代码_javascript技巧
Atas ialah kandungan terperinci 封装一个自己的模块实例详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1377
52
![Modul pengembangan WLAN telah berhenti [fix]](https://img.php.cn/upload/article/000/465/014/170832352052603.gif?x-oss-process=image/resize,m_fill,h_207,w_330)
Modul pengembangan WLAN telah berhenti [fix]
Feb 19, 2024 pm 02:18 PM
Jika terdapat masalah dengan modul pengembangan WLAN pada komputer Windows anda, ia mungkin menyebabkan anda terputus sambungan daripada Internet. Keadaan ini sering mengecewakan, tetapi mujurlah, artikel ini menyediakan beberapa cadangan mudah yang boleh membantu anda menyelesaikan masalah ini dan membolehkan sambungan wayarles anda berfungsi dengan baik semula. Betulkan Modul Kebolehlanjutan WLAN Telah Berhenti Jika Modul Kebolehlanjutan WLAN telah berhenti berfungsi pada komputer Windows anda, ikuti cadangan ini untuk membetulkannya: Jalankan Penyelesai Masalah Rangkaian dan Internet untuk melumpuhkan dan mendayakan semula sambungan rangkaian wayarles Mulakan semula Perkhidmatan Konfigurasi Auto WLAN Ubah Suai Pilihan Kuasa Ubah suai Tetapan Kuasa Lanjutan Pasang Semula Pemacu Penyesuai Rangkaian Jalankan Beberapa Perintah Rangkaian Sekarang, mari kita lihat secara terperinci
Modul kebolehlanjutan WLAN tidak boleh dimulakan
Feb 19, 2024 pm 05:09 PM
Artikel ini memperincikan kaedah untuk menyelesaikan ID10000 peristiwa, yang menunjukkan bahawa modul pengembangan LAN Wayarles tidak boleh dimulakan. Ralat ini mungkin muncul dalam log peristiwa Windows 11/10 PC. Modul kebolehlanjutan WLAN ialah komponen Windows yang membenarkan vendor perkakasan bebas (IHV) dan vendor perisian bebas (ISV) untuk menyediakan pengguna dengan ciri dan fungsi rangkaian wayarles tersuai. Ia memanjangkan keupayaan komponen rangkaian Windows asli dengan menambahkan fungsi lalai Windows. Modul kebolehlanjutan WLAN dimulakan sebagai sebahagian daripada permulaan apabila sistem pengendalian memuatkan komponen rangkaian. Jika Modul Pengembangan LAN Wayarles menghadapi masalah dan tidak boleh dimulakan, anda mungkin melihat mesej ralat dalam log dalam Pemapar Acara.
Contoh SVM dalam Python
Jun 11, 2023 pm 08:42 PM
Mesin Vektor Sokongan (SVM) dalam Python ialah algoritma pembelajaran diselia yang berkuasa yang boleh digunakan untuk menyelesaikan masalah klasifikasi dan regresi. SVM berprestasi baik apabila menangani data berdimensi tinggi dan masalah bukan linear, dan digunakan secara meluas dalam perlombongan data, klasifikasi imej, klasifikasi teks, bioinformatik dan bidang lain. Dalam artikel ini, kami akan memperkenalkan contoh penggunaan SVM untuk pengelasan dalam Python. Kami akan menggunakan model SVM daripada perpustakaan scikit-learn
Penjelasan terperinci tentang cara Ansible berfungsi
Feb 18, 2024 pm 05:40 PM
Prinsip kerja Ansible boleh difahami dari rajah di atas: hujung pengurusan menyokong tiga kaedah tempatan, ssh, dan zeromq untuk menyambung ke hujung terurus Lalai adalah menggunakan sambungan berasaskan ssh dalam gambar rajah seni bina di atas; ia boleh disambungkan mengikut jenis aplikasi HostInventory (senarai hos) dilakukan dengan cara lain Nod pengurusan melaksanakan operasi yang sepadan melalui pelbagai modul Satu modul dan pelaksanaan satu kumpulan boleh dipanggil iklan -hoc; nod pengurusan boleh melaksanakan koleksi berbilang tugas melalui buku permainan, seperti pemasangan dan penggunaan perkhidmatan web, sandaran kumpulan pelayan pangkalan data, dll. Kita hanya boleh memahami buku permainan kerana, sistem berlalu
Artikel ini meringkaskan kaedah klasik dan perbandingan kesan peningkatan ciri & pemperibadian dalam anggaran CTR.
Dec 15, 2023 am 09:23 AM
Dalam anggaran CTR, kaedah arus perdana menggunakan pembenaman ciri+MLP, di mana ciri sangat kritikal. Walau bagaimanapun, untuk ciri yang sama, perwakilan adalah sama dalam sampel yang berbeza Cara memasukkan ke model hiliran ini akan mengehadkan keupayaan ekspresif model. Untuk menyelesaikan masalah ini, satu siri kerja berkaitan telah dicadangkan dalam bidang anggaran CTR, yang dipanggil modul peningkatan ciri. Modul peningkatan ciri membetulkan hasil keluaran lapisan benam berdasarkan sampel berbeza untuk menyesuaikan diri dengan perwakilan ciri sampel berbeza dan meningkatkan keupayaan ekspresi model. Baru-baru ini, Universiti Fudan dan Microsoft Research Asia bersama-sama menerbitkan ulasan tentang kerja peningkatan ciri, membandingkan kaedah pelaksanaan dan kesan modul peningkatan ciri yang berbeza. Sekarang, mari kita perkenalkan a
Contoh Permulaan VUE3: Membuat Pemain Video Mudah
Jun 15, 2023 pm 09:42 PM
Apabila rangka kerja hadapan generasi baharu terus muncul, VUE3 digemari sebagai rangka kerja bahagian hadapan yang pantas, fleksibel dan mudah digunakan. Seterusnya, mari kita pelajari asas VUE3 dan buat pemain video mudah. 1. Pasang VUE3 Mula-mula, kita perlu memasang VUE3 secara setempat. Buka alat baris arahan dan laksanakan arahan berikut: npminstallvue@next Kemudian, cipta fail HTML baharu dan perkenalkan VUE3: <!doctypehtml>
Modul Shutil dalam Python
Aug 18, 2023 pm 11:57 PM
Python, sebagai bahasa pengaturcaraan yang serba boleh dan berkuasa, menyediakan banyak modul dan perpustakaan untuk memudahkan pelbagai tugas. Salah satu modul ini ialah Shutil, yang bermaksud "shellutilities" dan menyediakan set lengkap fungsi manipulasi fail dan direktori. Sama ada anda perlu menyalin, mengalih, menamakan semula atau memadam fail dan direktori, modul Shutil dalam Python boleh membantu anda dengan ciri mesra pengguna dan cekapnya. Dalam tutorial ini, kami akan mendalami dunia modul Shutil dan meneroka keupayaannya untuk mengurus fail dan direktori dalam Python. Kami akan memperkenalkan anda kepada ciri dan keupayaan utama Shutil, serta memberikan contoh praktikal dan coretan kod. Seterusnya dalam artikel
Ansible Ad-Hoc (mod peer-to-peer)
Feb 18, 2024 pm 04:48 PM
Dokumentasi rasmi: https://docs.ansible.com/ansible/latest/command_guide/intro_adhoc.html Pengenalan Perintah ad-hoc ialah arahan yang dimasukkan dan dilaksanakan buat sementara waktu, biasanya digunakan untuk ujian dan penyahpepijatan. Mereka tidak perlu disimpan secara kekal. Ringkasnya, ad-hoc ialah "perintah segera". Modul yang biasa digunakan 1. modul arahan (modul lalai) Modul lalai tidak sekuat shell Pada asasnya, modul shell boleh menyokong fungsi modul arahan. 【1】Help ansible-doccommand# Adalah disyorkan untuk menggunakan ansible-doccomm berikut
