Web 应用架构指南

45 分钟学会5个前端框架

Transcript

1. Web 应用架构指南 45分钟学会五个前端框架 @island205
2. @寸志 是我的真名 前端架构师@陆金所 陆金所大前端招聘！ https://github.com/island205/Lu-Hire ᅩᦧ̵Teambition̵ᴭᰂಅ಑๥ૡ JavaScript ཛྷࣘ۸̵ڹᒒ໛ຝ̵ڹᒒ௔ᚆս۸ ٟԡ̵ᘉᦲ̵Github̵ஙܗ̵ᎣԒ ೗ᘷѺ
3. 前端外刊评论 qianduan.guru ᴨ᯾̵ᚸᦔᒵ 10 ֖ૢݦጱڹᒒૡᑕ૵ᕟ౮ጱᖫᬋࢫᴚ҅ྯޮӞᓤ؀஑ᴅ᧛ጱڹᒒܻڠ౲ᘉᦲ෈ᒍ ᕁ۱Ѻ
4. 辣么多的前端框架？！ 2010.10 2010.06 2011.12 2010.10 reborn in 2016? 2013.03 2014.03 Backbone.js Knockout Ember.js Angular 2 React Vue ெԍ਍஑ᬦ๶Ҙ
5. ፡፡ TodoMVC 1. ᬯԍग़໛ຝ҅ᥝ਍کՋԍ෸ײҘ 2. ፡ TodoMVC ጱֺৼ҅᪙፳؉ԧ҅ᓌܔ҅֕॔๥ጱଫአெԍ؉Ҙ
6. 万变不离其宗[指南] ԧᥴԧਤ҅܈كቔྎᜏ҅ռग़໛ຝḘӤ਍տ ԧᥴԧਤ҅܈كቔྎᜏ҅ռग़໛ຝמಋೈ๶ ᬯӻਤ҅੪ฎ౯Քॠᥝᦖጱ೰ܖ
7. 第一式： 学会编写组件 ፘྲ᫾ Angular 1 ଲ๥ጱ༷ஷᘒ᥺҅React ൉ڊጱᕟկཛྷୗᓌܔ҅֕Ԟஉ୩य̶़React ጱၞᤈ҅୽ߥԧෆӻڹᒒ໛ຝಅ൉׀ጱ୏ݎཛྷୗ——؁ݻԭ൉׀ᕟկ۸୏ݎጱොୗ
8. <check-box></check-box> ਖ਼ଫአӾጱձ֜ UI ፘىጱ᮱ړ᮷፡౮ԧӞӻӻᕟկ҅੪ই HTML ຽᓋӞ໏ ᮎ؟ᬯ໏ጱ HTML ᕟկᧆই֜ᖫٟޫҘ
9. 按照 MVC 的思路解构组件！ ᕟկ۸୏ݎጱ໐ஞཛྷࣳฎ MVC҅౯তᕣᦊԅ MVC ฎᦡᦇཛྷୗӾ๋᯿ᥝጱ༷ஷѺ
10. Ӟӻᕟկړ౮ӣ᮱ړғᥤࢶ̵ഴګ࢏̵ᇫா ໛ຝ൉׀ԧߺԶᥝᔰ҅׎ԭ౯ժᖫٟӞӻᕟկҘ 1. M ᕬਧک Vғහഝๅෛ҅View ᛔۖๅෛ 1. ໑ഝ M ๅෛک V ጱොୗӧӞ໏҅ݢզ಩໛ຝړ౮ӷᔄ 1. React Virtual DOMғ੒ྲᡦ೙ DOM 2. ӧฎ Virtual DOM ጱ 2. ໑ഝ M ݒ۸༄ၥጱ᥶ݎොୗ҅Ԟݢզ಩໛ຝړ౮ӷᔄ 1. Angular Ӟ 1 $apply ᚍ༄ၥ҅2 Zone.js 2. ᶋ Angular ጱ Setter 2. V ᕬਧک Cғᕬਧ DOM Ԫկ 3. C ๅෛ M 1. Ԟݢզړ౮ӷᐿຝ຅ 1. ፗള඙֢ M 2. ӧፗള඙֢ M ጱ
11. var checkbox = new Checkbox() $(document.body).append(checkbox.el) Backbone ᕟկ๋चᏐጱአဩ
12. export default Backbone.View.extend({ tagName: 'span', className: 'Checkbox', events: {'click .fake': 'toggle'}, initialize: function () { this.state = new Backbone.Model({ checked: false }) this.state.on('change:checked', this.render.bind(this)) this.render() }, toggle: function () { this.state.set({checked: !this.state.get('checked')}) }, render: function() { var checked = this.state.get('checked') this.$el.html(` <i class="fake${checked ? ' checked' : ''}"></i> <input type="checkbox" ${checked ? 'checked' : ''}></input> `) } }) state ฎ M events ฎ C render ฎ V
13. {{check-box}} Backbone ᕟկ๋चᏐጱአဩ
14. <span class="Checkbox"> <i class="fake {{if checked 'checked' ''}}" {{action 'toggle' on="click"}}></i> <input type="checkbox" checked="{{if checked true false}}"/> </span> export default Ember.Component.extend({ checked: false, actions: { toggle() { this.set('checked', !this.get('checked')); } } }); checked M hbs V actions C
15. <check-box></check-box> Vue ᕟկጱԡٟොဩ੪޾ HTML च๜Ӟᛘ
16. var Checkbox = Vue.extend({ template: ` <span class="Checkbox"> <i class="fake" :class="{checked: checked}” @click="toggle"></i> <input type="checkbox" v-model="checked"> </span> `, data: function () { return { checked: false } }, methods: { toggle: function () { this.checked = !this.checked } } }) Data M Template V methods C
17. <Checkbox /> React ጱԞฎইྌ
18. export class Checkbox extends React.Component { state = { checked: false } toggle() { this.setState({ checked: !this.state.checked }) } render() { var checked = this.state.checked return ( <span className="Checkbox"> <i className={checked ? 'fake checked' 'fake'} onClick={this.toggle.bind(this))}></i> <input type="checkbox" checked={checked}/> </span> ) } }
19. 没有 Angular 的例子？ ࣁ Angular 1 Ӿ҅౯ժݢզአ Directive ๶ਫሿᕟկຝ຅҅੗ᤰ޾ᵍᐶࣁ॔๥ጱଫአᶎڹฎஉํ఺Ԏጱ̶
20. 第二式： 用组件搭积木
21. ੜᕟկᕟݳ౮य़ᕟկ҅ړᘒလԏ ৼᕟկਂࣁىᘶىᔮ҅ݢզ᭗ᬦय़ᕟկ๶॒ቘ य़ᕟկ᭗ᬦં௔҅ဳفᯈᗝ޾Ԫկࢧ᧣҅๶ഴګੜᕟկጱᤈԅ҅ߥଫੜᕟկጱԪկ
22. var checkbox = new Checkbox({ checked: true, onChange: function(checked) { console.log(checked ? 'checked' : 'uncheck') } }) $(document.body).append(checkbox.el) փفᯈᗝ޾ࢧ᧣
23. initialize: function (options) { this.options = Object.assign({ checked: false, onChange: function() {} }, options) this.state = new Backbone.Model({ checked: options.checked || false }) this.state.on('change:checked', this.render.bind(this)) this.render() }, toggle: function () { this.state.set({checked: !this.state.get('checked')}) this.options.onChange(this.state.get('checked')) }
24. {{checkbox checked=checked onChange=(action 'onCheckChange')}}
25. <div class="Todos"> <todos-header @add-todo=“addTodo" :all-done.sync="allDone"></todos-header> <todo-list :todos="filteredTodos"></todo-list> <todo-footer :todos="filteredTodos" :visibility="visibility"></todo-footer> </div>
26. 第三式： 把模块的 Template、Style、 JavaScript̵Images 放到一个目 录下！
29. 组件和样式约定 <span class="Checkbox"> <i class=“fake" :class="{checked: checked}” @click="toggle"></i> <input type=“checkbox" v-model="checked"> </span> .Checkbox { .fake { text-align: center; width: 40px; height: 40px; } input { display: none; } } Checkbox / checkbox-component 1. ֵአᕟկݷ֢ԅ໏ୗጱ޸ݷᑮᳵ 2. ໏ୗֵአᶼ॒ቘ࢏҅᯻አ્ॺጱොୗᖫٟ
30. 组件和样式约定 .Todo { position: relative; font-size: 24px; border-bottom: 1px solid #ededed; .Checkbox { position: absolute; top: 0; bottom: 0; margin: auto 0; } } כᦤܔӻᕟկ CSS ጱᕍଶ҅Өᕟկᳵ൫ᯈጱ̵ྲইᳵ᪗̵ਧ֖ᒵמ௳ٟ҅ࣁᆿᕟկӾѺ
31. 如何把散沙捏在一起？ դᎱೆව҅੪؟වဉ҅ԧනࣁӞӻᕟկ෈կ४Ӿ҅ᮎᧆই֜಑کӞ᩸ᬩᤈනࣁၨᥦ࢏ӾᬩᤈޫҘ 1. Ḓضཛྷࣘ۸ࣈᖫٟᬯԶᕟկ 2. ᭗ᬦၨᥦ࢏ᒒጱ Loader ౲ᘏ Build ૡٍ๶ਖ਼ཛྷࣘᕟݳ᩸๶ 3. ӥᶎฎӞԶݢᭌጱොໜ޾ದૣ 4. ୮ᆐ҅ፓڹ๶፡๋҅অጱ੪ฎᐦڊय़ Webpack
32. // app.css @import "./components/todos.less"; @import "./components/todos-header.less"; @import "./components/check-box.less"; @import "./components/todo-footer.less"; @import "./components/todo-list.less"; @import "./components/todo.less"; ಩ಅํ CSS ෈կጭᦕࣁӞӻ෈կӾ҅᭗ᬦᶼ॒ቘ࢏ݳଚ̶
33. import Template from './template.dot' import './style.less' export default Backbone.View.extend({ tagName: 'span', className: 'Checkbox', ... ਖ਼ٌ՜෈կ᮷ Import ک index.js ӾѺ
34. 祭出 Webpack！ browserify/grunt/gulp 其实也能做 Webpack ӧฎ JavaScript module Loader ᘒฎ Component module loader ଉአጱൊկՕᕨ
35. <template> <span class="Checkbox"> </span> </template> <script> export default { … } </script> <style lang="less"> .Checkbox { … } </style> Checkbox.vue
36. Tips: 开发运行时和线上运行时分开！
37. 第四式： 用路由把组件链成应用
38. ӷ੶ MVC ጱᕮ຅̶
39. 常用的 Route 模块 Backbone Backbone.Router Ember.js App.Router Angular ng-router/ui-router angular 2 router React react-router Vue vue-router
40. app.get('/app/*', function (req, res, next) { res.render('app') }) ԅԧ᭿عଫአࣁֵአᬦᑕӾڬෛ҅๐ۓᒒᦏಅํᧆᶭᶎಥ᫹ጱ᪠ኧ҅᮷ᬬࢧ APP ᶭ
41. 业务复杂时，按照业务切 分为多个独立的单页应用
42. 第五式： 聪明、准确的数据层 ᧗࿢ ᖨਂ ݶྍ ᥶ݎ
43. 鉴于时间关系，以及目前已 有的方案并没有达到理想的 要求，我们下次再聊吧！
44. Q&A