php & javascript & css coding style

102
PHP & CSS & JavaScript Coding Style Bo-Yi Wu 2016.04.21 1

Upload: bo-yi-wu

Post on 16-Apr-2017

4.671 views

Category:

Software


3 download

TRANSCRIPT

Page 1: PHP & JavaScript & CSS Coding style

1

PHP & CSS & JavaScriptCoding Style

Bo-Yi Wu2016.04.21

Page 3: PHP & JavaScript & CSS Coding style

3

為什麼要制定 Coding Style

Page 4: PHP & JavaScript & CSS Coding style

4

Pull Request

Pull Request

Pull Request

Code Review

Page 5: PHP & JavaScript & CSS Coding style

5

如果沒有制定程式語言 Style

• 一份程式碼看起來就像是好幾個人寫的• Code Reviewer 非常辛苦• 程式碼維護困難• 新人加入團隊,上手時間增加

Page 6: PHP & JavaScript & CSS Coding style

6

最終目的讓專案程式碼看起來像是一個人寫的

Page 7: PHP & JavaScript & CSS Coding style

7

聊聊後端 PHP Coding Style

Page 8: PHP & JavaScript & CSS Coding style

8

PHP-FIG

Page 9: PHP & JavaScript & CSS Coding style

9

請詳細閱讀並且遵守PSR-1: Basic Coding Standard

PSR-2: Coding Style Guide

Page 10: PHP & JavaScript & CSS Coding style

10

PHP 只能使用 <?php 或 <?=

Page 11: PHP & JavaScript & CSS Coding style

11

檔案格式請務必存成UTF-8 without BOMUnix Lf (linefeed)

Page 12: PHP & JavaScript & CSS Coding style

12

檔案內容最後保留留一行空白

Page 13: PHP & JavaScript & CSS Coding style

13

檔案內容最後不需要有?>

Page 14: PHP & JavaScript & CSS Coding style

14

Class Name 務必宣告為“ StudlyCaps”

Page 15: PHP & JavaScript & CSS Coding style

15

5.3 之後請使用 Namespace

Page 16: PHP & JavaScript & CSS Coding style

16

5.2.x 或更早版本請遵守底下命名

Page 17: PHP & JavaScript & CSS Coding style

17

Constant 變數必須為大寫 + 底線命名const VERSION = '1.0';const DATE_APPROVED = '2012-06-01';

Page 18: PHP & JavaScript & CSS Coding style

18

Method必須宣告為 camelCase()public function helloWorld() { }

Page 19: PHP & JavaScript & CSS Coding style

19

縮排原則請使用 Space 而不是 tab請勿 space + tab 混用

Page 20: PHP & JavaScript & CSS Coding style

20

PHP 保留字請務必使用小寫像是 true, false, null … 等

http://goo.gl/bJH8H

Page 21: PHP & JavaScript & CSS Coding style

21

if, elseif, else

Page 22: PHP & JavaScript & CSS Coding style

22

switch, case

Page 23: PHP & JavaScript & CSS Coding style

23

Page 24: PHP & JavaScript & CSS Coding style

24

While, do while注意括號及 space 位置

Page 25: PHP & JavaScript & CSS Coding style

25

