Please enable Javascript to view the contents

前端入门笔记

 ·  ☕  5 分钟

想利用 1-2 个月的时间学习下前端基础 👻。
虽然之前有用 React 编写了 Hyuga 的前端,但是都是靠的 google + github 解决的,认知的很浅。

前端基础

https://developer.mozilla.org/zh-CN/ 别说了就是多看文档

HTML

  • 块级元素 自占一行
  • 内联元素的大小就是被包裹元素的大小
  • <head> 中的 <base target="_blank" /> 定义所有的链接属性

CSS 基础

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference#%E5%85%B3%E9%94%AE%E5%AD%97%E7%B4%A2%E5%BC%95

载入 CSS 的几种方法

  • 内联 inline
  • Style 标签
  • 独立文件

css 选择器

https://segmentfault.com/a/1190000013424772

常用的选择器:

  • 元素选择器

    p{...} div{...}

  • 类选择器

    .class_name{...}

  • ID 选择器
    #id_name{...}

  • 属性选择器

    a[id="xxx"]{...}

  • 伪元素选择器

    .content::after{...}

  • 伪类选择器

    a:link{...}

a 标签:

  • link: 原来的颜色
  • active: 点击时
  • visited: 点击后
  • hover: 鼠标移至链接(focus)
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
a:link {
  color: green;
}
a:active {
  color: black;
}
a:visited {
  color: orange;
}
a:hover {
  color: yellow;
}

标签组合

  • A > B:选择 A 下一层的元素 B
  • A ~ B:选择与 A 同父层的元素 B
  • A + B:选择与 A 相邻的元素 B(不能被任何元素相隔)
  • A B:包含选择,A 元素下所有的 B 元素

常见的 CSS

字体

字体样式(使用系统字体样式)

1
2
3
4
5
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", SimSun, sans-serif;
}
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* 颜色 */
h2 {
  color: #4d9ef8;
}
/* 文字对齐 */
h2 {
  text-align: center;
}
/* 文字装饰 */
h2 {
  text-decoration: underline;
}
/* 首行缩进 */
p {
  text-indent: 20px;
}
/* 行间距 */
p {
  line-height: 1.8;
}
/* 字间距 */
h2 {
  letter-spacing: 5px;
}

换行 中文与英文在超长的情况下会自动换行;

1
2
3
div.bg {
  word-wrap: break-word;
}

Box 模型

kiWzng.png

Box 模型溢出

  • 隐藏 overflow:hidden
  • 自动添加滚动条 overflow:auto
  • 总是显示滚动条 overflow:scroll
  • 水平与垂直方向 overflow-x, overflow-y

Position

kiWzng.png

https://github.com/Rring-Loop/css-exercise

JavaScript

版本特征:

ECMAScript 版本 发布时间 新增特性
ECMAScript 2009(ES5) 2009.11 扩展了 Object、Array、Function 的功能等
ECMAScript 2015(ES6) 2015.6 类,模块化,箭头函数,函数参数默认值等
ECMAScript 2016(ES7) 2016.3 inclueds,指数操作符
ECMAScript 2017(ES8) 2017.6 sync/await, Object.values(), Object.entries(), String padding 等

浏览器对 Es6 各种特性支持的图表
http://kangax.github.io/compat-table/es6/

数据类型:

类型 desc
数值 整型、浮点、双精度、isNaN
字符串 “双引号”、 ‘单引号’
数组 [var1, va2]
对象 {key: “value”}
弱类型 typeof、parseInt、parseFloat

变量定义:

  • 全局:var
  • 作用域:let变量 & const常量
  • 解构赋值:let{a,b} = {a:1, b:2}

操作符:

  • 算术运算:加减乘除、++/–、+=、取模
  • 比较运算:>、<、!=、==、 !==、 ===、 ?
  • 逻辑运算:&&、||、!
  • 位运算:&、|、»、«
  • 字符串运算:+

面向对象:

 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
class salaryData{
  // 构造函数
  constructor( city , position , salary_max , salary_min ){
    this.city = city;
    this.position = position;
    this.salary_max = salary_max;
    this.salary_min = salary_min;
  }
  // 方法
  avg_salary(){
    return (this.salary_min + this.salary_max)/2;
  }
}
// make new
let sh_fe = new salaryData( 'shanghai' , 'fe' , 14398 , 24675 );
console.log( sh_fe.avg_salary() );

