OOP

对象和函数、数组一样是引用类型，即复制只会复制引用地址

1
2
3

let obj1 = { name: "wang" };
let obj2 = obj1;
console.log(obj1===obj2); //true

对象的解构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

// Object Deconstruction
let web = { name: "wang", age: 22 };
//把name赋值给变量w
let { name:w, gender="male"} = web;
console.log(w); //'wang'

// Rest parameters 展开语法
let web_new = { ...web, gender: "male", name: "zhu" }
console.log(web_new);
console.log(web)

// Object Deconstruction for function
function createElement(option = {}) {
    //若右值不为空则取右值即参数option对象
    //默认option为空对象，因此取默认赋值
    let { 
            width = 200, 
            height = 200, 
            backgroundColor = "red",
            parentElement = "body",
        } = option;
    const div = document.createElement("div");
    const container = document.querySelector(parentElement);
    div.style.width = width + "px";
    div.style.height = height + "px";
    div.style.backgroundColor = backgroundColor;
    container.appendChild(div);
}
createElement({backgroundColor:"blue"})

函数声明与优先级

1
2
3
4
5
6
7
8
9
10
11
12

//全局标准声明
function add(num) {
    return ++num;
};

//全局匿名函数
var add = function(num){
    return --num;
};
//全局标准声明优先级高于赋值声明因此输出：2
console.log(add(3)); //2
//全局声明函数优先级会被提升，但是变量匿名函数优先级不会提升

函数参数

形参数量大于实参时，没有传参的形参值为 undefined

实参数量大于形参时，多于的实参将忽略并不会报错

在函数内部，arguments变量为所有参数的集合

当然也可以使用rest paramter把参数展开

1
2
3

let restParam = function(...args){
  console.log(args)//为所有参数的集合
}

使用函数解析模版字符串

CSS学习笔记（七）

CSS过渡 transition

过渡属性

transition-property:[...property]

过渡时间

transition-duration:[...time]

延迟触发

transition-delay:[...time]

过渡效果

transition-timing-function:[linear||ease-in||ease-out||ease-in-out]

过渡属性的缩写，其中transition-duration必填

transition:[property1] [transition-timing-function] transition-duration [transition-delay],

CSS学习笔记（六）

变形与透视

translate 控制元素三纬运动

• X axis

transform:translateX(200px)

• Y axis

transform:translateY(200px)

• XY shorthand

transfrom:translate(200px,200px)

• Z axis has no relative unit 因此只能使用绝对单位

transfrom:translateZ(200px)

• 3D shorthand

transfrom:translate3d(20%,0,100px)

scale 控制缩放

1
2
3
4
5
6
7
8
9
10

/*example*/
main:hover div-nth-child(1){
  transform:scaleX(2); /*x轴尺寸放大原来的1倍*/
}
main:hover div-nth-child(2){
  transform:scaleY(.5);/*y轴尺寸缩小原来的1倍*/
}
main:hover div-nth-child(2){
  transform:scale(2, .5); /*Shorthand*/
}

transform 基点

transform-orign:left top //从左上角开始缩放

rotate 旋转

transform:rotateX(45deg) 向上翻转45度

transform:rotateY(45deg)向右翻转45度

transform:rotateZ(45deg) 平面旋转45度 或transform:rotate(45deg)

skew 倾斜

transform:skewX(45deg)

transform:skewY(45deg)

transform:skew(45deg,45deg)

CSS学习笔记（五）

Grid 栅格系统

grid声明

• grid – generates a block-level grid
• inline-grid – generates an inline-level grid

1
2
3

.container {
  display: grid | inline-grid;
}

格子布局

grid-template-columns grid-template-rows

1
2
3
4

.container {
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

利用repeat( [n], [size] )快速分配. 比如grid-template-rows:repeat(4,25%) [均等绘制4行] or grid-template-rows:repeat(2, 100px, 50px)[绘制4行分别为100px，50px，100px，50px 高]

fr unit

fr : To set the size of a track as a fraction of the free space of the grid container and the free space is calculated after any non-flexible items.

1
2
3
4
5

.container {
  display:grid;
  widht:350px;
  grid-template-columns: 1fr 50px 1fr 1fr; /*100px 50px 100px 100px */
}

minmax(unit,unit) 控制格子最大最小值

1
2
3
4
5

.container {
  display:grid;
  widht:350px;
  grid-template-columns: repeat(2,minmax(50px,100px))
}

gap 格间距

row-gap:[unit] column-gap:[unit]

Shorthand: gap:<row-gap> <column-gap>

grid-template-areas

通过引用使用grid-area属性指定的网格区域的名称来定义网格模板。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}
.container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

