4月份講座&聚會 總筆記

這一兩個月以來真是風風雨雨....，主要是對於自己的能力還是有些許的沮喪，還好不論再怎麼忙碌並不會影響參加聚會:P，而且偶爾多多接觸人群也是好事，消除我一點宅氣xd

我打算將這個月參加的活動做個總結，因為後來發現能寫的也不多，那就湊成一篇吧!

按照參加的倒序分別是:

• 04/29  BizLePro [BizLePro] 主題講座 #4：給資訊人的智財導論
• 04/27  2013iT邦幫忙交流聚第2回
• 04/13  JavaScript x Yahoo Group

---

BizLePro 講座 #4：給資訊人的智財導論


是說我對智慧財產權涉略很少(可以說是非常)，難得有時間可以遇到這樣的活動
有興趣的朋友可以趕快把握下一次的聚會
[BizLePro] 漫談小聚 #5 @20130513
時間: 19:00   地點名稱: Changee (台北市大同區南京西路 18 巷 8 之 2 號 3 樓)

以下是我凌亂&粗淺的筆記:
程式碼有著作權嗎? 有
怎樣算是有侵權的可能性? 造描，拿別人的東西來改
著作權以前是需要經過註冊的，現在不用註冊
著作權擁有50年的保護(人的話是以那個人掛掉之後開始算，法人的話是以出版之後開始算起)
專利權是為了保護一份技術，需要申請(申請皆需要一段時間)
專利權分三種(發明,新型,設計)
程式碼在申請專利上尚有爭議
以美國來說的話傾向讓軟體有專利
商標權(需要註冊)，所謂的商標包含形狀,文字,立體商標
營業秘密雖然不用登記(且無期限)，但不登記的話較無保障
 ex:可樂的祕方

Public Domain -->完全沒有任何權利在上面，有點類似公共財的感覺

另外可參考:
網路自由與法律
零時政府
我後來在知識+找到一篇文章可以參考:關於程式碼的著作權

我還有很多問題等著慢慢被解開，下次再來補充吧! 另外感謝強哥解答我的問題 and
也很感謝ant提供這個網址讓我了解更多關於設計師vs著作財產權的事情
設計師不可不知的著作權概念

---

iT邦幫忙交流聚第2回

(為甚麼整場只有拍自己的識別證呢?! 對不起.....我也不知道><)
這是我第一次參加it邦幫忙的聚會，主要是希望聽到php big data的相關知識
it邦的網站也有分享出那天兩位主講者的ppt，
可以去看看
【更新:食夢黑貘簡報上傳】2013iT邦幫忙交流聚第2回照片集

不過很酷的是，去了之後我發現我誤解了php big data的意思了，雖然我聽完了仍然沒有很理解，可能是我的功力太低(淚奔)，不過這是一個很難得的經驗啦，畢竟我覺得工作上要遇到有這樣需要處理big data的開發環境的機率應該是不高

---

JavaScript x Yahoo Group

這一場是由JavaScript.tw , JSDC , Yahoo Taiwan共同主辦的活動，
主講的內容主要是TonyQ介紹websocket 跟socket IO以及 ant帶來的前端資安分享
最後還有聊到一些backbone.js的內容，以及大致參觀YahooTaiwan的環境
我對於yahoo那個提供早中餐的地方實在非常感興趣，可能是第一次看到有公司可以這樣吧(超級興奮地拍下他們的菜單)
雖然那天天氣不怎麼好，現場還有空位，不過收穫很多，主要是難得有機會參觀yahoo的工作環境，另外ant會在今年JSDC對前端資安有更深入的介紹。

在apache關閉X-Powered-By的方法

為了在Response Headers避免暴露了自己的php版本
像這樣:

所以要去做些設定
首先打開php.ini
將expose_php=On

改成expose_php=Off


然後重啟apache，完成!

有興趣可以參考:

关闭 php X-Powered-By 信息

Apache Tips & Tricks: Hide PHP Version (X-Powered-By)

解決https不能存取http CDN url 的問題

