（二）underscore.js框架Utility類API學習以及模型template的詳細介紹

阿新 • • 發佈：2019-01-12

本文介紹的是underscore.js提供的Utility Functions。

noConflict_.noConflict()
Give control of the "_" variable back to its previous owner. Returns a reference to theUnderscore object.

這個函式主要是為了解決underscore.js與其他框架或js名字衝突的問題。我們知道：underscore.js使用全域性物件_，如果在underscore框架載入前，已經有了這麼一個全域性變數會怎麼樣呢？

<html>
	<head>
		<script>
			// 在underscore.js框架載入前執行,目的是驗證_.noConflict();
			var _ = "11";
		</script>
		<script src="underscore-1.7.0/underscore.js"></script>
		<script>
			//underscore是返回的underscore.js封裝物件
			var underscore = _.noConflict();
			alert(underscore.VERSION);
			// _之前是什麼,現在就還原成什麼.
			alert(_);//11
		</script>
	</head>
	
	<body>
	</body>
</html>

首先定義了一個全域性變數_，當underscore框架載入後，_之前的值被覆蓋。當呼叫_.noConflict()之後，該函式返回是underscore封裝的物件，仍然可以使用這個函式的返回值呼叫underscore.js提供的API。_被還原成underscore.js載入之前的值,就是11。

identity_.identity(value)
Returns the same value that is used as the argument. In math: f(x) = x
This function looks useless, but is used throughout Underscore as a default iteratee.

var moe = {name: 'moe'};
moe === _.identity(moe);
=> true

該函式啥也不做，就是直接返回傳遞給他的引數值，即數學中的f(x) = x。

constant_.constant(value)
Creates a function that returns the same value that is used as the argument of_.constant.

var moe = {name: 'moe'};
moe === _.constant(moe)();
=> true

該constant()返回值是一個函式（這個函式返回的就是傳遞給constant()函式的引數）。

noop_.noop()
Returns undefined irrespective（不管） of the arguments passed to it. Useful as the default for optional callback arguments.

obj.initialize = _.noop;

noop就是no operation的縮寫，就是一個空函式，啥也不幹，返回值是undefined或者說是沒有返回值。有點像null object模式，避免使用者判空。

times_.times(n, iteratee, [context])
Invokes the given iteratee function n times. Each invocation of iteratee is called with an index argument. Produces an array of the returned values.

var result = _.times(3, function(i){return i * 10;}) 
console.log("times=" + result);// 0,10,20 

result = _(3).times(function(i){ return i * 10; });
console.log("times=" + result);// 0,10,20

上面這2種寫法是等價的

random_.random(min, max)
Returns a random integer between min and max, inclusive. If you only pass one argument, it will return a number between 0 and that number.

_.random(0, 100);
=> 42

mixin_.mixin(object)
Allows you to extend Underscore with your own utility functions. Pass a hash of {name: function} definitions to have your functions added to the Underscore object, as well as the OOP wrapper.

_.mixin({
  capitalize: function(string) {
    return string.charAt(0).toUpperCase() + string.substring(1).toLowerCase();
  }
});
_("fabio").capitalize();
=> "Fabio"

uniqueId_.uniqueId([prefix])
Generate a globally-unique id for client-side models or DOM elements that need one. Ifprefix is passed, the id will be appended to it.

_.uniqueId('contact_');
=> 'contact_104'

返回id,在當前html是唯一的；或者說：同一個_物件內是唯一的

escape_.escape(string)
Escapes a string for insertion into HTML, replacing &, <, >, ", `, and 'characters.

_.escape('Curly, Larry & Moe');
=> "Curly, Larry &amp; Moe"

unescape_.unescape(string)
The opposite of escape, replaces &, <, >, ", ` and 'with their unescaped counterparts.

_.unescape('Curly, Larry &amp; Moe');
=> "Curly, Larry & Moe"

result_.result(object, property)
If the value of the named property is a function then invoke it with the object as context; otherwise, return it.

var object = {cheese: 'crumpets', stuff: function(){ return 'nonsense'; }};
_.result(object, 'cheese');
=> "crumpets"
_.result(object, 'stuff');
=> "nonsense"

now_.now()
Returns an integer timestamp for the current time, using the fastest method available in the runtime. Useful for implementing timing/animation functions.

_.now();
=> 1392066795351

template_.template(templateString, [settings])
Compiles JavaScript templates into functions that can be evaluated for rendering. Useful for rendering complicated bits of HTML from JSON data sources. Template functions can both interpolate variables, using <%= … %>, as well as execute arbitrary JavaScript code, with <% … %>. If you wish to interpolate a value, and have it be HTML-escaped, use <%- … %> When you evaluate a template function, pass in a data object that has properties corresponding to the template's free variables. The settingsargument should be a hash containing any _.templateSettings that should be overridden.

