独自のモジュールインスタンスのカプセル化の詳細な説明-jsチュートリアル-php.cn

独自のモジュールインスタンスのカプセル化の詳細な説明

小云云

リリース： 2018-01-30 17:16:08

オリジナル

1509 人が閲覧しました

ドラッグアンドドロップモジュールをカプセル化してみてください。当初は 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';
      }
    },

ログイン後にコピー