恩...這問題挺有趣的，答案簡單可是我第一次遇到的時候還真是挺傻眼
個人猜測這是跟網站的同源策略有關係。

比方說我有個https的網站，要存取http://開頭的某些javascript的CDN

像這樣的話:
https://myweb.com 去存取
http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js

就會出錯(奇怪的是只發生在Chrome)。
而且console.log還會吐錯誤給我看，
不過我現在有點忘記那個錯誤訊息是什麼了
類似:
The page at https  ..........   ran insecure content from http

解法就是把原本的
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
改成
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
把http:整個刪掉，(雖然這樣寫看起來很詭異，但是是完全有效的src的值，不要刻意去指定cdn的url是http還是https)，屆時不論是用http或是https去存去這個cdn，就不會出現剛才的問題。

• 參考:
  HTTP and HTTPS with Google CDN

HTML的全域屬性

所謂的屬性就是attritube，我這裡所寫的就是我們在HTML標籤所下的屬性 :
像是...
<標籤名  屬性="值">Content</標籤名>
example : <a title="Hello!">你好!</a>
這裡的title就是一個全域屬性，可以用在所有的元素上面。

全域屬性的表:

屬性名稱	值	功能	備註:
accesskey	單 [A-Z] 字元	存取該元素的鍵盤快捷鍵	過去html4不支援，html5回復支援
class	類別的名稱	對該元素取個類別名
contenteditable	布林值(true/false)	該元素是否可以被使用者編輯
contextmenu	menu_id	定義元素的上下文功能表	主流瀏覽器大部分都沒有支援
dir	ltr/rtl	文字顯示的方向	很少聽到有人在用這個..
draggable	true/false/auto	是否可以對該元素進行拖曳
hidden	hidden	對該元素隱藏
id	id名	對該元素指定一個id名	他是唯一值，一個檔案不能有重複的id
lang	自然語言程式碼	存取該元素的鍵盤快捷鍵	lang="en"
spellcheck	布林值(true/false)	是否對該元素進行語法(拚寫)檢查	html5新增的屬性，大部分瀏覽器已經支援
style	該元素的樣式	定義該元素的行內樣式	style="font-sizt:12px;color:#fff"
tabindex	數字	用tab鍵可依序指到該元素的位子
title	文字/內容	該元素的相關描述

當然還有另外一種屬性叫做事件屬性(事件屬性也有全域的，常見的onClick就是)，主要是用來觸發執行javascript之類的屬性。

不過要注意一件事情是，雖然事件的全域屬性可以用在所有的元素，
但他不一定會作用。

(且基於安全性的問題，
若非罕見情況或是逼不得已的情況，我已經盡量不用事件屬性了(<--僅供參考))

git 的 cherry-pick

不是很確定文，只是隨手紀錄一下.... ，
可以忽略此篇文章，若有寫錯煩請糾正我一下，感謝!

cherry-pick 的定義是:Apply the changes introduced by some existing commits 

或者說...只合併指定的 commit
可以選擇某一個branch(分支)的一個或好幾個commit(s)操作
或者說...針對已經存在的commit 進行再次提交

講白話一點就是比方說我想要merge某些特定的commits從一個branch到另外一的branch，會這樣做是因為我希望只有某些特定修改的項目要merge，而剩下的就留在原來的地方，可能是我不需要上那個功能等等。


假設有兩個branch(staging, development)
在沒有做任何修改是這樣 :


A-B  staging
       \
        C-D-E-F-G  development


然後我新增了兩次 commit
分別是 H 跟  I 到 development 環境，就會變成:

A-B  staging
       \
        C-D-E-F-G-H-I  development


接下來可能因為專案的需要我必須只上H,跟I到staging的branch
其他的部分留在development，這時可以用cherry-pick
cherry是櫻桃的意思
這時候的櫻桃就是指 H,跟 I 了 ，把他pick起來送到staging這個branch

首先先切換到staging:
$ git checkout staging

然後cherry-pick H,跟I :
$ git cherry-pick H
$ git cherry-pick I
如果當初推的順序是先H再I，cherry-pick也要照這個順序
cherry-pick的行為有點類似merge

