5月学习总结（Ant-Design，mustache，require.js，grunt）

一、Ant-Design学习

因为Ant-Design是基于React实现的，之前自己也学过一段时间的React，对React还是相对比较熟悉的，在学习Ant-Design也还不算吃力。

最开始是从源码看起，从最简单的Icon组件看的，然后连续看了几个组件就有点吃不消了，哈哈哈。所以就改为实战了。
在Ant-Design官网上有一个Ant-Design快速上手的教程https://ant.design/docs/react/practical-projects-cn，可以跟着它学习一下，你可以从中学到dva的8个概念。dva 是一个基于 React 和 Redux 的轻量应用框架，概念来自 elm，支持 side effects、热替换、动态加载、react-native、SSR 等，已在生产环境广泛应用
学完上面那个基础教程之后，接着就开始学习Ant-Design的组件，一个一个看每个组件有哪些属性和方法，以及怎么使用。
Ant-Design最适用的场景就是开发后台管理系统，就开始实践，可以去github上找一些别人写的例子来看，看完看懂之后可以自己再实践一遍。

二、mustache模板学习

这个模板和nodejs里面的ejs模板差不多，但是它的语法更简单，支持的语言也很多，具体可以到官网去看https://mustache.github.io/。

几个常用的语法

{{prop}}：这个标签是mustache模板标签用的最多的一个了，可以将数据源上prop属性对应的值，转换成字符串输出。
{{prop}}}：这个标签是为了防止prop中包含html标签，可以解析html标签，如果在{{prop}}中prop是html标签，那么会将标签原样输出。
{{#prop}}{{/prop}}:这对标签的作用非常强大，可以同时完成if-else和for-each以及动态渲染的模板功能
1) if-else渲染
只有prop属性在数据源对象上存在，并且不为falsy值（javascript 6个falsy值：null,undefined,NaN,0,false,空字符串），并且不为空数组的情况下，标签之间的内容才会被渲染，否则都不会被渲染：
2）for-each渲染
当prop属性所引用的是一个非空数组时，这对标签之间的内容将会根据数组大小进行迭代，并且当数组元素为对象时，还会把该对象作为每一次迭代的上下文，以便迭代时的标签可以直接引用数组元素上的属性：

<script id="tpl2" type="text/html">-{{#prop}}{{name}},{{/prop}}-
</script>
<script>var tpl2 = document.getElementById('tpl2').innerHTML.trim();Mustache.parse(tpl2);console.log(Mustache.render(tpl2, {prop: [{name: 'jason'}, {name: 'frank'}]}));//-jason,frank,-
</script>

如果prop属性所引用的是一个函数，但是这个函数返回值是一个数组类型，那么仍然会进行for-each渲染：

<script id="tpl2" type="text/html">-{{#prop}}{{name}},{{/prop}}-
</script>
<script>var tpl2 = document.getElementById('tpl2').innerHTML.trim();Mustache.parse(tpl2);console.log(Mustache.render(tpl2, {prop: function(){return [{name: 'jason'}, {name: 'frank'}];}}));//-jason,frank,-
</script>

3）动态渲染
当prop属性所引用的是一个函数，并且这个函数的返回值还是一个函数的话，mustache会再次调用这个返回的函数，并给它传递2个参数：text表示原来的模板内容，render表示mustache内部的执行渲染的对象，以便在这个函数内部可以通过这render对象，结合原来的模板内容，自定义渲染的逻辑，并把函数的返回值作为渲染结果（这个返回值渲染的逻辑跟{{prop}}标签完全一样）：

<script id="tpl2" type="text/html">-{{#prop}}content{{/prop}}-
</script>
<script>var tpl2 = document.getElementById('tpl2').innerHTML.trim();Mustache.parse(tpl2);console.log(Mustache.render(tpl2, {prop: function(){return function (text, render) {return "<b>" + render(text) + "</b>"};}}));//-<b>content</b>-
</script>