佛萊迪筆記錄
0%

發表於 更新於

this 概念

這題觀念在於 this 作用域範圍

第一個印出來的 this 範圍在 obj 裡, 因為是執行了函式

第二個印出來的 this 範圍是 window, 原因在於 test 是被 assign 一個函式,看底下可以知道此作用域範圍已不在 obj 裡, 所以會印出最外層的 fullname

1
2
3
ƒ () {
      return this.fullname;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
var fullname = 'John';
var obj = {
  fullname: 'Marry',
  prop: {
    fullname: 'Fred',
    getFullname: function() {
      return this.fullname;
    },
  },
};
console.log(obj.prop.getFullname()); //Fred
var test = obj.prop.getFullname;
console.log(test()); // John

Call By Value vs Call By Sharing

 傳值與共享(有 call by reference 記憶體的概念)的概念

1
2
3
4
5
6
7
8
9
10
11
var a = {
  a1: 5,
  a2: [1, 2, 3],
};
var b = a.a1;
var c = a.a2;
a.a1 = 6;
a.a2[0] = 4;

console.log(b); //5
console.log(c); //[4,2,3]

hoisting 概念

觀念在於變數的宣告被「提升」到最上面去了

第一題與第二題很容易搞混,特地寫在一起

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 第一種
myName = 'Fred';
function getName() {
  console.log(myName); //undefined
  var myName = 'Chen';
  console.log(myName); //Chen
}
getName();

// 第二種
myName = 'Fred';
function getName() {
  console.log(myName); //Fred
  myName = 'Chen';
  console.log(myName); //Chen
}
getName();

function 執行

顧名思義考你瞭不瞭解 function 執行,

如果 this.name(); 改成 this.name; 那就不會執行了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var obj = function(msg) {
  this.msg = msg;

  this.name = function() {
    console.log('name: ', this.msg);
  };

  this.waitAndShot = function() {
    setTimeout(() => {
      this.name();
    }, 2000);
  };
};

var myName = new obj('Fred');
myName.waitAndShot(); // 兩秒後印 name: Fred

閉包

將變數生命週期延續在內層

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function myFunc() {
  return {
    count: 0,
    getCount: function() {
      this.count++;
      console.log(this.count);
    },
  };
}

var obj = myFunc();
obj.getCount(); // 1
obj.getCount(); // 2
obj.getCount(); // 3

立即函式

只會執行一次,不會影響全域

1
2
3
4
5
6
7
8
9
10
// var a = b =3;
// 實際上是長這樣
// b = 3;
// var a = b;
// 因為 b 不是用 var 宣告, 所以就變成全域變數
(function() {
  var a = (b = 3);
})();
console.log('a defined?' + (typeof a !== 'undefined')); // a is not defined
console.log('b defined?' + (typeof b !== 'undefined')); // b is 3

字串運算子

運算子遇到字串就會自動轉成字串串接

1
2
console.log('3' + 4 + 5); //'345'
console.log(3 + 4 + '5'); //'75'

++運算元

++在前面代表回傳運算完的值, 反之++在後就是回傳加前的值

1
2
3
4
5
6
7
8
9
10
11
12
13
function cal(init) {
  var counter = init;
  return function() {
    return counter++;
  };
}

var myCal1 = cal(5);
var myCal2 = cal(105);
console.log(myCal1()); //5
console.log(myCal2()); //105
console.log(myCal1()); //6
console.log(myCal2()); //106

發表於 更新於

斷點規劃範例

  • PC - 1200px
  • iPad - 768px
  • iPad以下 - 767px
  • iphone 6 Plus - 414px
  • iphone 6 - 375px
  • iphone 5、SE - 320px

max-width 設計理念

通常會在最上層給 max-width 在子層使用%方式達到自適應延伸.

1
2
3
4
5
6
7
8
9
.wrap {
    max-width: 1200px;
    .menu {
        width: 35%;
    }
    .content {
        width: 65%;
    }
}

float版面基礎設計

簡單的左右區塊排版設計

1
2
3
4
5
6
7
8
9
10
11
12
13
.wrap {
  width: 600px;
}
.menu {
  width: 25%;
  background-color: LIME;
  float: left;
}
.content {
  width: 60%;
  background-color: LIGHTSALMON;
  margin-left: 150px;
}
rwd 左右區塊排版設計 
1
2
3
4
5
6
7
8
9
@media(max-width: 768px) {
  .menu {
    width: 100%;
    float: none; 
  }
  .content {
    margin-left: 0;
  }
}

發表於 更新於

變數

1
2
3
4
$color-primary: red;
.color { 
  background-color: $color-primary
}

＠mixin

以 @mixin 開頭定義是可以重複使用的功能，可以在名稱後面加 () 放入參數做進階的使用

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
$color-primary: #f9ed69;
@mixin example {
  &::after {
    content: '';
    background-color: $color-primary;
    display: block;
  }
}
nav {
	@include example;
	margin: 30px;
	background-color: $color-primary;
}

// 搭配變數 random
$hotImage: sport live chess lottery slot fish;
@mixin hot-image {
  @each $img in $hotImage {
    .hotgame-#{$img} {
      height: 7rem;
      background: url('./assets/hot-#{$img}.png') no-repeat;
      background-size: 100% 100%;
      margin-top: 0.5rem;
    }
  }
}

