시대가 발전함에 따라 JavaScript 진영에는 점점 더 우수한 프레임워크가 등장하고 있으며 이는 우리의 개발 작업을 크게 단순화시킵니다. 이러한 프레임워크를 사용할 때 우리는 그 프레임워크의 기원에 대해서도 생각하고 어떻게 구축되는지도 생각해야 할까요? 이미 만들어진 일부 API를 사용하는 것만으로는 만족하지 않지만 내부 구현 메커니즘을 깊이 이해하고 있다면(누군가에 따르면 API가 가장 빨리 가치가 하락하는 것임) 가장 좋은 방법은 소스 코드를 읽는 것입니다. 읽을 수 있다는 것입니다.
나는 지난 이틀 동안 jQuery 의 소스 코드를 연구했으며 여기서는 나의 피상적인 지식 중 일부를 공유할 것입니다. 내가 부적절하다면 지적해 주십시오. 자, jQuery가 어떻게 작동하는지 살펴보겠습니다. 이미 JavaScript에 대한 기본 지식이 있다고 가정합니다. 기본 사항이 충분하지 않다면 "JavaScript Advanced 프로그래밍"과 "JavaScript 이해" 책을 읽어 보시기 바랍니다. 이 글은 js의 클래스, 객체, 함수, 프로토타입 등의 개념을 이해하지 못하는 친구에게는 적합하지 않습니다.
맨 처음부터 시작해 보겠습니다.
먼저 프레임워크가 Shaka(내 이름;)라고 가정하고 사용자에게 개체를 구성합니다.
var Shaka = function(){}; 여기서는 아무것도 포함하지 않은 빈 함수를 만듭니다. 이 함수는 실제로 생성자입니다. 우리가 생성한 객체가 프로토타입에 정의된 메서드를 호출하려면 프로토타입을 사용하여 Shaka에 몇 가지 메서드를 추가해야 합니다(Shaka를 클래스로 생각). 따라서 다음을 정의합니다.
Shaka.fn = Shaka.prototype = {};
여기서 Shaka.fn은 나중에 사용할 수 있도록 Shaka.prototype의 별칭과 동일합니다.
자, 이제 sayHello 메소드를 추가하고 Shaka에 매개변수를 추가하여 이 프레임워크의 가장 기본적인 모양이 이미 존재한다면 코드를 살펴보겠습니다.
코드 상자 실행
[Ctrl+A 모든 팁 선택: 먼저 코드의 일부를 수정한 후 실행을 누를 수 있습니다.]
좋아, 너무 흥분하지 마세요. 우리는 이 프레임워크와 jQuery를 사용하는 데 몇 가지 차이점이 있다는 것을 알았습니다. 예를 들어 jq에서는 다음과 같이 작성할 수 있습니다.
jQuery('#myid').someMethod();
이것이 어떻게 수행되는지, 즉 jQuery() 생성자는 jQuery 객체 인스턴스를 반환하므로 우리는 이에 대한 메서드를 호출할 수 있으므로 Shaka의 생성자는 인스턴스를 반환해야 하며 다음과 같이 보일 것입니다.
var Shaka = function(){ return //Shaka의 인스턴스를 반환합니다. };
그러면 Shaka의 인스턴스를 어떻게 얻나요? 먼저 프로토타입을 사용하여 클래스를 시뮬레이션할 때를 살펴보겠습니다. var someObj = new MyClass() 이 때 실제로는 새 개체 someObje를 생성하고 이 새 개체를 이 포인터로 사용합니다. 클래스의 생성자인 MyClass 함수를 사용하고 someObj는 MyClass.prototype에 정의된 메서드를 가져옵니다. 이 메서드의 this 포인터는 현재 개체 인스턴스를 참조합니다.