Underscore 使用02|学习笔记

简介: 快速学习 Underscore 使用02

开发者学堂课程【Node.js 入门与实战:Underscore 使用02】学习笔记,与课程紧密联系,让用户快速学习知识

课程地址:https://developer.aliyun.com/learning/course/588/detail/8286


Underscore使用02

 

目录:

一、Template简介

二、应用

 

一、Template简介

将JavaScnpt模板编译为可以用于面呈现的函数,对于通过JSON数据源生成复杂的HTML并呈现出来的操作非常有用。

模板函数可使用<%=...%>插入变量也可以用<%-%>执行任意的JavaScript代码,如果您希望插入一个值并让其进行HTML转义请使用<%=...%>。

当你要给模板函数赋值的时候,可以传一个含有与模板对应属性的data对象。

如果您要写一个一次性的,您可以传对象data作为第二个参数给模板 template 来直接呈现,这样页面会立即呈现而不是返回一个模板函数参数settings是一个哈希表包含任何可以覆盖的设置_.templateSettings.

它有两个字符串(templateString,[settings]),这个字符串中包含了模板的语法,它可以编译返回一个函数,对模板语法进行替换,生成替换后的结果。

 

二、范例:观察传统回收

var compiled = template_(hello:<%=     name %");compiled({name:moe})

=>“hello : moe”

var template = _.template(”<b><%- value %></b>");

template ({value:<script>});

=>“<b>&lt;script>;</b>"

// demo2:

var_ = require(Underscore);

//声明了一段代码模板代码的HTML文档

var html = <h2><%= name %></h2>";

// teplate ()函数的返回依然是一个函数

Var fn = _.template(html);

// 调用 template()返回的这个函数 fn

//fn 接受一个数据对象,并用该数据对象,将html中的模板内容替换,生成最终的HTML代码。

var html = fn({name:“达达”}); 

console.log(htm1);

console.log(fn.toString());

function (data){

 return render.call(this,data,_);

 }

fn动态生成的函数的源代码,需要去找,找到源代码就能知道render函数内部。

相关文章
|
3月前
|
JavaScript 前端开发
|
JavaScript 编译器
‘defineProps‘ is not defined.eslint no-undef 问题解决
‘defineProps‘ is not defined.eslint no-undef 问题解决
|
JavaScript 前端开发 开发者
|
前端开发 JavaScript
JavaScript专题之跟着underscore学防抖
JavaScript 专题系列第一篇,讲解防抖,带你从零实现一个 underscore 的 debounce 函数
189 0
JavaScript专题之跟着underscore学防抖
|
Java 数据库连接 数据库
map-underscore-to-camel-case驼峰式命名规则配置
mybatis默认是属性名和数据库字段名一一对应的,即 数据库表列:address_book 实体类属性:address_book 在映射实体或者属性时,将数据库中表名和字段名中的下划线去掉,按照驼峰命名法映射 例如:address_book—> addressBook 此属性在 MyBatis 中默认值为 false,在Springboot中,可以通过设置map-underscore-to-camel-case属性为true来开启驼峰功能。 application.yml中:
643 0
|
前端开发 开发工具 开发者
brackets 介绍|学习笔记
快速学习 brackets 介绍
|
移动开发 JavaScript 前端开发
underscore 系列之如何写自己的 underscore
underscore系列第一篇,讲解 underscore 的代码组织方式
131 0
underscore 系列之如何写自己的 underscore
|
JavaScript 前端开发
underscore 系列之实现一个模板引擎(下)
本篇接着上篇 underscore 系列之实现一个模板引擎(上)。
119 0
underscore 系列之实现一个模板引擎(下)
|
JavaScript 前端开发
underscore 系列之实现一个模板引擎(上)
underscore 提供了模板引擎的功能
223 0
underscore 系列之实现一个模板引擎(上)
|
前端开发 JavaScript API
underscore 的源码该如何阅读?
别名:《underscore 系列 8 篇正式完结!》
142 0
underscore 的源码该如何阅读?