<?phpwhile ($expr) { // structure body}

Page 26: PHP & JavaScript & CSS Coding style

26

<?phpdo { // structure body;} while ($expr);

Page 27: PHP & JavaScript & CSS Coding style

27

for, foreach, try catch注意括號及 space 位置

Page 28: PHP & JavaScript & CSS Coding style

28

<?phpfor ($i = 0; $i < 10; $i++) { // for body}

Page 29: PHP & JavaScript & CSS Coding style

29

<?phpforeach ($data as $k => $v) { // foreach body}

Page 30: PHP & JavaScript & CSS Coding style

30

<?phptry { // try body} catch (FirstExceptionType $e) { // catch body} catch (OtherExceptionType $e) { // catch body}

Page 31: PHP & JavaScript & CSS Coding style

31

這麼多 Style Rule 有沒有工具可以幫忙檢查 ?

Page 32: PHP & JavaScript & CSS Coding style

32

EditorConfighttp://editorconfig.org/解決編輯器 config 設定

Tab vs space

Page 33: PHP & JavaScript & CSS Coding style

33

Page 34: PHP & JavaScript & CSS Coding style

34

搭配 sublime text editorhttps://github.com/sindresorhus/editorconfig-

sublime

Page 35: PHP & JavaScript & CSS Coding style

35

PHP Coding Standards Fixerhttp://cs.sensiolabs.org/

The PSR-1 and PSR-2 Coding Standardsfixer for your code

Page 36: PHP & JavaScript & CSS Coding style

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

Page 37: PHP & JavaScript & CSS Coding style

37

Mac 安裝 brew install homebrew/php/php-cs-

fixer

Page 38: PHP & JavaScript & CSS Coding style

38

Page 39: PHP & JavaScript & CSS Coding style

39

搭配 PHP CodeSniffer 外掛https://github.com/benmatselby/sublime-phpcs

Page 40: PHP & JavaScript & CSS Coding style

40

Page 41: PHP & JavaScript & CSS Coding style

41

Demo sublime text

Page 42: PHP & JavaScript & CSS Coding style

42

Code Review

無 style 檢查

style 檢查

style 檢查

有人會忘記裝 tool 來檢查 coding style

Page 43: PHP & JavaScript & CSS Coding style

43

The PHP Coding Style ServiceBecause coding standards matter

https://styleci.io

Page 44: PHP & JavaScript & CSS Coding style

44

Page 45: PHP & JavaScript & CSS Coding style

45

Code Review

無 style 檢查

style 檢查

style 檢查

style 檢查錯誤

Page 46: PHP & JavaScript & CSS Coding style

46

Documenting your Code

務必務必寫註解或文件http://www.phpdoc.org/docs/latest/index.html

Page 47: PHP & JavaScript & CSS Coding style

47

Page 48: PHP & JavaScript & CSS Coding style

48

新成員請先閱讀底下文件PHP The Right Way

http://www.phptherightway.com/

Page 49: PHP & JavaScript & CSS Coding style

49

來聊聊前端JavaScript && CSS

Coding Style

Page 50: PHP & JavaScript & CSS Coding style

50

Sass/Scss/LessCSS 預處理器

Page 51: PHP & JavaScript & CSS Coding style

51

SASSSCSSLESS

Compiler CSS

Page 52: PHP & JavaScript & CSS Coding style

52

缺陷• 需要經過 compiler 才能變成 CSS 檔案• 要學習 sass/scss/less 新語法• 專案成長後,需要 compiler 時間越久• 無法支援 css lint 檢查語法

Page 53: PHP & JavaScript & CSS Coding style

53

postcssa tool for transforming styles with JS plugins.

https://github.com/postcss/postcss

Page 54: PHP & JavaScript & CSS Coding style

54

CSS

Parser

Plugin 1

Plugin 2

New CSS

Postcss

Page 55: PHP & JavaScript & CSS Coding style

55

我們只需要挑專案用到的 Plugin 即可

Page 56: PHP & JavaScript & CSS Coding style

56

Plugin• Use Future CSS, Today– autoprefixer, postcss-cssnext

• Better CSS Readability– precss, postcss-sorting

• Images and Fonts– postcss-sprites

Page 57: PHP & JavaScript & CSS Coding style

57

Usagegulp.task('css', () => { let postcss = require('gulp-postcss'); return gulp.src('src/*.css') .pipe( postcss([ plugin1, plugin2 ]) ) .pipe( gulp.desc('build/') );});

Page 58: PHP & JavaScript & CSS Coding style

58

Plugin

postcss.plugin('my-plugin', function () { return function (css) { doSomething(css); };});

Page 59: PHP & JavaScript & CSS Coding style

59

Like Sass/LessPostCSS

.block { &_title { font-size: 1.2em; }}

CSS

.block_title { font-size: 1.2em;}

Page 60: PHP & JavaScript & CSS Coding style

60

FallbacksPostCSS

.foo { opacity: 0.8;}

CSS

.foo { opacity: 0.8; filter: alpha(opacity=80)\9;}

Page 61: PHP & JavaScript & CSS Coding style

61

MinifyPostCSS

.foo { border: none;}

CSS

.foo {border:0}

Page 62: PHP & JavaScript & CSS Coding style

62

Plugin for CSS lint.foo { margin-top: 10px; margin: 0 auto;}

foo.css:3:5: margin overrides margin-top.

Page 63: PHP & JavaScript & CSS Coding style

63

PostCSS vs GulpPostCSS

• Parse– Transform– Fallbacks– Minify

Gulp• Parse– Transform

• Parse– Fallbacks

• Parse– Minify

Page 64: PHP & JavaScript & CSS Coding style

64

使用方式Gulp + Less + PostCSS

Page 65: PHP & JavaScript & CSS Coding style

65

return gulp.src('src/*.less') .pipe( less() ) .pipe( postcss([]) ) .pipe( gulp.desc('build/') );

Page 66: PHP & JavaScript & CSS Coding style

66

postcss([])沒任何 plugin

input === output

Page 67: PHP & JavaScript & CSS Coding style

67

postcss([ require('postcss-cssnext'), require('postcss-csssimple'), require('autoprefixer')])

Page 68: PHP & JavaScript & CSS Coding style

68

StylelintA mighty, modern CSS linter

https://github.com/stylelint/stylelint

Page 69: PHP & JavaScript & CSS Coding style

69

CSS Style Lintgulp.task('lint:css', function () { return gulp.src('src/*.less') .pipe( postcss([ require('stylelint'), require('postcss-reporter'), ], { syntax: require('postcss-less') }) );});

Page 70: PHP & JavaScript & CSS Coding style

70

Less

Less Lint

cssnext

autoprefixer

Minify

CSS

PostCSS Process

Page 71: PHP & JavaScript & CSS Coding style

71

延伸閱讀A mostly reasonable approach to CSS and Sass.

https://github.com/airbnb/css

Page 72: PHP & JavaScript & CSS Coding style

72

來看看 JavaScript Style推薦 airbna/javascript

https://github.com/airbnb/javascript

Page 73: PHP & JavaScript & CSS Coding style

73

你是寫 ES5https://github.com/airbnb/javascript/tree/master/es5

Page 74: PHP & JavaScript & CSS Coding style

74

寫 object// badvar item = new Object();

// goodvar item = {};

Page 75: PHP & JavaScript & CSS Coding style

75

寫 Array// badvar item = new Array();

// goodvar item = [];

Page 76: PHP & JavaScript & CSS Coding style

76

使用單引號var foo = ‘bar’

Page 77: PHP & JavaScript & CSS Coding style

77

Propertiesvar luke = { jedi: true, age: 28};

// badvar isJedi = luke['jedi'];

// goodvar isJedi = luke.jedi;

Page 78: PHP & JavaScript & CSS Coding style

78

動態取 Propertiesfunction getProp(prop) { return luke[prop];}

var isJedi = getProp('jedi');

Page 79: PHP & JavaScript & CSS Coding style

79

變數請宣告在最前面不管是 global 或在 function 內

Page 80: PHP & JavaScript & CSS Coding style

80

Use === and !== over == and !=

Page 81: PHP & JavaScript & CSS Coding style

81

你是寫 ES6https://github.com/airbnb/javascript

Page 82: PHP & JavaScript & CSS Coding style

82

建議從現在開始寫 ES6如果你想踏入 React 世界

https://babeljs.io/Babel transforms your JavaScript

Page 83: PHP & JavaScript & CSS Coding style

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 ]

Page 84: PHP & JavaScript & CSS Coding style

84

不需要再寫 var self = this

Page 85: PHP & JavaScript & CSS Coding style

85

function Person() { this.age = 0;

setInterval(function growUp() { this.age++; }, 1000);}

var p = new Person();

Page 86: PHP & JavaScript & CSS Coding style

86

function Person() { var self = this; self.age = 0;

setInterval(function growUp() { self.age++; }, 1000);}

var p = new Person();

Page 87: PHP & JavaScript & CSS Coding style

87

function Person(){ this.age = 0;

setInterval(() => { this.age++; }, 1000);}

var p = new Person();

Page 88: PHP & JavaScript & CSS Coding style

88

Block Scoping Functionsvar 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); // 5console.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); // 5console.log(b); // 1

Page 89: PHP & JavaScript & CSS Coding style

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}.`);

Page 90: PHP & JavaScript & CSS Coding style

90

Computed Property Names

var prefix = 'foo';var test= { [prefix + 'bar']: 'hello', [prefix + 'baz']: 'world'};

console.log(test['foobar']);// -> helloconsole.log(test['foobaz']);// -> world

var prefix = 'foo';var test= {};

test[prefix + 'bar'] = 'hello';test[prefix + 'baz'] = 'world';

console.log(test['foobar']);// -> helloconsole.log(test['foobaz']);// -> world

Page 91: PHP & JavaScript & CSS Coding style

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;

Page 92: PHP & JavaScript & CSS Coding style

92

Classesfunction 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!'; }}

Page 93: PHP & JavaScript & CSS Coding style

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));

Page 94: PHP & JavaScript & CSS Coding style

94

Property Method Assignment

var object = { value: 42, toString: function toString() { return this.value; }};

var test= { value: 42, toString() { return this.value; }};

Page 95: PHP & JavaScript & CSS Coding style

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);

Page 96: PHP & JavaScript & CSS Coding style

96

Spread Operatorfunction 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;

Page 97: PHP & JavaScript & CSS Coding style

97

ES6 讓開發者少寫很多程式碼

Page 98: PHP & JavaScript & CSS Coding style

98

ESLintThe pluggable linting utility for JavaScript and JSX

http://eslint.org/

Page 99: PHP & JavaScript & CSS Coding style

99

{ "extends": "airbnb"}

Page 100: PHP & JavaScript & CSS Coding style

100

babel-eslintESLint using Babel as the parser.

https://github.com/babel/babel-eslint

Page 101: PHP & JavaScript & CSS Coding style

101

.eslintrc{ "parser": "babel-eslint", "rules": { "strict": 0 }}

$ eslint your-files-here

Page 102: PHP & JavaScript & CSS Coding style

102

Any Question?