独自のモジュールインスタンスのカプセル化の詳細な説明
ドラッグアンドドロップモジュールをカプセル化してみてください。当初は 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のコードを見たとき、なぜ正規表現が使われるのか予想していなかったので、実はtranslateの使い方が分かりませんでした…
ですが。比較的単純ですが、このコードの原理を分析する必要があります:
1. 自己実行関数にはコンストラクター Drag() があり、コンストラクター内で設定するメソッドと属性はそれぞれのコンストラクター インスタンスに固有です。彼らの位置情報など。プロトタイプには、要素の位置情報を取得する getPosition()、要素の位置を設定する setPosition()、イベントをバインドする setDrag() の 3 つのメソッドがあります。これら 3 つはパブリックなので、リソースを節約するために、プロトタイプ。
2. このコードの実行原理は、マウスが押されると、要素sourceX/Yの初期位置情報と、マウスの移動が完了したときにマウスstartX/Yの初期位置情報が取得されます。マウスの新しい位置 currentX/Y が取得されます。2 つのマウスの位置を減算すると、マウスが移動する距離 X/Y が得られます。これは、要素の移動距離でもあります。次に、この値を要素の style.left に割り当てます。 /上。要素のドラッグが実現されます。
transform と style の組み合わせ
テクノロジーの発展により、ますます多くのデバイスが CSS3 をサポートし始めています。また、style はより多くのリソースを消費し、効率性に問題があるため、transform の使用を検討します。
ブラウザ互換の記述方法
まず関数Drag()の前にprivate属性を追加します:
var transform = getTransform();
以下にprivateメソッドを追加します:
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;
}追記: 次回の閲覧を判断するために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の2つの属性を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() から取得されます。同様に、以下のsetPosition()でもif判定を設定する必要があります。
rreeeこの段落では特に言うことはありません。単に、さまざまな形式で値を割り当てることについてです。
この時点で、モジュールはパッケージ化されています。次に、完全なコードを見てみましょう:
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';
}
},関連する推奨事項:
javascript グローバル変数カプセル化モジュール実装コード_javascript スキル
以上が独自のモジュールインスタンスのカプセル化の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7564
15
1386
52
86
11
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 拡張モジュールが停止しました。 WLAN 拡張モジュールが Windows コンピュータで動作を停止した場合は、次の提案に従って修正してください。 ネットワークとインターネットのトラブルシューティング ツールを実行して、ワイヤレス ネットワーク接続を無効にし、再度有効にします。 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) は、分類および回帰の問題を解決するために使用できる強力な教師あり学習アルゴリズムです。 SVM は、高次元データや非線形問題を処理する場合に優れたパフォーマンスを発揮し、データ マイニング、画像分類、テキスト分類、バイオインフォマティクスなどの分野で広く使用されています。この記事では、Python で分類に SVM を使用する例を紹介します。 scikit-learn ライブラリの SVM モデルを使用します。
Ansible の仕組みの詳細な説明
Feb 18, 2024 pm 05:40 PM
Ansible の動作原理は上図から理解できます: 管理側は管理側への接続に local、ssh、zeromq の 3 つの方法をサポートしています。デフォルトでは ssh ベースの接続が使用されます。この部分は接続に相当します。上のアーキテクチャ図のモジュール; アプリケーション タイプを押すことができます HostInventory (ホスト リスト) の分類は他の方法で実行されます. 管理ノードはさまざまなモジュールを通じて対応する操作を実装します. 単一のモジュールと単一のコマンドのバッチ実行を ad と呼ぶことができます-hoc; 管理ノードは、プレイブックを通じて複数のタスクのコレクションを実装できます。Web サービスのインストールとデプロイ、データベース サーバーのバッチ バックアップなど、ある種の機能を実装します。プレイブックは、システムが通過すると単純に理解できます。
この記事では、CTR 推定における機能強化とパーソナライゼーションの古典的な方法と効果の比較をまとめます。
Dec 15, 2023 am 09:23 AM
CTR 推定では、特徴量が非常に重要な特徴量埋め込み + MLP を使用する方法が主流です。ただし、同じ特徴量については、異なるサンプルでも表現が同じになるため、下流モデルにこのように入力すると、モデルの表現力が制限されてしまいます。この問題を解決するために、CTR 推定の分野で、特徴拡張モジュールと呼ばれる一連の関連研究が提案されています。特徴強化モジュールは、さまざまなサンプルに基づいて埋め込み層の出力結果を修正し、さまざまなサンプルの特徴表現に適応させ、モデルの表現能力を向上させます。最近、復旦大学とマイクロソフト リサーチ アジアは共同で、さまざまな機能強化モジュールの実装方法と効果を比較した機能強化作業に関するレビューを発表しました。さて、ご紹介しましょう
Ansible Ad-Hoc (ピアツーピア モード)
Feb 18, 2024 pm 04:48 PM
公式ドキュメント: https://docs.ansible.com/ansible/latest/command_guide/intro_adhoc.html はじめに アドホック コマンドは、一時的に入力して実行されるコマンドで、通常はテストとデバッグに使用されます。永続的に保存する必要はなく、アドホックとは簡単に言うと「インスタントコマンド」です。よく使われるモジュール 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 では、各変数にはアドレスがあり、アドレスはメモリ内の変数の位置です。
