다음으로 이야기하고 싶은 것은 이벤트를 간단하게 만드는 코드를 작성하는 방법입니다. 지금은 기술적인 이벤트를 무시하세요. 현재 그러한 JS 클래스가 있다면 그 안에 여러 가지 메서드가 있으므로 위의 이벤트와 위의 것보다 더 복잡한 이벤트를 완료하는 데 충분합니다. 가상으로 존재하는 이 클래스에는 메서드 이름만 있고 구체적인 구현은 없으므로 이를 인터페이스라고 부릅니다. 다음으로 이야기할 내용은 인터페이스 정의에 관한 것입니다. 인터페이스의 메서드가 요구 사항을 충족할 수 있다고 생각되면 이를 구현해 보겠습니다. (이것이 더 나은 개발 프로세스입니다. 먼저 계획을 세우고 실행하세요.)
객체 인스턴스화
개발 프로젝트에는 무한 수준의 노드 운영 플러그인 외에도 b2c, b2b에서 일반적으로 사용되는 회전, 페이징, 양식 유효성 검사 등의 플러그인이 포함되어 있습니다. 및 양식 요소 검색 값 설정, 일괄 이미지 업로드, 이벤트 재패키징, 이벤트 일괄 처리, 검색 자동 완성, 장바구니에 대한 Ajax 작업 및 공개 메소드가 있는 클래스. 따라서 전체 js에는 많은 클래스가 있을 것이며, 각 클래스는 js 변수에 대응하게 됩니다. 이와 같이 개발 중에 실수로 같은 이름의 변수가 다른 곳에서 선언되면 이 클래스가 발생하게 됩니다. 사라질 것입니다. 이러한 상황을 피하기 위해 모든 클래스를 $jkit이라는 클래스로 캡슐화하여 공용 변수가 하나만 있도록 했습니다. 플러그인 클래스가 로컬이 되었습니다. 어떻게 액세스하나요? 몇 가지 메소드를 정의하는 또 다른 $CL 클래스를 정의합니다. 이러한 메소드는 $jkit 클래스에 액세스하는 데 사용됩니다. 이러한 방식으로 플러그인이 아무리 많아도 $CL 및 $jkit라는 두 개의 공용 변수만 있게 됩니다. . $CL은 $jkit 호출을 담당합니다. 예를 들어 $CL의 newObj는 플러그인 개체의 메서드를 인스턴스화하는 데 사용됩니다. newObj에는 두 개의 매개변수가 있습니다. 첫 번째 매개변수는 인스턴스화할 플러그인을 지정합니다. 두 번째 매개변수는 인스턴스화 시 플러그인을 초기화하는 데 사용됩니다.
새 트리의 멤버 메소드 다음 API를 읽을 때 두 가지 점을 염두에 두시기 바랍니다. 먼저 루트 객체와 하위 객체의 모든 메소드는 원본 DOM 객체에 대한 것입니다. new object. 그 본질은 해당 원본 DOM 개체를 삭제하는 것입니다. 두 번째로 개체의 추가, 삭제 또는 수정이 호출될 때마다 해당 분기가 재구성됩니다.
루트 객체 고유 방법
function map(index1,index2,,,indexN){} 이 메서드는 하위 노드를 찾는 데 사용됩니다. table.map(1,1,0)은 다음의 두 번째 행을 찾습니다. 두 셀 중 첫 번째 개체는 선택에 해당하는 개체입니다. 지도에 매개변수가 하나만 있고 매개변수가 DOM 기본 객체인 경우 이 메서드는 해당하는 새 객체를 반환합니다.
함수 인덱스(DOMElement){} 이 메서드는 네이티브 DOMElement 객체인 table.index(document.getElementById('lior'))에 해당하는 인덱스를 반환한 다음 [1, 2 ,0,0], 결과는 배열 형식입니다.
하위 개체에 고유한 메서드
function add(index, html){} 이 메서드는 형제 노드를 추가하는 데 사용됩니다. Index는 이 메서드를 호출하는 객체의 위치에 대한 변위입니다. 노드에 삽입하려면 html은 W3c 표준 table.map(2).add(-1,'
을 준수하는 모든 html 문자열일 수 있습니다. < /td>
'), 세 번째 줄 앞에 새 줄을 추가합니다(동시에 여러 줄을 삽입할 수 있음) table.map(2) .add(-2, '
'), 새 줄 추가 세 번째 줄의 이전 줄 앞 table.map(0).add(2,'
< ;/td>table.map(1).add(0,'
< /td>
'), 인덱스 0은 현재 행 앞에 새 행을 추가하고 현재 행을 삭제하는 것을 의미합니다. table.map(1).add( '< tr>
'), 첫 번째 매개변수 생략, 이는 특별한 사용법입니다. , 어떤 객체를 사용하든 마지막 행 table.map(1,1).add(1,'
New cell
function del(index){} 이 메서드는 형제 노드를 삭제하는 데 사용되며, index는 이 메서드를 호출하는 객체의 위치에 대한 변위입니다. table.map( 1) .del(), 인덱스를 생략하면 여기서 두 번째 행을 삭제하는 것은 table.map(1).del(0) table.map(0).del(2)과 동일합니다. 현재 호출을 기준으로 개체 뒤의 두 번째 줄은 세 번째 줄 table.map(2).del(-2)을 삭제하고, 여기서는 현재 호출 개체 앞의 두 번째 줄을 삭제합니다. , 여기서 첫 번째 줄 table .map(0,1).del([0,-1,1])을 삭제합니다. index가 배열인 경우 지정된 인덱스의 형제 노드가 삭제됩니다. 이번에는 어떤 개체가 호출되는지는 중요하지 않습니다. 음수 인덱스는 마지막 계산부터 시작한다는 의미이고, -1은 마지막 개체를 의미하며 여기서 첫 번째, 두 번째 및 마지막 번째 table.map(0,1)을 삭제합니다. del(0,-1), 두 개의 매개변수가 있으면 삭제를 의미합니다. 이때, 어떤 객체가 호출되든 상관없습니다. -1은 끝부터 계산한다는 의미입니다. 여기서는 첫 번째부터 마지막 요소까지 삭제하세요. 큰 매개변수를 첫 번째 매개변수로 사용할 수 있습니다. 크기 순서에는 제한이 없습니다.
function getParent(){}호출 객체 table.map(0,1).getParent().tagName의 상위 객체에 해당하는 기본 DOM 객체 노드를 가져옵니다.
function getHigher(){}호출 객체의 상위 객체 가져오기 table.map(0,1).getHigher.getNode().tagName은 tr입니다.
루트 개체와 하위 개체가 소유한 메서드
function getNode(){}호출 객체에 해당하는 기본 DOM 객체 노드를 가져옵니다. table.getNode().tagName은 table, table.map(0,1).getNode입니다. () 일
함수 sizeOf(){}호출 객체의 하위 객체 수를 가져옵니다. table.sizeOf()는 3입니다. 이는 3개의 행이 있음을 의미합니다.
함수 pos(){}모든 형제 노드에서 호출 객체의 위치를 가져옵니다. table.map(1).pos()는 1입니다.
function html(html){}호출 객체에 해당하는 기본 DOM 객체의 innerHTML을 가져옵니다. 매개변수가 전달된 경우 해당 innerHTML 특성에 값을 할당합니다. 읽기 전용 개체 innerHTML에 값을 할당합니다.)
함수 속성(html){} 호출 객체에 해당하는 네이티브 DOM 객체의 innerHTML을 가져옵니다. 전달된 매개변수가 있는 경우 해당 속성에 값을 할당합니다(아직 구현되지 않음).
function before(index,html){} 호출 객체의 지정된 하위 객체 앞에 노드를 추가합니다. index는 상대 변위입니다. table.before(1 ,'
'), 행 추가 table.map (1 ,2,0).before(-1,'
새 li 노드
'), 마지막 li 앞에 새 li를 추가합니다(인덱스는 음수는 끝부터 세는 것을 의미하고, -1은 마지막을 의미합니다.) table.before('
< /td> ;
'), 첫 번째 매개변수를 생략한다는 것은 첫 번째 하위 개체 앞에 새 노드를 추가하는 것을 의미합니다.
함수 추가(index,html){} 호출 객체의 지정된 하위 객체 뒤에 노드를 추가합니다. 인덱스는 상대 변위입니다. table.append(1,'
'), 두 번째 줄 테이블 뒤에 줄을 추가합니다. .map(1 ,2,0).append(-1,'
새 li 노드
'), 마지막 li(색인) 뒤에 새 li를 추가합니다. 음수는 끝부터 세는 것을 의미하고, -1은 마지막을 의미합니다) table.append('
;'), 첫 번째 매개변수를 생략한다는 것은 첫 번째 하위 개체 뒤에 새 노드를 추가하는 것을 의미합니다.
함수 교체(index,html){} 호출 객체의 지정된 하위 객체에 해당하는 기본 DOM 노드를 html로 생성된 노드로 교체합니다. table.replace( 2,'
새 줄
'), 추가 두 번째 줄을 대체합니다 table.replace(-1,'
New line
< /td> ;
'), 새 줄을 추가하고 마지막 줄을 그 줄로 바꿉니다(음수 인덱스는 끝부터 계산한다는 의미, -1은 마지막 줄을 의미함)
함수 clean(index){} 이 메서드는 형제 노드를 삭제하는 데 사용됩니다. Index는 이 메서드를 호출하는 개체의 위치를 기준으로 한 변위입니다. table.clean (), 인덱스를 생략한다는 것은 첫 번째 하위 개체를 삭제한다는 의미입니다. 여기서 첫 번째 행을 삭제하는 것은 table.map(1).del(0) table.clean(2)과 동일합니다. 🎜>table.clean (-2), 여기서는 마지막 행 table.map(0).clean([0,-1,1]) 삭제를 의미합니다. 인덱스가 배열인 경우 하위 개체는 지정된 인덱스가 삭제되고 인덱스가 음수이면 끝부터 계산한다는 의미, -1은 마지막 인덱스를 의미합니다. 여기서 첫 번째, 두 번째 및 마지막 번째를 삭제합니다 table.map(0).clean(0,- 1) 매개변수가 2개인 경우 지정된 범위의 하위 개체를 삭제한다는 뜻입니다. 음수 인덱스는 끝부터 계산한다는 뜻이고, -1은 마지막 요소부터 삭제한다는 의미입니다. 첫 번째 매개변수로 사용됩니다. 크기 순서에는 제한이 없습니다.
새 트리의 루트 노드가 테이블이고 그 하위 노드가 tbody/thead/tfoot인 경우 이 노드를 더 자주 작동하지 않고 tr을 직접 작동하므로 약간 허용했습니다. 이 노드를 처리합니다. 물론, tbody를 조작하려면 다음과 같은 매개변수를 전달할 수 있습니다. ['tbody thead tfoot', 'tr', 'td'] 그 중 하나만 가져오려면 ['tbody' , 'tr', 'td']; tr을 직접 가져오면 ['tr','td']가 가능합니다. 이 경우 tbody/thead/tfoot
결론: 돌이켜보면 이러한 플러그인을 사용하면 앞서 언급한 노드 운영의 세 가지 주요 문제가 쉽게 해결될 것입니다. 게다가, 이 플러그인은 어떠한 로직과도 관련이 없으며, 2차 처리도 필요하지 않습니다. 필요에 따라 선택하지 않아도 확장이 가능합니다. 언젠가 개발 과정이 퍼즐처럼 될 것이라고 상상해보세요. 개발된 플러그인이 합쳐지면 얼마나 멋진 프로젝트가 나올까요? 결과가 기대만큼 좋지 않을 수도 있지만, 예상할 수는 있는 일이다. 이런 방향으로 가면, 사건은 점점 단순해질 수밖에 없다. 글이 너무 길기 때문에 소스코드 부분에 대해서는 다음에 글을 올릴 때 자세히 설명하도록 하겠습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
