PHP & JavaScript & CSS Coding style
Transcript of 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?