土豆網前端概況
一、分工和流程
在土豆網，以專案開發為核心，誰都可以帶專案，擔任專案經理。
乙個典型的土豆網專案中，當進入正式開發階段，通常參與者包括：1名設計師，1-2名前端工程師，1到多名後台工程師，1-2名系統運維管理員。
其中，前三者的工作都是可以併發的，最終整合通常是前段工程師，對於複雜度較低的頁面處理，一般工程師也可以直接參與。
不管是設計師、前端和後台工程師，對於分離的領會和理解都非常重要，並且導致配合上，不同理解層次的人會產生不同的配合效果。
其中，設計師和前端工程師的配合無疑是最重要的，設計師的風格直接導致前端頁面結構的簡潔或者複雜，程式邏輯的簡潔或者複雜。
乙個卓越於設計並且理解w3c網頁標準的設計師是珍稀而罕見的。
土豆網的內容結構，從模組來說，如中心橙色圈所區分出的九個大塊：
從其功用來說，則分為三個層次
：這些特性決定了後面所有前端架構的基調。
a、頁面（page）結構
a)概覽
乙個典型左右版式的頁面樣式：
土豆網的所有頁面都基於這個頁面模型，分別是：上下導航、內容，內容分為貫穿版式或者左右版式。
在左右區域中分別由盒狀模型擔任最終內容的承載結構。
解析如下：
html片段
：b)導航
i、 頂部導航
這三種導航使用的html是基本一致的，通過css來控制不同狀態下的表現：
模型解析：
html片段：
ii、 底部導航（從略）
c)內容
i、 貫穿版式：在個別頁面，會出現沒有左右布局的全頁面橫向貫穿版式，這時頁面結構內只有content，沒有main或者side，此時盒狀模型全部直接堆積在content內。
另外，除了全站首頁以外的所有公共頁面都是特製並保持風格統一的貫穿版式。
ii、 左右側欄：最常見的布局，存在於絕大部分頁面。最主要應用在內頁管理區域，首頁也有用到。
b、盒狀（box）模型結構
盒裝模型是建立在頁面布局的基礎上，承載內容和資料的最直接頁面基礎結構，主要分為容器、標題、內容、底部三個部分。
乙個典型的盒裝模型效果分為側欄效果和主欄效果兩種風格，統一的html結構，通過css來控制樣式上顯示的不同，這一部分在樣式層主要討論。
在首頁以及少量特殊頁面上，會有額外的風格，但是依然以盒狀模型為基礎。
解析如下：
html片段如下：
c、包裝（pack）模型1、全域性、模組和頁面級
* 是乙個全域性樣式，規定了所有邊距的重置；
.pack 是乙個抽象的包封裝，該類記錄了所有包的共性，其**如下。空的類可能會在一些生僻的瀏覽器上造成意外的問題，但是通常不會，這裡書寫空類是為了保證在邏輯上的可閱讀性。
.pack
.pack ul {}
.pack li
.pack b
padding:12px 10px;
color:#000;width:126px;
}.pack_list
以上類的抽象和繼承主要體現在對各自私有部分的派生。以實現**的精簡和復用性。
在乙個html片段中，呼叫的方法是：首先應用抽象類或者父類，然後應用實力類或者子類，例如：
在這個例子中，director代表豆角，這個類可能書寫在某個模組中，也可能在頁面級的樣式中，對前面的類進一步重寫和修正；
修正的時候只需要書寫需要被修改或者重置的語句就可以了。
在上面的示例中，因為頁面的需要，模組級別的/skin/public/v.css重寫了pack_clip的寬度：
#programpage .pack_clip
當父類和抽象類被修改的時候，全站的所有pack模型都會被修正，但是不影響到子類所做出的私有派生或者複寫，也就不會影響某乙個特殊頁面的獨立樣式；
關於類、抽象和繼承的方法很多，考慮到命名方法和選擇符，會有大量不同的處理風格。然而最主要的思想都在各種物件導向的程式設計書籍中有詳細的技巧和說明，這裡就不複述了。
在土豆網的樣式中，大量應用了類似的辦法和技巧來處理可維護、可擴充套件和可復用性。
tips：- 前端開發眼下最好的開發工具是firebug，很好，很強大；
- 樣式命名很重要，優先考慮以類（class）為基礎，輕易不使用標識（id），標識（id）通常用於頁面級樣式所需要的元素，乃至乙個細節上最終端的元素；
- 元素選擇符也很重要，「.pack_clip ul li a img {}」有著很高的優先權，要慎用；
- 以上兩點歸納起來說就是：盡量降低各種命名和選擇符的優先權，越是全域性和抽象優先權應該最低，在乙個特定的微觀元素部分，可以放心使用高優先權來複寫；當出現三層甚至五層的整合和複寫的時候，這就會顯得相當重要，如果不能很好地重寫，輕易不要使用important，而是想辦法重構父類（的命名和選擇符）；
- 為了處理可擴充套件性，會稍微增加html結構的冗餘性，然而從整體上來看，是值得的；
- 最終管理、處置和使用這些架構的是人。
土豆網三枚XSS 均可獲取cookie
土豆網某些頁面由於沒有進行過濾或過濾不嚴導致存在的兩枚反射型和一枚儲存型xss跨站漏洞 存在反射型xss的兩個位址 1 存在儲存型xss的乙個位址 這個我看已經有人發布了，但目前為止仍未修復 3 3cimg 20src 1 20onerror alert 28 xss 29 3e 沒有對使用者輸入進...
關於土豆網盈利模式的一點兒構思
同事發給我看土豆網的第二期融資網頁。的確，com的時代並沒有結束，只不過是更加規範，投資者更加謹慎。然而，土豆網的融資成功不能說明網際網路走進了乙個新的時代，因為網際網路公司的盈利模式，仍跳不出廣告，會員費的圈子，如何真正的使乙個 盈利，仍是 經營者和投資人需要考慮的問題。在 盈利模式的摸索過程中，...
前端（慕課網）筆記一
關於面試 1 1.5h 技術面負責人面試 hr面試 二面 三面 每個公司環節設定不一樣 三面 四面 一般不問技術 業務負責人 不關注技術，關注工作經驗等 課程介紹 面試準備 面試技巧 題目演練 知識梳理 複習指導 jd分析 職位描述分析 京東金融為例 職位描述 h5開發 hybrid等 資料mock...