一、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. Python脚本 - 常用单位转换

    测试系统为:Centos 6.7 Python版本为: 3.6.4 脚本功能:常用单位的转换,这里用内存来模拟 import pstuil def bytes2human(n): symbols = ...

  2. python自动开发之第二十五天

    一.组合搜索 参考: http://www.cnblogs.com/ccorz/p/5985205.html 二.JSONP 1.在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,但 ...

  3. [device tree] interrupt

    Specifying interrupt information for devices ============================================ 1) Interru ...

  4. python windows下安装celery调度任务时出错

    由于celery 4.0不支持windows系统.所以用命令pip install Celery安装的celery是最新版4.0的不能在windows下运行. 在windows命令窗口运行: cele ...

  5. 设计模式之笔记--桥接模式(Bridge)

    桥接模式(Bridge) 定义 桥接模式(Bridge),将抽象部分与它的实现部分分离,使它们都可以独立地变化. 类图 描述 Abstraction:定义抽象部分的接口,通常在这个接口里面要维护一个实 ...

  6. cf786a

    title: CodeForces 786A Berzerk data: 2018-3-3 10:29:40 tags: 博弈论 bfs 无限 with draw copyright: true ca ...

  7. django给视图添加缓存功能

    在开发过程中,有些视图只是查询数据,而且查询的数据一般不会变化.例如,做地址模块时,省市县都是不会变的.如果用户每次请求地址视图时,都要执行视图返回数据,会给服务端带来不必要的压力.这时候可以用到缓存 ...

  8. Django REST Framework JWT提供的登录签发的视图

    Django REST Framework JWT提供了一个视图.在我们登录的时候,会校验用户名.密码是否正确.如果信息无误,可以返回一个JWT token.就可以简单地实现了记录用户登录状态. 用法 ...

  9. django “如何”系列2:如何编写django-admin 命令

    应用可以使用manage.py注册自己的动作,例如,你可能想要为你即将发布的应用添加一个manage.py 操作.这节我们将为polls应用添加一个closepoll的命令 添加一个managemen ...

  10. MAC Pro 2017款 无线上网慢

    MAC Pro 2017款 在无线路由器和MAC相隔一个房间,上网很慢,怀疑是无线路由器有问题,但其他几台老款MAC和PC上网正常.后来将蓝牙关掉,上网就很快了.