개발자마다 선호하는 10대 JavaScript 모드

1. 구조기 모드

고전적인 대상 프로그래밍 언어에서 구조 함수는 메모리를 분배한 후에 새로 만든 대상을 초기화하는 특수한 방법이다.JavaScript에서 거의 모든 것이 대상입니다. 우리가 가장 흥미를 느끼는 것은 대상 구조 함수입니다.객체 구조 함수는 특정 유형의 객체를 작성하는 데 사용되기 때문에 예를 들어, 객체를 처음 작성할 때 준비 객체를 사용하여 매개변수를 사용하고 받아들일 수 있도록 멤버 속성과 방법의 값을 설정할 수 있습니다.

보시다시피 JavaScript는 클래스 개념을 지원하지 않기 때문에 구조 함수에서 키워드this는 새로 만들고 있는 대상을 참조합니다. 방문 대상이 생성될 때 기본 구조 함수는 다음과 같습니다.

function Car(model, year, miles) {
  this.model = model;
  this.year = year;
  this.miles = miles;
}

// Usage:
var bmw = new Car('M4', '2019', '1000');

2. 모듈 모드

모듈은 어떤 건장한 응용 프로그램 구조에서 없어서는 안 되거나 부족한 부분으로, 일반적으로 프로젝트의 코드 단원을 명확하게 분리하고 조직하는 데 도움이 된다
실현 모듈에는 몇 가지 옵션이 있다.여기에는 다음이 포함됩니다.

객체 문자 기호

모듈 모드

AMD 모듈

CommonJS 모듈

ECMAScript 및 사운드 모듈

객체 문자:

var newObject = {
  variableKey: variableValue,
  functionKey: function() {
    //…
  }
};

모듈 모드:

우리는 자체적으로 포함된 모듈을 만들어서 모듈 모델의 실현을 연구하기 시작합시다.

var testModule = (function() {
  var counter = 0;
  return {
    incrementCounter: function() {
      return ++counter;
    },
    resetCounter: function() {
      counter = 0;
    }
  };
})();

// Usage:
testModule.incrementCounter();
testModule.resetCounter();

3. 모듈 모드 제시

제시 모듈이 할 수 있는 일은 우리가 다른 공공 방법에서 공공 방법을 호출하거나 공공 변수에 접근하려고 할 때 주 대상의 이름을 반복하지 않도록 하는 것이다.

var myRevealingModule = (function() {
  var privateVariable = 'not okay',
    publicVariable = 'okay';
  function privateFun() {
    return privateVariable;
  }

  function publicSetName(strName) {
    privateVariable = strName;
  }

  function publicGetName() {
    privateFun();
  }

  return {
    setName: publicSetName,
    message: publicVariable,
    getName: publicGetName
  };
})();

//Usage:

myRevealingModule.setName('Marvin King');

4. 외동 자녀 모델

따라서 단례 모델은 클래스의 실례화를 하나의 대상으로 제한하기 때문에 이미 알고 있다.단례는 정태류와 다르다. 왜냐하면 우리는 그것들의 초기화를 늦출 수 있기 때문이다.초기화하는 동안 사용할 수 없는 정보가 필요하기 때문이다.이전에 그것들에 대한 인용을 몰랐던 코드에 대해서는 검색하기 쉬운 방법을 제공하지 않는다.단례의 구조를 살펴보자.

var singletonPattern = (function() {
  var instance;
  function init() {
    // Singleton
    function privateMethod() {
      console.log('privateMethod');
    }
    var privateVariable = 'this is private variable';
    var privateRandomNumber = Math.random();
    return {
      publicMethod: function() {
        console.log('publicMethod');
      },
      publicProperty: 'this is public property',
      getRandomNumber: function() {
        return privateRandomNumber;
      }
    };
  }

  return {
    // Get the singleton instance if one exists
    // or create if it doesn't
    getInstance: function() {
      if (!instance) {
        instance = init();
      }
      return instance;
    }
  };
})();

// Usage:
var single = singletonPattern.getInstance();

5. 관찰자 모드

관찰자는 하나의 디자인 모델로 그 중의 한 대상은 관찰자에 따라 하나의 대상 목록을 유지하고 그 상태의 모든 변경 사항을 자동으로 통지한다.

주제

관찰자 목록을 유지하고 관찰자의 시설을 추가하거나 삭제

관찰원

객체의 상태 변화를 알려야 하는 객체에 대한 업데이트 인터페이스 제공

콘크리트 표지의

ConcreteObservators 상태 저장

콘크리트 관찰자

ConcreteSubject에 대한 참조를 저장하고 관찰자에게 주제와 일치하는 상태를 확보하기 위해 인터페이스를 업데이트합니다.

function ObserverList() {
  this.observerList = [];
}

ObserverList.prototype.Add = function(obj) {
  return this.observerList.push(obj);
};

ObserverList.prototype.Empty = function() {
  this.observerList = [];
};

ObserverList.prototype.Count = function() {
  return this.observerList.length;
};