然後就可以push了

如果是使用cherry-pick 後不用 commit
因為對cherry -pick來說就是一次新的commit

但若使用cherry-pick -n(一次合併好幾個) 後要重新 commit



希望我有機會實作到這個部分再來寫更多的筆記。

參考:
Git 初學筆記- 指令操作教學| Tsung's Blog
Cherry-Picking specific commits from another branch

[讀後記] 之 Web前端黑客技術揭秘

這本書其實在上個月已購入，蠻新的一本書，他其實在今年2013一月份就已出版。
然後我一直拖到這幾天才開始看，我覺得還蠻不錯的，因為我平常也很少接觸這樣的議題，也沒有真的被駭過還是怎麼樣的，不過我覺得這本書的確有提到很多前端人員應該知道的一些防範基礎以及網站的弱點，算是值得一看。

關於網站的安全，以前很多人給我的觀念是後端有檔就好，但我當了前端才知道其實前後端都要檔，而且是必定要做的事情(心虛地寫出這句話xd)，不過這本很少提及後端的部分，著重在前端的黑客部分。
如果想知道其他的，可參考OWASP的TOP10
(不過top10只是指出前10名，10名以後的也要關注一下)

這本書所介紹的範圍指 client端，或者瀏覽器端
主要的議題有:

• XSS(Cross site scripting)
• CSRF (Cross  site request forgery) [forgery:偽造的意思] aka 跨站請求偽造
• CSS的風險
• cookie的安全
• 當然也有介紹flash的部分像是crossdomain.xml的部分等等，不過我不懂Flash所以這部份我就沒翻到多少
• 介面操作挾持
• 如何發掘漏洞
• 如何利用漏洞
• HTML5的安全
• 一些案例的介紹

關於這些內容我有機會遇到的話再一一介紹，順帶一提，這本書有介紹的一些案例現在可能也很難發生了(像CSS的expression...)，主要是一些歷史案例，或者是現在的瀏覽器也已經幫忙濾掉了。


後記 :

• 前端有很多的漏洞其實都圍繞在同一件事情那就是瀏覽器的同源策略，下一篇可能會寫這個:P。
• 網路的世界都是Data，有存在server端的, client端的, 正在傳輸的(JSON..),等等，在資料的傳輸之間每個環節都有可能有安全上的漏洞。
• 然後我覺得最可怕的 clickjacking 跟 tapjacking(觸屏挾持) 以及 HTML5 的安全 xd
• XSS雖然名為跨站腳本，這裡的'跨站'指的是突破瀏覽器的同源策略，但重點並不在跨站，而應該是在腳本(script)
• 我覺得要當黑客也不是一件簡單的事....，中間有一段我其實沒看懂，可能資歷不夠深吧Orz..

參考:
Web2.0 Hacking
https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project
http://vdisk.weibo.com/u/1652595727

自己常用git指令與流程

(這篇是我自己習慣的流程，可忽略我這篇><)

雖然網路上有太多太多介紹git使用方式的文章，

可是如果沒有擁有環境可以實做，看再多我還是會忘記。

所以我目前先打算記下工作上有再用的指令...

其實我平常在用的指令也是不多，因為我也很少動到那些code，

只是說我也不敢為了做git的練習大玩公司的環境，

這樣簡直是拿工作開玩笑，所以找個保險的方法，因此記錄了這一篇，

當然我也可以不必大費周章做這件事情，只是說有時候一點無心的小動作，

很有可能造成很大的bug或是整個團隊的困擾，因此我要盡量避免這種情況。

note:

說到這個我突然想到不久前我用git練習切換branch把自己整個local給搞砸了..

這件事情讓我學到git是個非常大的學問...，有時候自己在github開一個小專案練習用根本沒遇過這種問題。

目前的心法是:

改了東西而且還有在自己的local存檔過，就不要再拉code(git pull)，
除非還原(checkout)或丟到垃圾桶，
所以開始作業之前先把code都下來到自己的local(git pull && git pull)，

