現任職於 D-Link 網路服務處在 D-Link 現有的網路設備上建立服務強化與使用者的關聯性

Size: px

Start display at page:

Download "現任職於 D-Link 網路服務處在 D-Link 現有的網路設備上建立服務強化與使用者的關聯性"

铭然卞
5 years ago
Views:

1 Front-End Modular & Automated Development / josephj / / josephj6802@gmail.com

2 現任職於 D-Link 網路服務處在 D-Link 現有的網路設備上建立服務強化與使用者的關聯性

3 D-Link...

4 D-Link

5 Software Engineer Project Manager Service Engineer Front-end Engineer System Architect QA Engineer DBA QA Tester System Analyzer Operation Engineer (Y!) 没够

6 HTML/CSS/JavaScript (

7 Flash CMS Azure Firmware I18N/L10N PEAR Apache Module Hardware Android Win32 Objective C Embedded System Server-side Script

8 HTML, CSS, JavaScript Nicholas Zakas, Make it difficult to make mistakes.

9 DIV Modular Development

10 Modular Development DIV HTML CSS JS

12 _photo_filter.php _photo_filter.css _photo_filter.js _photo_view.php _photo_view.css _photo_view.js _photo_list.php _photo_list.css _photo_list.js

13 HTML - HTML

14 CSS - CSS

15 JavaScript - JavaScript

16 HTML include CSS : ID Selector CSS Request JavaScript : CSS

17 Request

18 static.php - JS/CSS key - is_top: </head> </body> is_noscript, media

19 static.php 把模組的 CSS/JS 檔用一致的方法設定但 Request 量過多勢必會造成性能問題 10 個 CSS Request 19 個 JavaScript Request

20 Mini Tool 缩 CSS/JS

21 Mini XML $DEV_ROOT Apache VirtualHost Mini module CSS JS module module exclude index CSS/JS

22 经过 Mini 压缩 /mini?module=<mini module>&type=<css js>

23 内 &nominify

24 static.php 29 Request

25 Request Orz...

26 static.php Request 2 Request

27 Request

28 Mini CSS/ JavaScript

29 Mini Statif File Web Server PHP CSS/JS Deploy s * md5_file() stamping 减 CDN

31 JavaScript JavaScript Function Object mod A mod B mod C

32 需填滿列表需清空列表使用者送出表單取得資料顯示第一張圖片列表完畢顯示點選的圖片使用者點選照片顯示下一張圖選取框往下張移動使用者點選大圖

33 window.mods[ photo-show ] = { showphoto : function (src) { } }... window.mods[ photo-list ] = { init : function () {... $( img ).on( click, function(e) { window.mods[ photo-show ].showphoto(this.src); } 没 } Bug!

34 ( ) ( ) ( )

35 ( ) ( )

36 Nicholas Zakas

37 JavaScript

38 Loose Coupling 组组

39 Broadcast & Listen Hub

41 Module - Static Instance Instance Instance Module Module Module Static Static Static

42 Core - Core Static Static Class Module Module Module Static Static Static (register) (start, stop) (match)

43 Sandbox - API Core Static match(caller, object) Sandbox Sandbox Sandbox Instance Instance Instance listen( need-love ) broadcast( need-love, object) Module Module Module Static Static Static Instance Core Sandbox Sandbox broadcast listen

$_photo_list.js Y.Core.register("photo-list", { }); // init: function (api) { // api.listen("photo-filter-submit"); api.listen("photo-filter-response"); this.$

44 _photo_list.js Y.Core.register("photo-list", { }); // init: function (api) { // api.listen("photo-filter-submit"); api.listen("photo-filter-response"); this.api = api; }, // ContentReady onviewload: function () { }, // Core this.api.broadcast("photo-list-rendered", img.src); // onmessage: function (eventtype, callername, data) { }, switch (eventtype) { } case "photo-filter-response" : this._updateui() // break; case "photo-filter-submit" : break; // _updateui: function (data) { } // 诉 Core ` this.api.broadcast("photo-list-rendered", img.src);

45 Demo

46 Keep Going Extension API Method Language Extension

47 YUI Intl JS

48 3. api.listen( lang-change ) api.gettrans(<key>) ; 1. api.setlang( jp-jp ); 2. api.broadcast( lang-change ) YUI Intl JS

49 PHP JavaScript Language Key <?php $trans = get_trans( lang-show_title, Focus Figure, tokens);?> <script> var trans = api.gettrans( lang-show_message, Nice to see you, I am Tofu flower girl, tokens); </script>

50 API ( ) Unit Test

51 Make it difficult to make mistakes

我第一個來的老子說了算 j h p e j os http://www.flickr.

53 我第一個來的老子說了算 j h p e j os by Ivan Mlinaric

54 Guidelines

56 As a team

58 ...

59 煙囪上架屋頂這就是疊床架屋 Winchester House

60 Guideline Guideline

61 Guideline...

62 Code Review 没...

63 0 1

64 0 1

65 1. Commit/Push Commit/Push Hook JSLint : JavaScript Good Parts PHP CodeSniffer : Code Convention PHP JavaScript CSS OptImg Commit!

66 JSLint document.write can be form of eval

67 .rule { attr: value; } PHP CodeSniffer (a.k.a phpcs)

68 Visual Designer PSD F2E PNG8 Web Fireworks Alpha Transparency ( )

69 Photoshop PSD

70 Firework

71 没

72 OptImg: 46% Image Optimization

73 给 Commit

74 1. Commit/Push Guideline

75 2. Packaging... F2E Maintenance Performance Security (Packaging)

76 2. Packaging JS/CSS miii_index_d38eba51136ed0bf6d b393b.css CSS Static CSS CSS DataURI/MHTML CSS Sprites

77 JS/CSS pkg_create Mini pkg_deploy pkg_create & pkg_deploy

78 2. Packaging CSS/JS CSS Sprites DataURI/MHTML

80 Review Performance

81 JavaScript Module GitHub Online Demo Demo GitHub

82 Finally...

83 Thank You so muchiii Any Questions?

<4D6963726F736F667420506F776572506F696E74202D20C8EDBCFEBCDCB9B9CAA6D1D0D0DEBDB2D7F92E707074>

<4D6963726F736F667420506F776572506F696E74202D20C8EDBCFEBCDCB9B9CAA6D1D0D0DEBDB2D7F92E707074> 软件架构师研修讲座胡协刚软件架构师 UML/RUP 专家 szjinco@public.szptt.net.cn 中国软件架构师网东软培训中心小故事 : 七人分粥当前软件团队的开发现状和面临的问题软件项目的特点解决之道 : 从瀑布模型到迭代模型解决项

現任職於 D-Link 網路服務處 在 D-Link 現有的網路設備上 建立服務 強化與使用者的關聯性

現任職於 D-Link 網路服務處在 D-Link 現有的網路設備上建立服務強化與使用者的關聯性