1. 인터페이스의 유창함
좋은 인터페이스는 매끄럽고 이해하기 쉽고 주로 다음 측면을 반영합니다.
1. 단순합니다
특정 요소의 CSS 속성을 작동하려면 다음이 기본 방법입니다.
document.querySelectorall ( '#id'). style.color = 'red';
포장 후
함수 a (selector, color) {document.querySelectorAll (selector) []. style.color = color} a ( '#a', 'red');수십 개의 문자가있는 긴 줄에서 간단한 기능 호출에 이르기까지 API는 간단하고 사용하기 쉽습니다.
2. 가독성
A ( '#A', 'Red')는 요소를 간단하고 실용적으로 변경하는 데 도움이되는 좋은 기능이지만 문제는 기능 변경을 처음 사용하면 더 혼란 스러울 것입니다. 아무도 그에게 어떤 기능이 있는지 말하지 않을 것입니다. 인터페이스 개발에 대해 한 가지를 알아야합니다. 사람들은 게으르다. 색상 할당 함수의 관점에서 코드가 적지 만 메모리 비용이 증가합니다. 이를 수행 할 때마다 매핑 관계가 있어야합니다. A ----> 색상. 몇 가지 간단한 것이라면 중요하지 않지만 일반적으로 프레임 워크 세트에는 수십 또는 수백 API가 있으며 매핑 비용의 증가로 인해 프로그래머가 붕괴됩니다. 우리에게 필요한 것은 인터페이스를 의미있게 만드는 것입니다. A 기능을 다시 작성해 봅시다.
함수 letsomeElementChangeColor (선택기, 색상) {document.querySelectorall (선택기, 색상);}LetSomeElementChangeColor는 A에 비해 언어 적 의미를 부여하며 누구나 그 의미를 알 수 있습니다.
3. 메모리 비용을 줄입니다
우리가 지금 방금 기능하는 기능도 다음과 같습니다. 너무 길다. LetSomeElementChangeColor는 매핑 비용을 줄이지 만 메모리 비용이 증가합니다. 당신은 학업 석사를 포함하여 아무도 구두가되는 것을 좋아하지 않는다는 것을 알아야합니다. 기본적으로 DOM을 얻는 API 도이 문제 문서를 가지고 있습니다 .getElementsByClassName; document.getElementsByName; Document.querySelectorALL; 이 API는 사람들에게 단어가 너무 길다는 느낌을줍니다. 그들이주는 의미는 매우 명확하지만,이 접근법은 단순성을 희생하는 것을 기반으로합니다. 그래서 우리는이 이전 기능을 다시 작성합니다
함수 setColor (selector, color) {xxxxxxxxxxxx}중대한 변경없이 기능 이름을 줄입니다. 읽고, 기억하고 사용하기 쉽도록하십시오.
4. 확장
소위 확장은 기능의 사용이 흐르는 물과 같은 글로 쓰기 위해 실행 체인을 형성 함을 의미합니다.
document.getElementById ( 'id'). style.color = 'red'; documb
우리가 사용한 이전의 방법은 두 가지 함수 setFontsize, setbackgroundColor를 다시 캡슐화하는 것이 었습니다. 그런 다음 setColor ( 'id', 'red')를 실행합니다. setfontsiez ( 'id', '12px'); stackgroundColor ( 'ID', 'Pink'); 분명히,이 접근법은 그 영역을 넘어서는 것이 게으르다. ID 요소는 매번 재 학습되어 성능에 영향을 미치며 실패해야합니다. 새로운 방법을 추가하거나 실패해야 할 때마다 이러한 방법은 여전히 매번 호출되거나 실패합니다. 아래에서는 확장 된 기능으로 다시 작성했습니다. 먼저, ID 획득 방법을 객체에 캡슐화 한 다음 객체의 각 방법 에서이 객체를 반환합니다.
함수 getElement (selector) {this.style = document.querySeleCotRall (selector) .Style;} getElement.prototyp.color = function (color) {this.style.color = color; retoy this;} getElement.background = function (bg) {this.style.backgroun function (size) {this.style.fontsize = size; return this;} // 호출 var el = new getElement ( '#id') el.color ( 'red'). background ( 'pink'). fontsize ( 'px');간단하고 매끄럽고 읽기 쉬운 나중에 읽기 쉬운 매개 변수를 계속 최적화하는 방법에 대해 이야기 할 것입니다. 따라서 모든 사람은 jQuery API를 사용하는 것을 선호합니다. $ 기호는 실제적인 의미를 나타내지 않지만 간단한 기호는 우리가 사용하는 데 도움이됩니다. 단순하고, 읽기 쉬운, 기억하기 쉬운, 체인 쓰기 및 다중 매개 변수 처리와 같은 위의 원리를 구현합니다.
나이트웨어 :
document.getElementById ( 'id'). style.color = 'red'; documb
꿈:
$ ( 'id'). css ({color : 'red', fontsize : '12px', backgroundColor : 'Pink'})2. 일관성
1. 인터페이스 일관성
관련 인터페이스는 일관된 스타일을 유지합니다. 완전한 API 세트는 친숙 함과 편안함을 전달하는 경우 개발자의 새로운 도구에 대한 적응력을 크게 줄입니다. 이 일을 지정하는 것 : 짧고 자기 설명, 그리고 가장 중요한 것은 일관성을 유지합니다. "컴퓨터 과학 커뮤니티에는 두 개의 두통이 있습니다 : 캐시 실패 및 이름 지정 문제" - Phil Karlton은 좋아하는 단어를 선택하여 지속적으로 사용합니다. 스타일을 선택한 다음 유지하십시오.
나이트웨어 :
setColor,
Letbackground
changefontsize
Makedisplay
꿈:
세트 콜러;
좌절장;
setfontsize
세트.........
사람들이 같은 사람이 작성한 기사를 읽는 것처럼 코드를 읽을 수 있도록 코드 스타일과 이름 지정 스타일을 유지하십시오.
3. 매개 변수 처리
1. 매개 변수 유형
프로그램에 안정적인 보증을 제공 할 매개 변수 유형을 결정하십시오.
// 색상이 문자열 유형 함수 setColor (color) {if (typeof color! == 'string') return; dosomething}을 허용합니다.2. JSON을 사용하여 매개 변수를 전달하십시오
JSON에는 값을 전달하면 많은 이점이 있습니다. 매개 변수의 이름을 지정하고 매개 변수의 특정 위치를 무시하고 기본값을 제공 할 수 있습니다. 예를 들어 다음과 같은 나쁜 상황은 다음과 같습니다.
기능 fn (param1, param2 ............ paramn)
그에 따라 각 매개 변수를 순서대로 전달해야합니다. 그렇지 않으면 메소드가 예상 한 것과 다른 방식으로 실행됩니다. 올바른 방법은 다음과 같습니다.
function fn (json) {// 필요한 매개 변수의 기본값을 설정 var default = extend ({param : 'default', param : 'default'......}, json)}이 기능 코드는 매개 변수를 전달하지 않더라도 실행될 것으로 예상됩니다. 선언 할 때 특정 비즈니스를 기반으로 매개 변수의 기본값을 결정하게됩니다.
4. 확장 성
소프트웨어 설계의 가장 중요한 원칙 중 하나 : 인터페이스를 수정하지 않으면 확장을 의미합니다! 확장성에는 인터페이스에 대한 단일 책임이 필요하며 여러 책임 인터페이스를 확장하기가 어렵습니다. 밤나무를 가져 가십시오 :
// 요소의 글꼴과 배경을 동시에 변경해야합니다. // nightware : 함수 세트 (선택기, 색상) {docum 글꼴 크기를 다시 변경 해야하는 경우이 기능 만 수정하고 기능을 수정하고 기능을 작성하여 기능 // DreamFunction 세트 (선택기, 색상) {var el = document.querySelectroall (선택기); el.style.color = color; el.style.backgroun px) {var el = set (selector, color) el.style.fontsize = px; return el;}위는 단순한 색상을 추가 한 것입니다. 비즈니스는 복잡하고 코드는 글을 쓸 때가 아닙니다. 이전 코드를 읽고 수정해야합니다. 분명히, 그것은 개방형 원칙을 준수하지 않습니다. 수정 된 함수는 요소 객체를 반환하여 다음에 변경해야 할 때 처리를 위해 다시 반환 값을 얻게됩니다.
2. 이것의 사용
확장 성에도 유연한 사용, 전화 및 적용 방법이 포함됩니다.
function saybonjour () {alert (this.a)} obj.a =; obj.say = saybonjour; obj.say (); /// orsaybonjour.call || apply (obj); //5. 처리 오류
1. 예측 오류
당신은 typeof를 사용하거나 시도 할 수 있습니다 ... 잡히면 감지하십시오. 타입은 감지 객체가 오류를 던지지 않도록 강요하며 정의되지 않은 변수에 특히 유용합니다.
2. 오류를 던져
대부분의 개발자는 실수를 원하지 않으며 해당 코드 자체를 찾아야합니다. 가장 좋은 방법은 콘솔에서 직접 출력하여 사용자에게 무슨 일이 있었는지 알려주는 것입니다. 브라우저의 출력 API : Console.log/Warn/Error를 사용할 수 있습니다. 당신은 또한 당신의 프로그램을 위해 어떤 길을 떠날 수도 있습니다 : 시도 ... 캐치.
함수 오류 (a) {if (typeof a! == 'string') {console.error ( 'param a는 string의 유형')} 함수 error () {try {// 일부 코드가 여기에 excucete} catch (ex) {console.wran (ex);}}6. 예측
예측 가능한 냄새 프로그램 인터페이스는 견고성을 제공하며 코드의 원활한 실행을 보장하려면 비정상적인 기대를 고려해야합니다. 이전 setColor를 사용하여 예기치 않은 코드와 예측 가능한 코드의 차이점을 살펴 보겠습니다.
// nighwareFunction set (selector, color) {document.getElementById (selector) .style.color = color;} // dreamzepto.init = function (selector, context) {var dom // 아무것도 주어진 것이 없으면 빈 zepto collectionif (! selector) return selector (string)에 대한 최적화를 반환합니다. selector.trim () // HTML 조각 인 경우 IT에서 노드 생성 // 참고 : Chrome and Firefox 모두에서 Dom Error //가 <if (selector [] == '<'&& prathmentre.test (selector)로 시작하지 않으면 Dom = Zepto.fragment (selector, regexp. $, 컨텍스트), selector = null // 이러한 컨텍스트에서 먼저, 그리고 (context! == defined) return $ (context) .find (selector) // CSS 선택기 인 경우 Nodes를 선택하는 데 사용하는 경우 (Context! == 정의) return $ (context! == 정의) if (context! == 정의) // 노드를 선택하십시오. ELSE DOM = ZEPTO.QSA (Document, Selector)} // 기능이 주어진 경우 DOM이 ReadyElse (isfunctor) 인 경우 (isfunction (isfunctor)을 호출하면 $ (Document). Ready (selector) // Zepto 컬렉션이 제공되면 itelse if (zepto.isz (selector)) reture repotectorelse {// 배열이 주어진 경우 배열을 정상화합니다 (isArray (isarray (selector)) dom = compact (셀렉터) // 돔 = [selector = selector], 셀렉터]. html 조각, itelse if (fragmentre.test (selector)))) dom = zepto.fragment (selector.trim (), regexp. $, context), regexp. $, context), 셀렉터 = null // 컨텍스트가있는 경우, 해당 컨텍스트에 대한 컬렉션을 먼저 만들고 (context! = 컨텍스트)에서 // 노드를 생성합니다. CSS 선택기 인 경우 노드를 선택하는 데 사용하여 사용하십시오. ELSE DOM = ZEPTO.QSA (Document, Selector)} // 노드에서 새 Zepto Collection을 만듭니다.위는 Zepto의 소스 코드입니다. 저자가 들어오는 매개 변수를 예측할 때 많은 처리를 수행했음을 알 수 있습니다. 실제로, 예측 가능성은 프로그램의 여러 입구를 제공하며 논리적 판단에 지나지 않습니다. Zepto는 여기에서 많은 옳고 그른 판단을 사용하여 코드의 길이로 이어지고 읽기에 적합하지 않습니다. 요컨대, 예측 가능성은 실제로 위치의 물리적 객체에 대한 더 많은 매개 변수를 작성해야합니다. 외부 탐지를 내부 탐지로 변경하십시오. 예, 그것을 사용하는 사람들은 편안하고 사용하는 것이 행복합니다. 지금! 인생에서 가장 중요한 것은 Heisen입니다.
7. 의견 및 문서 가독성
가장 좋은 인터페이스는 문서화없이 사용할 것이지만 종종 인터페이스 수가 많아지고 비즈니스가 증가하면 사용하기가 약간 어려워집니다. 따라서 인터페이스 문서와 의견을 신중하게 작성해야합니다. 의견은 단순하고 간결한 원칙을 따르며 몇 년 후에 오는 사람들을위한 것입니다.
// 주석 인터페이스, ppt를 보여 주려면 futt를 사용하고 function camentary () {// 문자 적 의미가없는 변수를 정의하는 경우 댓글을 작성하는 것이 가장 좋습니다. return go.navigate ( 'hash', function () {data.clear ();});}마침내
문법 작성 API 문서와 Github Royal Document 작성 구문을 표시하는 것이 좋습니다. 단순하고 빠르면 코드가 강조되며 많이 말하지 않습니다.
위는 편집자가 귀하에게 소개 한 JavaScript API 디자인 원칙에 대한 완전한 설명입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!