如果先改code再拉code，很容易發生衝突，
一但有衝突就很麻煩，表示我又要爬文，或是麻煩資深前輩了..

改了一個檔想要還原怎麼還原?

git checkout /home/路徑... /myfile.副檔名

(簡單來說就是 git checkout 檔案路徑)

  

改好一個檔之後先在自己的Local做測試，若測試無問題後，準備要push之前先用:

git status

確認是否修改了哪些檔案

# On branch 你目前的branch名稱

# Changes not staged for commit:
#   (use "git add <file>..." to update what will be committed)
#   (use "git checkout -- <file>..." to discard changes in working directory)
#
#       modified:   你修改過的檔名

#no changes added to commit (use "git add" and/or "git commit -a")

另外想知道修改了一個檔案的哪些地方可再下

git diff

可得知修改前與修改後的差異

確認無誤後要將檔案add以及commit到git:

git commit -am '這裡寫comment內容，可以是修了哪個bug..,..,優化什麼地方之類的comment'

(-am是比較方便的寫法，因為要add再commit，所以直接寫-am)

接下來就是git push 

git push後面的設定依專案需要，看個人。

等更新後，自行測試後回報git log, commit號碼(應該是SHA吧!?)給上層或是回覆在Bug tracking system之類的。

HTML5 的 autofocus

HTML5新增了input的新屬性叫做autofocus
所謂autofocus就是當頁面載入後會自動取得該處為焦點，
也就是滑鼠的游標會預設先停在那。

      

your id:<input type="text" name="id" autofocus>

your pw: <input type="password" name="pwd"><br>

-----------------這-是-華-麗-的-分-隔-線----------------------------

your id:<input type="text" name="id"><br>

your pw: <input type="password" name="pwd"><br>

廣義的來說，就是這樣。
不過，有些瀏覽器的限制，大部分瀏覽器已經支援，除IE9(含IE9)以下。

[補充@20130416]
如果同一個頁面同時有好幾個autofocus
像這樣:
<textarea autofocus="autofocus"></textarea>
<textarea autofocus="autofocus"></textarea>
<textarea autofocus="autofocus"></textarea>
<textarea autofocus="autofocus"></textarea>
<textarea autofocus="autofocus"></textarea>
<textarea autofocus="autofocus"></textarea>
Chrome, Opera, Safari會以最後一個為作為焦點。
Firefox會以第一個做為焦點。





可寫javascript來確定是否該瀏覽器有支援autofocus:

<script type="text/javascript">

   console.log("autofocus" in document.createElement("input"));

</script>

檢驗input是否有autofocus屬性，回傳值是bool，你會得到true或是false值，
像在chrome就可以得到true:

在IE9就會得到false:

在沒有autofocus的情況下如何模擬autofocus的效果?
可以考慮試試看使用javascript的focus去對焦在不支援autofocus的瀏覽器的時候

<script type="text/javascript">

 if( !("autofocus" in document.createElement("input")) ){

   document.getElementById("your_id").focus();

   console.log("i catch you!");

 }

</script>

補充:
http://modernizr.com/ 
http://zh.wikipedia.org/wiki/Modernizr
Modernizr也能幫我們做確認html5是否有支援那些屬性的功能


參考:
http://www.w3schools.com/tags/att_input_autofocus.asp
http://diveintohtml5.info/forms.html

[jcrop+php]學習怎麼做crop image的功能

//這其實是我一個多月前的練習了，突然想到我要記錄一下...

前言:
其實只是我好奇怎麼處理讓別人上傳圖片並且可以讓使用者作切圖的功能，那麼通常這樣的功能，搜尋的關鍵字叫做crop photo或是crop images，為甚麼叫做crop?，藉google翻譯一下才知道crop也有修剪的意思。

然後我就上網找到了一套還不錯的javascript切圖的framework叫做Jcrop
http://deepliquid.com/projects/Jcrop/demos.php
有興趣可以玩玩看，他提供的功能還蠻多的

其實它的原理是，記錄你所裁下的圖片範圍的x,y座標，以及寬(w)跟高(h)


