封装的一些 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

[b]language-script-region-variant-extension-privateuse[/b]

language：这部分就是ISO 639规定的代码，比如中文是zh。

script：表示变体，比如简体汉字是zh-Hans，繁体汉字是zh-Hant。

region：表示语言使用的地理区域，比如zh-Hans-CN就是中国大陆使用的简体中文。

variant：表示方言。

extension-privateus：表示扩展用途和私有标识。

一般约定，language标签全部小写，region标签全部大写，script标签只有首字母大写。不同标签之间用连字号-链接。

[b]下面列出一些与中文有关的语言标签。 [/b]

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 台湾使用的繁体中文

以上是较全面的判断方法；

[b]页面可判断为：[/b]

> 除了 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/