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>

• {{^prop}}{{/prop}}：这个模板和{{#prop}}{{/prop}}作用相反，只有在数据源上prop属性对应的值不存在，是falsy值，空数组的时候，才会显示模板内容
• {{!content}}：注释掉content这段内容

三、require.js学习

之前在看grunt打包的代码时，有看到过define写法，我就去查了一下，原来是require.js的一种语法，在使用的时候，要特别注意路径问题。

• 因为官网都是英文，所以就先看的阮一峰大神的博客文章，粗略了解一下。
• 后来自己实践的时候，也遇到了问题，写了一个简单的引入mustache模板文件的demo，现在还没解决，因为当时解决了一天也没解决有点失落，所以就何弃疗了，有时间就去解决它。

四、grunt学习

因为项目中要用到，所以就临时学了一些它的配置以及服务器应该怎么搭建，还有看了一些插件的使用。
推荐一篇文章https://www.cnblogs.com/yexiaochai/p/3603389.html