refactoring_javascript 기술에 대한 JS 프론트엔드 프레임워크의 실패 경험 공유-JS 튜토리얼-php.cn

자, 시작해 보겠습니다. 리팩토링은 사실 큰 움직임이 아닙니다. 달성해야 할 주요 기능은 기존 JS 코드를 다시 분할하고 기존 모듈을 분리하는 것입니다. 그런 다음 기존 프로그램을 모듈로 나누어 네임스페이스로 다시 패키징하여 사용하거나 Java의 Package와 유사한 것을 구현할 계획입니다. 그런 다음 use js 파일을 로드하고 이 파일의 use 함수를 호출하기만 하면 특정 매개변수를 설정하여 필요한 모듈을 동적으로 로드할 수 있습니다. 이것이 가장 완벽한 아이디어였습니다(당시 저는 어리석고 순진했습니다). 자, 악몽이 시작됩니다. 전제, 저는 3개월 전 제 자신을 과소평가했습니다. //그럼 아래에 촌스러운 용어가 나올 수도 있겠네요~~

우선 계획 첫날에는 이 프로그램에서 가장 분리된 부분인 자체 제작 컨트롤 부분을 분리하겠다는 의도입니다. 그러고 보니 Panel.js, Button.js 등의 폼 컨트롤을 작성하려고 하는 사람도 있었고 그 안에 js 파일도 많이 들어 있었는데, 색인 페이지를 보면 그렇습니다. 일련의 태그는 정말 짜증납니다. 그래서 악몽이 두 번째 단계에 들어섰고, JS 파일을 로드하고 싶었는데, 이 JS 파일은 모든 컨트롤 JS를 동적으로 로드할 수 있습니다. "Dynamic Loading JS"에 대해 더 알고 싶으시면 Du Niang G Niang에 가서 설명을 요청하세요. 내 생각에는 3개의 비동기식 1 Ajax 구현을 많이 찾을 수 있을 것 같습니다. 좋아요, 이건 모두 말도 안되는 소리입니다. "High Performance JavaScript"라는 책을 참조하여 다음 코드를 생성했습니다.

