任务十三

遇到的问题

1. 1.关于官网的css结构，说实话，我不太喜欢，感觉结构上有点乱，而且很明显是不适合less的，但要求又是用less写（应该是），让我很懵。官网上的css结构中其中一步就是抽象出原子类，这种写法见仁见智，从结构与样式分离这个角度来看是不合理的，但是在工作中使用又很方便，实际上这种原子类写法对应的就是less中的变量和函数，而less中还可以传参数，运算，功能更为强大。除此之外，对于设置布局样式，设置模块样式有点模糊，不是很理解。我是按照header，header内部，main，main内部这种顺序写下来的。对于如何模块化感觉是一个大坑，研究了半天没研究出来怎么书写模块化的代码。

2.研究ets布局的源码时，发现了这样一段代码

@width-and-gutter: ~`(function () { var ratios = @{ratio}; var gutter = @{gutter-value}; if (Object.prototype.toString.apply(ratios) !== '[object Array]') { ratios = [ratios]; } var width = 100; for (var i = ratios.length - 1; i >= 0; i--) { var ratio = ratios[i]; gutter = gutter / width * 100; width = 100 * ratio + ('@{column-justify-content}' === 'space-between' ? -1 : 1) * (1 - ratio) * gutter; } return width + ' ' + gutter; })()`;

。。。。。完全看不懂，什么鬼这是。。。。。。网上查了一下完全找不到相关的资料，而less的官方文档里只提了一下~符号，意思就是在less编译成css的时候，不要管~后面的代码。而后面的明显是一段js代码，意思是在less中插入js代码？网上找了半天资料找不到后，只好去问了下以前的同学，然后发现这个坑爹的东西是es6的东西，是一个更高级的字符模板，‍‍模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

附上一个最常见的用法，这时比较常见的拼接字符串的一个写法：

‍‍

var name = '我爱萨摩耶';
var desc = 'hello world';
var html = function(name, desc)
{    var tpl = '姓名：' + name + '\n'+            '简介：'+ desc;    return tpl; }

但是如果我们用模板字符串的写法，代码可以直接简化为：

var html=`姓名:  $(name)
简介： $(desc)`

（`）符号内部的换行，空白都不会被转义，但是里面的js函数，变量等会直接运算。

3. 感觉今天的学习内容完全跑偏了，还是老老实实按照任务进度来学习，贪多嚼不烂，什么都想学，什么都没学会。想研究ets的布局函数是怎么实现的，暂时推迟。

收获