lahmying / front-end-tools Goto Github PK

ES5 中这两个执行函数其实是语法糖

记住！执行时！执行调用时才会牵扯到 this 指向！可看最后那个例子！

func(p1, p2)
obj.child.method(p1, p2)

其实它们最终是这样的

func.call(context, p1, p2)
// this 是 context，这里 context 为 undefined
// func.call(undefined, p1, p2)  
obj.child.method.call(obj.child, p1, p2)  
//  this 是 obj.child

对于 func.call(undefinded, p1, p2)

结果不是 undefinded 而是 window，这是因为规定：

call 方法的 context 如果是 null 或 undefined，那就将 context 默认为 window 对象。严格模式下，context 默认为 undefined

最后的例子

参考

https://zhuanlan.zhihu.com/p/23804247

参考 https://zhuanlan.zhihu.com/p/81631861

Native

UI ：OEM 控件实现

系统服务调用：如蓝牙等，由系统提供 API

差异原因

不同平台的 OEM 控件和 系统服务调用规范，以及编程语言不统一，Android 使用 Java / Kotlin，而 iOS 使用 Objective-C / Swift，这就产生了平台差异性

hybrid

UI：直接用平台提供的 webview ，虽说不同平台的 Webview 内核不一定一样，但是总归会遵循 w3c 规范， 那么我们的前端的代码可以运行在平台的 Webview 上，实现 UI 上的跨平台开发

系统服务调用：通过 bridge ，规定好协议，从而调用原生的方法。

缺点

Webview 性能比不上原生。

React Native / Weex

hybrid 基础上更进一步

React native ，Weex 等框架，是通过写 js 配置页面布局，然后通过 react native 解析成原生的控件。react native 是通过 Jscore 来解析 jsbunder 文件布局的

UI：实质上渲染出来的，还是 OEM Widgets

使用 react native 并不能避免写原生的代码，如果遇到一些平台相关的复杂问题，还是不得不深入到原生库中进行必要的调整

Flutter

UI：不用 OEM Widgets，有自己的一套 Widgets、Rendering(这样你就只需要学它这一套。而 RN 只是帮你转为 OEM Widgets，有时需要你深入调整)

参考

再谈 CSS 预处理器

What

CSS 扩展语言，编译为 CSS。有 less、sass、stylus，是我会选 stylus

Benifit

• 添加编程特性，如 变量 、 函数

• 减少书写重复的选择器

Point

• 基本语法

• 嵌套

• 变量

• @import

• mixin

• 继承

• 函数

• 逻辑控制

嵌套

嵌套都一样

.a {
  &.b {
    color: red;
  }
}

編譯後

.a.b {
  color: red;
}

引用父級選擇器：&

在一个选择器中用两次以上 & 且父选择器是一个列表时，
Less 会对选择器进行排列组合，而 Sass 和 Stylus 不会这么做。

假设上层选择器为 .a, .b，
则内部的 & & 在 Less 中会成为 .a .a, .a .b, .b .a, .b .b，
而 Sass 和 Stylus 则输出 .a .a, .b .b

Sass 和 Stylus 分别用 @at-root 和 / 符号作为嵌套引用时的根选择器

.post
  section
    .section-title
      color #333
      /.post .section-link
        color #999
    /* other section styles */

  /* other post styles */

編譯後

.post section .section-title {
  color: #333;
}
.post .section-link {
  color: #999;
}

变量

stylus

red = #c00

strong
  color: red

Less 的变量名用 @ 开头很可能会和以后的 css 新 @ 规则冲突

变量作用域

三种预处理器的变量作用域都是按嵌套的规则集划分，并且在当前规则集下找不到对应变量时会逐级向上查找

变量值

less 最后定义的值（这样就可以覆盖引入的第三库的变量，
缺点也很明显，会影响之前的样式，sass、stylus 则不会）；
sass 和 stylus 上一个定义值。

修改第三方库样式