控制行列对其方式 与Flex类似

控制单元格内部列对齐 justify-items

.container { justify-items: start | end | center | stretch; }

控制单元格内部行对齐 align-items

.container { align-items: start | end | center | stretch; }

• 如果容器container的大小超过内部所有格子的大小，那么可以使用 justify-content 和 align-content 来控制在其容器总的对齐方式

CSS学习笔记（四）

Flex 弹性布局

display 弹性盒子声明

This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children.

1
2
3

.container {
  display: flex; /* or inline-flex */
}

内部排列方式 flex-direction

1
2
3

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

Note: flex-direction默认为row

CSS学习笔记（三）

盒子模型

• 外边距合并：如果两个盒子的外边距重叠，则只取最大那边的外边距值

• box-sizing:border-box; 传统意义上“width or height + padding + border = actual width or height”. 如果设置了box-sizing:border-box;属性，则”width or height = padding + border + content width or height”

• border-radius:50%绘制圆边框

• outline:solid 2px #ddd 轮廓线不会占用空间

• width:fit-content width:max-content width:min-content 根据根据内容来决定大小

CSS学习笔记（二）

CSS文本

em 和 rem

em is relative to the font-size of its direct or nearest parent, rem *is only relative to the html (root) font-size.

根据W3C的定义：

Equal to the computed value of the font-size property of the element on which it is used

因此，em是相对于使用它的元素的字体大小, 如果该元素没有设置字体大小，那么就会向父级寻找

em浏览器默认字体大小，16px( 火狐和Chrome )

1
2
3
4
5

/*如果该元素设置了字体大小，那么对应的em单位就会相对于该元素的字体大小*/
p {
  font-size: 16px; 
  line-height: 2em; /*32px*/
}

为了方便换算，我们通常在css中设置body的属性 font-size:62.5%，这就使1em值变为10px

而rem是相对于根(html)元素的font-size计算的

Equal to the computed value of font-size on the root element.

font样式简写

font:bold italic 16px/1.4rem 'Merriweather', serif;

从左到右依次是font-weight, font-style, font-size, line-height,font-family。其中font-weight和font-style是可以参略的

添加滑线和文字阴影

上滑线， 删除线， 下滑线

text-decoration:overline || line-through || underline

阴影颜色， 右偏移量, 下偏移量，模糊度

text-shadow:red 4px 4px 4px

空白和文本溢出

保留多余空格和换行p{white-space:pre;}

1
2
3
4
5
6
7

/*div内文本不换行溢出隐藏*/
div{
  
	 white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
}

文本锁进和对齐

文本锁进 text-indent:2rem

文本对齐 text-align:center

The vertical-alignproperty can be used in two contexts:

• To vertically align an inline element’s box inside its containing line box. For example, it could be used to vertically position an <img> in a line of text
• To vertically align the content of a cell in a table

冷门排版API

单词间距word-spacing

字母间距letter-spacing

垂直从左到右排版 writing-mode:vertical-lr

图片与文字垂直对齐 vertical-align

CSS学习笔记（一）

CSS的导入

• CSS文件三种的引入方式

1. <link href='[filePaht]', rel='stylesheet' type="text/css"></link>
2. <div style="font-size:2rem">ruoyu</div>
3. <head> <style>div{font-size:2rem}<style> </head>

• 在CSS文件中导入其他css样式：@import url([filePath]) [all || screen || print] and (min-width:678px)

JS的作用域与闭包

What is closure?

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment).

根据MDN的定义，闭包就是说内部函数可以访问外部函数的作用域。每一个Javascript函数在被创建时都会形成闭包。

1
2
3
4
5
6
7
8
9
10

function makeFunc() {
  var name = 'Mozilla';
  function displayName() {
    alert(name);
  }
  return displayName;
}

var myFunc = makeFunc();
myFunc();

正如文档所说 A closure is the combination of a function and the lexical environment within which that function was declared. 因此当makeFunc函数实例话给变量myFunc时，其内部的displayName保留了它的语法环境包括变量name`.