코드 복사 코드는 다음과 같습니다. function loadScript(url, callback){ var script = document.createElement("script") script.type = "text/javascript" ; if (script.readyState){ //IE script.onreadystatechange = function(){ if(script.readyState == "로드됨" || script.readState == "완료"){ script.onreadystatechange = null; 콜백(); } }else{ script.onload = function() 콜백(); >} } script.src = url; document.getElementsByTagName("head")[0].appendChild(script); }

좋은 비극 천천히 시작됩니다. 먼저 내 컨트롤은 모두 JQuery를 기반으로 하므로 loadScript(jqueryURL, function(){//Load my 컨트롤 s})를 수행해야 합니다. 여기서 중단하고 아래에서 계속하겠습니다. 그런데 갑자기 네임스페이스 기능을 구현하고 싶었어요. 객체 지향, 프로토타입 체인 및 기타 여러 가지에 대해 많은 연구를 하다가 참조 관리 기능이 매우 추상적이라는 것을 알게 되었어요. "Javascript Design Patterns"라는 책을 읽었습니다. "이 책은 너무 기만적입니다. 결국 프로토타입 모드를 이해한 후에도 여전히 미스터리였습니다. 좋아요, 이 문제를 다시 생각해 봐야 할 것 같습니다. 실제로는 컨트롤을 만들고 싶습니다. 그런 다음 컨트롤을 개체의 속성으로 전역 개체에 바인딩하면 됩니다. 그래서 영문 이름 Gssl을 객체로 사용하여 다음과 같은 구조를 얻었습니다.

코드 복사 코드는 다음과 같습니다. var Gssl = {}

좋아, 위에서 중단했던 부분으로 돌아가서, 내 생각은 Gssl이라는 이름의 JS를 동적으로 로드할 때 전역 객체를 구성하고 이를 공간에 바인딩하는 것입니다. , 구체적인 구현은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다. loadScript (jqueryURL , function(){ //내 컨트롤 로드 loadScript(controlURL, function(){ //컨트롤 바인딩 Gssl.control = control; }); });

이 글을 쓰면서 테스트가 조정되었습니다. 어젯밤에는 조금 기뻤지만 아직 악몽은 끝나지 않았다는 것을 프로그래머의 직감으로 알고 있습니다. 오늘 아침에 돌아가서 동적으로 로드된 JS JS 파일을 내 페이지에 참조했습니다. 결과적으로 비동기 특성으로 인해 Gssl 개체가 생성되기 전에 다음 코드가 실행되기 시작했습니다(가, 이건 무리입니다). . 그런 다음 그것에 대해 생각하고 Gssl이 로드되었는지 여부를 표시하기 위해 마지막으로 로드된 컨트롤에 준비 플래그를 만들고 싶었습니다. 그러나 각 구성 요소에는 고유한 콜백 함수가 있으며 어떤 것이 마지막에 로드되었는지 알 수 없습니다. 코드 실행은 순서대로 이루어지지만 이 전송의 병렬성으로 인해 어느 것이 마지막인지 알 수 없습니다. 좋아, 완전 빡쳐서 아주 2B적인 방법을 생각해냈어. 간단하게 2초 동안 프로그램을 잼하는 함수만 작성하면 충분해~. 그러다가 그는 setTimeout TM이 코드를 차단할 수 없고 그의 좋은 친구인 setIXXXXX도 코드를 차단할 수 없다는 것을 발견했습니다. 좋아, 나는 화가 나서 준비 비트를 결정하기 위해 무한 루프를 작성했습니다. 네, 브라우저가 종료됩니다.

원점으로 돌아가서 컨트롤이 언제 로드되었는지 알 수 있도록 재귀 로딩, 즉 콜백 중에만 다음 컨트롤을 로드하는 것을 고려하기 시작했습니다. 그런데 곰곰히 생각해보면 이렇게 로드하려면 동적으로 로드해야 하는 게 효율이 전혀 안 좋아지는 것 아닌가 하는 생각이 듭니다. 그런 다음 다양한 프레임워크의 Ready 메소드 구현을 살펴보았습니다. 음, 단일 파일이 있는 것은 IMBA입니다. 그렇다면 내 앞에는 단 한 가지 방법이 있는데, 그것은 JS에 모든 컨트롤을 작성하는 것입니다. 이것은 단순히 중요한 것을 피하고 빛을 선택하는 것입니다.

그러다가 해결책을 제안하고 나 자신에 대해 불평하며 악몽같은 하루를 보냈습니다. 퇴근 시간이 거의 다 되었는데, 아직도 이 문제에 대한 해결책이 없을까 고민 중입니다. 그러자 내 머릿속에서 세 번째 목소리가 시작됐다. 지웨이~(하하, 이게 내 이름이야~) 꼭 필요한 걸까? 좋아, 악몽에서 벗어날 때마다 그에게 의지해야 한다는 걸 인정해야 해. 그러다가 각 위치에서 전체 프로젝트의 폴더를 열었다가 반납했는데, 알았어, 이건 소설을 쓰는 게 아니니까, 생각할 때 이런 소소한 행동들은 설명하지 않겠다. 문제에 대해 생각해보면 다음과 같을 것입니다. 정신병을 앓고 있는 사람들도 그렇게 멍청할까요?) 결국, 이 모듈을 모두 분리하더라도 여전히 다른 프로젝트에 일정한 수정을 가해야 한다는 사실을 발견했습니다. 인터페이스가 있지만 인터페이스가 백엔드에 연결되어 있고 모듈 간의 인터페이스가 완료되지 않았습니다. 아직. 이런 종류의 분리에는 많은 추가 비용이 수반될 것이며(추정이지만 경험에 따르면 이는 불가피합니다~), 새로운 JS 프레임워크는 전체 프레임워크와 호환되지 않습니다(퇴근할 때 일부 리소스가 문제) 포기하지 않았지만 여전히 포기했습니다 (모든 악의 진행, Ciao). 이 버전의 코드는 저장되지 않았고 SVN도 업데이트되지 않았습니다~. USB 하드에 백업이 안되어 있었는데 분노해서 소스코드를 다 삭제해버렸네요. 저는 이 일기장을 기념품으로만 간직하고 있어요.

처음부터 프론트엔드 모듈 아이디어가 있었다면 지금의 내가 없었을 것이라는 교훈이 있습니다. 실력으로는 당연히 할 수 있는데 이제 다시 오기 힘들어요~ 아직도 저 사악한 분유 광고야, 아기가 잘 시작하게 해주고, 그러면 내 목표는 코드를 잘 시작하는 거야~ 실패한 아빠~~(T_T)

그리고 블로그 포럼이 마법 같은 곳이라는 걸 알고 있어요. 혹시 같은 문제를 겪고 해결하신 분 계시다면 공유해주실 수 있나요? 항상 응답이 있을 것입니다!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

refactoring_javascript 기술에 대한 JS 프론트엔드 프레임워크의 실패 경험 공유