An in-depth analysis of the role of Underscore.js, a dependency library of the Backbone.js framework_Basic knowledge

バックボーンは、underscore.js に依存して使用する必要があり、アンダースコア内の関数を使用して、ページ要素へのアクセスと要素の処理の基本操作を完了する必要があります。
注: Backbone は他の JS ライブラリとうまく連携できるため、フレームワークではなくライブラリです。
Underscore はネイティブ オブジェクトを拡張しませんが、_() メソッドを呼び出してカプセル化します。カプセル化が完了すると、js オブジェクトは Underscore オブジェクトになります。また、Value() メソッドを通じてネイティブ js オブジェクトのデータを取得することもできます。アンダースコアオブジェクトの。 (jquery は $() メソッドを通じて Jquery オブジェクトを取得します)
Underscore には合計 60 以上の関数があり、さまざまな処理オブジェクトに応じて、コレクション クラス、配列クラス、関数関数クラス、オブジェクト クラス、ツール関数クラスの 5 つの主要なモジュール カテゴリに分類できます。

アンダースコア template() 関数の説明:

この関数には 3 つのテンプレートが含まれています:

(1): ロジック コードが含まれており、レンダリング後には表示されません。
(2) : データ型、レンダリング後の表示データ。
(3)<%- %>: コード攻撃を避けるために、HTML タグを共通の文字列に変換します。

呼び出し形式:

_.template(templateString, [data], [setting])

双方向のデータ バインディングは実装されていません。

1. アンダースコアオブジェクトのカプセル化
アンダースコアは、ネイティブ JavaScript オブジェクトのプロトタイプ内では拡張されず、jQuery のようなカスタム オブジェクト (以下、「アンダースコア オブジェクト」と呼びます) にデータをカプセル化します。
Underscore オブジェクトの value() メソッドを呼び出すことで、ネイティブ JavaScript データを取得できます。例:

// 定义一个JavaScript内置对象 
var jsData = { 
 name : 'data' 
} 
 
// 通过_()方法将对象创建为一个Underscore对象 
// underscoreData对象的原型中包含了Underscore中定义的所有方法，你可以任意使用 
var underscoreData = _(jsData); 
 
// 通过value方法获取原生数据, 即jsData 
underscoreData.value();

2. 最初に JavaScript 1.6 組み込みメソッドを呼び出します
Underscore の多くのメソッドは JavaScript 1.6 の仕様に含まれているため、Underscore オブジェクト内では、ホスト環境によって提供される組み込みメソッドが最初に呼び出されます (ホスト環境がこれらのメソッドを実装している場合)。機能の実行効率。
JavaScript 1.6 をサポートしていないホスト環境の場合、Underscore は独自の方法でそれを実装します。これは開発者にとって完全に透過的です。
ここで言及するホスティング環境は、Node.js 実行環境またはクライアント ブラウザーです。

3. 名前空間を変更します
アンダースコアは、オブジェクトへのアクセスと作成にデフォルトで _ (アンダースコア) を使用しますが、この名前は命名仕様に準拠していない可能性があり、または簡単に名前の競合を引き起こす可能性があります。
noConflict() メソッドを使用して Underscore の名前を変更し、_ (アンダースコア) 変数の以前の値を復元できます。例:

<script type="text/javascript"> 
 var _ = '自定义变量'; 
</script> 
<script type="text/javascript" src="underscore/underscore-min.js"></script> 
<script type="text/javascript"> 
 // Underscore对象 
 console.dir(_); 
 // 将Underscore对象重命名为us, 后面都通过us来访问和创建Underscore对象 
 var us = _.noConflict(); 
 // 输出"自定义变量" 
 console.dir(_); 
</script> 

4. チェーン操作
jQuery でリンク操作を実行する方法を覚えていますか?例:

$('a') 
 .css('position', 'relative') 
 .attr('href', '#') 
 .show(); 

アンダースコアはチェーン操作もサポートしていますが、最初にchain() メソッドを呼び出して次のように宣言する必要があります。

var arr = [10, 20, 30]; 
_(arr) 
 .chain() 
 .map(function(item){ return item++; }) 
 .first() 
 .value(); 

chain() メソッドが呼び出される場合、Underscore は呼び出されたメソッドをクロージャにカプセル化し、戻り値を Underscore オブジェクトとしてカプセル化して次を返します。

// 这是Underscore中实现链式操作的关键函数，它将返回值封装为一个新的Underscore对象，并再次调用chain()方法，为方法链中的下一个函数提供支持。 
var result = function(obj, chain) { 
 return chain ? _(obj).chain() : obj; 
} 

5. 拡張アンダースコア
mixin() メソッドを使用してカスタム メソッドを Underscore に簡単に拡張できます。例:

_.mixin({ 
 method1: function(object) { 
 // todo 
 }, 
 method2: function(arr) { 
 // todo 
 }, 
 method3: function(fn) { 
 // todo 
 } 
}); 

これらのメソッドは、Underscore のプロトタイプ オブジェクトに追加されます。作成されたすべての Underscore オブジェクトはこれらのメソッドを使用でき、他のメソッドと同じ環境を享受できます。

6. コレクションを調べる
each() メソッドと map() メソッドは、最も一般的に使用される 2 つのメソッドで、コレクション (配列またはオブジェクト) を反復し、コレクション内の各要素を順番に処理するために使用されます。次に例を示します。

var arr = [1, 2, 3]; 
 
_(arr).map(function(item, i) { 
 arr[i] = item + 1; 
}); 
 
var obj = { 
 first : 1, 
 second : 2 
} 
 
_(obj).each(function(value, key) { 
 return obj[key] = value + 1; 
}); 

<input type="text" id="search" name="search" /> 
<script type="text/javascript"> 
 var query = _(function() { 
 // 在这里进行查询操作 
 }).debounce(200); 
 
 $('#search').bind('keypress', query); 
</script> 

<script type="text/javascript"> 
 var query = _(function() { 
 // 在这里进行查询操作 
 }).throttle(500); 
 
 $(window).bind('scroll', query); 
</script> 

<!-- 用于显示渲染后的标签 --> 
<ul id="element"></ul> 
 
<!-- 定义模板，将模板内容放到一个script标签中 --> 
<script type="text/template" id="tpl"> 
 <% for(var i = 0; i < list.length; i++) { %> 
 <% var item = list[i] %> 
 <li> 
  <span><%=item.firstName%> <%=item.lastName%></span> 
  <span><%-item.city%></span> 
 </li> 
 <% } %> 
</script> 
<script type="text/javascript" src="underscore/underscore-min.js"></script> 
<script type="text/javascript"> 
 // 获取渲染元素和模板内容 
 var element = $('#element'), 
 tpl = $('#tpl').html(); 
 
 // 创建数据, 这些数据可能是你从服务器获取的 
 var data = { 
 list: [ 
  {firstName: '<a href="#">Zhang</a>', lastName: 'San', city: 'Shanghai'}, 
  {firstName: 'Li', lastName: 'Si', city: '<a href="#">Beijing</a>'}, 
  {firstName: 'Wang', lastName: 'Wu', city: 'Guangzhou'}, 
  {firstName: 'Zhao', lastName: 'Liu', city: 'Shenzhen'} 
 ] 
 } 
 
 // 解析模板, 返回解析后的内容 
 var html = _.template(tpl, data); 
 // 将解析后的内容填充到渲染元素 
 element.html(html); 
</script>