1、模板很類似JS模板引擎，如artTemplate、Handlebars、Mustache等JS模板框架，主要是為了避免在javascript中拼接DOM字串（非常的繁瑣，而且很容易出錯）。underscore.js提供的模板有三種使用方式：即<%= %>和<%- %>和<% %>。

 // 替換普通變數
 var varcompiled = _.template("<h2><%= word %></h2>");
 console.log("template=" + varcompiled({word : "Hello World"}));

 // 變數的值包含五個特殊字元（& < > " ' /），就需要用<%- ... %>轉義
 var escape = _.template("<h2><%- word %></h2>");
 console.log("template=" + escape({word : "Hello & World"}));
 
//JavaScript命令可以採用<% … %>的形式插入
var compiled = _.template("<% console.log('Hello ' + epithet); %>");
compiled({epithet: "hehe"});

2、改變變數預設名稱

 //改變內部變數名稱
 //templateString中的所有變數，在內部都是obj物件的屬性，而obj物件就是指第二個引數data物件。
 // 下面語句是等同的。
console.log(_.template("Hello <%=user%>!")({ user: "jane" }));
console.log(_.template("Hello <%=obj.user%>!")({ user: "jane" }));
console.log(_.template("Hello <%=data.user%>!",{variable: 'data'})({ user: "jane" }));

3、通過編譯後函式的source屬性，檢視模板編譯的原始碼，便於定位問題

// 檢視預編譯的原始碼
console.log(_.template("Hello <%=user%>!").source);

4、模板格式的設定

之前提到過，underscore提供3種格式的模板<%= %>和<%- %>和<% %>。對應的原始碼如下：

  // By default, Underscore uses ERB-style template delimiters, change the
  // following template settings to use alternative delimiters.
  _.templateSettings = {
    evaluate    : /<%([\s\S]+?)%>/g,
    interpolate : /<%=([\s\S]+?)%>/g,
    escape      : /<%-([\s\S]+?)%>/g
  };

我們知道<%= %>這種格式與JSP中嵌入java程式碼使用的方式一致，如果在JSP中寫java程式碼和underscore模板，那麼會衝突。我們通過設定，可以改變underscore模板的格式。下面的程式碼，用{}這種格式替換<%= %>

var newformat = _.template("Hello {user}!",{interpolate : /{([\s\S]+?)}/g});
console.log("result=" + newformat({ user: "jane" }));

5、還有一點值得注意，就是underscore提供的三種格式是可以一起使用的，這樣的話，模板裡面就可以寫if、while等邏輯控制了。比如有這麼一個物件,{"flag":true,"name":"aty","age":20}，我們的模板需要根據flag的值進行判斷，如果是true，則返回name的值，如果是false則返回age的值。

 //很類似於jsp中寫java
 var tpt = "<% if (flag){ %>"
        + "<%= name %>"
        + "<% } %>";
	+ "<% else {%>"
	+ "<%= age %>"
	+ "<% } %>";
 var resultFunc = _.template(tpt);
 console.log("result=" + resultFunc({"flag":true,"name":"aty","age":20}));

可以看到：這種使用方式，很型別與JSP中寫java程式碼，如果邏輯比較複雜，括號的巢狀層次比較多，那麼這種方式寫出的程式碼幾乎不可讀。上面的程式碼功能其實就是

if(flag)
{
	return name;
}
else
{
	return age;
}

可以看到直接寫javascript程式碼簡單的多。這也是underscore模板的不足之處，雖然支援寫javascript程式碼，但是非常複雜。等有時間我再去學習了專門的JS模板引擎，看它們是否能夠實現的更優雅。

最後，underscore_1.7.0版本中utility還提供了一個iteratee函式，這個函式也比較複雜，而且主要是框架內部使用。後續再專門研究這個函式，單獨寫一篇博文。

（二）underscore.js框架Utility類API學習以及模型template的詳細介紹

（二）underscore.js框架Utility類API學習以及模型template的詳細介紹

Python（二）Python基本數據類型

（二）java集合框架綜述

node.js學習日記（二）node.js的作用域

（二）vue.js中axios的封裝（參考）

搭建eclipse+tomcat+maven+shiro+springmvc+jpa專案（二）：基本框架搭建

java基礎-初級（二）【面向物件與類】

spring整理（二）搭建SSM框架

Elastic Job 入門教程（二）— Spring Boot框架下是實現Elastic Job 指令碼作業（Script Job）

SSM（二）MyBatis基本要素-核心類和介面

android記錄筆記（二）針對應用框架層梳理的整合筆記

Python爬蟲（二）：Scrapy框架的配置安裝

前端構架配置（二）node.js、 webpack、css-loader、html-loader、style-loader、webpack-dev-server等外掛安裝總出錯解決方式

Xposed框架開發入門（二）--使用Xposed框架實現Activity跳轉攔截

Node.js從入門到實戰（二）Node.js基本用法

（二）java生成隨機數工具類RandomUtils詳解

ElasticSearch學習 - （二）Node.js安裝及環境配置之Windows篇

使用Python進行層次聚類（二）——scipy中層次聚類的自定義距離度量問題

Java容器學習筆記（二） Set介面及其實現類的相關知識總結

用Java實現JVM（二）：支援介面、類和物件

（二）underscore.js框架Utility類API學習以及模型template的詳細介紹

相關推薦