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