一、Ant-Design學(xué)習(xí)

因?yàn)锳nt-Design是基于React實(shí)現(xiàn)的，之前自己也學(xué)過(guò)一段時(shí)間的React，對(duì)React還是相對(duì)比較熟悉的，在學(xué)習(xí)Ant-Design也還不算吃力。

• 最開(kāi)始是從源碼看起，從最簡(jiǎn)單的Icon組件看的，然后連續(xù)看了幾個(gè)組件就有點(diǎn)吃不消了，哈哈哈。所以就改為實(shí)戰(zhàn)了。
• 在Ant-Design官網(wǎng)上有一個(gè)Ant-Design快速上手的教程https://ant.design/docs/react/practical-projects-cn，可以跟著它學(xué)習(xí)一下，你可以從中學(xué)到dva的8個(gè)概念。dva 是一個(gè)基于 React 和 Redux 的輕量應(yīng)用框架，概念來(lái)自 elm，支持 side effects、熱替換、動(dòng)態(tài)加載、react-native、SSR 等，已在生產(chǎn)環(huán)境廣泛應(yīng)用
• 學(xué)完上面那個(gè)基礎(chǔ)教程之后，接著就開(kāi)始學(xué)習(xí)Ant-Design的組件，一個(gè)一個(gè)看每個(gè)組件有哪些屬性和方法，以及怎么使用。
• Ant-Design最適用的場(chǎng)景就是開(kāi)發(fā)后臺(tái)管理系統(tǒng)，就開(kāi)始實(shí)踐，可以去github上找一些別人寫(xiě)的例子來(lái)看，看完看懂之后可以自己再實(shí)踐一遍。

二、mustache模板學(xué)習(xí)

這個(gè)模板和nodejs里面的ejs模板差不多，但是它的語(yǔ)法更簡(jiǎn)單，支持的語(yǔ)言也很多，具體可以到官網(wǎng)去看https://mustache.github.io/。

幾個(gè)常用的語(yǔ)法

• {{prop}}：這個(gè)標(biāo)簽是mustache模板標(biāo)簽用的最多的一個(gè)了，可以將數(shù)據(jù)源上prop屬性對(duì)應(yīng)的值，轉(zhuǎn)換成字符串輸出。
• {{prop}}}：這個(gè)標(biāo)簽是為了防止prop中包含html標(biāo)簽，可以解析html標(biāo)簽，如果在{{prop}}中prop是html標(biāo)簽，那么會(huì)將標(biāo)簽原樣輸出。
• {{#prop}}{{/prop}}:這對(duì)標(biāo)簽的作用非常強(qiáng)大，可以同時(shí)完成if-else和for-each以及動(dòng)態(tài)渲染的模板功能
  1) if-else渲染
  只有prop屬性在數(shù)據(jù)源對(duì)象上存在，并且不為falsy值（javascript 6個(gè)falsy值：null,undefined,NaN,0,false,空字符串），并且不為空數(shù)組的情況下，標(biāo)簽之間的內(nèi)容才會(huì)被渲染，否則都不會(huì)被渲染：
  2）for-each渲染
  當(dāng)prop屬性所引用的是一個(gè)非空數(shù)組時(shí)，這對(duì)標(biāo)簽之間的內(nèi)容將會(huì)根據(jù)數(shù)組大小進(jìn)行迭代，并且當(dāng)數(shù)組元素為對(duì)象時(shí)，還會(huì)把該對(duì)象作為每一次迭代的上下文，以便迭代時(shí)的標(biāo)簽可以直接引用數(shù)組元素上的屬性：

<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屬性所引用的是一個(gè)函數(shù)，但是這個(gè)函數(shù)返回值是一個(gè)數(shù)組類型，那么仍然會(huì)進(jìn)行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） 動(dòng)態(tài)渲染
當(dāng)prop屬性所引用的是一個(gè)函數(shù)，并且這個(gè)函數(shù)的返回值還是一個(gè)函數(shù)的話，mustache會(huì)再次調(diào)用這個(gè)返回的函數(shù)，并給它傳遞2個(gè)參數(shù)：text表示原來(lái)的模板內(nèi)容，render表示mustache內(nèi)部的執(zhí)行渲染的對(duì)象，以便在這個(gè)函數(shù)內(nèi)部可以通過(guò)這render對(duì)象，結(jié)合原來(lái)的模板內(nèi)容，自定義渲染的邏輯，并把函數(shù)的返回值作為渲染結(jié)果（這個(gè)返回值渲染的邏輯跟{{prop}}標(biāo)簽完全一樣）：

<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}}：這個(gè)模板和{{#prop}}{{/prop}}作用相反，只有在數(shù)據(jù)源上prop屬性對(duì)應(yīng)的值不存在，是falsy值，空數(shù)組的時(shí)候，才會(huì)顯示模板內(nèi)容
• {{!content}}：注釋掉content這段內(nèi)容

三、require.js學(xué)習(xí)

之前在看grunt打包的代碼時(shí)，有看到過(guò)define寫(xiě)法，我就去查了一下，原來(lái)是require.js的一種語(yǔ)法，在使用的時(shí)候，要特別注意路徑問(wèn)題。

• 因?yàn)楣倬W(wǎng)都是英文，所以就先看的阮一峰大神的博客文章，粗略了解一下。
• 后來(lái)自己實(shí)踐的時(shí)候，也遇到了問(wèn)題，寫(xiě)了一個(gè)簡(jiǎn)單的引入mustache模板文件的demo，現(xiàn)在還沒(méi)解決，因?yàn)楫?dāng)時(shí)解決了一天也沒(méi)解決有點(diǎn)失落，所以就何棄療了，有時(shí)間就去解決它。

四、grunt學(xué)習(xí)

因?yàn)轫?xiàng)目中要用到，所以就臨時(shí)學(xué)了一些它的配置以及服務(wù)器應(yīng)該怎么搭建，還有看了一些插件的使用。
推薦一篇文章https://www.cnblogs.com/yexiaochai/p/3603389.html

轉(zhuǎn)載于:https://www.cnblogs.com/sminocence/p/9090633.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。