// Sass 和 Stylus 都提供了「仅当变量不存在时才赋值」的功能
// 我们要修改的变量
$x: 1;
// 第三方库开发时预留 !default，前提是人家有预留给你
$x: 5 !default; 
$y: 3 !default;

// $x = 1, $y = 3

插值

• 支持变量名插值、选择器插值、@import 语句插值、属性名插值

• 支持其他 @ 规则插值。三种预处理器均支持在 @media、@Keyframes、@counter-style 等规则中进行插值。@media 插值主要用来做响应式的配置，而 @Keyframes 这样带名称名称的 @ 规则则可以通过插值来避免命名冲突

mixin

如果使用 mixin，推荐 sass 和 stylus

sass 的 sass 语法

// = 表示 mixin
=large-text
  font:
    family: Arial
    size: 20px
    weight: bold
  color: #ff0000

// + 表示引入
.page-title
  +large-text
  padding: 4px
  margin-top: 10px

sass 的 scss 语法

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

// @include 表示引入
.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

stylus

border-radius(n)
  -webkit-border-radius: n
  -moz-border-radius: n
  border-radius: n

.circle
  border-radius(50%)

继承

stylus

.message
  padding: 10px
  border: 1px solid #eee

.warning
  @extend .message
  color: #e2e21e

输出

.message,
.warning {
  padding: 10px;
  border: 1px solid #eee;
}
.warning {
  color: #e2e21e;
}

继承功能还有一个潜在的问题：继承会影响输出的顺序

sass

.active {
   color: red;
}
button.primary {
   color: green;
}
button.active {
   @extend .active;
}

函数

三者调用函数的方式几乎一致，不同之处在于 Sass 和 Stylus 支持直接指定参数名的方式传入参数。以 Stylus 为例：

subtract(a, b)
  a - b

subtract(b: 10, a: 25) // same as substract(25, 10)

// 好处：如果参数列表比较长，Stylus 可以直接为列表后面的参数赋值，
// 而不需要一路将之前的参数填上 null 或默认值 

百分比能够设置的属性

width、height、padding、margin。
其他属性比如 border、font-size 不能用百分比设置的

映射

// height 那么指的是父元素 height 的百分之多少
// width，padding，margin 指的是父元素 width 的百分之多少
// top、bottom、left、right 等都是相对于直接的非 static 定位（position默认为static）的父元素的宽高

div{
  width:200px;
  height:300px;
  padding:10px;
}
div p{
  width:50%;
  height:50%;
  padding:10%;
}

此时p的真实宽度是多少？
// width = 200px x 50% + 2 x 200px x 10% (左右padding) = 140px
// height = 300px x 50% + 2 x 200px x 10% (上下padding) = 190px
// 此时 p 的真实宽度是 140px*190px

缺点

计算困难，如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位

参考

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

http://static.vgee.cn/static/index.html

设为 Flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效

Flex 兼容到 ie 几？

容器属性

flex-direction

主轴的方向（即项目的排列方向）

• 值&对应方向：row → ；row-reverse ← ；column ↓ ；column-reverse ↑

flex-wrap

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行

• nowrap（默认）：不换行；wrap：换行，第一行在上方；wrap-reverse：换行，第一行在下方

flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

justify-content

项目在主轴上的对齐方式

justify-content: flex-start | flex-end | center | space-between | space-around;

• flex-start（默认值）：左对齐

• flex-end：右对齐

• center： 居中

• space-between：两端对齐，项目之间的间隔都相等

• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

align-items

项目在交叉轴上如何对齐

align-items: flex-start | flex-end | center | baseline | stretch;

• flex-start：交叉轴的起点对齐

• flex-end：交叉轴的终点对齐

• center：交叉轴的中点对齐

• baseline: 项目的第一行文字的基线对齐

• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

下图，主轴方向 →，交叉轴方向 ↓

align-content

多根轴线（有多行项目时）的对齐方式。如果项目只有一根轴线，该属性不起作用

• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

• baseline: 项目的第一行文字的基线对齐。

• center：交叉轴的中点对齐。

• flex-end：交叉轴的终点对齐。

• flex-start：交叉轴的起点对齐。

space-around

space-between

项目属性

order

排列顺序。数值越小，排列越靠前，默认为0

flex-grow

放大比例，默认为0，即如果存在剩余空间，也不放大

flex-shrink

缩小比例，默认为1，即如果空间不足，该项目将缩小

负值对该属性无效

flex-basis

分配多余空间之前，项目占据的主轴空间（main size），它的默认值为 auto，即项目的本来大小，可设固定值（比如350px）

flex

flex-grow, flex-shrink 和 flex-basis 的简写，默认值为0 1 auto

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)，建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值

align-self

允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

水平居中

行内元素

指 inline、inline-block、inline-table、inline-flex

   .parent{
        /* 在父容器设置文本对齐居中即可 */
        text-align:center;
    }

块级元素

方法1

左右 margin auto，上下 margin 为 0

.child{
    /* 注意，要给宽度 */
    width: 100px;
    /* margin:0 auto; 其实就是 margin: 0 auto 0 auto; 逆时针上右下左。这样简写我都不想吐槽css*/
    margin:0 auto;
}

方法2

// 猜想
absolute 是脱离文档流的，外层加上 relative 后就回归文档流了，这样就能重新调整位置了

牢记 relative 是参考自身 static 时的位置通过 top/bottom/left/right 进行定位！！！
absolute 是相对 最近的非 static 爸爸来定位！
1.父相子绝，即父 relative 子 absolute，然后开始移动子元素
2.移动父的一半，抵达父的中点
3.移动子的一半，抵达自己的中点

<div class="parent">
  <div class="child">Demo</div>
</div>
<style>
  .child {
    position:absolute;
    /* left 的 % 是相对父的*/
    left:50%;
   /* transform 2D变形的 % 是变自己的 % */
    transform:translateX(-50%);
  }
  .parent {
    position:relative;
  }
</style>
}

方法3 用 flex，这里不赘述

浮动元素

// 猜想
relative 使浮动元素回归文档流，然后两步走：
1.移动爸爸的一半宽度，无论爸爸是否定宽都可 left:50% 搞定
2.移动自己一半宽度
- 给了就直接移，margin-left
- 没给就需要一个爸爸，但不知道当前的爸爸 position 如何，干脆复制一个自己，也 float 也  relative，这样假爸爸和自己都能移动自己一半宽度了 

给定宽度的

.self {
   position:relative;
   left:50%;
   margin-left:-250px;
}
<div class="parent">
  <span class="self" style="float: left;width: 500px;">我是要居中的浮动元素</span>
</div>

没给宽度的

披上一层浮动元素即可

<div class=real-father>
  <div class=fake>
      <p class=son>我是浮动的我也是居中的</p>
  </div>
</div>
/* .fake 这一层是披上的，没有内容的，在外一层才是原先的父元素*/
.fake {
    float:left;
    position:relative;
    left:50%;
}
.son {
    float:left;
    position:relative;
    right:50%;
}

待续

参考

https://github.com/ljianshu/Blog/issues/29

浮动缺点

父 div 塌陷，高度→0

解决原理

尾部加入一个 block 元素，将其设 clear:both，它不浮动，于是撑起父 div 的高度

常用解决方式

伪元素

<div id="father" class="clearfix">
    <div id="son"></div>
</div>

      /*ie6 7 不支持伪元素*/
      .clearfix:after {
        content: '';
        display: block;
        clear: both;
        height:0;
        line-height:0;
        visibility:hidden;//允许浏览器渲染它，但是不显示出来
      }

四个独立的浏览器内核、兼容前缀

微软的 Trident // -ms-
火狐的 Gecko // -moz-
开源内核 Webkit （Chrome 和 Safari 都在用） // -webkit-
Opera 的 Presto // -o-