Eclipse install nodejs plugin

讓Eclipse 支援 nodejs

需先安裝好nodeJs

IDE：  

• Eclipse
• Enide Studio 2014 

Step1.  open  nodeJs command line  (打開nodeJs 命令操作環境)

•  Click   Start  (開始 ) ->  Node.js Folder  -> Node.js Command Prompt
  

Step2. install Nodeclipse  CLI  

• npm install -g nodeclipse
  

Step3. install Express 

• npm install -g express-generator
• npm install -g express
  

Step4. install nodeclipse (安裝nodeclipse)

• select Help > Install New Software
• Enter the update site URL into the Work with text box： (在work with中輸入)
  http://www.nodeclipse.org/updates/
• click add  (點擊 add)

PS.
  1.可加裝javascript 編輯器方便javascript開發

• JSDT   or  VJET      (可使用Eclipse中的 Help > Eclipse Marketplace...  安裝)
  在搜尋欄中可輸入JSDT

參考文件：

• http://www.nodeclipse.org/updates/    (nodeclipse)
• http://www.oschina.net/project/tag/148?lang=28    (各種javascript plugin)

Node.js Install less & less-middleware

Node.js 現今已有非常方便的windows安裝版，可方便於測試與學習。

為了讓Node.js支援LESS，需要安裝less-middleware。

Step1.  download  node.js

• 官網  http://nodejs.org/
• windows   choose  ->  Windows Installer (.msi)      64bit  or 32 bit

Step2.  open  nodeJs command line

•  Click   Start  (開始 ) ->  Node.js Folder  -> Node.js Command Prompt

Step3. install npm install less    (提供less編譯功能)

• npm install less   

PS.編譯指令  lessc  [來源檔案.less]   [目地檔案.css]

Step4.  install  less-middleware   (提供自動編譯處理)

• npm install less-middleware

參考資料 (Reference)：

• https://www.npmjs.org/package/less
• https://www.npmjs.org/package/less-middleware
• http://stackoverflow.com/questions/11219637/using-less-with-node-js
• http://channel9.msdn.com/Series/Visual-Studio-Online-Monaco/Using-LESS-in-nodejs
• http://www.hongkiat.com/blog/less-auto-compile/
• http://www.hksilicon.com/kb/articles/480014/LESS-MiddlewareNodejsLESS
• http://lesscss.org/

Node學習參考資料 (Node Reference)：

• http://nodejs.org/api/
• http://nqdeng.github.io/7-days-nodejs/#3.2.4

sublime-text install package control

Sublime text 可以藉由安裝Plugin來加強這個編輯器的功能，為了方便安裝與管理擴充套件，我們我先安裝一個叫  package control的套件。

How do install sublime text package control

Step1. Open Console. (開啟控制台)

• Ctrl + ` OR   View -> Show Console 

Step2. paste the appropriate Python code. (貼上python 程式碼)

sublime text 3:
import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

sublime text 2:
import urllib2,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')


記得按下 Enter。


安裝完畢後，即可使用Ctrl + Shift + P 來安裝套件。

參考資料 (Reference)：

• https://sublime.wbond.net/installation#st2    (English)
• http://docs.sublimetext.tw/package-and-plugin/   (中文)

套件：

• Emmet (增加編輯速度)
  http://docs.emmet.io/                      (Emmet)
  http://docs.emmet.io/cheat-sheet/    (使用說明)
• ConvertToUTF8 (解決sublime-text對UTF8支援)
  https://github.com/seanliang/ConvertToUTF8

JavaScript toString( ) and valueOf

• toString() , valueOf()  與 Java 、 ActionScript3 基本原理相似。

(function(){

    Object.prototype.valueOf = function(){
        return 6;
    }
    
    Object.prototype.toString = function(){
        return 10;
    }
    var val2 = {
        x:2 ,
        y:3
    };    
    
    alert(val2);     //10
    alert(val2 * 2 );//12 遇到算數運算會隱含調用Object的valueOf()
    
    var val3 = {
        x:5 ,
        y:6 ,
        toString:function( ){
            return '龍虎門';
        }
   };
   
   alert(val3);     //龍虎門 調用toString()
         
 })();    

JavaScript Array native function

   Array Native   forEach

    var data = [3,5,6,9,7,8,4,3,2,1];
    var str = '';
    //array native forEach
    data.forEach(function(e){
          str += e + ',';
    });
    //print 3,5,6,9,7,8,4,3,2,1
    console.log(str.substring(0,str.length-1));
 

Array Native Sort 
    var data = [3,5,6,9,7,8,4,3,2,1];
    var str = '';    
    data.sort();    
    data.forEach(function(e){
          str += e + ',';
    }); 
    //1,2,3,3,4,5,6,7,8,9 
    console.log(str.substring(0,str.length-1)); 


Customer  Compare Funciton
    var data = [3,5,6,9,7,8,4,3,2,1];
    var str = '';    
    function compare(a,b){        
        return b - a;        
    }              
    data.sort(compare); 
    data.forEach(function(e){
          str += e + ',';
    });
    //9,8,7,6,5,4,3,3,2,1     
    console.log(str.substring(0,str.length-1)); 

輸出三角形

想輸出

*
**
***
**
*

一開始學程式時會寫雙迴圈
後來利用%可以只單迴圈

最近有靈感這麼用

function draw(count){
   var bag='',i=0,e=count;       
   while(i < e || count-- > 0){
     var out = (i++ < e) ?  (bag+='*')  :   bag.substring(0,count);            
           console.log(out);
   }      
}        
draw(3);
 

常用術語收集

Memory Leak  記憶體漏洩