主題
一直覺得看別人的code可以學到很多 不只是方法還有寫程式的觀念
想許願新的教學文章是 帶著看code 解讀網頁上實際運用到的東西
我第一個想丟出來討論的是破解右鍵
程式碼
javascript: (function() {
function R(a) {
ona = "on" + a;
if (window.addEventListener)
window.addEventListener(a, function(e) {
for (var n = e.originalTarget; n; n = n.parentNode)
n[ona] = null;
}, true);
window[ona] = null;
document[ona] = null;
if (document.body)
document.body[ona] = null;
}
R("contextmenu");
R("click");
R("mousedown");
R("mouseup");
R("selectstart");
}
)()我的觀察與分析
程式風格分析
我只看的出來這邊 他非常非常聰明 的利用一個function
去做一堆addEventListener
感覺這是pureJs很漂亮的寫法 而不是每個都在那邊addEventListener五坨
似乎這樣寫會比較乾淨 或者說有概念 總之就是比較酷也比較厲害的感覺
我的看法
不知道有沒有什麼名詞可以形容這個概念
如果是Jquery 我覺得類似手法應該是變成一個Jquery物件群組（不太確定這個名詞）
然後再直接live或on或是trigger好像就可以了！？
程式內容討論
originalTarget跟parentNode可以查MDN看到，不過還是不太了解具體內涵。
大概只知道原理應該就是解除所有，監聽那些「禁止操作」的listener
但搞不太清楚怎麼寫成這樣子
我的看法
感覺如果用Jquery 似乎可以直接unbind就解決了！？
總結
以上我覺得這題材是很不錯的討論 目前網路上應該都沒有人願意進行這種探討
但這恐怕卻是最多人接觸JS的其中一環 有點矛盾XD
看是不是有機會可以以此為題材 針對code去重構 分析討論都滿好的～～～
如果各位同學也好奇的一起＋１ 或是有懂的 也來分享！！
一起交流這塊
後記
這樣慢慢學習的日子感覺我自己真的進步很多 從前連markdown是什麼都不懂
現在都能使用 而且發現根本就很簡單
github 的push也是 都慢慢跳脫舒適圈 才發現以前卡關就是不太去嘗試
希望大家都能越來越厲害！！
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
這段程式碼，看起來就是把所有相關 event 都移除掉了
雖然可以破解右鍵，但感覺很多網站，根本也就會功能故障了
不知道有沒有什麼名詞可以形容這個概念
就是把重複邏輯封裝成函式而已，我會說是 DRY 原則 避免 duplicate code
這邊的 抽象化（abstraction） 很簡易，大概沒有特別名詞稱呼
更複雜的話，才會特別去命名為一個 design pattern 來稱呼
另外分享
這段代碼網路上通常都是一行 因為要當書籤用
那我怎麼整理的呢
答案是devtool 有一個的format功能
有興趣的分享給你們 讓你們又學到一招！！很實用唷～要逆向工程應該都會需要的～