othree

• http://blog.othree.net

• 前端技術(JavaScript, (X)HTML, CSS, ....)

• MightHappyDesigner

1

五分鐘講五十張投影片

2

DEMO

3

4

5

6

7

8

base2A JavaScript Library by Dean Edwards

9

Dean Edwards

10

IE7.js比微軟IE7還早

11

IE8.js微軟IE8還沒出

12

base2

13

不提供動畫特效

14

不提供動畫特效沒有

UI相關功能

15

不提供動畫特效沒有

UI相關功能

不管Ajax16

不提供動畫特效沒有

UI相關功能

不管Ajax那到底有什

麼？

17

補強JavaScript語言

18

更容易開發Application

19

base2

•Base

•Map

•Collection

•RegGrp

•Module

•Package

•Enumerable

• JavaScript

20

base2

•Base

•Map

•Collection

•RegGrp

•Module

•Package

•Enumerable

• JavaScript

21

Base

22

繼承

23

.prototype

24

Base.extend({k: v})

25

Map, Collection, Enumerable

26

JavaScript原來沒有

27

Enumerable Map Collection

every

filter

invoke

map

pluck

reduce

some

add

getAt

item

putAt

removeAt

reverse

sort

copy

forEach

get

getKeys

getValues

has

merge

28

RegGrp

• 一個Regular Expression物件

• 多組pattern, replacement

29

JavaScript

• Array2

• Date2

• String2

30

Array2

• pop

• push

• contains

• sort, reverse

• filter

• ......

31

Date2

• toISOString

• now

• parse

32

Date2

• toISOString

• now

• parse

32

(“2008/03/29”)

String2

• trim

33

Cast in Native Object

• base2.JavaScript.bind(window);

34

base2.DOM

35

Yet Another JS Lib Without Document

36

修正瀏覽器錯誤

37

新標準實作

38

• view.getComputedStyle()

• node.compareDocumentPosition()

• document.activeElement (HTML5)

• document.createEvent()

• document|element.addEventListener()

• document|element.removeEventListener()

• document|element.dispatchEvent()

• document|element.querySelector()

• document|element.querySelectorAll()39

• view.getComputedStyle()

• node.compareDocumentPosition()

• document.activeElement (HTML5)

• document.createEvent()

• document|element.addEventListener()

• document|element.removeEventListener()

• document|element.dispatchEvent()

• document|element.querySelector()

• document|element.querySelectorAll()39

• element.ownerDocument

• element.getAttribute()

• element.hasAttribute()

• element.matchesSelector()

• element.setAttribute()

40

• event.target

• event.relatedTarget

• event.initEvent()

• event.preventDefault()

• event.stopPropagation()

• style.getPropertyValue()

• style.setProperty()

41

Rules for JavaScript Library Authors

http://dean.edwards.name/weblog/2007/03/rules/

42

結論

43

與眾不同的JS Lib

44

應該很有用

我沒在用

45

我也不知道有誰用

46

如何取得

47

google://base2

48

http://code.google.com/p/base2/

49

Thanks For Your Attention

50