almost 4 years ago

底下範例程式可於 Chrome 的 console 視窗游標內貼上執行

1 console.log levels

console.log 在瀏覽器中是大多數人最常用的 command
但除了 log 外還有其他 warning levels

console.debug('This is the regular log output');  
console.info('Informational message');  
console.warn('Warning! It might be dangerous');  
console.error('Error with some tracing');  

2.輸出樣式

你也可以控制輸出的 console 樣式

var styles = 'background: #f00; color: #fff; padding: 0 100px; font-size: 20px;';  
var message = "Can't miss that out";
console.log("%c" + message, styles);

3. console.count

有時我們會需要知道某些函數被執行了幾次
console API 提供了 count 函數來方便統計次數

function reloadData() {  
    console.count('Data reloaded');
    // ...function body omitted...
}

4. console.time

Console API也提供了 time 函數來讓我們測量兩個點之間所執行程序的時間差

console.time('for loop');  
var a = [1,2,3,4,5,6,7,8,9,10];  
var sumA = 0;  
for (var i=0; i<a.length; i++) {  
  sumA += a[i];
}
console.log('A: ' + sumA);  
console.timeEnd('for loop');

console.time('reduce');  
var b = [1,2,3,4,5,6,7,8,9,10];  
var sumB = b.reduce(function(prev, next) {  
  return prev + next;
});
console.log('B: ' + sumB);  
console.timeEnd('reduce');  

5. console.dir

console.dir 會列印出參數物件的 DOM 屬性

console.dir(document.body);

6.顯示 array objects 的內容

console.tabl 提供了方便檢視 array objects 的功能,

var users = [  
  {
    name: "Alice",
    email: "alice@example.com",
    age: 26
  },
  {
    name: "Bob",
    email: "bob@example.com",
    age: 28
  }
];
console.table(users); 


參考網址
http://blog.500tech.com/browser-console-tricks/

作者也提供了
官方 chrome Console API 文件
https://developer.chrome.com/devtools/docs/console-api

免費的 CodeSchool Chrome DevTools 課程
https://www.codeschool.com/courses/discover-devtools

 
almost 4 years ago

於DB內建立底下觸發程式 Tigger

CREATE OR REPLACE TRIGGER Schema.TRG_CTMS_SESSION_SETTING
AFTER LOGON
ON DATABASE
BEGIN
    EXECUTE IMMEDIATE 'alter session set nls_comp=linguistic';  
    EXECUTE IMMEDIATE 'alter session set nls_sort=tchinese_stroke_m_ci';
    EXECUTE IMMEDIATE 'alter session set optimizer_mode=choose';
EXCEPTION 
    WHEN OTHERS THEN NULL;
END;
 
almost 4 years ago

一個古老的URL長度問題....
底下是各Browser的最大URL長度限制

IE      為2083個字元,而實際可以使用的最大長度為2048字元
Firefox 為65536個字元
Safari  為80000個字元
Opera   為190000個字元
Chrome  為8182個字元

而 server 端超過所能接受的URL長度會出現 HTML 414

Apache 為8192個字元
IIS    為16384個字元

所以在串 URL 參數時還是控制在2000字元以下比較保險

 
almost 4 years ago

一般的 loop 處理

如底下的範例
想要將 list 內的 email 轉成小寫

var mixedEmails = ['JOHN@ACME.COM', 'Mary@FooBar.com', 'monty@spam.eggs'];

function getEmailsInLowercase(emails) {
  var lowercaseEmails = [];

  for (var i = 0; i < emails.length; i++) {
    lowercaseEmails.push(emails[i].toLowerCase());
  }

  return lowercaseEmails;
}

var validData = getEmailsInLowercase(mixedEmails);

而這種寫法會造成程式口述行為的暴增

1.我們告訴電腦需要建立一個暫存的 lowercaseEmails list 然後存放另一個 emails list 內的轉換小寫的 email
2.我們告訴電腦需取 emails 的總數(emails.length)來正確的執行整個 loop 的次數
3.我們告訴電腦需建立一個位址變數(var i = 0)來計算目前執行到 list 的哪個位置
4.我們告訴電腦要如何記錄位址變數要怎計算 (i < emails.length and i++)

以上就是用口述的方式, 來描述整個函數的行為

使用 map 簡化口述的行為

var mixedEmails = ['JOHN@ACME.COM', 'Mary@FooBar.com', 'monty@spam.eggs'];

function getEmailsInLowercase(emails) {
  var lowercaseEmails = [];

  emails.map(function(email) {
    lowercaseEmails.push(email.toLowerCase());
  });

  return lowercaseEmails;
}

