나는 오랫동안 JavaScript 코드를 작성해 왔으며 그것이 시작된 시대를 기억할 수 없습니다. 나는 최근 몇 년 동안 JavaScript의 업적에 대해 매우 기쁘게 생각합니다. 나는 이러한 업적의 수혜자가되어 매우 행운입니다. 나는 많은 기사, 챕터 및 책을 썼지 만 지금도이 언어에 대한 새로운 지식을 찾을 수 있습니다. 다음은 "아!" 과거에. 미래에 실수로 시간을 발견하기를 기다리는 대신 지금이 기술을 시도해야합니다.
간결한 글쓰기
JavaScript에서 내가 가장 좋아하는 것 중 하나는 물체와 배열을 생성하는 약어 방법입니다. 과거에는 객체를 만들려면 다음을 수행해야합니다.
var car = new Object (); car.colour = '빨간색'; car.wheeles = 4; car.hubcaps = '회전'; car.age = 4;
다음 글쓰기 방법은 동일한 효과를 얻을 수 있습니다.
var car = {색상 : '빨간색', 바퀴 : 4, hubcaps : '회전', 나이 : 4}훨씬 간단합니다.이 객체의 이름을 반복적으로 사용할 필요가 없습니다. 이런 식으로 자동차가 정의됩니다. 어쩌면 당신은 invaliduserinsession의 문제에 직면하게 될 것입니다. 닫는 버팀대 전에 한 가지를 기억하고 쉼표를 쓰지 않으면 문제가 없습니다.
또 다른 매우 편리한 약어는 배열에 대한 것입니다. 배열을 정의하는 전통적인 방법은 다음과 같습니다.
var moviesthatneedBetterwriters = new Array ( 'Transformers', 'Transformers2', 'Avatar', 'Indianajones 4');
약어 버전은 다음과 같습니다.
var moviesthatneedBetterwriters = [ 'Transformers', 'Transformers2', 'Avatar', 'Indianajones 4'];
배열의 경우 여기에는 문제가 있지만 실제로 그래프 그룹 기능은 없습니다. 그러나 당신은 종종 누군가가 위의 차를 이와 같이 정의한다는 것을 알게 될 것입니다.
var car = new Array (); 자동차 [ '색상'] = '빨간색'; 자동차 [ '바퀴'] = 4; 자동차 [ 'hubcaps'] = '회전'; 자동차 [ 'Age'] = 4;
배열은 전능하지 않습니다. 그들이 잘못 쓰여 있다면 혼란 스러울 것입니다. 그래프 그룹은 실제로 객체의 기능이며 사람들은이 두 가지 개념을 혼동했습니다.
또 다른 매우 멋진 약자 방법은 3 원 조건 기호를 사용하는 것입니다. 아래처럼 쓸 필요가 없습니다 ...
방향; if (x <200) {Direction = 1; } else {Direction = -1; }…3 원 조건 표기법으로 단순화 할 수 있습니다.
var Direction = x <200? 1 : -1;
조건이 참되면 물음표 후 값이 취해지고, 그렇지 않으면 결장 후 값이 취해집니다.
JSON에 데이터를 저장하십시오
JSON을 발견하기 전에 다양한 미친 방법을 사용하여 데이터를 배열, 문자열, 분할하기 쉬운 글리프 및 기타 성가신 것들과 같은 JavaScript의 고유 한 데이터 유형에 데이터를 저장했습니다. Douglas Crockford가 JSON을 발명 한 후 모든 것이 바뀌 었습니다. JSON을 사용하면 JavaScript의 기능을 사용하여 데이터를 복잡한 형식으로 저장할 수 있으며 다른 추가 변환을 수행 할 필요가 없으며 직접 액세스 할 수 있습니다. JSON은 위에서 언급 한 두 가지 약어 방법을 사용하는 "JavaScript 객체 표기법"의 약어입니다. 따라서 밴드를 설명하려면 다음과 같이 쓸 수 있습니다.
var 밴드 = {이름 ":"레드 핫 칠리 페퍼스 ","멤버 ": [{"이름 ":"Anthony Kiedis ","역할 ":"리드 보컬 "}, {"이름 ":"Michael 'Flea'Balzary ","역할 ":"베이스 기타, 트럼펫, 후원 보컬 "},"이름 ":"chad smith " { "name": "John Frusciante", "역할": "Lead Guitar"}], "Year": "2009"}JavaScript에서 직접 JSON을 사용하거나 기능으로 캡슐화하거나 API의 반환 값 형식으로 사용할 수도 있습니다. 우리는 이것을 JSON-P라고 부르며 많은 API 가이 양식을 사용합니다.
데이터 공급원을 호출하고 스크립트 코드에서 JSON-P 데이터를 직접 반환 할 수 있습니다.
<div id = "delicious"> </div> <cript> function delicious (o) {var out = '<ul>; for (var i = 0; i <o.length; i ++) {out + = '<li> <a href = "' + o [i] .u + '">' + o [i] .d + '</a>'; } out += '</ul>'; document.getElementById ( 'delicious'). innerHtml = out; }이를 위해서는 맛있는 웹 사이트에서 제공하는 웹 서비스 기능을 호출하여 가장 최근의 비정규 북마크 목록을 JSON 형식으로 얻습니다.
기본적으로 JSON은 복잡한 데이터 구조를 설명하는 가장 가벼운 방법이며 브라우저에서 실행할 수 있습니다. JSON_DECODE () 함수로 PHP에서 실행할 수도 있습니다. JavaScript 자신의 기능 (수학, 배열 및 문자열)에 대해 놀랐던 한 가지는 JavaScript에서 수학 및 문자열 기능을 연구 한 후 프로그램 작업을 크게 단순화 할 수 있다는 것을 알았습니다. 그것들을 사용하면 복잡한 루프 처리 및 조건부 판단을 절약 할 수 있습니다. 예를 들어, 숫자 배열에서 가장 많은 숫자를 찾기 위해 함수를 구현해야 할 때 다음과 같이이 루프를 작성하는 데 사용했습니다.
var 번호 = [3,342,23,22,124]; var max = 0; for (var i = 0; i <numbers.length; i ++) {if (숫자 [i]> max) {max = 숫자 [i]; }} alert (max);우리는 반복없이 할 수 있습니다.
var 번호 = [3,342,23,22,124]; 숫자 .SORT (function (a, b) {return b -a}); 경고 (숫자 [0]);이 경우 알파벳 순서로만 정렬되므로 숫자의 배열을 정렬 할 수는 없습니다. 사용법에 대해 더 알고 싶다면 Sort ()에 대한이 좋은 기사를 읽을 수 있습니다.
또 다른 흥미로운 기능은 math.max ()입니다. 이 함수는 매개 변수에서 가장 큰 숫자를 반환합니다.
Math.max (12,123,3,2,433,4); // 433을 반환합니다
이 기능은 숫자를 확인하고 가장 큰 기능을 반환 할 수 있으므로이를 사용하여 브라우저의 기능에 대한 지원을 테스트 할 수 있습니다.
var scrolltop = math.max (doc.documentElement.scrolltop, doc.body.scrolltop);
이것은 IE 문제를 해결하는 데 사용됩니다. 현재 페이지의 스크롤 탑 값을 얻을 수 있지만 페이지의 DocType에 따라 위의 두 속성 중 하나만이 값을 저장하고 다른 속성은 정의되지 않으므로 Math.Max ()를 사용 하여이 번호를 얻을 수 있습니다. 이 기사를 읽으면 수학적 기능을 사용하여 JavaScript를 단순화하는 것에 대한 더 많은 지식을 얻게됩니다.
문자열을 작동시키는 매우 유용한 함수 쌍도 split () 및 join ()입니다. 가장 대표적인 예는 CSS 스타일을 페이지 요소에 첨부하는 기능을 작성하는 것입니다.
이건 같아요. CSS 클래스를 페이지 요소에 추가하면이 요소의 첫 번째 CSS 클래스이거나 이미 일부 클래스가 있습니다. 기존 클래스 후 공간을 추가 한 다음 클래스를 따라야합니다. 이 클래스를 제거하려면이 클래스 앞에서 공간을 제거해야합니다 (일부 오래된 브라우저가 클래스를 인식하지 못했기 때문에 과거에는 매우 중요했습니다).
따라서 원래의 글은 다음과 같습니다.
함수 addClass (elm, newclass) {var c = elm.className; elm.classname = (c === '')? Newclass : C+''+Newclass; }split () 및 join () 함수를 사용 하여이 작업을 자동으로 완료 할 수 있습니다.
함수 addClass (elm, newClass) {var classes = elm.classname.split ( ''); classs.push (newclass); elm.classname = class.join ( ''); }이렇게하면 모든 클래스가 공간별로 분리되고 추가하려는 클래스가 마지막 클래스가 마지막 클래스를 배치 할 수 있습니다.
이벤트 대표단
웹 응용 프로그램은 모두 이벤트에 의해 주도됩니다. 나는 이벤트 처리를 좋아합니다. 특히 이벤트를 직접 정의하는 것을 좋아합니다. 핵심 코드를 변경하지 않고 제품을 확장 할 수 있습니다. 페이지에서 이벤트 제거에 대한 큰 문제 (강력한 표현)가 있습니다. 요소에 이벤트 리스너를 설치할 수 있으며 이벤트 리스너가 작동하기 시작합니다. 그러나 페이지에 청취자가 있다는 징후는 없습니다. 이 예측할 수없는 문제 (일부 초보자에게는 특히 문제가되는)와 IE6과 같은 "브라우저"가 너무 많은 이벤트 청취를 사용하는 다양한 메모리 문제로 인해 가능한 한 적은 이벤트 프로그래밍을 사용하는 것이 현명하다는 것을 인정해야합니다.
사건의위원회가 일어났다.
페이지의 요소의 이벤트가 트리거되고 DOM 상속 관계 에서이 요소의 모든 어린이 도이 이벤트를받을 수 있습니다. 현재, 부모 요소의 이벤트 핸들러를 사용하여 처리하기 위해 많은 어린이 요소에 이벤트 리스너를 사용하지 않고 처리 할 수 있습니다. 정확히 무엇을 의미합니까? 이렇게하면 페이지에 많은 하이퍼 링크가 있습니다. 이 링크를 직접 사용하고 싶지 않습니다. 함수를 통해이 링크를 호출하려고합니다. HTML 코드는 다음과 같습니다.
<h2> 훌륭한 웹 리소스 </h2> <ul id = "resources"> <li> <a href = "http://opera.com/wsc"> Opera 웹 표준 커리큘럼 </a> </li> <li> <a href = "http://sitepoint.com"> siteepoint </a> <li> <li> href = "http://alistapart.com"> 목록 이산 </a> </li> <li> <a href = "http://yuiblog.com"> yui blog </a> </li> <li> <a href = "http://blameitonthevoices.com"> 목소리 </a> </> </> </li >> href = "http://oddlyspecific.com"> 이상한 특정 </a> </li> </ul>
이러한 링크를 통해 루프하고 각 링크에 이벤트 핸들러를 첨부하는 것이 일반적인 관행입니다.
// 일반적인 이벤트 처리 예제 (function () {var resources = document.getElementById ( 'resources'); var links = resources.getElementsByTagName ( 'a'); var all = links.length; for (var i = 0; all; i ++) {// 각 링크 링크 [i]; AadDeventListener ( ', function, function); handler (var x = e.target;이벤트 프로세서 로이 작업을 수행 할 수도 있습니다.
(function () {var resources = document.getElementById ( 'resources'); resources.addeventListener ( 'click', handler, false); function handler (e) {var x = e.target; // if (x.nodename.tolowscase () == 'a') { 'event delegations :' + x); }) ();클릭 이벤트는이 페이지 요소에서 발생하기 때문에 NodeNames를 비교하고 어떤 요소가 이벤트에 응답 해야하는지 알아 내기 만하면됩니다.
면책 조항 : 위에서 언급 한 이벤트에 대한 두 가지 예는 모든 브라우저에서 실행될 수 있습니다. IE6을 제외하고는 간단한 W3C 표준 구현이 아닌 IE6에서 이벤트 모델을 사용해야합니다. 이것이 바로 툴킷을 사용하는 것이 좋습니다.
이 접근법의 이점은 여러 이벤트 프로세서를 하나로 줄이는 데 국한되지 않습니다. 예를 들어,이 링크 테이블에 더 많은 링크를 추가해야합니다. 이벤트 대표단을 사용한 후에는 다른 변경을 할 필요가 없습니다. 그렇지 않으면이 링크 테이블을 다시 루프하고 각 링크의 이벤트 핸들러를 다시 설치해야합니다.
익명 함수 및 모듈성
JavaScript에서 가장 성가신 것은 변수에 사용할 범위가 없다는 것입니다. 함수 내부에 있지 않은 한 모든 변수, 함수, 배열, 객체는 전역으로 간주 되므로이 페이지의 다른 스크립트도 액세스하고 재정의 할 수 있습니다.
해결책은 변수를 익명 함수 내에 넣고 정의 된 직후에 호출하는 것입니다. 예를 들어, 다음 작성 방법은 세 가지 글로벌 변수와 두 가지 글로벌 기능을 생성합니다.
var name = 'Chris'; var age = '34'; var 상태 = '단일'; 함수 createmember () {// [...]} 함수 getMemberDetails () {// [...]}이 페이지의 다른 스크립트에 호출 된 상태가 있으면 문제가 발생합니다. 우리가 myApplication에서 그것들을 캡슐화하면이 문제가 해결 될 것입니다.
var myApplication = function () {var name = 'chris'; var age = '34'; var 상태 = '단일'; 함수 createmember () {// [...]} 함수 getMemberDetails () {// [...]}} ();그러나 이런 식으로 함수 외부에는 기능이 없습니다. 이것이 당신이 필요로하는 것이라면 괜찮습니다. 기능 이름을 생략 할 수도 있습니다.
(function () {var name = 'chris'; var age = '34'; var status = 'single'; function createmember () {// [...]} 함수 getMemberDetails () {// [...]}}) ();함수 내부를 사용하려면 약간의 수정이 필요합니다. Createmember () 또는 getMemberDetails ()에 액세스하려면 외부 세계에 노출시키기 위해 myApplication 속성으로 바꿔야합니다.
var myApplication = function () {var name = 'chris'; var age = '34'; var 상태 = '단일'; return {createmember : function () {// [...]}, getMemberDetails : function () {// [...]}}} (); //myApplication.createmember () 및 //myApplication.getMemberDetails ()를 사용할 수 있습니다.이것을 모듈 모드 또는 싱글 톤이라고합니다. Douglas Crockford는 이것에 대해 여러 번 이야기했으며 Yahoo 사용자 인터페이스 라이브러리 Yui에서 널리 사용됩니다. 그러나 불편하게 만드는 것은 외부 세계에서 함수와 변수에 액세스 할 수 있도록 문장 구조를 변경해야한다는 것입니다. 또한 전화 할 때 myApplication의 접두사를 추가해야합니다. 그래서 저는이 작업을 좋아하지 않습니다. 외부 세계에서 접근 해야하는 요소로 포인터를 내보내는 것을 선호합니다. 이 작업을 수행 한 후 외부 통화 작성이 단순화됩니다.
var myApplication = function () {var name = 'chris'; var age = '34'; var 상태 = '단일'; 함수 createmember () {// [...]} 함수 getMemberDetails () {// [...]} return {create : createMember, get : getMemberDetails}} (); // 이제 myApplication.get () 및 myApplication.create ()로 씁니다.나는 이것을 "공개 모듈 패턴"이라고 부릅니다.
구성 가능
내가이 세상에 쓴 JavaScript 코드를 게시 한 후 누군가가 그것을 변경하고 싶었습니다. 일반적으로 사람들은 스스로를 완료 할 수없는 작업을 완료하고 싶었지만 일반적으로 내가 쓴 프로그램은 충분히 유연하지 않으며 사용자 정의 기능을 제공하지 않았습니다. 솔루션은 스크립트에 구성 항목 객체를 추가하는 것입니다. 한때 JavaScript 구성 항목 객체를 깊이 소개하는 기사를 썼습니다. 핵심 사항은 다음과 같습니다.
---- 스크립트에서 구성이라는 객체를 추가하십시오.
----이 개체는이 스크립트를 사용할 때 사람들이 종종 변경 해야하는 모든 것을 저장합니다.
** CSS ID 및 클래스 이름;
** 버튼 이름, 레이블 단어 등;
** "페이지 당 표시된 사진 수"및 "표시된 이미지 크기"와 같은 값;
** 위치, 위치 및 언어 설정.
--- 사용자가 수정하고 덮어 쓸 수 있도록이 객체를 공통 속성으로 사용자에게 반환하십시오.
이것은 일반적으로 프로그래밍 프로세스의 마지막 단계에서해야 할 일입니다. 나는 한 가지 예에서 이것들을 집중시켰다.
실제로, 당신은 또한 당신의 코드를 아주 좋은 방법으로 사용하고 각각의 요구에 따라 약간의 변경을 원합니다. 이 기능을 구현하면 스크립트에 대해 불평하는 사람들로부터 혼란스러운 이메일을 받게됩니다. 이는 누군가가 스크립트를 수정했으며 매우 유용하다는 것을 알려줍니다.
배경과 상호 작용하십시오
수년간의 프로그래밍 경험에서 내가 배운 중요한 것 중 하나는 JavaScript가 인터페이스 상호 작용을 개발하기위한 훌륭한 언어이지만 숫자를 처리하거나 데이터 소스에 액세스하는 데 사용되는 경우 약간 불만족합니다.
처음에는 Perl을 실행하기 위해 CGI-BIN 폴더에 코드를 복사 해야하는 것을 싫어하기 때문에 Perl을 대체하는 JavaScript를 배웠습니다. 나중에, 나는 주요 데이터를 처리하기 위해 백엔드 작업 언어를 사용해야한다는 것을 깨달았으며 JavaScript가 모든 것을 할 수는 없습니다. 더 중요한 것은 보안 및 언어 특성을 고려해야한다는 것입니다.
웹 서비스에 액세스하면 JSON-P 형식으로 데이터를 얻을 수 있습니다. 클라이언트 브라우저에서는 다양한 데이터 변환을 수행하지만 서버가 있으면 데이터를 변환하는 더 많은 방법이 있습니다. 서버 측에서 JSON 또는 HTML 형식 데이터를 생성하여 클라이언트와 캐시 데이터 등으로 반환 할 수 있습니다. 미리 이해하고 준비하면 장기적인 이익을 얻고 두통을 많이 절약 할 수 있습니다. 다양한 브라우저에 적합한 프로그램 작성 프로그램은 시간 낭비이며 툴킷을 사용하십시오!
웹 개발을 처음 시작했을 때 페이지에 액세스 할 때 Document.all 또는 Document.Layers를 사용할지 여부에 대해 오랫동안 어려움을 겪었습니다. 나는 모든 계층이 고유 한 문서라는 아이디어를 좋아하기 때문에 document.layers를 선택했습니다 (요소를 생성하기 위해 너무 많은 문서를 작성했습니다). 레이어 패턴이 결국 실패 했으므로 Document.all을 사용하기 시작했습니다. Netscape 6이 W3C DOM 모델 만 지원한다고 발표했을 때 매우 기뻤지 만 실제로 사용자는 이에 대해 신경 쓰지 않았습니다. 사용자는 이러한 브라우저가 대부분의 브라우저가 정상적으로 표시 할 수있는 것을 표시 할 수 없다는 것을 알 수 있습니다. 이는 인코딩의 문제입니다. 우리는 현재 환경에서만 실행할 수있는 근시 코드를 작성했지만 불행히도 운영 환경은 끊임없이 변화하고 있습니다.
다양한 브라우저 및 다양한 버전과의 호환성을 다루는 데 너무 많은 시간을 낭비했습니다. 이런 종류의 문제를 다루는 데 능숙하면 좋은 직업 기회가 제공됩니다. 그러나 지금 우리는이 고통을 견딜 필요가 없습니다.
Yui, JQuery 및 Dojo와 같은 일부 툴킷은 이러한 종류의 문제를 처리하는 데 도움이 될 수 있습니다. 버전 비 호환성, 디자인 결함 등과 같은 다양한 인터페이스 구현을 추상화하여 다양한 브라우저 문제를 해결하여 통증으로부터 우리를 절약 할 수 있습니다. 특정 베타 브라우저를 테스트하지 않으면 브라우저 가이 문제를 수정했을 때 코드를 삭제하는 것을 잊어 버리기 때문에 브라우저의 결함을 수정하기 위해 자신의 프로그램에 코드를 추가하지 마십시오.
반면에, 전적으로 툴킷에 의존하는 것은 또한 근시안적인 행동입니다. 툴킷은 신속하게 개발하는 데 도움이 될 수 있지만 JavaScript에 대한 깊은 이해가 없다면 뭔가 잘못 할 것입니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.