// 继承
class capitalSalaryData extends salaryData{
  constructor( city , position , salary_max , salary_min ){ // 调用父类
    super( city , position , salary_max , salary_min );
  }
  pure_income(){
    return this.avg_salary()*0.55;
  }
}

公有、私有、保护属性和方法

约定:可以使用 _, __ 字符为前缀

getter / setter

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
class salaryData{
  constructor( city , position , salary_max , salary_min ){
    this.city = city;
    this.position = position;
    this.salary_max = salary_max;
    this.salary_min = salary_min;
  }
  get avg_salary(){
    return (this.salary_min + this.salary_max)/2;
  }
  get pure_income(){
    return this.avg_salary()*0.55;
  }
}
// make new
let sh_fe = new salaryData( 'shanghai' , 'fe' , 14398 , 24675 );
console.log( sh_fe.avg_salary );

setter: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/set

this 和 箭头函数

 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
// 在全局上下文中,this 指代的是 window
// 函数中默认调用,使用全局上下文
function testThis(o){
  console.log(this.title);
}
testThis();
// 使用 call 或者 apply,强制 this 使用函数上下文,这时 this === o
testThis.call({title:"title1"});
testThis.apply({title:"title2"});
// ES5 引入 bind 方法,可以动态的从一个旧函数创建一个新函数,并把这个函数的 this,绑定到 bind 的第一个参数上
testThis.bind({title:"title3"})();

// 在箭头函数中,this 保留外部的上下文的值。
var testThis1 = () => {console.log(this.title)};
testThis1();
// 其他调用方式都无法改变
testThis1({title:"title4"});
testThis1.call({title:"title4"});
testThis1.bind({title:"title4"})();

// 通过对象.方法() 来调用时,this 会绑定对象上。
var book = new Object;
book.name = "《富爸爸,穷爸爸》";
book.read = function(){
  console.log(this.name);
}
book.read();

模块与包

ES6 后 JavaScript 开始支持通过 import 来导入其他的模块

  • module, export, import

DOM

image

window

在浏览器里运行 JavaScript 默认对象就是 window 使用其属性与方法时可省略掉 window.

  • 地址栏:location.href, location.reload
  • 交互操作:alert, confirm, prompt
  • 大小和位置: outerHeight, outerWidth, innerHeight, innerWidth
  • 滚动:scroll, scrollBy, scrollTo, scrollX, scrollY
  • 窗口:open, opener, parent

event 事件

https://devdocs.io/dom_events/

JQuery

中文文档:https://www.jquery123.com/

Node

中文文档:http://nodejs.cn/

Demo 编写简单的 WebServer:

 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
30
31
32
33
34
35
36
37
38
const http = require("http");
const path = require("path");
const fs = require("fs");

const server = http.createServer();

server.on("request", (req, resp) => {
  const ext = path.extname(req.url);
  let doc_path = path.join(__dirname, "root", req.url);
  console.log(req.url, doc_path);
  let content;
  let status = 200;
  let mime = { "Content-Type": "text/html" };
  switch (ext) {
    case ".html":
    case ".htm":
      mime = { "Content-Type": "text/html" };
      break;
    case ".css":
      mime = { "Content-Type": "text/css" };
      break;
    case ".ico":
      mime = { "Content-Type": "image/x-icon" };
      break;
  }

  if (ext != "" && fs.existsSync(doc_path)) {
    content = fs.readFileSync(doc_path);
  } else {
    status = 404;
    content = "文件不存在";
  }
  resp.writeHead(status, mime);
  resp.write(content);
  resp.end();
});

server.listen(8080);

NodeJS 的基本结构

image

React

Export

存在两种 exports 导出方式:

  1. 命名导出(每个模块包含任意数量)
  2. 默认导出(每个模块包含一个)(注意,不能使用 var、let 或 const 用于导出默认值 export default。)

在导出多个值时,命名导出非常有用。在导入期间,必须使用相应对象的相同名称。但是,可以使用任何名称导入默认导出

Import

一个组件的生命周期

constructor:构造函数
componentDidMount:组件第一次渲染时的挂载
componentWillUnmount:组件被删除时的卸载

正确的更新 state:https://zh-hans.reactjs.org/docs/state-and-lifecycle.html#using-state-correctly

关于组件数据流:https://zh-hans.reactjs.org/docs/state-and-lifecycle.html#the-data-flows-down

目录