extend

主要是拿來合併相同程式碼用的

1
2
3
4
5
6
7
8
9
10
%title {
	font-size:18px;
	line-height:1.8;
}
.nav {
  @extend title;
}
.content {
  @extend title;
}

發表於 更新於

rem

因應響應式網頁,在 html 預設size.

1
2
3
4
5
6
7
8
9
10
11
12
html {
    font-size: 10px; /* 也可以使用percent顯示 - 10/16=62.5% */
}

body {
    font-family: "Lato" sans-self;
    font-weight: 400;
    line-height: 1.7;
    color: #777;
    padding: 3rem;
    box-sizing: border-box;
}

發表於 更新於

css 權重

優先順序,上至下

!important
element (style)
id
css 類別選擇器
html tag

default

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

img {
    max-width: 100%;
    height: auto;
}

html {
    font-size: 62.5%; /* 10px */
}

body {
    box-sizing: border-box;
}

clip-path

透過剪裁方式改變形狀,以(x,y)方式來裁切.

1
2
3
.polygon {
    clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
}

animation

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
.heading-primary-main {
    animation-name: moveInLeft;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-iteration-count: 3;
    animation-delay: 1.5s;
}

@keyframes moveInLeft {
    0% {
        opacity: 0;
        transform: translate(-100px) rotate(0deg);
    }

    60% {
        transform: rotate(180deg);
    }

    80% {
        transform: translate(20px);
    }

    100% {
        opacity: 1;
        transform: translate(0);
    }
}

z-index

以空間的概念來解釋,面對電腦螢幕,左右方向為 x 軸,上下則為 y 軸,面對自己的這個方向就是 z 軸囉！z-index 的值越大,代表離自己越靠近。反之 z-index 的值如果越小,就代表離自己越遠.

使用 z-index 必須搭配 position 語法來設定區塊位置.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.review {
    .text {
        position: relative;
        margin-right: 2rem;
        z-index: 10;
    }
    .review::before {
        content: "\201C";
        position: absolute;
        top: -0.35rem;
        left: -1rem;
        line-height: 1;
        font-size: 20rem;
        z-index: 1,
    }
}

發表於 更新於

透過鏈結串列來移除奇數

因為忘記保留完整的題目, 所以大致上講一下題目意思.
題目會提供完整的結構, 裡面會有 data 與 下一個節點 next.
此題就是需要透過鏈結串列來移除奇數

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function deleteOdd(listHead) {
  let node = listHead;
  let prev = null;
  while(node !== null) {
    if(prev === null && (node.data) % 2 === 1) {
      listHead = node.next;
      node = node.next;
      continue;
    }
    if(prev !== null && (node.data) % 2 === 1) {
      prev.next = node.next;
    }
    else {
      prev = node;      
    }
    node = node.next;
  }
  return listHead;
}

心得: 了解記憶體與 object 特性

發表於 更新於

Theme

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment

發表於 更新於

安裝套件

  • Vetur
  • Vue 2 Snippets
  • Material Theme (調整vscode theme)
  • Import Cost (顯示載入 package size)
  • Image preview
  • GitLens