封裝的一些 js, css使用小方法

參數拼接：hash或search的方法使用：

  var str = type;
  str = str.replace(/^\?/, '').split('#');
  for (var i = str.length - 1; i >= 0; i--) {
    var keyValue = str[i].split('=');
    if (keyValue[0] == data) {
      return keyValue[1];
    }
  }
}
var obj = {"title":"hash","describe":"hashTitle"};
encodeURIComponent(JSON.stringify(obj));
//hash-->> http://blog.csdn.net/qq_26445509/article/details/51145100#data=hash
var type = location.hash;
//search-->> http://blog.csdn.net/qq_26445509/article/details/51145100#data=search
var type = search;
decodeURIComponent(searchCode(type, 'data'));

多語言切換

頁面區分語言時，通常根據navigator.language獲取對應的語言簡寫；

一般常有見的是：

lang=“en”, lang=“zh”, lang=“zh-CN”, lang=”en-US”, lang=”zh-Hant”，“en”表示英文，“zh”是中文;

較完整的語言對應碼如下：
http://www.loc.gov/standards/iso639-2/php/code_list.php

ISO639-1 常用語言如下：

ISO639-1 Code	中文名	英文名
ko	朝鮮語	Korean
de	德語	German
ru	俄語	Russian
fr	法語	French
zh	漢語	Chinese
pt	葡萄牙語	Portuguese
ja	日語	Japanese
es	西班牙語	Spainese
en	英語	English

language-script-region-variant-extension-privateuse

1. language：這部分就是ISO 639規定的代碼，比如中文是zh。
2. script：表示變體，比如簡體漢字是zh-Hans，繁體漢字是zh-Hant。
3. region：表示語言使用的地理區域，比如zh-Hans-CN就是中國大陸使用的簡體中文。
4. variant：表示方言。
5. extension-privateus：表示擴展用途和私有標識。
   一般約定，language標籤全部小寫，region標籤全部大寫，script標籤只有首字母大寫。不同標籤之間用連字號-鏈接。

下面列出一些與中文有關的語言標籤。

zh-Hans 簡體中文
zh-Hans-CN 大陸地區使用的簡體中文
zh-Hans-HK 香港地區使用的簡體中文
zh-Hans-MO 澳門使用的簡體中文
zh-Hans-SG 新加坡使用的簡體中文
zh-Hans-TW 臺灣使用的簡體中文
zh-Hant 繁體中文
zh-Hant-CN 大陸地區使用的繁體中文
zh-Hant-HK 香港地區使用的繁體中文
zh-Hant-MO 澳門使用的繁體中文
zh-Hant-SG 新加坡使用的繁體中文
zh-Hant-TW 臺灣使用的繁體中文
以上是較全面的判斷方法；

頁面可判斷爲：

> 除了 zh-Hant || zh-Hant-xx  繁體中文
    剩下zh-xx 都爲簡體中文

判斷規則如下：

data: function() {
return {
    zh: {  //簡體中文
        "loading": "加載更多"  
    },
    en: {   //英語
        "loading": "Load more!"  
    },
    hant: {  //繁體中文
        "loading": "加載更多"  
    },
    ja: { //日語 
        "loading": "アドイン"  
    },
    ru: { //俄語 
        "loading": "Заряжен больше"  
    },
    es: { //西班牙語     
        "loading": "Cargar más de"  
    },
    ko: { //朝鮮語     
        "loading": "더 로드"  
    }
}
},
setLanguage(lang){
//多語言判斷及賦值
    let l = lang.toLowerCase();
    if(l.indexOf('zh') > -1){
        if(l.indexOf('cn') > -1 || l.indexOf('chs') > -1 || l.indexOf('hans') > -1){
            this.loading = this.zh.loading;
            this.doc.title = this.zh.title;
        }else{
            this.loading = this.hant.loading;
            this.doc.title = this.hant.title;
        }
    }else if(l.indexOf('en') > -1){
        this.loading = this.en.loading;
        this.doc.title = this.en.title;
    }else if(l.indexOf('ja') > -1){
        this.loading = this.ja.loading;
        this.doc.title = this.ja.title;
    }else if(l.indexOf('ru') > -1){
        this.loading = this.ru.loading;
        this.doc.title = this.ru.title;
    }else if(l.indexOf('es') > -1){
        this.loading = this.es.loading;
        this.doc.title = this.es.title;
    }else if(l.indexOf('ko') > -1){
        this.loading = this.ko.loading;
        this.doc.title = this.ko.title;
    }
},
//調用
let lang = navigator.language;
this.setLanguage(lang)

