php & javascript & css coding style

1

PHP & CSS & JavaScriptCoding Style

Bo-Yi Wu2016.04.21

2

關於我http://blog.wu-boy.com/https://github.com/appleboyhttps://www.facebook.com/appleboy46

3

為什麼要制定 Coding Style

4

Pull Request

Pull Request

Pull Request

Code Review

5

如果沒有制定程式語言 Style

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

6

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

7

聊聊後端 PHP Coding Style

8

PHP-FIG

9

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

PSR-2: Coding Style Guide

10

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

11

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

12

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

13

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

14

Class Name 務必宣告為“ StudlyCaps”

15

5.3 之後請使用 Namespace

16

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

17

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

18

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

19

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

20

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

http://goo.gl/bJH8H

21

if, elseif, else

22

switch, case

23

24

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

25

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

26

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

27

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

28

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

29

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

30

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

31

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

32

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

Tab vs space

33

34

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

sublime

35

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

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

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

37

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

fixer

38

39

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

40

41

Demo sublime text

42

Code Review

無 style 檢查

style 檢查

style 檢查

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

43

The PHP Coding Style ServiceBecause coding standards matter

https://styleci.io

44

45

Code Review

無 style 檢查

style 檢查

style 檢查

style 檢查錯誤

46

Documenting your Code

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

47

48

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

http://www.phptherightway.com/

49

來聊聊前端JavaScript && CSS

Coding Style

50

Sass/Scss/LessCSS 預處理器

51

SASSSCSSLESS

Compiler CSS

52

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

53

postcssa tool for transforming styles with JS plugins.

https://github.com/postcss/postcss

54

CSS

Parser

Plugin 1

Plugin 2

New CSS

Postcss

55

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

56

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

• Better CSS Readability– precss, postcss-sorting

• Images and Fonts– postcss-sprites

57

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

58

Plugin

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

59

Like Sass/LessPostCSS

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

CSS

.block_title { font-size: 1.2em;}

60

FallbacksPostCSS

.foo { opacity: 0.8;}

CSS

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

61

MinifyPostCSS

.foo { border: none;}

CSS

.foo {border:0}

62

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

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

63

PostCSS vs GulpPostCSS

• Parse– Transform– Fallbacks– Minify

Gulp• Parse– Transform

• Parse– Fallbacks

• Parse– Minify

64

使用方式Gulp + Less + PostCSS

65

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

66

postcss([])沒任何 plugin

input === output

67

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

68

StylelintA mighty, modern CSS linter

https://github.com/stylelint/stylelint

69

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

70

Less

Less Lint

cssnext

autoprefixer

Minify

CSS

PostCSS Process

71

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

https://github.com/airbnb/css

72

來看看 JavaScript Style推薦 airbna/javascript

https://github.com/airbnb/javascript

73

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

74

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

// goodvar item = {};

75

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

// goodvar item = [];

76

使用單引號var foo = ‘bar’

77

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

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

// goodvar isJedi = luke.jedi;

78

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

var isJedi = getProp('jedi');

79

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

80

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

81

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

82

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

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

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 ]

84

不需要再寫 var self = this

85

function Person() { this.age = 0;

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

var p = new Person();

86

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

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

var p = new Person();

87

function Person(){ this.age = 0;

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

var p = new Person();

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

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

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

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;

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

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

94

Property Method Assignment

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

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

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

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;

97

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

98

ESLintThe pluggable linting utility for JavaScript and JSX

http://eslint.org/

99

{ "extends": "airbnb"}

100

babel-eslintESLint using Babel as the parser.

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

101

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

$ eslint your-files-here

102

Any Question?