var validData = getEmailsInLowercase(mixedEmails);

此範例我們精簡掉電腦如何處理 位址變數 跟利用位址變數取出正確 list 的口述

但這樣的口述流程還是太多
我們告訴電腦需要建立一個暫存的 lowercaseEmails list 然後存放 mixedEmails list element 轉成小寫的內容

利用 Map 特性消除更多的細節

var mixedEmails = ['JOHN@ACME.COM', 'Mary@FooBar.com', 'monty@spam.eggs'];

function downcase(str) {
  return str.toLowerCase();
}

var validData = mixedEmails.map(downcase);

此時口述簡化到

我們告訴電腦將 mixedEmails 的內容轉成小寫

這樣精簡的好處是
1.我們建立了一個精簡的 interface 一個 value in 一個 value out
2.有較少的處理動作, 讓維護者更容易了解
3.實現函數內只處理一件事, 讓此函數能更有彈性的與其他功能結合使用

結論

減少主要程式的口述行為有助於後續維護者對程式的了解
因為維護者不見得會想要清楚知道各個函數內的處理細節
但他們一定很想馬上知道 各個函數行為函數處理後的結果

所以在開發階段時要不斷的思考程式中的口述行為是否 清楚簡短

 
almost 4 years ago

1.減少濫用 get 的命名

get僅用於直接取得單一值或常數

對於取得有複雜計算的值
則改用其他動詞來命名

例如

function getItem($match) {  
    foreach ($this->items as $item) {
        if ($item === $match) {
            return $item;
        }
    }
}

則改為 findItem 或者 searchItem 等較能傳達此函數的動作含意

2.不要使用 do 命名

因為 do 沒辦法傳達明確的資訊來說明此函數目前在做什麼
應建議使用 handle, perform, return, compute 等其他更具意義的動詞

至於 call, execute, run, prepare 等這類處於尷尬的含意動詞
並不是不好的動詞命名方式
而是在使用上需再思考是否有更適合的開頭詞句來描述此函數的動作

3.return Boolean 函數的命名

當函數回傳 truefalse, 可使用 isare 的命名方式
來傳單數物件或複數物件的狀態判斷
例如

Button::isEnabled(), File::isLocked() 或 Inputs::areValid()

4.物件內的函數命名

物件內的函數命名不需要再署名當下物件的名稱
因為物件名稱本身就代表了主詞含意
重複命名會顯著有點多餘
例如

$message->save()
不建議寫成
$message->saveMessage()

5.不要過度在函數名稱內描述各個參數

例如

findUserByUserIdAndToken($userId, $token) 
可以轉換成 
findUser($userId, $token)
 
almost 4 years ago

SQL匯出CSV時會出現尷尬的 , 跟 段行
所以須針對欄位進行過濾的語法

replace(replace(cast(Courses.Description as varchar(8000)),',', ','), CHAR(13) + CHAR(10), '')
欄位如為 ntext text 可用 cast 做轉換

手動消除 CSV 段行
利用 WORD 開啟 CSV 後, 使用取代功能將 ^p 的字眼取代成 空白 字元

 
almost 4 years ago

SQL 文字欄位有分 char, varchar, nchar, nvarchar
var:不定長度 => 有多長存多長
n:Unicode => 無論英文、數字、中文、日文、...每個字都占2Byte

只要存放的資料有可能有中文就要考慮用 n
而 SQL query 須加上 N 字眼, 避免字的編碼因定序不同而出現 ?
如 : UPDATE CourseSessions SET SessionName=N'測試' WHERE SessionId = 1

 
about 4 years ago

在內外 domain 不同的情況下, IE 會 block iframe 內的 page 存取 Cookies
這時此 page 必須要宣告一個 P3P Header
P3P: CP="ALL IND DSP COR ADM CONo CUR CUSo IVAo IVDo PSA PSD TAI TELo OUR SAMo CNT COM INT NAV ONL PHY PRE PUR UNI"

來源網址

 
about 4 years ago

學習用 ReactJs 跟 Flux 架構 模擬後台新增修改刪除的操作流程
https://github.com/diy19790209/myAdminFlux

 
over 4 years ago

oracl SQL 出現 Exception

java.sql.SQLException: ORA-30004: when using SYS_CONNECT_BY_PATH function, cannot have seperator as part of column value

主要是執行 sys_connect_by_path(FolderName,'/') 出錯
原因是 FolderName 欄位裡面有包含 '/' 字串造成 sys_connect_by_path 解析錯誤