Require

• Require.js
• Jasmine

---

Project structure

Project/
│
├── css/
│   └── jasmine.css
├── js/
│   ├── require.js
│   ├── main.js
│   ├── models/
│   │   ├── player.js
│   │   └── song.js
│   └── test
│       ├── spec/
│       │   └── playerSpec.js
│       ├── jasmine.js
│       ├── jasmine-html.js
│       └── boot.js
└── index.html

index.html

main.js

js/models/player.js

js/models/song.js

js/test/spec/playerSpec.js

method

• toBe()
• toEqual()
• .not
• toMatch(/Regex/)
• toBeDefined()
• toBeUndefined()
• toBeNull()
• toBeTruthy()
• toBeFalsy()
• toContain()
• toBeLessThan()
• toBeGreaterThan()
• toBeCloseTo(e, number)
• toThrow()
• spyOn(obj, ‘method’)
  • toHaveBeenCalled()
  • toHaveBeenCalledWith(args…)
  • mostRecentCall

Backbone.Events

Method	Note
object.on(event, callback, [context])	註冊監聽一個事件, 並指定觸發 callback, 如果需要在 callback function 中改變 this 的對象, 將對象傳入 context
object.off([event], [callback], [context])	取消監聽事件, 不指定事件將取消所有的事件

Backbone Event Testing

Backbone.Model

Properties / Method	Note
constructor()	You can use Backbone.Model.apply(this, arguments) to invoke constructor function of parent class
initialize()	If you definean initialize function, it’ll be invoked when the model is created.
defaults	Remember that in JavaScript, objects are passed by reference, so if you include an object as a default value, it will be shared among all instances. Instead, define defaults as a function.
attributes	If you’d like to retrieve and munge a copy of the model’s attributes, use _.clone(model.attributes) instead.
validate(attrs, options)	By default validate is called before save, but can also be called before set if {validate:true} is passed. Return your custom error message, and it will be stored to validateError
isValid()	Run validate() to check the model state.
validationError	The value returned by validate during the last failed validation.
set() get()	set(‘attr’, ‘value’) or set({ attr: value})
destroy()	You can use _.invoke() to call destroy function for a batch of models. ex: _.invoke(modelsArray, 'destroy')

Backbone.Collection

• create({ attr: value })
• fetch()

Properties / Method	Note
model
url
models	Raw access to the JavaScript array of models inside of the collection.
add
create
reset

Project Template

Backbone.View

Properties / Method	Note
tagName
id
className
attributes
el and $el
events
render()	A good convention is to return this at the end of render to enable chained calls.

Backbone JS Data Types Primer

Backbone.LocalStorage

Example: TodoList

Backbone TodoList

• writable
• configurable
• enumerable
• get(getter) / set(setter)

JS Bin

Reference: Mozilla Developer

你可以利用 function.bind 來改變呼叫函式的對象(this): JS Bin

try starck.callBySelf(); or starck.callByWindow(); in console.

---

function.bind

For a given function, creates a bound function that has the same body as the original function. In the bound function, the this object resolves to the passed in object. The bound function has the specified initial parameters.

function.bind(thisArg[,arg1[,arg2[,argN]]])

Reference

---

Callback 的應用: JS Bin try starck.say('hi')

JavaScript Authoring Workflow with Google Chrome

Chrome Workspace

To enable the Experiments tab of the Settings pane you need to navigate to about:flags and scroll down to the Experimental Developer Tools experiments flag. Enable it then restart the browser.

• jquery
• bootstrap javascript
• modernizr
• plugins.js
  • FancyBox
  • jQuery.ScrollTo
  • array.reverse
• SMINT

app.js

1. In Chrome chrome://cache/

2. Click on whichever file you want to view

3. Settings > Tools > JavaScript Console

4. Paste code below:

This is a PHP extension embeds the Google V8 Javascript Engine.

V8js extension on Github

Installation

Usage

check samples and tests folder

Problems

如果你經由 PECL 安裝 v8js:

sudo pecl install v8js

你可能會遇到一些編譯上的錯誤, 造成這個問題的原因是因為在 PECL 上的版本 0.1.3 使用了一個已經被最新版 V8 engine 所廢除的函式, 如果想要使用這個版本的話必須要使用 V8 3.15.11 的版本, 降版的方式如下:

brew install v8-3.15.11

如果之後想要切換回新版:

–