前端開發小結

 最近寫了幾個網站和一些H5頁面，簡單總結一下遇到的各類坑。

寫html主要用到的技術不外乎js、html、和css，之前會把它們都寫在一塊兒，樣式也會用許多style，代碼很是冗餘，很ugly。在公司前輩的指導以及本身對於了他們的代碼，對前端代碼結構有了一點點的心得，分享給你們。

前端主要包含html、js和css。正如《ppk 談JavaScript》所描述的，它們分別具備不一樣的語義信息，要分別對待，這樣用起來才舒服，更可以保證前端顯示的效果。Js主要是網頁行爲，能夠算是一種行爲編程，具備和後端編程同樣的思想，能夠用mvc模式來設計js模塊，如數據流、函數流、dom流等。 Css主要是網頁的顯示，即裝飾，簡單的說是網頁看起來的樣子，主要是從設計師的角度來設計網頁，如網頁的顯示效果，如背景、顏色、字體、間距、圖片等等，從設計師的角度來裝飾網頁便可；HTML是結構，即網頁中DOM是如何擺放的。

打個比方，前端開發，能夠想象成自家裏裝修。 首先要買傢俱（dom元素），而後傢俱如何擺放（HTML結構），其次是裝修（CSS），最後是交互（使用js，固然如今CSS3也能夠實現部分交互，如hover，animation，rotate等操做） 

因此開發前端時，也要將結構明確化，主要包含四個部分，html頁面，js文件，css文件，以及所須要的資源文件（img等）。而後在html中包含所須要的js、css以及資源文件便可。

Js開發時，之前主要是面向過程編程，如今js演過過程當中，也開始面向對象編程，原生態的prototype比較麻煩，但jquery以及zepto等類庫提供了比較簡便的面向對象編程，在一個類中封裝該類所須要的變量以及函數。在寫所須要的js時要包含數據處理層和通用庫層，便面調用。我項目中主要使用的reactJs,,改js是面向組件的編程，也是從數據流的角度來編寫js，並將js和dom有效的融合在了一塊兒，方便操做dom層。React可讓咱們把許多通用模塊進行抽象，沒過模塊都是一個類，該類中包含render函數是類最終的顯示層。類中其他部分是顯示層的控制邏輯，能夠把一個react部件想象成裝修家裏的一個房間。全部房間裝修完了，房子也就弄好了。在項目開發過程當中，要不斷的抽象所須要的組件，如登錄組件，列表組件，table組件，以及小控件（如button、form等），這樣在寫H5頁面時，就能夠利用多個組件來組裝一個H5頁面，有沒有以爲和堆積木同樣的，告訴你就是那樣的。

HTML開發過程當中，最大的麻煩是如何擺放DOM元素，以及如何裝飾。每一個DOM元素有不一樣的特性，如block，inline-block等。CSS如何有效控制元素並排，下拉等。我常常在display:inline-block中迷失，沒法有效的控制元素顯示。閱讀CSS經典時，瞭解到能夠多用float，以及ul、li，讓元素自動的浮動，而且要約束好元素的寬度，這樣就可使得元素放在合適位置。要多關注margin，padding以及display的box模型。HTML中元素是從左到右排列的，若是位置被佔據或者放不下會自動換行的。在網頁PC設計中，要肯定好網頁的寬度，防止被縮放，可使用滾動條，這樣可以保持網頁的效果，同時也避免適配。在H5頁面開發中，要使用rem來自動調整字體，在H5初次加載時利用js來肯定font-size的大小，rem能夠根據網頁root font-size來定位，所以也能夠自動定位。在網頁排列時，要多考慮居中，居中須要外邊框來保證的，而內部元素則從新排列。

Ppk談JavaScript開發，從瀏覽器的角度談到了js，js能夠控制瀏覽器整個窗體，主要用window來表示全局變量，並提供了navigator、location、document、history、screen、cookie等。Js能夠操做BOM、事件、DOM、CSS、數據檢索（XMLHttpRequest、readystatechange等）。 瀏覽器可能不兼容js，或者用戶關閉了js提示框，要將js影響界面顯示的內容動態生成，這樣js無效時，這部份內容也不會被影響。

Js中常見的問題：int + string 加法出錯， if(val) 爲true， undefine 或者 Nan等；reactJs  push中必須每一個都是完整的block。如<TR></TR>

Map[variable]，不能寫成map.variable。    

經常使用的工具：subline text（babel、bz二、colorpicker、csscomb、emmet css snippets、pyv八、terminal等）

後端開發工具： IDEA Go插件