區域大數據大屏總結（echarts、自適應、模塊化、代碼規範/優化）

很久沒寫總結了，自從4月底辭職到5月初換公司上班才真正的進入加班狗行業，筆記本上零零散散記了不少，今天就大概寫下最近作區域大數據頁面的學習和總結，如有不當，請指正

1. echarts圖表插件

echarts官網

demo是散點圖，看菜單有不少圖的種類能夠選擇，還能自定義本身的風格的圖表，詳情見官網；
這裏主要是推薦下插件，適當的場景用比較省時省力，另外就是API比較多，建議大體瀏覽一類，觸類旁通，在須要某種屬性、樣式、效果等等能夠查api或者百度echarts有沒有這種屬性或方法。demo入手比較快。

2. 自適應

responsive.less
橫向轉化百分比，縱向轉化rem，px轉rem公式：

.px2percent(@atr,@px,@base-width:0) when( @base-width > 0) and (@cssType = "fix"){
    @{atr}: @px;
}

.px2percent(@atr,@px,@base-width:0) when( @base-width > 0) and (@cssType = "responsive"){
    @{atr}: percentage(@px / @base-width);
}

.px2percent(@atr,@px,@base-width:0) when( @base-width = 0) and (@cssType = "fix"){
    @{atr}: @px;
}

.px2percent(@atr,@px,@base-width:0) when( @base-width = 0) and (@cssType = "responsive"){
    @{atr}: percentage(@px / @baseWidth);
}

在寫css的less前面@import 'responsive.less';

3. 模塊化

Java裏面有不少這個包那個包，須要哪一個包的屬性或者方法能夠在頭部import進來，
JavaScript的基礎寫法是封裝一個函數對象，寫成當即執行函數，

var myModule = (function(){
    //加一個初始化方法
    myModule.init = function(){
        ...
    }
    return myModule;
})();

這樣就寫成了一個有單獨做用域的模塊。

CommonJS

咱們先從CommonJS談起，由於在網頁端沒有模塊化編程只是頁面JavaScript邏輯複雜，但也能夠工做下去，在服務器端卻必定要有模塊，因此雖然JavaScript在web端發展這麼多年，第一個流行的模塊化規範卻由服務器端的JavaScript應用帶來，CommonJS規範是由NodeJS發揚光大，這標誌着JavaScript模塊化編程正式登上舞臺。
一，定義模塊:
根據CommonJS規範，一個單獨的文件就是一個模塊。每個模塊都是一個單獨的做用域，也就是說，在該模塊內部定義的變量，沒法被其餘模塊讀取，除非定義爲global對象的屬性。
二，模塊輸出： 模塊只有一個出口，module.exports對象，咱們須要把模塊但願輸出的內容放入該對象。 三，加載模塊：
加載模塊使用require方法，該方法讀取一個文件並執行，返回文件內部的module.exports對象。 看個例子：

var name = 'Byron';

function printName(){
    console.log(name); }

function printFullName(firstName){
    console.log(firstName + name); }

module.exports = {
    printName: printName,
    printFullName: printFullName } ``` 而後加載模塊，

    var nameModule = require('./myModel.js');
    nameModule.printName();

不一樣的實現對require時的路徑有不一樣要求，通常狀況能夠省略js拓展名，可使用相對路徑，也可使用絕對路徑，甚至能夠省略路徑直接使用模塊名（前提是該模塊是系統內置模塊）。

common.js此段摘自前端網-前端模塊化
AMD ==》 RequireJS
CMD ==》 Sea.js
還有AMD CMD之間的區別參考以上連接

4. 代碼規範及寫法優化

1.添加註釋
之前是高興寫就寫兩行，不高興寫，回頭我本身都看不懂（誇張點，哈哈），如今基本養成了一個隨手加註釋的好習慣了，不是每行，是每一個模塊、每一個函數。 不只方便同事查看也方便後面本身查看修改。

2.class/id/變量/函數名等命名
個人習慣 class: class_name

id: idNameNameName
       變量、函數名同駝峯規則。

以前寫class是連字符- class-name 可是雙擊只會選中一個不能整個class一塊兒複製，我就開始寫成 _ 了 calss_name 雙擊，複製（爽歪歪）；
還有就是命名語義化 好比func hideDOM(){ DOM.show() },這就很尷尬了
超棒的前端開發規範==》Github地址-前端開發規範手冊
1.存儲經常使用DOM
這也是最近偷師偷來的，如今想一想道理其實很簡單，就看你有沒有去想或者想獲得，要不就去撿別人現成的，反正有進步就是好的。

var elements = {};
var initElements = function(){
    elements.newDomName = document.qs('#id');
}

後面就能夠直接使用存儲的DOM而不須要再去搜尋目標DOM了，對性能優化有必定幫助。

---

題外話：其實還有一點，感受仍是蠻重要的，就是程序員對於業務的理解，經過對於產品需求的分析，整理出產品的業務邏輯，再到代碼中實現需求，絕對須要必定的理解能力和分析能力，另外還要有跟產品撕的魄力，不合理的地方萬一實現不了到時候還得背鍋，因此酌情撕。之前野生的時候，真的全靠本身瞎幾把亂看亂學了，如今好了，有偷師對象了，哈哈哈，就是加班太多了 手動[/允悲]。 下階段webpack+vue+es6，還好webpack自學過作過demo,加油吧，程序員！

聲明：本文如有不當，歡迎指正。轉載請註明出處~