Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

PHP & JavaScript & CSS Coding style

7,118 views

Published on

來聊聊 PHP & JavaScript & CSS Coding style 讓專案看起來像是一個人寫的

Published in: Software

PHP & JavaScript & CSS Coding style

  1. 1. PHP & CSS & JavaScript Coding Style Bo-Yi Wu 2016.04.21 1
  2. 2. 關於我 http://blog.wu-boy.com/ https://github.com/appleboy https://www.facebook.com/appleboy46 2
  3. 3. 為什麼要制定 Coding Style 3
  4. 4. Pull Request Pull Request Pull Request Code Review 4
  5. 5. 如果沒有制定程式語言 Style • 一份程式碼看起來就像是好幾個人寫的 • Code Reviewer 非常辛苦 • 程式碼維護困難 • 新人加入團隊,上手時間增加 5
  6. 6. 最終目的讓專案程式碼 看起來像是一個人寫的 6
  7. 7. 聊聊後端 PHP Coding Style 7
  8. 8. PHP-FIG 8
  9. 9. 請詳細閱讀並且遵守 PSR-1: Basic Coding Standard PSR-2: Coding Style Guide 9
  10. 10. PHP 只能使用 <?php 或 <?= 10
  11. 11. 檔案格式請務必存成 UTF-8 without BOM Unix Lf (linefeed) 11
  12. 12. 檔案內容最後保留留一行空白 12
  13. 13. 檔案內容最後不需要有 ?> 13
  14. 14. Class Name 務必宣告為 “StudlyCaps” 14
  15. 15. 5.3 之後請使用 Namespace 15
  16. 16. 5.2.x 或更早版本請遵守底下命名 16
  17. 17. Constant 變數必須為大寫 + 底線命名 const VERSION = '1.0'; const DATE_APPROVED = '2012-06-01'; 17
  18. 18. Method 必須宣告為 camelCase() public function helloWorld() { } 18
  19. 19. 縮排原則 請使用 Space 而不是 tab 請勿 space + tab 混用 19
  20. 20. PHP 保留字請務必使用小寫 像是 true, false, null … 等 http://goo.gl/bJH8H 20
  21. 21. if, elseif, else 21
  22. 22. switch, case 22
  23. 23. 23
  24. 24. While, do while 注意括號及 space 位置 24
  25. 25. <?php while ($expr) { // structure body } 25
  26. 26. <?php do { // structure body; } while ($expr); 26
  27. 27. for, foreach, try catch 注意括號及 space 位置 27
  28. 28. <?php for ($i = 0; $i < 10; $i++) { // for body } 28
  29. 29. <?php foreach ($data as $k => $v) { // foreach body } 29
  30. 30. <?php try { // try body } catch (FirstExceptionType $e) { // catch body } catch (OtherExceptionType $e) { // catch body } 30
  31. 31. 這麼多 Style Rule 有沒 有工具可以幫忙檢查 ? 31
  32. 32. EditorConfig http://editorconfig.org/ 解決編輯器 config 設定 Tab vs space 32
  33. 33. 33
  34. 34. 搭配 sublime text editor https://github.com/sindresorhus/editorconfig-sublime 34
  35. 35. PHP Coding Standards Fixer http://cs.sensiolabs.org/ The PSR-1 and PSR-2 Coding Standards fixer for your code 35
  36. 36. 安裝方式 • wget http://get.sensiolabs.org/php-cs- fixer.phar -O php-cs-fixer • $ sudo chmod a+x php-cs-fixer • $ sudo mv php-cs-fixer /usr/local/bin/php- cs-fixer 36
  37. 37. Mac 安裝 brew install homebrew/php/php-cs-fixer 37
  38. 38. 38
  39. 39. 搭配 PHP CodeSniffer 外掛 https://github.com/benmatselby/sublime-phpcs 39
  40. 40. 40
  41. 41. Demo sublime text 41
  42. 42. Code Review 無 style 檢 查 style 檢查 style 檢查 有人會忘記裝 tool 來檢查 coding style42
  43. 43. The PHP Coding Style Service Because coding standards matter https://styleci.io 43
  44. 44. 44
  45. 45. Code Review 無 style 檢 查 style 檢查 style 檢查 style 檢查錯誤 45
  46. 46. Documenting your Code 務必務必寫註解或文件 http://www.phpdoc.org/docs/latest/index.html 46
  47. 47. 47
  48. 48. 新成員請先閱讀底下文件 PHP The Right Way http://www.phptherightway.com/ 48
  49. 49. 來聊聊前端 JavaScript && CSS Coding Style 49
  50. 50. Sass/Scss/Less CSS 預處理器 50
  51. 51. SASS SCSS LESS Compiler CSS 51
  52. 52. 缺陷 • 需要經過 compiler 才能變成 CSS 檔案 • 要學習 sass/scss/less 新語法 • 專案成長後,需要 compiler 時間越久 • 無法支援 css lint 檢查語法 52
  53. 53. postcss a tool for transforming styles with JS plugins. https://github.com/postcss/postcss 53
  54. 54. CSS Parser Plugin 1 Plugin 2 New CSS Postcss 54
  55. 55. 我們只需要挑專案 用到的 Plugin 即可 55
  56. 56. Plugin • Use Future CSS, Today – autoprefixer, postcss-cssnext • Better CSS Readability – precss, postcss-sorting • Images and Fonts – postcss-sprites 56
  57. 57. Usage gulp.task('css', () => { let postcss = require('gulp-postcss'); return gulp.src('src/*.css') .pipe( postcss([ plugin1, plugin2 ]) ) .pipe( gulp.desc('build/') ); }); 57
  58. 58. Plugin postcss.plugin('my-plugin', function () { return function (css) { doSomething(css); }; }); 58
  59. 59. Like Sass/Less PostCSS .block { &_title { font-size: 1.2em; } } CSS .block_title { font-size: 1.2em; } 59
  60. 60. Fallbacks PostCSS .foo { opacity: 0.8; } CSS .foo { opacity: 0.8; filter: alpha(opacity=80)9; } 60
  61. 61. Minify PostCSS .foo { border: none; } CSS .foo {border:0} 61
  62. 62. Plugin for CSS lint .foo { margin-top: 10px; margin: 0 auto; } foo.css:3:5: margin overrides margin-top. 62
  63. 63. PostCSS vs Gulp PostCSS • Parse – Transform – Fallbacks – Minify Gulp • Parse – Transform • Parse – Fallbacks • Parse – Minify 63
  64. 64. 使用方式 Gulp + Less + PostCSS 64
  65. 65. return gulp.src('src/*.less') .pipe( less() ) .pipe( postcss([]) ) .pipe( gulp.desc('build/') ); 65
  66. 66. postcss([]) 沒任何 plugin input === output 66
  67. 67. postcss([ require('postcss-cssnext'), require('postcss-csssimple'), require('autoprefixer') ]) 67
  68. 68. Stylelint A mighty, modern CSS linter https://github.com/stylelint/stylelint 68
  69. 69. CSS Style Lint gulp.task('lint:css', function () { return gulp.src('src/*.less') .pipe( postcss([ require('stylelint'), require('postcss-reporter'), ], { syntax: require('postcss-less') }) ); }); 69
  70. 70. Less Less Lint cssnext autoprefixer Minify CSS PostCSS Process 70
  71. 71. 延伸閱讀 A mostly reasonable approach to CSS and Sass. https://github.com/airbnb/css 71
  72. 72. 來看看 JavaScript Style 推薦 airbna/javascript https://github.com/airbnb/javascript 72
  73. 73. 你是寫 ES5 https://github.com/airbnb/javascript/tree/master/es5 73
  74. 74. 寫 object // bad var item = new Object(); // good var item = {}; 74
  75. 75. 寫 Array // bad var item = new Array(); // good var item = []; 75
  76. 76. 使用單引號 var foo = ‘bar’ 76
  77. 77. Properties var luke = { jedi: true, age: 28 }; // bad var isJedi = luke['jedi']; // good var isJedi = luke.jedi; 77
  78. 78. 動態取 Properties function getProp(prop) { return luke[prop]; } var isJedi = getProp('jedi'); 78
  79. 79. 變數請宣告在最前面 不管是 global 或在 function 內 79
  80. 80. Use === and !== over == and != 80
  81. 81. 你是寫 ES6 https://github.com/airbnb/javascript 81
  82. 82. 建議從現在開始寫 ES6 如果你想踏入 React 世界 https://babeljs.io/ Babel transforms your JavaScript 82
  83. 83. Arrow Functions [1, 2, 3].map(function(n) { return n * 2; }, this); // -> [ 2, 4, 6 ] [1, 2, 3].map(n => n * 2); // -> [ 2, 4, 6 ] 83
  84. 84. 不需要再寫 var self = this 84
  85. 85. function Person() { this.age = 0; setInterval(function growUp() { this.age++; }, 1000); } var p = new Person(); 85
  86. 86. function Person() { var self = this; self.age = 0; setInterval(function growUp() { self.age++; }, 1000); } var p = new Person(); 86
  87. 87. function Person(){ this.age = 0; setInterval(() => { this.age++; }, 1000); } var p = new Person(); 87
  88. 88. Block Scoping Functions var a = 5; var b = 10; if (a === 5) { let a = 4; var b = 1; console.log(a); // 4 console.log(b); // 1 } console.log(a); // 5 console.log(b); // 1 var a = 5; var b = 10; if (a === 5) { (function () { var a = 4; b = 1; console.log(a); // 4 console.log(b); // 1 })(); } console.log(a); // 5 console.log(b); // 1 88
  89. 89. Template var user = { name: 'Caitlin Potter' }; console.log('Thanks for V8, ' + user.name + '.'); var user = {name: 'Caitlin Potter'}; console.log(`Thanks for V8, ${user.name}.`); 89
  90. 90. Computed Property Names var prefix = 'foo'; var test= { [prefix + 'bar']: 'hello', [prefix + 'baz']: 'world' }; console.log(test['foobar']); // -> hello console.log(test['foobaz']); // -> world var prefix = 'foo'; var test= {}; test[prefix + 'bar'] = 'hello'; test[prefix + 'baz'] = 'world'; console.log(test['foobar']); // -> hello console.log(test['foobaz']); // -> world 90
  91. 91. Destructuring Assignment function f(x, y) { if (y === undefined) { y = 12; } return x + y; } f(3) === 15; function f(x, y = 12) { return x + y; } f(3) === 15; 91
  92. 92. Classes function Hello(name) { this.name = name; } Hello.prototype.hello = function hello() { return 'Hello ' + this.name; }; Hello.sayHelloAll = function () { return 'Hello everyone!'; }; class Hello { constructor(name) { this.name = name; } hello() { return 'Hello ' + this.name; } static sayHelloAll() { return 'Hello everyone!'; } } 92
  93. 93. Module var math = require('lib/math'); console.log('2π = ' + math.sum(math.pi, math.pi)); import math from 'lib/math'; console.log('2π = ' + math.sum(math.pi, math.pi)); 93
  94. 94. Property Method Assignment var object = { value: 42, toString: function toString() { return this.value; } }; var test= { value: 42, toString() { return this.value; } }; 94
  95. 95. Rest Parameters function f(x) { var y = []; y.push.apply(y, arguments) && y.shift(); // y is an Array return x * y.length; } function f(x, ...y) { // y is an Array return x * y.length; } console.log(f(3, 'hello', true) === 6); 95
  96. 96. Spread Operator function f(x, y, z) { return x + y + z; } f.apply(null, [1, 2, 3]) === 6; function f(x, y, z) { return x + y + z; } f(...[1,2,3]) === 6; 96
  97. 97. ES6 讓開發者少寫很多程式碼 97
  98. 98. ESLint The pluggable linting utility for JavaScript and JSX http://eslint.org/ 98
  99. 99. { "extends": "airbnb" } 99
  100. 100. babel-eslint ESLint using Babel as the parser. https://github.com/babel/babel-eslint 100
  101. 101. .eslintrc { "parser": "babel-eslint", "rules": { "strict": 0 } } $ eslint your-files-here 101
  102. 102. Any Question? 102

×