백본은 사용하려면 coundscore.js에 의존해야합니다. 밑줄에서 기능을 사용하여 페이지 요소 및 처리 요소에 액세스하는 기본 작업을 완료해야합니다.
참고 : 백본은 다른 JS 라이브러리와 잘 작동하므로 프레임 워크가 아닌 라이브러리입니다.
밑줄은 기본 객체를 확장하지 않지만 _ () 메소드를 호출하여 캡슐화합니다. 캡슐화가 완료되면 JS 객체는 밑줄 객체가됩니다. 밑줄 객체의 값 () 메소드를 통해 기본 JS 객체에서 데이터를 얻을 수도 있습니다. (jQuery는 $ () 메소드를 통해 jQuery 객체를 얻습니다)
밑줄에는 총 60 개 이상의 기능이 있습니다. 다른 처리 객체에 따르면, 수집 클래스, 배열 클래스, 기능적 기능 클래스, 객체 클래스 및 도구 기능 클래스의 5 가지 주요 모듈로 나눌 수 있습니다.
밑줄 템플릿 () 함수 설명 :
이 기능에는 3 개의 템플릿이 포함됩니다.
(1) < % %> : 논리 코드가 포함되어 있으며 렌더링 후에는 표시되지 않습니다.
(2) < %= %> : 데이터 유형, 렌더링 후 데이터를 표시합니다.
(3) < %- %> : 코드 공격을 피하기 위해 HTML 태그를 일반 문자열로 변환합니다.
통화 형식 :
_.template (templatestring, [data], [setting])
양방향 데이터 바인딩은 구현되지 않습니다.
1. 밑줄 캡처 캡처
밑줄은 기본 JavaScript 객체 프로토 타입에서 확장되지는 않지만 jQuery와 같은 사용자 정의 객체에서 데이터를 캡슐화합니다 (이하 "밑줄 객체"라고 함).
예를 들어 밑줄 객체의 value () 메소드를 호출하여 기본 JavaScript 데이터를 얻을 수 있습니다.
// javaScript 내장 객체를 정의합니다 var jsdata = {name : 'data'} // _ () 메소드를 통해 밑줄로 개체를 생성 // 밑줄 객체의 프로토 타입에는 밑줄에 정의 된 모든 메소드가 포함되어 있습니다. var alterscoredata = _ (jsdata)를 사용할 수 있습니다. // 값 메소드, 즉 JSData indercoredAta.value ()를 통해 기본 데이터를 가져옵니다.2. 우선 순위 JavaScript 1.6 내장 방법
밑줄에는 JavaScript 1.6의 사양에 포함 된 많은 방법이 있습니다. 따라서 밑줄 객체 내에서 호스트 환경에서 제공하는 내장 방법 (호스트 환경이 이러한 방법을 구현 한 경우)은 기능의 실행 효율을 향상시키기 위해 먼저 호출됩니다.
JavaScript 1.6을 지원하지 않는 호스트 환경의 경우 밑줄은 자체 방식으로이를 구현하며 개발자의 경우 완전히 투명합니다.
여기에 언급 된 호스트 환경은 Node.js 실행 환경 또는 클라이언트 브라우저 일 수 있습니다.
3. 네임 스페이스를 변경하십시오
밑줄은 기본적으로 객체에 액세스하고 생성하는 데 _ (밑줄)를 사용하지만이 이름은 이름 지정 사양을 준수하지 않거나 이름 지정 충돌을 쉽게 유발할 수 있습니다.
noconflict () 메소드를 통해 밑줄의 이름을 변경하고 _ (밑줄) 변수 전에 값을 복원 할 수 있습니다.
<script type = "text/javaScript"> var _ = 'Custom Variable'; </script> <script type = "text/javaScript"src = "indentscore/inderscore-min.js"> </script> <script type = "text/javaScript"> // 밑줄 console.dir (_); // 밑줄 객체의 이름을 저희에게 바꾸고 auscore 객체에 액세스하고 밑줄 객체에 액세스하고 만듭니다. var us = _.noconflict (); // 출력 "Custom Variable"Console.dir (_); </스크립트>
4. 체인 작동
jQuery에서 어떻게 링크 작업을 수행하는지 기억하십니까? 예를 들어:
$ ( 'a') .css ( '위치', '상대') .attr ( 'href', '#') .show ();
밑줄은 또한 체인 작업을 지원하지만 Chain () 메소드를 호출하려면 다음을 선언해야합니다.
var arr = [10, 20, 30]; _ (arr) .chain () .map (function (item) {return item ++;}) .first () .value ();체인 () 메소드가 호출되면 밑줄은 폐쇄에서 호출 된 메소드를 캡슐화하고 반환 값을 밑줄 객체로 캡슐화하고 반환합니다.
// 이것은 체인 작업을 구현하는 밑줄의 핵심 기능입니다. 리턴 값을 새로운 밑줄 객체로 캡슐화하고 메소드 체인의 다음 함수를 지원하기 위해 체인 () 메소드를 다시 호출합니다. var result = function (obj, chain) {반환 체인? _ (obj) .chain () : obj; }5. 밑줄을 확장합니다
Mixin () 메소드를 통해 사용자 정의 메소드를 밑줄로 쉽게 확장 할 수 있습니다.
_.mixin ({method1 : function (object) {// todo}, method2 : function (arr) {// todo}, method3 : function (fn) {// todo}});이 방법은 밑줄 프로토 타입 객체에 추가되어 생성 된 모든 밑줄 객체에서 사용할 수 있으며 다른 방법과 동일한 환경을 즐깁니다.
6. 컬렉션을 가로 지르십시오
각 () 및 map () 메소드는 가장 일반적으로 사용되는 두 가지 방법입니다. 예를 들어 컬렉션 (배열 또는 객체)을 반복하고 차례로 컬렉션의 각 요소를 처리하는 데 사용됩니다.
var arr = [1, 2, 3]; _ (arr) .map (함수 (항목, i) {arr [i] = 항목 + 1;}); var obj = {첫 번째 : 1, 두 번째 : 2} _ (obj) .Each (함수 (value, key) {return obj [key] = value + 1;});MAP () 메소드는 각 () 메소드와 동일한 역할 및 매개 변수를 가지지 만 각 반복 함수에 의해 반환 된 결과를 새 배열로 기록하고 반환합니다.
7. 기능 스로틀
함수 스로틀은 실행 주파수 또는 함수 간격 (물 흐름을 제어하는 게이트와 마찬가지로)을 제어하는 것을 말합니다. 밑줄은 기능 스로틀링을위한 Debounce ()와 스로틀 ()의 두 가지 방법을 제공합니다.
이 두 가지 방법을 더 명확하게 설명하려면 두 가지 요구 사항을 구현해야한다고 가정합니다.
요구 사항 1 : 사용자가 텍스트 상자에서 검색 기준을 입력하면 일치하는 키워드가 자동으로 쿼리되어 사용자에게 프롬프트됩니다 (TMALL에서 검색 키워드를 입력 할 때와 마찬가지로)
먼저 첫 번째 요구 사항을 분석하십시오. 텍스트 상자의 Keypress 이벤트를 바인딩 할 수 있습니다. 입력 상자의 내용이 변경되면 일치하는 키워드를 쿼리하고 표시하십시오. 13자가 포함 된 "Wind 이것은 매우 무서운 일이며, Tmall이 이와 같이 구현되면 싱글의 날 전에 죽을 까 걱정됩니다 (물론, 그것은 깨지기 쉬운 것은 아니지만 확실히 최상의 솔루션은 아닙니다).
더 나은 접근 방식은 사용자가 입력을 마치거나 프롬프트를 기다릴 때 일치하는 키워드를 쿼리하는 것입니다 (아마도 다음 컨텐츠를 입력하기에는 너무 게으를 수 있습니다).
마지막으로 두 경우 모두 사용자가 일시적으로 입력을 중단 할 것이므로 사용자가 200 밀리 초의 입력을 일시 중지 한 후 쿼리를 결정했습니다 (사용자가 컨텐츠를 지속적으로 입력하는 경우 원하는 키워드에 대해 매우 명확 할 수 있다고 생각합니다.
이 시점에서 밑줄에서 decounce () 함수를 사용 하여이 요구 사항을 쉽게 구현할 수 있습니다.
<입력 유형 = "텍스트"id = "검색"이름 = "검색" /> <script type = "text /javaScript"> var query = _ (function () {// 쿼리 작동}). debounce (200); $ ( '#search'). bind ( 'keypress', query); </스크립트>우리의 코드가 매우 간결하고 스로틀 링 제어가 debounce () 메소드에서 구현되었음을 알 수 있습니다. 쿼리 함수가 200 밀리 초 이내에 호출되지 않은 경우 쿼리 작업을 실행 한 다음 입력 상자의 Keypress 이벤트에 쿼리 기능을 바인딩 할 것이라고합니다.
쿼리 기능은 어떻게 생겼습니까? Debounce () 메소드를 호출하면 쿼리 작업과 시간 (밀리 초)을 수행하는 함수를 전달합니다. Debounce () 메소드는 통과 시간에 따라 함수를 조절하고 새 기능 (예 : 쿼리 함수)을 반환합니다. 자신감과 대담함으로 쿼리 기능을 호출 할 수 있으며 DeCaNce () 메소드는 필요에 따라이를 제어하는 데 도움이됩니다.
요구 사항 2 : 사용자가 브라우저 스크롤 바를 드래그하면 서버 인터페이스에 전화하여 새 콘텐츠가 있는지 확인하십시오.
두 번째 요구 사항을 분석하겠습니다. 쿼리 메소드를 Window.onscroll 이벤트에 바인딩 할 수 있지만 사용자가 스크롤 바를 한 번 드래그하고 수십 또는 수백 개의 onscroll 이벤트를 트리거 할 수 있기 때문에 이것은 분명히 좋은 관행이 아닙니다.
위의 decounce () 메소드를 사용하여 조절 제어를 수행 할 수 있습니까? 사용자가 스크롤 바를 드래그하면서 새 컨텐츠에 대한 쿼리를 완료했을 때? 그러나 이는 요구 사항과 일치하지 않으며 사용자는 드래그 프로세스 중에 새로운 콘텐츠의 변화를보기를 희망합니다.
따라서 사용자가 드래그 할 때 두 쿼리마다 500 밀리 초 이상인 경우 사용자가 1 초 동안 드래그하면 200 개의 onscroll 이벤트가 트리거 될 수 있지만 최대 2 개의 쿼리 만 수행 할 수 있습니다.
밑줄에서 스로틀 () 메소드를 사용 하여이 요구 사항을 쉽게 구현할 수 있습니다.
<script type = "text/javaScript"> var query = _ (function () {// 쿼리 작동}). 스로틀 (500); $ (Window) .Bind ( '스크롤', 쿼리); </스크립트>스로틀 () 메소드 내부에서 우리가 구현 한 모든 컨트롤이 이미 용이기 때문에 코드는 여전히 간결합니다.
두 가지 debounce ()와 스로틀 () 방법이 매우 유사하지만 (호출 메소드 및 리턴 값 포함) 그 함수는 다르다는 것을 알 수 있습니다.
이들은 모두 기능 스로팅에 사용되며 제어 기능은 자주 호출되지 않으므로 클라이언트 및 서버 리소스를 저장합니다.
debounce () 메소드는 함수 실행 간격, 즉 함수의 호출 시간이 지정된 시간보다 작을 수 없습니다.
스로틀 () 메소드는 함수의 실행 빈도에 더 중점을 둡니다. 즉, 함수는 지정된 주파수 내에서 한 번만 호출됩니다.
8. 템플릿 분석
밑줄은 페이지 구조와 논리를 효과적으로 구성하는 데 도움이되는 경량 템플릿 구문 분석 기능을 제공합니다.
예를 들어 소개하겠습니다.
<!-렌더링 된 태그를 표시하는 데 사용됩니다-> <ul id = "element"> </ul> <!-템플릿을 정의하고 템플릿 내용을 스크립트 태그에 넣습니다-> <script type = "텍스트/템플릿"id = "tpl"> <%for (var i = 0; i <list.length; i ++) {%var item = list [i]%> <li> <li> <%> <%=. <%= item.lastname%> </span> <pan> <%-item.city%> </span> </li> <%}%> </script> <script type = "text/javaScripe"src = "밑줄/밑줄"> </script> <script> <script> <script> <script> <script> <texplest "> // 템플릿 var render and get endering element 및 renderal $ ( '#element'), tpl = $ ( '#tpl'). html (); // 서버에서 얻은 var 데이터 일 수있는 데이터를 작성 = {list : [{firstName : '<a href = "#"> Zhang </a>', lastName : 'san', city : 'shanghai'}, {FirstName : 'li', 'si', city : 'a href =} "#", </a>} 'Wang', lastName : 'Wu', City : 'Guangzhou'}, {FirstName : 'Zhao', lastName : 'liu', City : 'shenzhen'}]} // 템플릿을 구문 분석하고, 구문 분석 된 콘텐츠 var html = _.template (tpl, data); // 구문 분석 된 컨텐츠를 렌더링 요소 요소로 채 웁니다 .html (html); </스크립트>이 예에서는 템플릿 내용을 <cript> 태그에 넣으므로 태그 유형이 텍스트/JavaScript 대신 텍스트/템플릿이라는 것을 알 수 있습니다. JavaScript 스크립트로 직접 실행할 수 없기 때문입니다.
또한 템플릿 내용을 <script>에 넣는 것이 좋습니다. <div> 또는 다른 태그로 작성하면 구문 분석을 위해 Dom 트리에 추가 될 수 있기 때문입니다 (이 태그를 숨기더라도 피할 수는 없습니다).
_.template 템플릿 함수는 3 가지 유형의 템플릿 태그 만 파종 할 수 있습니다 (Smarty 및 JSTL보다 훨씬 간단합니다) :
< % %> : 데이터가 렌더링 될 때 실행될 JavaScript 코드를 포함하는 데 사용됩니다.
< %= %> : 데이터를 출력하는 데 사용되면 변수, 객체의 속성 또는 함수 호출 (함수의 반환 값을 출력하기 위해) 일 수 있습니다.
< %- %> : 데이터를 출력하고 데이터에 포함 된 HTML 문자를 엔터티 양식으로 변환하는 데 사용됩니다 (예 : XSS 공격을 피하기 위해 이중 따옴표를 변환합니다).
데이터에 텍스트로 HTML을 표시하려면 종종 < %- %> 태그를 사용합니다.
밑줄을 사용하면이 3 가지 형태의 태그를 수정할 수 있습니다. { % %}, { %= %}, { %- %}를 태그로 사용하려면 다음과 같이 템플릿 세팅을 수정하여 수행 할 수 있습니다.
_.templatesettings = {평가 : // {%([/s/s]+?)/%/}/g, interpolate : // {%= ([/s/s]+?)/%/}/g, 탈출 : // {%-([/s/s]+?)%/}/g}이 예에서는 템플릿 내용과 데이터를 전달하여 다음 순서로 처리됩니다.
(1) 템플릿 컨텐츠를 실행 가능한 JavaScript (구문 분석 태그)로 구문 분석합니다.
(2) 구문 분석 된 JavaScripe 범위를 문과 함께 전달한 데이터 객체로 수정하여 템플릿의 변수를 통해 데이터 객체의 속성에 직접 액세스 할 수 있습니다.
(3) 구문 분석 된 JavaScript 실행 (템플릿으로 데이터를 채우기)
(4) 실행 후 결과를 반환합니다
우리는 종종 템플릿 메소드가 여러 번 호출되어 데이터를 동일한 템플릿으로 렌더링하는 상황에 직면합니다.
페이징 목록이 있고 목록의 각 데이터가 템플릿을 통해 렌더링된다고 가정합니다. 사용자가 다음 페이지에 들어가면 다음 페이지의 데이터를 가져 와서 다시 렌더링합니다. 실제로, 템플릿은 렌더링 될 때마다 템플릿이 동일하지만, 지금 설명한 템플릿의 모든 처리 프로세스는 항상 실행됩니다.
실제로 밑줄의 템플릿 방법은보다 효율적인 호출 방법을 제공합니다. 위의 코드에서 마지막 두 문장을 다음과 같이 수정합니다.
// 템플릿을 구문 분석하고 구문 분석 된 내용을 반환합니다 var render = _.template (tpl); var html = render (데이터); // 구문 분석 된 컨텐츠를 렌더 요소 요소 .html (html)에 채 웁니다.
미묘한 차이점을 찾을 수 있습니다. 템플릿 메소드를 호출 할 때는 템플릿 내용 만 전달하지만 데이터는 전달되지 않습니다. 이 시점에서 템플릿 메소드는 템플릿 컨텐츠를 구문 분석하고, 구문 분석 실행 자바 스크립트 코드를 생성하고, 함수를 반환하며, 기능 본문은 구문 분석 된 JavaScript입니다. 따라서이 기능을 호출하여 데이터를 렌더링하면 템플릿 구문 분석 작업을 생략합니다.
반환 된 함수를 저장해야합니다 (렌더 변수에 저장하는 것처럼), 특히 동일한 템플릿을 여러 번 렌더링 할 수있는 경우 기능을 호출하여 데이터를 렌더링해야합니다. 그렇게하면 실행 효율성을 향상시킬 수 있습니다 (구체적인 개선은 템플릿의 길이와 복잡성에 따라 다르지만 어쨌든 좋은 습관입니다).