这次我们来看下几个css简洁优雅的的使用技巧，特此声明，这里说的 CSS 并不止包含 CSS，也包含 CSS 预处理器（Less Sass 等），愿各位看官不要纠结于此。

尽量使用 padding 代替 margin

​ padding 和 margin 两个是常用的属性，但是属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠，所以如果 margin 使用的过于频繁的时候，Box 的垂直距离可能就会发生重叠。第一个子元素的 margin-top 值会加在父元素上的 bug，最后一个子元素的 margin-bottom 也存在类似的问题。

​ 原因：所有毗邻的两个或多个盒元素的 margin 将会合并为一个 margin 共享。所以我们可以在首位元素使用 padding 来替代 margin。当然有的时候使用 padding 不能满足需求，这时你也可以在“非空内容”这个条件做文章。即在父元素添加一个伪元素。

position:fixed 降级问题

​ 开发中遇到的“吸顶”问题，就是position:fixed 这个属性。如果父元素有使用transform,fixed 的效果会降级为 absolute

解决方案

​ 既然会降级为 absolute 效果，我们该怎么解决这个问题呢？我们就改考虑什么情况下 fixed和 absolute 的表现效果会是一样的。即当使用 fixed 的直接父元素的高度和屏幕的高度相同时 fixed 和 absolute 的表现效果会是一样的。如果这个直接父级内的元素存在滚动的情况，那就加上 overflow-y:auto。

合理使用 px | em | rem | % 等单位

​ 在 CSS 中有许多距离单位，比如 px | em | rem | %，还有 CSS3 中的 vh | vw 等单位。px是pc端最常用的单位，但是再移动端自适应的要求下，使用的场景就不是很多了，以下几种小的适用场景。

比较小的图案

​ 比如画一个 r 为 5px 的圆，如果我们使用 rem 作为单位，我们很快会发现在一些机型上的图案不圆，会呈现椭圆形。这是由于 rem 转 px 会存在精度丢失问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// less 
//使用 px 配合 dpr 来实现：
/*@size 建议取双数*/
.circle(@size,@backgroundColor){
    width:@size;
    height:@size;
    background-color:@backgroundColor;
    [data-dpr="1"] & {
        width: @size * 0.5;
        height: @size * 0.5;
    }
    [data-dpr="3"] & {
        width: @size * 1.5;
        height: @size * 1.5;
    }
}

最近，搭配koa和mysql2 （sequelize）使用的时候，查询数据库，会要捕获错误，sequelize提供的模型操作方法，均是返回promise对象，我们可以用then… catch 这样的链式方法 来获取查询数据结果，捕获错误；但是koa 支持 aysnc/ await 语法，我们可以更简洁地操作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

	// 查询用户信息
user = await Models.users.findOne({
  where:{
    username: userName,
    password:mdPwd
  }
})

// 创建用户信息
rs = await Models.users.build({
  user_id:userId,
  username:userName,
  password:mdPwd
}).save()

try … catch

​ 在使用aync/await，我们可以像写同步代码一样来完成数据的增删该查，但是这种方式我们无法捕获数据操作过程中的错误信息。如果需要捕获错误，我们可以借助 try {} catch{}。 下面是我demo中的错误处理代码

​ 目前前端三杰 Angular、React、Vue 都推介单页面应用 SPA 开发模式，在路由切换时替换 DOM Tree 中最小修改的部分 DOM，来减少原先因为多页应用的页面跳转带来的巨量性能损耗。它们都有自己的典型路由解决方案，@angular/router、react-router、vue-router。

​ 一般来说，这些路由插件总是提供两种不同方式的路由方式：Hash 和 History，有时也会提供非浏览器环境下的路由方式 Abstract。Hash 和 History 除了外观上的不同之外，还一个区别是：Hash 方式的状态保存需要另行传递，而 HTML5 History 原生提供了自定义状态传递的能力，我们可以直接利用其来传递信息。

Hash

相关 Api

​ Hash 方法是在路由中带有一个 #，主要原理是通过监听 # 后的 URL 路径标识符的更改而触发的浏览器 hashchange 事件，然后通过获取 location.hash 得到当前的路径标识符，再进行一些路由跳转的操作。

1. location.href：返回完整的 URL
2. location.hash：返回 URL 的锚部分
3. location.pathname：返回 URL 路径名
4. hashchange 事件：当 location.hash 发生改变时，将触发这个事件

比如访问一个路径 http://sherlocked93.club/base/#/page1，那么上面几个值分别为：

1
2
3
4
5
6

# http://sherlocked93.club/base/#/page1
{
  "href": "http://sherlocked93.club/base/#/page1",
  "pathname": "/base/",
  "hash": "#/page1"
}

简单实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

class RouterClass{
    constructor(){
        this.routes = {}        // 记录路径标识符对应的cb
        this.currentUrl = ''    // 记录hash只为方便执行cb
        window.addEventListener('load', () => this.render())
        window.addEventListener('hashchange', () => this.render())
    }
    /* 初始化 */
    static init(){
        window.Router = new RouterClass()
    }
    
     /* 注册路由和回调 */
     route(path, cb) {
        this.routes[path] = cb || function() {}
     }
    /* 记录当前hash，执行cb */
    render(){
        this.currentUrl = location.hash.slice(1) || '/'
        this.routes[this.currentUrl]()
    }
}

fetch的使用

一个基本的 fetch请求：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

const options = {
    method:'POST',  // 请求参数
    headers:{
        'Content-Type':'application/json' // 设置请求头
    },
    body:JSON.stringify({name:'123'}), // 请求参数
    credentials:'some-origin', // cookie设置
    mode:'cors' //跨域
}
fetch('http://www.xxx.com',options)
.then(function(response){
    return response.json()
})
.then(function(myjson){
    console.log(myjson) // 响应数据
})
.then(function(err){
    conosle.log(err) 
// 异常处理
})

FetchAPI提供了一个全局的 fetch()方法，以及几个辅助对象来发起一个网络请求。

原生Ajax的用法

​ Ajax全称 AsynchronousJavaScript+XML（异步 JavaScript和 XML，网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。Ajax本身不是一种新技术，而是用来描述一种使用现有技术集合实现的一个技术方案，浏览器的 XMLHttpRequest是实现 Ajax最重要的对象（ IE6以下使用 ActiveXObject）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

var xhr = new XMLHttpRequest();
xhr.open('post','www.xxx.com',true);
// 接收返回值
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        if(xhr.status >= 200 && xhr.status < 300 || xhr.status < 304){
            console.log(xhr.responseText)
        }
    }
}
// 处理请求参数
var postData = {"name1":"value1","name2":"value2"};
postData = (function(value){
    var oStr = ''
    for(var key in value){
        oStr += key + '=' + value[key] + '&'
    }
    return oStr;
})(postData)
// 设置请求头
xhr.setRequestHeader('Content-type','application/x-www-form-unlencoded');
// 异常处理
xhr.onerror = function(){
     console.log('Network request failed')
}
// 跨域携带cookie
xhr.withCredentials = true;

// 发出请求
xhr.send(postData)