코어 포인트
목표를 정리하십시오 : 라이브러리 구축을 시작하기 전에 해결하고자하는 특정 문제를 명확히하고 집중하고 유용성을 보장합니다.
사용자 중심 API 설계 : 최종 사용자 센터를 사용하여 라이브러리를 디자인하여 간단하고 사용하기 쉽도록 사용자 채택 및 만족도를 향상시킵니다. 
Christ Church Library (Source) 추상화와 같이 특정 목표를 달성하고 재사용 할 수있는 모든 코드는 도서관에 포장 될 수있는 후보입니다. 흥미로운 예는 jQuery입니다. JQuery의 API는 단순화 된 DOM API 이상의 것이지만, 몇 년 전 크로스 브라우저 DOM 운영이 매우 어려웠을 때 많은 의미가있었습니다.
API Design
<code>// 以空的UserAgent字符串开始
var userAgent = new UserAgent;
// 创建并添加第一个产品：EvilCorpBrowser/1.2 (X11; Linux; en-us)
var application = new UserAgent.Product('EvilCorpBrowser', '1.2');
application.setComment('X11', 'Linux', 'en-us');
userAgent.addProduct(application);
// 创建并添加第二个产品：Blink/20420101
var engine = new UserAgent.Product('Blink', '20420101');
userAgent.addProduct(engine);
// EvilCorpBrowser/1.2 (X11; Linux; en-us) Blink/20420101
userAgent.toString();
// 对引擎产品进行更多更改
engine.setComment('Hello World');
// EvilCorpBrowser/1.2 (X11; Linux; en-us) Blink/20420101 (Hello World)
userAgent.toString();
</code>
경우에 따라 사용자가 라이브러리를 연장 할 수 있도록 할 수 있습니다. 이렇게하려면 Angular Module (Angular.Module ( 'MyModule')) 및 JQuery 's FN (jQuery.fn.myplugin)과 같이 사용자가 채울 수있는 공개 메소드 또는 속성을 노출 할 수 있습니다. 라이브러리의 네임 스페이스에 :
<code>// 在初始化时配置
var userAgent = new UserAgent({
commentSeparator: ';'
});
// 使用公共方法进行运行时配置
userAgent.setOption('commentSeparator', '-');
// 使用公共属性进行运行时配置
userAgent.commentSeparator = '-';
</code>후자의 경우, 사용자가 라이브러리의 네임 스페이스에 액세스 할 수있게하면 확장/플러그인 정의 방식에 대한 제어가 줄어 듭니다. 연장이 특정 규칙을 따르는 것을 보장하려면 문서를 작성할 수 있습니다.
<code>var userAgent = new UserAgent; // 获取器，用于从所有产品中检索注释 userAgent.getComments(); // 用于打乱所有产品顺序的操作 userAgent.shuffleProducts(); </code>
Jani Hartikainen은 "JavaScript를 테스트하기 위해 Mocha와 Chai 사용"에서 단위 테스트를 작성하는 방법을 설명합니다. Tim Evko는 "Jasmine, Travis 및 Karma와의 JavaScript 테스트"에서 Jasmine이라는 다른 프레임 워크가있는 훌륭한 테스트 파이프 라인을 설정하는 방법을 보여줍니다. 이 두 가지 테스트 프레임 워크는 매우 인기가 있지만 다른 유형의 프레임 워크가 많이 있습니다.
이 기사의 앞부분에서 만든 요약은 예상 출력에 대해 언급했습니다. 이것은 모든 테스트가 시작되는 곳입니다. 기대치로 시작하십시오. 내 라이브러리에 대한 재스민 테스트는 다음과 같습니다
<code>// 以空的UserAgent字符串开始
var userAgent = new UserAgent;
// 创建并添加第一个产品：EvilCorpBrowser/1.2 (X11; Linux; en-us)
var application = new UserAgent.Product('EvilCorpBrowser', '1.2');
application.setComment('X11', 'Linux', 'en-us');
userAgent.addProduct(application);
// 创建并添加第二个产品：Blink/20420101
var engine = new UserAgent.Product('Blink', '20420101');
userAgent.addProduct(engine);
// EvilCorpBrowser/1.2 (X11; Linux; en-us) Blink/20420101
userAgent.toString();
// 对引擎产品进行更多更改
engine.setComment('Hello World');
// EvilCorpBrowser/1.2 (X11; Linux; en-us) Blink/20420101 (Hello World)
userAgent.toString();
</code>문서
물론
한계
> git 리포지토리에 버전/버전을 추가하십시오 git 저장소가있는 경우 저장소에 버전 번호를 추가 할 수 있습니다. 당신은 그것들을 저장소의 스냅 샷으로 생각할 수 있습니다. 우리는 그것을 레이블이라고 부릅니다. 태그를 만들려면 터미널을 엽니 다.
버전 속성은 GIT 태그와 일치해야합니다. 또한 readme.md 파일이 있는지 확인하십시오. Github와 마찬가지로 NPM은 패키지를 렌더링하는 페이지로 사용합니다.
후에는 다음 명령을 입력하여 패키지를 게시 할 수 있습니다. bower
<code>// 以空的UserAgent字符串开始
var userAgent = new UserAgent;
// 创建并添加第一个产品：EvilCorpBrowser/1.2 (X11; Linux; en-us)
var application = new UserAgent.Product('EvilCorpBrowser', '1.2');
application.setComment('X11', 'Linux', 'en-us');
userAgent.addProduct(application);
// 创建并添加第二个产品：Blink/20420101
var engine = new UserAgent.Product('Blink', '20420101');
userAgent.addProduct(engine);
// EvilCorpBrowser/1.2 (X11; Linux; en-us) Blink/20420101
userAgent.toString();
// 对引擎产品进行更多更改
engine.setComment('Hello World');
// EvilCorpBrowser/1.2 (X11; Linux; en-us) Blink/20420101 (Hello World)
userAgent.toString();
</code>흥미롭게도 지난 1 년 또는 2 년 동안 많은 사람들이 프론트 엔드 리소스를 위해 NPM으로 전환하는 것 같습니다. NPM 패키지는 주로 JavaScript이지만 많은 프론트 엔드 패키지도 NPM에서 릴리스됩니다. 어느 쪽이든, Bower는 여전히 매우 인기가 있으므로 패키지를 Bower에 게시하는 것이 좋습니다.
npm init와 마찬가지로 설명은 자명합니다. 마지막으로, 패키지를 게시하십시오 :
그게 IT입니다. 모든 사람이 노드 프로젝트 및/또는 웹에 사용할 수 있도록 라이브러리를 인터넷에 게시했습니다!
결론<code>// 以空的UserAgent字符串开始
var userAgent = new UserAgent;
// 创建并添加第一个产品：EvilCorpBrowser/1.2 (X11; Linux; en-us)
var application = new UserAgent.Product('EvilCorpBrowser', '1.2');
application.setComment('X11', 'Linux', 'en-us');
userAgent.addProduct(application);
// 创建并添加第二个产品：Blink/20420101
var engine = new UserAgent.Product('Blink', '20420101');
userAgent.addProduct(engine);
// EvilCorpBrowser/1.2 (X11; Linux; en-us) Blink/20420101
userAgent.toString();
// 对引擎产品进行更多更改
engine.setComment('Hello World');
// EvilCorpBrowser/1.2 (X11; Linux; en-us) Blink/20420101 (Hello World)
userAgent.toString();
</code>
<code>// 在初始化时配置
var userAgent = new UserAgent({
commentSeparator: ';'
});
// 使用公共方法进行运行时配置
userAgent.setOption('commentSeparator', '-');
// 使用公共属性进行运行时配置
userAgent.commentSeparator = '-';
</code>
위 내용은 자신의 JavaScript 라이브러리를 디자인하고 구축하십시오 : 팁 및 트릭의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
