前端基础

 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;
}

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;
}

 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;
  }
}

 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 );

 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();

 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);