ObserverList.prototype.Get = function(index) {
  if (index > -1 && index < this.observerList.length) {
    return this.observerList[index];
  }
};

//...

피험자가 관찰자에게 재미있는 일을 알려야 할 때, 관찰자에게 알림을 방송합니다(알림 주제와 관련된 특정 데이터 포함)
관찰자가 등록 객체에 대한 변경 통지를 더 이상 받지 않으려면 관찰자 목록에서 삭제할 수 있습니다.미래에 나는 관찰자가 자바스크립트에서 어떻게 광범위하게 사용하는지 더 많이 토론할 것이다.

6. 디렉터리 모드

시스템 구성 요소 간의 직접적인 관계가 너무 많은 경우.구성 요소가 통신할 수 있는 제어 중심점이 필요할 수도 있습니다.중개 모델은 구성 요소가 명확하게 서로 인용하는 것이 아니라 느슨한 결합을 촉진하는 것을 확보한다.

var mediator = (function() {
  var topics = {};
  var subscribe = function(topic, fn) {
    if (!topics[topic]) {
      topics[topic] = [];
    }
    topics[topic].push({ context: this, callback: fn });
    return this;
  };

  // publish/broadcast an event to the rest of the application
  var publish = function(topic) {
    var args;
    if (!topics[topic]) {
      return false;
    }
    args = Array.prototype.slice.call(arguments, 1);
    for (var i = 0, l = topics[topic].length; i < l; i++) {
      var subscription = topics[topic][i];
      subscription.callback.apply(subscription.content, args);
    }
    return this;
  };
  return {
    publish: publish,
    subscribe: subscribe,
    installTo: function(obj) {
      obj.subscribe = subscribe;
      obj.publish = publish;
    }
  };
})();

7. 원형 모드

원형 모드를 사용하는 장점 중 하나는 우리가 다른 언어의 기능을 모방하려는 것이 아니라 자바스크립트 본기에서 제공하는 원형 장점을 이용했다는 것이다.패턴 예시를 봅시다.

var myCar = {
  name: 'bmw',
  drive: function() {
    console.log('I am driving!');
  },
  panic: function() {
    console.log('wait, how do you stop this thing?');
  }
};

//Usages:

var yourCar = Object.create(myCar);

console.log(yourCar.name); //'bmw'

8. 공장 모델

Factory는 일반적인 인터페이스를 제공하여 대상을 만들 수 있습니다. 그 중에서 만들 Factory 대상의 유형을 지정할 수 있습니다.다음 그림 참조.

function Car(options) {
  this.doors = options.doors || 4;
  this.state = options.state || 'brand new';
  this.color = options.color || 'silver';
}

9.Mixin 모드

mixin류가 제공하는 기능은 하나의 하위 클래스나 하나의 하위 클래스로 쉽게 계승되어 기능의 중용을 실현할 수 있다.

var Person = function(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.gender = 'male';
};

var clark = new Person('Clark', 'kent');

var Superhero = function(firstName, lastName, powers) {
  Person.call(this.firstName, this.lastName);
  this.powers = powers;
};

SuperHero.prototype = Object.create(Person.prototype);
var superman = new Superhero('Clark', 'Kent', ['flight', 'heat-vision']);

console.log(superman); //output personal attributes as well as power

이런 상황에서 슈퍼히어로는 그 대상에 특정한 값으로 상속된 값을 덮어쓸 수 있다.

10. 장식 도안

장식기는 코드 재사용을 촉진하기 위한 구조 설계 모델이다.mixin과 유사하게, 그것들은 대상 하위 분류화의 또 다른 대체 방법으로 간주될 수 있다.전통적으로 장식기는 행위 동태를 시스템에 기존 클래스에 추가하는 능력을 제공했다.이 생각은 장식 자체가 결코 유형의 기본 기능에 필요한 것이 아니다.데코레이터가 자바스크립트에서 어떻게 작동하는지 한번 봅시다.

function MacBook() {
  this.cost = function() {
    return 997;
  };
  this.screenSize = function() {
    return 11.6;
  };
}

// Decorator 1

function Memory(macbook) {
  var v = macbook.cost();
  macbook.cost = function() {
    return v + 75;
  };
}

// Decorator 2

function Engraving(macbook) {
  var v = macbook.cost();
  macbook.cost = function() {
    return v + 200;
  };
}

// Decorator 3

function Insurance(macbook) {
  var v = macbook.cost();
  macbook.cost = function() {
    return v + 250;
  };
}

var mb = new MacBook();

Memory(mb);
Engraving(mb);
Insurance(mb);

mb.cost(); // 1522

모든 모델이 한 프로젝트에 적용되는 것은 아니다. 일부 프로젝트는 관찰자 모델이 제공하는 결합 해제 장점에 이익을 얻을 수 있다.즉, 우리가 디자인 모델과 그것들에 가장 적합한 구체적인 문제를 확고히 파악하게 되면.따라서 이를 우리의 응용 프로그램 구조에 통합하는 것은 더욱 쉽다.