자체 모듈 인스턴스 캡슐화에 대한 자세한 설명-JS 튜토리얼-php.cn

드래그 앤 드롭 모듈을 캡슐화해 보세요. 이 과정에서 우여곡절을 겪었습니다. 처음에는 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');

로그인 후 복사