GRMustache 是用 Objective-C 編寫的 Mustache 模板引擎企垦，適用于 MacOS Cocoa 和 iOS。
1. 項(xiàng)目中使用 GRMustache
通過(guò) Cocoapods 導(dǎo)入 GRMustache 時(shí)答恶，在 Podfile 文件中添加如下代碼：
pod 'GRMustache', '~> 7.3.2'
2. 創(chuàng)建模版文件
創(chuàng)建并編寫一個(gè) HTML 模版文件，命名為 template.html 并保存到項(xiàng)目中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<H1> {{name}} </H1>
<P> {{content}} </P>
</body>
</html>
模版文件中的標(biāo)簽用雙圓括（{{tag}}）號(hào)表示砾淌。在以上的模版文件，{{name}} 和 {{content}} 都是標(biāo)簽谭网，你可以把標(biāo)簽理解為占位符汪厨，在渲染模版文件時(shí)，我們會(huì)用動(dòng)態(tài)的文本內(nèi)容來(lái)替換它愉择。
3. 渲染 HTML 內(nèi)容
首先在代碼中將該文件讀取到內(nèi)存中劫乱，再使用 GRMustache 的 renderObject 方法生成渲染后的 HTML 內(nèi)容：
- (NSString *)renderTemplateWithName:(NSString *)name value:(NSString *)value {
// 1.讀取 template.html 文件
NSURL *bundleURL = [[NSBundle mainBundle] bundleURL];
NSURL *url = [bundleURL URLByAppendingPathComponent:@"template.html"];
NSString *template = [NSString stringWithContentsOfURL:url encoding:NSUTF8StringEncoding error:nil];
// 2.要渲染的數(shù)據(jù)
NSDictionary *renderObject = @{ @"name": name, @"content": value };
// 3.生成渲染數(shù)據(jù)
NSString *content = [GRMustacheTemplate renderObject:renderObject fromString:template error:nil];
return content;
}
4. 通過(guò) WKWebView 加載 HTML 內(nèi)容
使用 GRMustache 模版引擎渲染并生成 HTML 內(nèi)容后，即可通過(guò) WKWebView 加載 HTML 內(nèi)容了：
// 通過(guò)模版引擎渲染得到內(nèi)容
NSURL *bundleURL = [[NSBundle mainBundle] bundleURL];
NSString *htmlString = [self renderTemplateWithName:@"我是一級(jí)標(biāo)題名稱" value:@"我是頁(yè)面內(nèi)容"];
[self.webView loadHTMLString:htmlString baseURL:bundleURL];
執(zhí)行上述代碼前锥涕，你還需要在視圖控制器中添加一個(gè) WKWebView 作為當(dāng)前視圖控制器的子視圖衷戈。
5. 總結(jié)
GRMustache 到底實(shí)現(xiàn)了什么功能？层坠？殖妇？
這是我們的 HTML 模版文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<H1> {{name}} </H1>
<P> {{content}} </P>
</body>
</html>
然后給定以下一個(gè)簡(jiǎn)單的哈希表（JSON 字典）：
{
"name": "我是一級(jí)標(biāo)題名稱",
"value": "我是頁(yè)面內(nèi)容"
}
GRMustache 渲染并生成了以下文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<H1> 我是一級(jí)標(biāo)題名稱 </H1>
<P> 我是頁(yè)面內(nèi)容 </P>
</body>
</html>
最后，我們?cè)偻ㄟ^(guò) WKWebView 顯示該 HTML 文件：
6. 續(xù)
以上示例中窿春，使用 GRMustache 中的類方法 renderObject: fromString: error: 時(shí)拉一，我們提前將模版文件（即 template.html 文件）作為字符串加載進(jìn)內(nèi)存作為模版字符串采盒，然后通過(guò) GRMustache 渲染此模板字符串的對(duì)象，最后通過(guò) WKWebView 顯示蔚润。
這里多了一個(gè)預(yù)加載模版字符串文件的步驟磅氨，那我們能不能省略這一個(gè)步驟，直接渲染加載呢嫡纠？
通過(guò) GRMustache 中的另一個(gè)類方法 renderObject: fromResource: bundle: error: 即可實(shí)現(xiàn)烦租。而且模版文件也可以寫得非常簡(jiǎn)單，不必完整地聲明一個(gè) HMTL 文件除盏。
首先叉橱，創(chuàng)建一個(gè)名為 template.mustache 的文件，內(nèi)容如下：
<H1> {{name}} </H1>
<P> {{content}} </P>
然后者蠕，修改 GRMustache 引擎渲染方法：
- (NSString *)renderTemplateWithName:(NSString *)name value:(NSString *)value {
// 1.要渲染的數(shù)據(jù)
NSDictionary *renderObject = @{ @"name": name, @"content": value };
// 2.生成渲染數(shù)據(jù)
NSError *error = nil;
NSString *content = [GRMustacheTemplate renderObject:renderObject
fromResource:@"template"
bundle:nil
error:&error];
if (!content) {
NSLog(@"%@",error);
}
return content;
}
最后窃祝，通過(guò) WKWebView 加載 HTML 的方法是一樣的。重要的是踱侣，通過(guò)該方法可以達(dá)到加載模版字符串一樣的效果粪小。
