iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 29
8
Modern Web

Go!從無到打造最佳行動網站系列 第 29

Day29 我有一個寫糞扣的好朋友

gf

本篇文章請抱持著看故事的心情

前情提要

事情是這樣子的,我有一個好朋友,他在學校讀的非本科系,進入到職場以後,也沒有積極的態度在提升自己的能力,反而靠著自身的一些工作經驗來吹捧他的能力...
當然到了工作環境,在能力上的不足很快地就被同事及主管發現,當每個禮拜交工作報告的時候,總是會說一些好像很厲害的工作項目,像是站上基礎程式研究套件底層結構研究程式架構重構...等等,一般不了結情況的人大概會覺得他好像很厲害,但偷偷觀察的時候,會發現其實上班都在摸魚。
漸漸的在公司,及人際關係中產生很大的影響,身為好朋友的我,不免給他些建議,但態度上依舊沒有改變。

第一章 物件導向

我們暫時稱這個好朋友叫做小貓,小貓其實不懂什麼是物件導向於是說了一段話

物件導向我懂,就是Object,像是在程式中的元件一樣...!@$#%^ (以下廢話省略)

摁...沒錯這一段是廢話,因為他不知道什麼是物件導向。

在物件導向的開發裡面,我們會將用Class定義一個物件的型態、方法、回傳...等等的資訊,像是一個人皮膚有白、黃、黑...等等的屬性,會說話(function),簡單來說小貓這個人就是一個物件。
當我們要取用物件裡面的東西(property),像是前面提到的皮膚顏色,我們不應該直接地去拿皮膚顏色的property,應該是要透過getter來取得

在PHP裡面的Class來舉例

<?php

class People {
	function __construct($name, $skinColor){
	    $this->name = $name;
		$this->skinColor = $skinColor;
	}

	public function getSkinColor(){
		return $this->skinColor;
	}
}

$john = new People("John", "Black");

# 不是好的方式
echo $john->skinColor;

# Good
echo $john->getSkinColor();
?>

在開發物件導向的軟體工程,注重每個物件的關係,遵循著SOLID。在實際開發上面,還是有些落差,可能因為主管不喜歡,或是工程師能力不夠等等,但透過物件我們也能夠清楚的了解資料結構或是func,何嘗不好呢?

第二章 命名方式

小貓開發程式的時候,在命名變數功能甚至是寫文件,往往直接請Google大神的翻譯,這並不會有什麼問題,但他會原封不動的複製貼上,這個習慣相當的糟糕,不僅文字結構不通順,對閱讀的人往往也造成困擾,其實最糟糕的不是這個...

小貓的程式碼

let basket = [];

function isBasketEmpty(){
	return basket.length;
}

isBasketEmpty();

不知道各位發現了沒有,通常我們在取方法名稱時使用isXXX會回傳true或false但小貓的頭腦,覺得這樣可能更方便吧!這已經很糟糕了,其實小貓還有更糟糕的命名,讓我們繼續看下去

小貓的程式碼

const No = false;

function isSexFemale(animal){
	if (animal.sex === 'female'){
		return 'Yes';
	} else {
		return No;
	}
}

const Dog = {'name':'Peter','sex':'male','phone':'0912345678'};
console.log(isSexFemale(Dog));	// false

這其實已經不關命名的問題了,每次當主管在幫小貓看程式碼的時候,總是覺得很頭痛,老是常常寫這種糞扣,蠻浪費生命的。小貓每次寫完都覺得很有成就感,總是喜歡與大家分享,不管是貼在Facebook上還是傳給看不懂程式的媽媽,這就是小貓的日常。

第三章 糞扣與Clean扣的差別

小貓真的太常寫出一些讓人驚訝的程式碼,讓整個開發團隊常常被他問的亂七八糟,於是大家整理了常常見到的糞扣原則,如果你寫的程式有符合下面其中一項,自己歸類為糞扣吧!