也就是說，當你選了你要裁的區域之後，按下 "我要裁"之類的動作
他會送出一個form，其中就包含4個hidden的value，這四個hidden的value，就是紀錄x,y,w,h的值。


我拿了這套來用，但是要結合一點的PHP
(其實也沒有多複雜，就只是補足我想要的功能而已)
官方的範例雖然有提供到結合php的範例，但是比較不是我想要的部分
因為我還想要把圖存到database去

setTimeout() 與 setInterval() 的差別是?

這是常見的前端考題，但我不常用這兩個xd，說實在的以前我也不懂...

setTimeout()跟setInterval()都是window的method
可參考: w3school

你可以這樣寫:
setTimeout( )
setInterval( )

等於這樣寫:
window.setTimeout( )
window.setInterval( )

Timeout 跟 Interval 的英文解釋分別是:
Timeout  ==>逾時
Interval  ==>間隔


setTimeout() 與 setInterval() 都是指經過某一段時間後，做哪些事
兩者差別在於setTimeout()只做一次；setInterval()會不停的的調用函數。

var start_to_say_hi = setTimeout("console.log('h1')",3000); 
//五秒後跟使用者說hi

var start_to_say_hi = setInterval("console.log('h1')",1000); 
//每秒說一次hi在console.log

window.clearInterval(start_to_say_hi); 
//停止說hi

Homework:

可研究Groupon台灣酷朋網站的倒數計時的JavaScript寫法。

為什麼Firefox不能執行window.close?

情況描述，一個close me的按鈕在其他瀏覽器皆可close，但在ff不行
為什麼在firefox的window.close不能作用呢?

根據我精密的調查下...
我發現firefox是有條件的不能window.close
也許很多人會跟我一樣爬過很多文，網路上一堆文章說可以就是可以阿(握拳)
不過我試過真的不行...
後來我去找developer.mozilla.org關於window.close的描述
仔細看了，裡面就這麼寫著 :

This method is only allowed to be called for windows that were opened by a script using the   window.open method. 

---引用自 "https://developer.mozilla.org/en-US/docs/DOM/window.close" 

在正常情況下，firefox只能讓是被window.open打開的頁面執行window.close
而不是經由window.open打開的頁面是不能被window.close的

有個方法可以讓他不是藉由window.open也能執行window.close
不過要自己設定
首先打開firefox
在網址輸入about:config

輸入好之後按下enter

會看到非常多的設定值....

搜尋allow_scripts_to_close_windows，將設定值由false改成true




這個步驟的確有點麻煩，但是沒有辦法...

如果說自家產品因為這個功能無法在所有瀏覽器有一致行為

那麼只好跟寫spec的人好好溝通了xd

是說... 這種需求好像也不常見...

可參考以下網址:
http://www.jb51.net/article/17714.htm
https://developer.mozilla.org/en-US/docs/DOM/window.close
http://support.mozilla.org/zh-TW/questions/858332

JavaScript取得URL的QueryString

上週都再看node.js..
讓我打岔一下，這一篇我來寫一下我的javascript練習
(其實是因為看了網路上的前端面試考題xd)
題目類似是如何使用JavaScript取得URL的QueryString

如果有使用server side語言的話
比方說PHP可以用$_GET去接URL的querystring.
什麼是querystring可參考http://en.wikipedia.org/wiki/Query_string
就我所知有些人會用jQuery的param去抓(我沒用過xd)

不過我比較好奇怎麼用純javascript去抓，
當我們再抓取URL Querystring的時候
我上網去找找有什麼方法
參考: window.location  http://www.w3schools.com/jsref/obj_location.asp

我的做法是使用location.search (用window.location.pathname也可以)
看你是要抓完整的URL還是從?號開始抓

當我的網址是

http://yiyingloveart.blogspot.tw/?name=win&sex=girl&age=24&job=frontend

location.search的結果是(型別是string):

"?name=win&sex=girl&age=24&job=frontend"