字節轉換，大於1MB時顯示MB，小於1MB時顯示爲KB；

translateByte(size){
   /*
        //後臺中存儲類型爲: byte(字節)
        if(size < 1MB && size > 1KB){ 
            //KB  字節(b)> KB   
        }else{
            //MB  字節(b)> MB
        }

        1千字節(kb)=1024字節(b)
        1兆字節(mb)=1048576字節(b)
    */
    let s = '';
    if(size < 1048576 && size > 1024){
        s = (size / 1024).toFixed(0) + "KB";
    }else if(size < 1024){
        s = size + "KB";
    }else{
        s = (size / 1048576).toFixed(1) + "MB";
    }
    return s;
},
//調用轉換字節
//byte -> kb || mb
let size = that.translateByte(s);

CSS選擇器優化

• 選擇你想明確的，而不是依靠情況或巧合。良好的選擇器意圖將控制您的風格的觸及和泄漏。
• 爲可重用性編寫選擇器，以便您可以更有效地工作並減少浪費和重複。
• 不要不必要地選擇器嵌套，因爲這將增加特異性，並影響您可以在哪裏使用樣式。
• 不要不必要地對選擇器進行限定，因爲這會影響可以應用樣式的不同元素的數量。
• 保持選擇器儘可能的短，以保持特異性降低和性能。
  關注這些要點將使您的選擇器在變化和長期運行的項目中更加理智和易於使用。

選擇器性能
一般來說，選擇器越長（即組件越多）越慢，例如：
body.home div.header ul { } 錯誤的寫法
…是一個效率低得多的選擇器：
.primary-nav { } 正確的寫法

這是因爲瀏覽器從右到左讀取CSS選擇器。瀏覽器會讀取第一個選擇器。

• 查找ulDOM中的所有元素;
• 現在檢查他們是否居住在一個元素的任何地方，一類.header;
• 下一個檢查.header該類是否存在於div元素上;
• 現在檢查，所有生活在任何元素內的任何一個類別 .home;
• 最後，檢查元素上.home是否存在body。

CSS命名規範——BEM思想

BEM的意思就是塊（block）、元素（element）、修飾符（modifier）,是由Yandex團隊提出的一種前端命名方法論。

  1. .block{} //塊 
  2. .block__field{} //元素 
  3. .block--full{} //修飾符  

再來看一個之前用‘常規’方式命名的.site-search的例子：

<form class="site-search  full">  
<input type="text" class="field">  
<input type="Submit" value ="Search" class="button">  
</form>     

• **用BEM記號法：

<form class="site-search  site-search--full">  
 <input type="text" class="site-search__field">  
<input type="Submit" value ="Search" class="site-search__button">  
</form>   
<div class="content">  
 <h1 class="content__headline">Lorem ipsum dolor...</h1>  
</div>

參考文獻：
http://blog.csdn.net/chenmoquan/article/details/17095465
https://philipwalton.com/articles/why-im-excited-about-native-css-variables/

HTML定義根變量，也可做兼容處理

:root { --gutter: 1.5em; }
@media (min-width: 30em) {
  :root { --gutter: 2em; }
}
@media (min-width: 48em) {
  :root { --gutter: 3em; }
}

---

參考文獻：
https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care
http://perfectionkills.com/profiling-css-for-fun-and-profit-optimization-notes/
http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/