無意義的命名

  • 命名規則方式混用
  • 名稱與內容無關
  • 模糊的命名

冗長的不堪的程式

  • 複雜的巢狀結構
  • 可以簡單寫的程式,但寫得很複雜
  • func 分散在不同的檔案裡
  • 改A壞B的程式碼

別人不會看的註解

  • 冗詞贅字特別多
  • 文義不通的
  • 看不動的語言
  • 沒有重點的

沒有測試的程式

  • 沒有考慮到安全問題
  • 沒有考慮到效能問題
  • 本身程式碼就寫錯
  • 少了分號
  • 未依照團隊開發規範
  • 遺漏的部分

最終章

小貓常常寫糞扣,表現得很厲害的模樣,雖然故事的結局沒有幸福快樂的樣子,但他有一顆樂觀的心,打不走的勇氣,小貓是大家的好朋友,工作能力好不好我們沒有立場去評論,但是與朋友同事家人之間的相處更貴為重要,如果你在一間沒有很好的公司,但是你有一群很要好的同事與好友一起工作,儘管你覺得公司福利再不好你也願意留下來。

我相信不管是面對工作,或是面對同事,相處的「態度」決定了彼此之間相處的感覺,謙卑的學習態度、不說大話、不誇大自己的才能,這才更能夠與同事們親近。
保持衛生更是重要,髒亂不衛生的習慣,也會影響到周遭的人,進而讓同事產生畏懼感,穿著整齊,不讓衣服散發出個人獨特的味道(體味、汗臭味...等),在密閉的空間中,更要注意這些細節,別讓別人發現,你沒洗衣服阿!

最後,小貓依然是大家的好朋友...

Clean Code JS
Code Reivew Tips


上一篇
Day28 替網站穿上黑絲襪 使用Vuetify
下一篇
Day30 廢文日 練蕭威總結
系列文
Go!從無到打造最佳行動網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
1
張少齊
iT邦新手 5 級 ‧ 2018-01-08 10:57:04

ha 這篇很有趣XD

謝謝支持
/images/emoticon/emoticon12.gif

1
rutentest
iT邦新手 5 級 ‧ 2018-01-08 12:48:48

漏了一個


if(isMatch !== false) {
    //...
}

還有

counst string1;
cost string2;
cunst string3
0
Vision
iT邦新手 5 級 ‧ 2018-01-09 18:15:18

這種糞扣等級也蠻有趣的阿~
讓我回想到自己學生時期的糞扣到極致的時期
想起來後覺得就是天書阿哈哈哈XD

看更多先前的回應...收起先前的回應...

其實他寫的成是真的有夠糞,變數還在取test1test2這東西在專案上

Vision iT邦新手 5 級 ‧ 2018-01-10 17:33:38 檢舉

這名稱...我懂你的心情呵QAQ 感覺技術債很嚴重...
你們code review應該很辛苦吧!
建議叫他去看看這篇 :
clean-code-javascript
應該很有幫助~

還有一個問題是他英文爛報所以才用Google Translate
因為這樣所以看不會看一些非中文的網站

Vision iT邦新手 5 級 ‧ 2018-01-11 21:17:32 檢舉

沒關西~ 底下也是有中文翻譯的版本XD
我自己是看到一半,看不下去才跑去看翻譯的
有心想改進就很好了XD~

/images/emoticon/emoticon06.gif

0
虎虎
iT邦研究生 5 級 ‧ 2018-01-11 21:33:38

上面的問題我全部都犯過… Q"Q
我以前更扯,有早上寫完,下午完全不知道自己在寫什麼…
全部刪掉全寫哭哭…
我才不會承認我就是糞扣寫太多才改走資安的… ((掩面

PS.哦哦哦!!!真相好看!!!!!

早上寫完下午刪除是一個重構的概念嗎xDD

虎虎 iT邦研究生 5 級 ‧ 2018-01-14 22:03:08 檢舉

不是,就是一個失智的概念 Q"Q

我要留言

立即登入留言