자체 모듈 인스턴스 캡슐화에 대한 자세한 설명
드래그 앤 드롭 모듈을 캡슐화해 보세요. 이 과정에서 우여곡절을 겪었습니다. 처음에는 style.left만 사용하려고 했으나, position:absolute 설정이 필요합니다. 코드에 약간의 영향을 미칠 수 있습니다. CSS 변환이 호환성에 영향을 주지만 여기서는 여전히 이 속성의 변환을 사용하여 이동을 완료합니다.
스타일만으로 완성된 코드
말할 것도 없이 바로 코드로 넘어가겠습니다:
html과 css 위치는 여기서 설정해야 합니다. 그래서 이 코드를 처음 작성할 때 잊어버렸습니다. , 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');이 코드는 비교적 이해하기 쉽습니다. Bo Dashen의 코드를 처음 봤을 때 정규 표현식이 왜 사용되는지 예상하지 못했기 때문에 실제로 번역의 사용을 이해하지 못했습니다...
그래도 상대적으로 간단하지만 이 코드의 원리를 분석해야 합니다.
1. 생성자에는 Drag()라는 생성자가 있습니다. 생성자에서 우리가 설정한 메서드와 속성은 다음과 같이 고유합니다. 위치 정보 등 프로토타입에는 요소 위치 정보를 얻기 위한 getPosition(), 요소 위치 설정을 위한 setPosition(), 이벤트 바인딩을 위한 setDrag() 세 가지 메소드가 있습니다. 이 세 가지는 공개이므로 리소스를 절약하기 위해 이를 원기.
2. 이 코드의 실행 원리는 다음과 같습니다. 마우스를 누르면 sourceX/Y 요소의 초기 위치 정보와 마우스 이동이 완료되면 startX/Y의 초기 위치 정보가 획득됩니다. 두 마우스 위치를 빼면 마우스가 이동하는 거리X/Y를 얻을 수 있습니다. 이는 요소가 이동하는 거리이기도 합니다. 그런 다음 이 값을 요소의 style.left/top에 할당합니다. 요소 드래그가 이루어집니다.
Transform과 스타일의 결합
기술의 발전으로 인해 점점 더 많은 장치가 CSS3를 지원하기 시작했습니다. 또한 스타일은 더 많은 리소스를 차지하고 효율성에 문제가 있으므로 변환 사용을 고려합니다.
브라우저 호환 쓰기 방법
먼저 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: 변환 값이 없음인지 확인해야 하는 이유는 초기화 상태에서 요소가 변환 속성을 설정하지 않았기 때문입니다. 그래서 [4][5]는 정규화 후에 배열에서 찾을 수 없기 때문에 val의 두 속성을 0으로 설정합니다. 이 값은 나중에 변환될 번역X와 번역Y의 값입니다.
계속 코드를 작성하세요. 위 단락에서는 번역의 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;
},위 코드에서 수정한 내용에 주의하세요. 여기에 판단을 추가합니다. 변환 속성을 지원하는 브라우저가 있으면 변환 속성을 사용하여 요소의 값을 수정합니다. , getTranslate 이전 요소의 값을 변경합니다. 에서 얻은 x와 y는 pos의 x와 y에 할당됩니다.
위 코드에서는 브라우저에 따라 동일한 값을 얻기 위해 다양한 방법을 사용합니다. val 값은 요소 변환에서 추출한 getTranslate()에서 가져옵니다. 마찬가지로 아래 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 전역 변수 캡슐화 모듈 구현 code_javascript 기술
위 내용은 자체 모듈 인스턴스 캡슐화에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7564
15
1386
52
86
11
61
19
28
99
![WLAN 확장 모듈이 중지되었습니다. [수정]](https://img.php.cn/upload/article/000/465/014/170832352052603.gif?x-oss-process=image/resize,m_fill,h_207,w_330)
WLAN 확장 모듈이 중지되었습니다. [수정]
Feb 19, 2024 pm 02:18 PM
Windows 컴퓨터의 WLAN 확장 모듈에 문제가 있는 경우 인터넷 연결이 끊어질 수 있습니다. 이러한 상황은 종종 좌절감을 주지만 다행히도 이 문서에서는 이 문제를 해결하고 무선 연결이 다시 제대로 작동하도록 하는 데 도움이 될 수 있는 몇 가지 간단한 제안 사항을 제공합니다. WLAN 확장성 모듈 복구가 중지되었습니다. Windows 컴퓨터에서 WLAN 확장성 모듈의 작동이 중지된 경우 다음 제안에 따라 문제를 해결하십시오. 네트워크 및 인터넷 문제 해결사를 실행하여 무선 네트워크 연결을 비활성화했다가 다시 활성화하십시오. WLAN 자동 구성 서비스 다시 시작 전원 옵션 수정 수정 고급 전원 설정 네트워크 어댑터 드라이버 재설치 일부 네트워크 명령 실행 이제 자세히 살펴보겠습니다.
WLAN 확장성 모듈을 시작할 수 없습니다.
Feb 19, 2024 pm 05:09 PM
이 문서에서는 무선 LAN 확장 모듈을 시작할 수 없음을 나타내는 이벤트 ID10000을 해결하는 방법을 자세히 설명합니다. 이 오류는 Windows 11/10 PC의 이벤트 로그에 나타날 수 있습니다. WLAN 확장성 모듈은 IHV(독립 하드웨어 공급업체) 및 ISV(독립 소프트웨어 공급업체)가 사용자에게 맞춤형 무선 네트워크 기능을 제공할 수 있도록 하는 Windows의 구성 요소입니다. Windows 기본 기능을 추가하여 기본 Windows 네트워크 구성 요소의 기능을 확장합니다. WLAN 확장성 모듈은 운영 체제가 네트워크 구성 요소를 로드할 때 초기화의 일부로 시작됩니다. 무선 LAN 확장 모듈에 문제가 발생하여 시작할 수 없는 경우 이벤트 뷰어 로그에 오류 메시지가 표시될 수 있습니다.
Python의 SVM 예제
Jun 11, 2023 pm 08:42 PM
Python의 SVM(Support Vector Machine)은 분류 및 회귀 문제를 해결하는 데 사용할 수 있는 강력한 지도 학습 알고리즘입니다. SVM은 고차원 데이터와 비선형 문제를 처리할 때 탁월한 성능을 발휘하며 데이터 마이닝, 이미지 분류, 텍스트 분류, 생물정보학 및 기타 분야에서 널리 사용됩니다. 이번 글에서는 Python에서 분류를 위해 SVM을 사용하는 예를 소개하겠습니다. scikit-learn 라이브러리의 SVM 모델을 사용하겠습니다.
Ansible 작동 방식에 대한 자세한 설명
Feb 18, 2024 pm 05:40 PM
Ansible의 작동 원리는 위 그림에서 이해할 수 있습니다. 관리 측에서는 관리 측에 연결하기 위해 로컬, SSH 및 zeromq의 세 가지 방법을 지원합니다. 기본값은 SSH 기반 연결을 사용하는 것입니다. 위의 아키텍처 다이어그램에서는 HostInventory(호스트 목록) 분류가 다른 방식으로 수행될 수 있습니다. 관리 노드는 단일 모듈 및 단일 명령의 일괄 실행을 구현합니다. -hoc; 관리 노드는 플레이북을 통해 웹 서비스 설치 및 배포, 데이터베이스 서버 일괄 백업 등과 같은 여러 작업 모음을 구현할 수 있습니다. 우리는 플레이북을 시스템이 통과하는 것으로 간단히 이해할 수 있습니다.
이 문서에서는 CTR 추정에서 기능 향상 및 개인화의 고전적인 방법과 효과 비교를 요약합니다.
Dec 15, 2023 am 09:23 AM
CTR 추정에서는 특성이 매우 중요한 특성 임베딩+MLP를 사용하는 주류 방법이 있습니다. 그러나 동일한 기능의 경우 다른 샘플에서 표현이 동일합니다. 이러한 방식으로 다운스트림 모델에 입력하면 모델의 표현 능력이 제한됩니다. 이러한 문제를 해결하기 위해 CTR 추정 분야에서는 Feature Enhancement Module이라 불리는 일련의 관련 연구가 제안되었다. 특징 강화 모듈은 다양한 샘플의 특징 표현에 적응하고 모델의 표현 능력을 향상시키기 위해 다양한 샘플을 기반으로 임베딩 레이어의 출력 결과를 수정합니다. 최근 Fudan University와 Microsoft Research Asia는 다양한 기능 향상 모듈의 구현 방법과 효과를 비교하는 기능 향상 작업에 대한 리뷰를 공동으로 발표했습니다. 이제 한 가지를 소개하겠습니다.
Ansible Ad-Hoc(피어 투 피어 모드)
Feb 18, 2024 pm 04:48 PM
공식 문서: https://docs.ansible.com/ansible/latest/command_guide/intro_adhoc.html 소개 Ad-hoc 명령은 일시적으로 입력되고 실행되는 명령으로, 일반적으로 테스트 및 디버깅에 사용됩니다. 간단히 말해서 임시 명령은 "즉시 명령"입니다. 일반적으로 사용되는 모듈 1. 명령 모듈(기본 모듈) 기본 모듈은 쉘만큼 강력하지 않습니다. 기본적으로 쉘 모듈은 명령 모듈의 기능을 지원할 수 있습니다. 【1】Ansible-doccommand# 도움말 다음 ansible-doccomm을 사용하는 것이 좋습니다.
VUE3 시작하기 예: 간단한 비디오 플레이어 만들기
Jun 15, 2023 pm 09:42 PM
새로운 세대의 프런트엔드 프레임워크가 계속 등장함에 따라 VUE3는 빠르고 유연하며 사용하기 쉬운 프런트엔드 프레임워크로 사랑받고 있습니다. 다음으로 VUE3의 기본을 배우고 간단한 동영상 플레이어를 만들어 보겠습니다. 1. VUE3 설치 먼저 VUE3를 로컬에 설치해야 합니다. 명령줄 도구를 열고 다음 명령을 실행합니다. npminstallvue@next 그런 다음 새 HTML 파일을 만들고 VUE3을 도입합니다. <!doctypehtml>
Golang의 포인터 변환 모범 사례를 알아보세요.
Feb 24, 2024 pm 03:51 PM
Golang은 다양한 애플리케이션과 서비스를 개발하는 데 사용할 수 있는 강력하고 효율적인 프로그래밍 언어입니다. Golang에서 포인터는 데이터를 보다 유연하고 효율적으로 운영하는 데 도움이 되는 매우 중요한 개념입니다. 포인터 변환은 다양한 유형 간의 포인터 작업 프로세스를 나타냅니다. 이 기사에서는 특정 예제를 사용하여 Golang의 포인터 변환 모범 사례를 학습합니다. 1. 기본 개념 Golang에서 각 변수에는 주소가 있으며, 주소는 메모리에서 변수의 위치입니다.
