龍華大學前端技術分享 Part1
•
0 j'aime•158 vues
1. 介紹sublime text以及Emmet套件 2. 介紹knockoutJS以及MVVM pattern
Recommandé
Contenu connexe
Tendances
Tendances (19)
En vedette
En vedette (17)
Similaire à 龍華大學前端技術分享 Part1
Similaire à 龍華大學前端技術分享 Part1 (20)
Dernier
Dernier (20)
龍華大學前端技術分享 Part1
- 1. 2013-12-24
- 10. Mini Map
- 11. Multi-Selection • Ctrl + Left Mouse Click • Select Word → Ctrl + D • Select Line → Ctrl + Shift + D
- 12. Go To Anything • Ctrl + P • Fuzzy Search of Opened Files • Go to line → :num of line • Go to symbol → Ctrl + R or @symbol
- 13. Command Palette • Ctrl + Shift + P • Set Syntax • Command of package • Key-Binding • Setting
- 14. Python Console • Ctrl + `
- 15. Search • Search in current file → Ctrl + F • Search in files → Ctrl + Shift + F • Regular Expression Supported
- 16. Project Save • Menu Bar -> Project Save
- 17. Package Control
- 18. Install • Execute following command in Console. (which we can find in https://sublime.wbond.net/installation#st2.) • import urllib2,os; pf='Package Control.sublime- package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( ur llib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http:// sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation’)
- 19. Usage • Command Palette(ctrl + shift + P) → type “package control” • install package • remove package • list installed packages
- 20. Notes • Documentation • http://docs.sublimetext.tw/ • Facebook • https://www.facebook.com/SublimeTextTW • Shortcut • win/linux • http://docs.sublimetext.info/en/latest/reference/keyboard_shortcuts_win.html • https://gist.github.com/hileon/1311735 • mac • http://docs.sublimetext.info/en/latest/reference/keyboard_shortcuts_osx.html
- 21. Excise • Install package control • install the package “Emmet”
- 22. Emmet • Ultra-fast coding on HTML • CSS selector style • Support lot of editors (e.g. Coda, Vim, Notepad++, TextMate…) • http://emmet.io/
- 23. Emmet for HTML • use “tab” to convert CSS-selector into HTML tags. • div → <div></div>
- 24. Nesting operators • “>” : Child • “+” : Sibling • “^” : Climb-up • “*” : Multiplication • “()” : Group
- 25. Attribute operators • “.” : Class • “#” : Id • “[]” : Custom attribute • “{}” : Text
- 26. Implicit tag name • div ➝ div • span ➝ span • ul, ol ➝ li • table ➝ tr • tr ➝ td • select ➝ option
- 28. Emmet for CSS • w ➝ width: ; • w10 ➝ width: 10px; • w10-20 ➝ width: 10px 20px; • w10e20p ➝ width: 10em 20%;
- 29. Fuzzy Search • ov:h ➝ overflow: hidden; • ov-h ➝ overflow: hidden; • ovh ➝ overflow: hidden; • oh ➝ overflow: hidden;
- 30. Emmet Action • Wrap with Abbreviation • Remove Tag • Go To Matching Pair
- 31. Notes • Cheat-Sheet • http://docs.emmet.io/cheat-sheet/ • Emmet Documentation • http://docs.emmet.io/ • You may deal with key-binding issue. • https://github.com/sergeche/emmet-sublime
- 32. If you want to construct…
- 33. Knockout • MVVM Pattern • Combination of View and ViewModel • Separation of concerns(SOC)
- 35. Import knockout <script type='text/javascript' src="./knockout-3.0.0.js"></script>
- 36. data-bind <p>First name: <input data-bind="value: firstName" /></p> function ViewModel() { var self = this; self.firstName = ko.observable('Sean'); }; Attribute
- 37. Binding $(function () { // Bind View and ViewModel ko.applyBindings(new ViewModel()); })