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

5月学习总结(Ant-Design,mustache,require.js,grunt)的更多相关文章

  1. ant design pro/前端/JS:实现本地运行https

    工具:github---mkcert 用于生成本地证书 ant p版本:1.0.0 这里我只说如何给antp部署https,以及会遇到的问题解决,其他请看原文参考 1.用mkcert生成证书,去git ...

  2. javascript模块化编程库require.js的用法

    随着javascript的兴起,越来越多的公司开始将JS模块化,以增加开发的效率和减少重复编写代码的.更是为了能更加容易的维护日后的代码,因为现在的随着人们对交互效果的越来越强烈的需求,我们的JS代码 ...

  3. 【后台管理系统】—— Ant Design Pro入门学习&项目实践笔记(三)

    前言:前一篇记录了[后台管理系统]目前进展开发中遇到的一些应用点,这一篇会梳理一些自己学习Ant Design Pro源码的功能点.附:Ant Design Pro 在线预览地址. Dashboard ...

  4. React学习及实例开发(二)——用Ant Design写一个简单页面

    本文基于React v16.4.1 初学react,有理解不对的地方,欢迎批评指正^_^ 一.引入Ant Design 1.安装antd yarn add antd 2.引入 react-app-re ...

  5. Vue3学习(二)之集成Ant Design Vue

    一.集成Ant Design Vue npm install ant-design-vue@2.0.0-rc.3 --save 兼容性 Ant Design Vue 2.x 支持所有的现代浏览器. 如 ...

  6. Ant Design 学习记录

    遇到的问题: 点击列表中的一个字段 , 显示出一条指定id(其他筛选条件的)数据 解决这个问题之前,要先了解 Antd的 Table中的  Column  列描述数据对象,是 columns 中的一项 ...

  7. Ant Design Pro 学习笔记:数据流向

    在讲这个问题之前,有一个问题应当讲一下: Ant Design Pro / umi / dva 是什么关系? 首先是 umi / dva 的关系. umi 是一个基于路由的 react 开发框架. d ...

  8. 使用express、react、webpack打包、socket.io、mongodb、ant.design、less、es6实现聊天室

    拿到一个项目,我们应该如何去完成这个项目呢. 是直接上手? 还是先进行分析,然后再去解决呢?毫无疑问,如果直接上手解决,那么可能会因为知道目标所在,而导致出现各种问题. 所以,我们应该系统的分析这个项 ...

  9. Ant Design项目记录和CSS3的总结和Es6的基本总结

    这里主要是介绍自己运用ANT框架的一些小总结,以前写到word里,现在要慢慢传上来, 辅助生殖项目总结:从每个组件的运用的方法和问题来总结项目. 1.项目介绍 辅助生殖项目主要运用的是Ant.desi ...

随机推荐

  1. js删除数组中重复的元素

    1.方法一 将数组逐个搬到另一个数组中,当遇到重复元素时,不移动,若元素不重复则移动到新数组中 function unique(arr){ var len = arr.length; var resu ...

  2. [Leetcode Week14]Path Sum II

    Path Sum II 题解 原创文章,拒绝转载 题目来源:https://leetcode.com/problems/path-sum-ii/description/ Description Giv ...

  3. python实战===用python调用jar包(原创)

    一个困扰我很久的问题,今天终于解决了.用python调用jar包 很简单,但是网上的人就是乱转载.自己试都不试就转载,让我走了很多弯路 背景:python3.6 32位   + jre 32位  +  ...

  4. GLIBCXX_3.4.9' not found - 解决办法

    GLIBCXX_3.4.9' not found - 解决办法 http://blog.csdn.net/u012425536/article/details/26559653 https://koj ...

  5. 调用手机端硬件功能 汇总(android/ios) Native.js示例汇总

    Native.js示例汇总 NJS Native.JS 示例 Native.js虽然强大和开放,但很多web开发者因为不熟悉原生API而难以独立完成.这篇帖子的目的就是汇总各种写好的NJS代码,方便w ...

  6. Gas Station——又是一道经典问题

    There are N gas stations along a circular route, where the amount of gas at station i is gas[i]. You ...

  7. **极光推送PHP服务器端推送移动设备消息(Jpush V2 api)

    jpush.php  这是推送方法  用到curl发送请求 <?php /** * 极光推送php 服务器端 * @author yalong sun * @Email <syl_ad@1 ...

  8. Ext 目录

    adapter:负责将里面提供第三方底层库(包括Ext自带的底层库)映射为Ext所支持的底层库. build: 压缩后的ext全部源码(里面分类存放). docs: API帮助文档. exmaples ...

  9. nginx应用场景,特性,目录结构,常用模块,内置变量,URL和URI,http状态码,配置文件详解

    1.nginx介绍 1丶俄罗斯人开发的,开源www服务软件 2丶软件一共780K 3丶nginx本身是一款静态(html,js,css,jpg等)www软件 4丶静态小文件高并发,同时占用的资源很少, ...

  10. 转:智能模糊测试工具 Winafl 的使用与分析

    本文为 椒图科技 授权嘶吼发布,如若转载,请注明来源于嘶吼: http://www.4hou.com/technology/2800.html 注意: 函数的偏移地址计算方式是以IDA中出现的Imag ...