本文旨在记录《CSS揭秘》这本书中出现的CSS经典技巧

1.半透明边框

假设我们想给一个容器设置一层白色背景和一道半透明的边框，我们最初的尝试可能是这样的：

1
2

border: 10px solid hsla(0, 0%, 100%, .5);
background: #fff;

除非你对背景和边框的工作原理非常地熟悉，否则展示出来的结果可能让你摸不着头脑，因为我们的背景会从它的半透明边框透上来。如下图所示：

函数去抖

浏览器中某些计算和处理要比其他的昂贵的多。例如，DOM操作比起非DOM交互需要更多的内存和cpu时间。连续尝试进行过多的DOM相关操作可能导致浏览器挂起甚至崩溃。尤其是IE中使用onresize事件处理程序的时候容易发生，当调整浏览器大小时，该事件便会频繁触发。在onresize事件处理程序内部如果尝试进行DOM操作，其高频率的更改可能会让浏览器崩溃。为了绕开这个问题，你可以使用定时器对该函数进行节流。

函数节流背后的基本思想是指，某些代码不可以在没有间断的情况连续重复进行。第一次调用函数，创建一个定时器，在指定的时间间隔之后运行代码。当第二次调用该函数时，它将清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了，这个操作就没有任何意义。然而，如果前一个定时器尚未执行，其实就是将其替换成一个新的计时器。目的是只有在执行函数的请求停止了一段时间之后才执行。

站点根目录部署

1. 执行npm run build
2. 找到dist目录，把里面的文件直接丢到站点根目录下即可

站点子目录部署

1. 修改config/index.js

1
2
3
4
5
6
7
8

module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './', // 修改这里，防止报404错误
    productionSourceMap: true

文字空心效果

See the Pen mOQMKZ by abcdGJJ (@abcdGJJ) on CodePen.

考虑如下html片段

1
2
3
4
5
6

<ul id="members">
    <li>
        <a href="a.html">点击一下有惊喜</a>
        <a href="b.html">还真点啊</a>
    </li>
</ul>

使用bind方法

bind()方法直接在DOM元素中注册事件类型和事件处理函数。虽然它对浏览器的兼容性很好，但是却有很大的性能问题。

1
2
3
4
5
6
7

$("#members li a").bind( "click", function(e) {
    console.log(e)
})
// 或
$("#members li a").click(function(e) {
    console.log(e)
})

bind()方法会匹配所有符合条件的元素附加上事件处理程序，这样做很浪费时间，因为绑定的都是同一个事件处理函数。类似于在原生JS中给每个<li>绑定onclick事件。

yarn / yarn install === npm install
yarn add xxx === npm install xxx –save
yarn add xxx –dev === npm install xxx –save-dev
yarn remove xxx === npm uninstall xxx
yarn upgrade === npm update
yarn global add xxx === npm install xxx -g

版本移动

回退到上个版本

git reset –hard HEAD^

前进到之后版本（可以找到commit id）

git reset –hard [commit id]

前进到之后版本（找不到commit id）

git reflog
git reset –hard [commit id]

在使用vue-resource时，如果想要调用一个第三方的api，往往直接调用是不行的。控制台会提示No Access To …，翻译成中文意思就是请求的资源不允许跨域。

那么有什么办法来调用呢？笔者在网上找到了两种方法，原理基本都是代理转发：

使用proxyTable

如果你是使用vue-cli来构建的模板，进入config/index.js，修改proxyTable为：

1
2
3
4
5
6
7
8
9

proxyTable: {
  '/test': {
    target: 'http://news-at.zhihu.com/api/4/news',
    changeOrigin: true,
    pathRewrite: {
      '^/test': '/latest'
    }
  }
}

作者：旗smile
原文地址：http://blog.csdn.net/u014346301/article/details/52204967

ECMA-262把对象定义为：“无序属性的集合，其属性可以包含基本值、对象或者函数。”严格来讲，这就相当于说明对象是一组没有特定顺序的值。对象的每个属性或方法都有一个名字，而每个名字都映射到一个值。正因为这样，我们可以把ECMAScript的对象想象成散列表：无非就是一组名对值，其中值可以是数据或函数。

创建自定义对象最简单的方式就是创建一个Object的实例，然后再为他添加属性和方法，如下所示：

1
2
3
4
5
6
7

var person = new Object();
person.name = "liubei";
person.age = 29;
person.job = "shayemuyou";
person.sayName = function(){
    alert(this.name);
}

上面的例子创建了一个名为person的对象，并为他添加了三个属性和一个方法。其中sayName()方法用于显示name属性，this.name将被解析为person.name，早期的开发人员经常使用这个模式来创建对象，后来对象字面量的方法成了创建对象的首选模式，上面的例子用对象字面量的语法可以写成如下这样：

原理

相对定位 + 绝对定位。位移采用JS实现。以后会增加一个用CSS3实现的

See the Pen wzPqvy by abcdGJJ (@abcdGJJ) on CodePen.