var uri = location.search;
var obj = { };  //Object
function parsrQueryString(uri){
  var string_array = [ ];//Array
  var string_array = uri.replace('?','').split("&");
  //replace('?','')拿掉第一個問號
   

  for(var i =0;i<string_array.length; i++){
      //console.log(string_array[i].split('=')[0]);     //[0]取得key name
     //console.log(string_array[i].split('=')[1]);     //[1]取得value
     obj[ string_array[i].split('=')[0] ] = string_array[i].split('=')[1] || '';
     //沒有值就預設為''
  }
}
parsrQueryString(uri);

console.log(obj.name);
console.log(obj.sex);
console.log(obj.age);
console.log(obj.job);

此時得到的log結果是:

win (console.log(obj.name)的結果)
girl (console.log(obj.sex)的結果)
24 (console.log(obj.age)的結果)
frontend (console.log(obj.job)的結果)


我之所以可以這樣log出來是因為我已經知道我的url有哪些key了
但有時候我們並不知道有哪些key，如何得知Obj有哪些key?
可參考 http://stackoverflow.com/questions/3068534/getting-javascript-object-key-list
var keys = [];
for(var k in obj) keys.push(k);
console.log("total " + keys.length + " keys: " + keys);

另外網路上也有一篇寫得很好
JavaScript regex trick: Parse a query string into an object
不過這篇寫得蠻深的，正規用的很猛.

node.js 之學習 Express 的筆記(2)-安裝express

之前的文章:

• node.js 之學習 Express 的筆記(1) 
• node.js 一個package的檔案結構
• Node.js初探

暨昨天稍微了解一下Express是什麼之後，接下來要手動開始做了(怎麼有點像勞作課...)，說明一下這個簡單的步驟好了，首先我們要在我的電腦，安裝express，要怎麼安裝?，"從無到有"一定需要一些安裝的步驟，先確認有安裝node.js跟npm，接下來就可以開始下指令了!
[以下僅供參考...，若有疏漏或筆誤敬請指正，感謝!]

可考慮看官方文件: http://expressjs.com/guide.html


首先建立一個要放express的目錄
我的話呢 ...我是在我的家目錄
我的家目錄就是win，建立一個myhomepage(隨意取名的..)的資料夾

win@ubuntu:~$ pwd

/home/win

win@ubuntu:~$ mkdir myhomepage

myhomepage的資料夾用來放安裝好的express framework

node.js 之學習 Express 的筆記(1)

之前的文章:

• node.js 一個package的檔案結構
• Node.js初探

今天才連續假期的第二天，難免有些無聊，不找點事情做簡直是浪費了，原本想說要寫個文章參加it幫幫忙的忍之道，但是想不出個我可以寫得嚇嚇叫的主題，畢竟資歷還淺Orz。

所以我花了一天的時間研究 node.js 的 Express，其實，說到最原始的初衷，就是我很喜歡做網頁，然後我想知道怎麼用node.js跑一個網站而已，初衷雖然簡單，但做起來層層卡關，然後一直Debug就是挺累的，可是也可以得到很多經驗值，我想我已稍微體會到了node.js的難處所在，很想說的清楚但又怕說不清楚，node.js牽涉到太多關於網站開發的基本觀念了，我也一直再持續理解中。

好，開始吧...
事情的淵源就從npm說起吧，大家都知道npm其實就是Node Packaged Modules的縮寫，簡單來說是node.js的套件管理工具，在這上面呢，有很多第三方的套件，你可以找你需要的，然後install到自己的電腦，套件們零零總總，但是會想要安裝套件就是為了方便開發，或是維護吧?! (我認為是這樣)。

恩，好...，所以呢，既然這麼多人都已經把輪子造好了，放到npm上面了，我們可以直接拿來用，(當然npm也有提供你可以發佈自己的framework)，我接下來要講的就是Express跟npm是甚麼關係，Express其實就是npm裡面的其中一個被他人發佈的package，他算是一個framework(因為他的網站也寫說 "web application framework for node" )，很多人都用它做web，因為Express就是屬於拿來開發web的Framework。

