一、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

轉載于:https://www.cnblogs.com/sminocence/p/9090633.html

總結

以上是生活随笔為你收集整理的5月学习总结（Ant-Design，mustache，require.js，grunt）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。