前端硬核知识点（五）

1、函数组合（compose）使用过吗？

var compose = function(f,g) {
  return function(x) {
    return f(g(x));
  };
};
var toUpperCase = function(x) { return x.toUpperCase(); };
var exclaim = function(x) { return x + '!'; };
var shout = compose(exclaim, toUpperCase);

shout("send in the clowns");
//=> "SEND IN THE CLOWNS!"

// demo
var head = function(x) { return x[0]; };
var reverse = reduce(function(acc, x){ return [x].concat(acc); }
, []);
var last = compose(head, reverse);
last(['jumpkick', 'roundhouse', 'uppercut']);
//=> 'uppercut'

f 和 g 都是函数， x 是在它们之间通过“管道”传输的值。
组合 看起来像是在饲养函数。你就是饲养员，选择两个有特点又遭你喜欢的函数，让它们结合，产下一个崭新的函数.
代码从右向左运行，而不是由内而外运行

怎么写函数试的程序：即通过管道(柯里化和组合)把数据在一系列纯函数间传递的程序

2、命令式和声明式代码各什么意思？有什么区别？

let cars = [{make:1,id:'a'},{make:2,id:'b'}]；
// 命令式
var makes = [];
for (i = 0; i < cars.length; i++) {
  makes.push(cars[i].make);
}
// 声明式
var makes = cars.map(function(car){ return car.make; });
//  [1, 2]
console.log(makes);

// 进阶，结合函数组合
// 命令式
var authenticate = function(form) {
  var user = toUser(form);
  return logIn(user);
};
// 声明式，compose从右往左执行，声明我们要做的任务是，先用户验证，再登录
var authenticate = compose(logIn, toUser);

命令式：指示计算机如何工作，“先做这个，再做那个”
声明式：明确希望得到的结果，声明式意味着我们要写表达式，而不是一步一步的指示

3、js里指数怎么表达的？比如1000可以怎么写？

1e2 === 100
true
3e4 === 30000
true

计算方式：e前面的数 乘以 10的e后面的数的次方

4、css伪元素有哪些？

::after	p::after	在每个 元素之后插入内容。
::before	p::before	在每个 元素之前插入内容。
::first-letter	p::first-letter	选择每个 元素的首字母。
::first-line	p::first-line	选择每个 元素的首行。
::selection	p::selection	选择用户选择的元素部分。

// :after 选择器在被选元素的内容后面插入内容。请使用 content 属性来指定要插入的内容。可以为图片和文字
h1::after {
  content: url(smiley.gif);
}

5、css颜色线性渐变怎么定义？

// background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
.grad {
  background-image: linear-gradient(-90deg, red, yellow);
}

6、过渡(transition)允许您在给定的时间内平滑地改变属性值.

• 您要添加效果的 CSS 属性(若忽略，则transition内的样式改变都会受影响)
• 效果的持续时间

// 例如
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}
div:hover {
  width: 300px; // 只有width有过渡动画
  height: 300px; // 没有过渡动画效果
}

配合transform 2d转换方法，就可以做出动画的，平移，旋转，缩放效果

// 这是旋转效果，和宽高放大效果，持续2s。多项时transition后逗号分隔
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 2s, transform 2s;
}

div:hover {
  width: 300px;
  height: 300px;
  transform: rotate(180deg);
}

7、什么是css动画？

使元素逐渐从一种样式变为另一种样式。使用步骤：1制定动画逻辑，2将动画逻辑绑定到页面元素并声明动画时间。如下：

/* 动画代码 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* 向此元素应用动画效果 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  // animation-iteration-count: 3; 设置动画运行次数，infinite为一直循环运行
}
// ------------------------------------------------------------------------
// 动画逻辑关键字可以用%代替
/* 动画代码 */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

8、css怎么使用变量？

创建具有全局作用域的变量，在 :root 选择器中声明它， :root 选择器匹配文档的根元素。
创建具有局部作用域的变量，在将要使用它的选择器中声明它。
下面的例子，首先是声明两个全局变量（–blue 和 --white），然后使用 var() 函数在样式表中插入变量的值

tip：微信小程序场景:root换成:host，原因是:root官方套壳时候就用了，对外暴露了一个小程序封装的:host

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  --blue: #0000ff;
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

修改css变量

let r = document.querySelector(':root');
r.style.setProperty('--blue', 'lightblue');