我猜測Express之所以好用是因為他已經幫你把所需要的東西都架構好了，若安裝過express而且看過express的檔案目錄，會發現它的架構其實還沒有說很難理解的程度，包含routes設定，以及template的選擇(可選擇 jade 還是 ejs ), view file放哪裡,  靜態文件要放哪裡等等，我在想如果不用Express而是自己開發，或許不會像他提供的這麼完整。

最後如果安裝完express之後會發現它建立一個app.js檔，直接運行node app.js就可以在localhost:3000看到express架好之後的預設頁面，但之後可能就要自己摸索了...

接下來的一篇我打算紀錄一下安裝express的步驟。
因為現在兩個系統ubuntu跟windows在那裏切換來切換去的實在有點麻煩，我打算把實作跟筆記分開寫，如果有造成各位的不便還敬請包涵，我還菜，請別跟我計較><。


參考:

http://expressjs.com/
https://npmjs.orhttps://npmjs.org/package/express
http://dreamerslab.com/blog/tw/

node.js 一個package的檔案結構

node.js 的 package 其實就是個資料夾，裡面包覆各式各樣的檔案，他主要是以 commonJS來實現 node.js 的 package 的機制，所以說...，一個package底下的檔案，也要符合(如果可以當然是嚴格遵守) commonJs。
 
比方我的 package 叫做 you_package_folder，這是一個資料夾
一個 package 的目錄如果要符合commonJS(點選連結搜尋'Package Directory Layout')的規則的話，應該要有以下的檔案目錄或是檔案。
 

簡單說明一下這個目錄

• package.json 是必要項目，身為一個package，不能沒有這個檔案，至於這個json檔案裏頭是什麼，格式就是json，以下介紹一些key :

• main (必要):
  main的值就是當這個package被require的時候，甚麼檔案會被load進來，路徑通常是寫相對路徑。
  
• name:
  這個package的名子，這個值是唯一值，他可以是英文小寫或者有. 或者有 '-' 或者有 '_'，就是不能有空白。
  以我這個例子來說，name就會是這樣
  {
     "name": "Your_package_folder",
  }
  
• version :
  版本號，格式是字串，而且要符合 Semantic Versioning 的規範。
  
• maintainers :
  這個package的maintainer的資料，格式如下:
  每位maintainer的資料是一組hash(雜湊)，有三種key，name(必填), email跟web是optional.，寫起來的範例如下:
  
  "maintainers" : [  {
     "name": "Win Wu",
     "email": "yiyingwu.1990[at]gmail.com",
    " web": "http://yiyingloveart.blogspot.com",
  } ]
  
• description : 可以放一段針對你的package的描述
  
• licenses : 授權方式，每一組licenses是個hash，有type(licenses的名稱)跟url(licenses的url)兩個key。
  
  範例:
  "licenses": [
     {
         "type": "GPLv2",
         "url": "http://demo_url/licenses/gpl.html",
     }
  ]
  
• bugs : 值可以是email或是網址，提供一個給他人提交bug的位子
• ....還有很多，請參考commonJS的wiki

• doc資料夾，用來放一些文件
• test資料夾，用來放一些unit test的檔案
• bin資料夾，二進位的檔案必須放在這個資料夾
• lib資料夾，用來放javascript的檔案

參考:
http://wiki.commonjs.org/wiki/Packages/1.1
http://wiki.commonjs.org/wiki/Packages-Background

node.js 小練習

各位，獻醜了，可以忽略我這篇xd

這是一個很簡單的練習，計算BMI值
建立一個countBMI.js的檔案，再建立一個getBMI.js的檔案去require countBMI這個檔案。
在countBMI做exports的動作，然後在getBMI做require，執行後log出結果。



檔名 : countBMI.js

//this is an module to help you count your BMI
var yourname,
h=0,
w=0,
result;

exports.setName = function(username, userh, userw){
 yourname = username;
 h = userh;
 w = userw;
};

exports.countBMI = function(){
 result = Math.floor(w/(h*h));
 console.log("Hello "+yourname+"! \nYour BMI is "+result);
};

檔名 : getBMI.js

var myBMI = require('./countBMI');

myBMI.setName('WinWu',1.55, 50);
myBMI.countBMI();