Discover Top Posts Tagged with #noobjsbeginner

NOOB Javascript Beginner #19

關於 canvas animation： 1. 在起頭要清除目前的畫布內容 ctx.clearRect() 2. 在變形之前要先記錄一次當前畫布狀態 ctx.save() 3. 變形動畫的結尾要恢復到「變形之前的畫布狀態」ctx.restore() 4. 最後才是使用 requestAnimationFrame()

function draw() { var ctx = document.getElementById('basic').getContext('2d'); // clear canvas ctx.clearRect(0, 0, 300, 300); // 圖形樣式 ctx.fillStyle = 'rgba(0, 0, 0, 0.4)'; // 記錄變形之前的畫布 ctx.save(); // 移動變形的中心點 ctx.translate(150, 150); // 用 Date() 得到一組數字 var time = new Date(), rotate = ((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds() ctx.rotate(rotate); ctx.translate(10, 0); ctx.fillRect(0, -12, 50, 24); // 恢復到變形之前的畫布 ctx.restore(); window.requestAnimationFrame(draw); }

若是少了 restore 的動作，會發現第二幀的 fillRect 依然會吃到先前設定的 rotate 與 translate，造成這兩個動作疊加，動畫就會失敗。

#noobjsbeginner

NOOB Javascript Beginner #18

關於三角函數： Math.sin(x) x 為弧線長度，以 30deg 來說： 1. 圓周長為 2* PI *r 2. 十二分之一 (30deg) 圓弧長為 2* PI *r / 12 3. 去掉 r，則能夠得到 60deg 對應的弧長應該是 2*PI / 6 4. Math.sin( 2* Math.PI / 12) 會得到 0.499999999 5. 數學上 sin30° = 1/2 = 0.5 因此，sin30° 的表示方式是 Math.sin(2*Math.PI / 12)。

#noobjsbeginner

NOOB Javascript Beginner #17

使用建構式時，把其他物件或函式當作其屬性帶入，以便之後更方便的使用。在 todolist 的實作練習步驟分為：

1. todoList 整體架構的建構式 2. todoChild 子項目的建構式在實作 remove 功能的時候，做了兩個小動作： 1. 將每個建構出來的 todoChild push 到 todoList.array 2. 建立 todoChild 的時候，添加 todoChild.father = todoList 如此一來，控制 todoChild 的按鈕添加 remove 功能的步驟就變成： 1. 找到 this.father.array 也就是 todoList.array 2. 獲取 this.id 因此 this.father.array[this.id] 就能夠找到要動作的 todoChild，再作 remove() 就行。

function TodoList() { this.$elem = this.buildElem() this.todoArray = [] this.bindEvents() } TodoList.prototype.buildElem = function() { //建構出 TodoList 該有的 HTML tags ... } TodoList.prototype.bindEvents = function() { var button = this.$elem.querySelector('button') //執行 onCreatTodo，建構出 todoChild button.addEventListener('click', this.onCreateTodo.bind(this)) } TodoList.prototype.onCreateTodo = function() { // 把 input 的內容轉成 todoChild 要用的參數 ... // 將新 TodoChild 推到 todoArray 陣列 this.todoArray.push(newTodo) // 增加新屬性 father，這個 this 是 TodoList newTodo.father = this } // General general = { globalID: 0 } function TodoChild(title) { //todoChild 的 ID var id = general.globalID ++ this.id = id this.$elem = this.buildElem(id, title) this.bindEvents() return this } TodoChild.prototype.buildElem = function(id, title) { // 建構出 todoChild 該有的 HTML tags ... } TodoChild.prototype.bindEvents = function() { var button = this.$elem.querySelector('button') //執行 onRemoveTodo button.addEventListener('click', this.onRemoveTodo.bind(this)) } TodoChild.prototype.onRemoveTodo = function() { //找到 todoArray var todoArray = this.father.todos, todoId = this.id todoArray[todoId].$elem.remove() }

#noobjsbeginner

NOOB Javascript Beginner #16

理解 this 在哪裡：

1. prototype: nameEvents 的 this.name2 不存在於 otherNameEvents this.name =“Name1” 存在於 nameEvents 和 otherNameEvents this.name2 和 this.name3 存在於 WhatIsThis 中

function WhatIsThis() { this.name = 'Name1' } WhatIsThis.prototype.nameEvents = function() { this.name2 = 'Name2' } WhatIsThis.prototype.otherNameEvents = function() { this.name3 = 'Name3' }

2. bind: bind 使 this 傳遞。狀況一點擊時，console 結果是 <button> 這個元素狀況二點擊時，console 結果是 WhatIsThis() 這個函式本身

function WhatIsThis() { this.$elem = document.createElement('button') this.bindEvents() } WhatIsThis.prototype.bindEvents = function() { 狀況一： this.$elem.addEventListener('click', this.otherEvents) 狀況二： this.$elem.addEventListener('click', this.otherEvents.bind(this)) } WhatIsThis.prototype.otherEvents = function() { console.log(this) }

補充應用： bind 替換掉 this 後，就能夠在 otherEvents 裡面抓到 this.name2

function WhatIsThis() { this.name = ‘Name1′ this.$elem = document.createElement('button') this.bindEvents() } WhatIsThis.prototype.bindEvents = function() { this.name2 = ‘Name2’ this.$elem.addEventListener('click', this.otherEvents.bind(this)) } WhatIsThis.prototype.otherEvents = function() { console.log(this.name2) }

#noobjsbeginner

NOOB Javascript Beginner #15

學習 vue.js 的第一天： 1. data 與 {{object}} 的用法。 2. v-if / v-else 的用法。 3. v-model 的 real-time 用法。 4. v-on:click=“function” 與 mothed 的用法。 5. v-on:submit 可以寫成 @submit。

#noobjsbeginner

NOOB Javascript Beginner #14

Prototype 原型繼承應用： 1. 為建構式添加屬性

function Person(name, gender) { this.name = name; this.gender = gender; } Person.prototype.jump = function() { console.log(this.name + ' is jumping.') } var p = new Person('Peter','boy') p.jump() >Peter is jumping.

2. 繼承建構式

function Child(name, gender, age, IQ) { Person.call(this, name, gender) this.age = age; this.IQ = IQ; } var c = new Child('Charile', 'boy', 5, 120) c > Child {name: "Charile", gender: "boy", age: 5, IQ: 120} Child.prototype.bite = function() { console.log(this.name + ' bite me!') } c.bite() > Charile bite me!

3. hasOwnProperty 判斷是否具有屬性。 Person.hasOwnProperty(’name’) > true 4. call(this, parameters...) 調用其他函式的 this 和引數。 5. obj.constructor 看 obj 來自於哪隻建構式。

#noobJsBeginner

NOOB Javascript Beginner #13

快速建立大量物件的好朋友：建構式

1. 建構式名稱第一字母通常都大寫 function MakePerson(arguments) { ... } 2. new 是一個運算符 3. new 的運作模式： a. new 會先建立空的物件 b. new 將 this 設定為指向新物件 c. 叫用建構式時，將引數傳入 this 指向的屬性的值 4. 建構式不需要回傳的動作，this 會自動被回傳 5. instanceof 判斷是否屬於出自某建構式 6. 內建物件：Object, RegExp, Math, Error

#noobJsBeginner

NOOB Javascript Beginner #12

讀到深入淺出的第 11 章，這章的主題圍繞在匿名函式、作用域、閉包上。

從 jQuery 學回 JS 其實就很好理解匿名函式的意義，如果想要讓程式好好的被維護，盡量少用吧（除非這隻程式小到不行）。

函式內的變數作用域僅限於該函式內，若該函式又被當成引數放到其他函式內的話，則就是進入封包的概念了。

function setTimer(doneMessage, n) { setTimeout(function() { alert(doneMessage); }, n}; doneMessage = “OUCH!” } setTimer(”Cookies are done!”, 1000) -> “OUCH!”

從上面的實作可以看出 doneMessage 在 1000 毫秒之前就被改成 OUCH 了。

但是函式在被叫用時，其變數的作用域還不太理解，需要另外釐清 - -

#noobJsBeginner