wabish / demo Goto Github PK

11 月 01 日

Css

• 在开发移动端页面的时候，发现 footer 在微信浏览器上总会多出一条白边在底下，将 body 设置为红色，结果发现白边也变成了红色。后来有人说是切图问题，于是查找了 footer 上面一个包含图片的标签，注释掉发现白边没了，确实是这个标签的问题，但并不是图片。主要是因为用了 rem 转换 px，将 px 减小了 1px 就解决了。出现这个现象的原因可能是 rem 转换 px 的时候数值不是整数，四舍五入了。

04 月 07 日

Vue

绑定自身点击事件，子元素点击不触发，参考链接

<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

Css

垂直居中

.box {
  text-align :center;
  font-size: 0;
}

.box span {
  vertical-align: middle;
  display: inline-block;
  font-size: 16px;
}

.box:after {
  content: '';
  width: 0;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

02 月 05 日

JS

• IE 浏览器报 Promise 找不到 的问题，解决办法：

$ npm install promise-polyfill --save

import Promise from 'promise-polyfill';

if (!window.Promise) {
  window.Promise = Promise;
}

• 今天发现 vue-router 设置了 mode: 'history' 后在 chrome 下没问题，但是在 firefox 和 360 下 url 依然会有 # 号的出现，弄了好久发现是代码里面的注释问题：

有问题的代码：

const router = new VueRouter({
  // 这是注释
  mode: 'history',
  routes
});

没问题的代码：

const router = new VueRouter({
  mode: 'history',
  routes
});

Webpack

设置了 devtool：

module.exports = {
  devtool: '#eval-source-map'
};

• 使用 vue-loader 之后单文件组件里的 css source map 定位不到，后来将代码修改一下即可：

定位不到的代码：

vue: {
  loaders: {
    sass: 'vue-style-loader!css-loader!sass-loader'
  }
},

修改成以下即成功：

vue: {
  loaders: {
    scss: 'vue-style-loader!css-loader!sass-loader'
  }
},

• 使用 sass-loader 后 souce map 也没有定位成功，于是修改成以下即可：

module: {
  loaders: [{
    test: /\.scss$/,
    loader: 'style!css?sourceMap!sass?sourceMap'
  }]
}

2016 年 05 月，学习回顾

ES6

• let 和 const 命令；
• 变量的解构赋值；
• 字符串的扩展；
• 数值的扩展；
• 数组的扩展；
• 函数的扩展；
• 对象的扩展。

React

• 组件嵌套；
• 组件的状态 status；
• 组件的参数 props；
• event 事件。

JS

• bind() 和 join() 方法的使用；
• 图片复制 src 后如何获取图片宽高。

Webpack

• webpack-dev-server 命令；
• jsx & es6 loader；
• css loader；
• common plugin；
• vendor。

Shell

• rm 删除命令，删除目录需添加 -r 参数，无需确认添加 -f 参数。

NPM & Bower

• 使用 NPM & Bower 发布 project。

12 月 13 日

JavaScript

• 新打开的窗口自己关闭：

window.close();

• 新打开的窗口刷新父窗口：

window.opener.location.href = window.opener.location.href;

03 月 01 日

postcss-loader & autoprefixer

昨天一直在 webpack 1.0 配置 postcss-loader，但是 autoprefixer 死活没有生效，错误的配置代码如下：

module.exports = {
  vue: {
    loaders: {
      css: ExtractTextPlugin.extract('css-loader'),
      scss: ExtractTextPlugin.extract('vue-style-loader', 'css-loader', 'sass-loader'),
      postcss: [
        require('autoprefixer')()
      ]
    }
  }
};

谷歌了很久，尝试了很多修改，未果。后来发现要安装 autoprefixer，于是：

$ npm install autoprefixer --save-dev

以为可以了，结果还是没效果，郁闷。

今早再次谷歌，突然发现我的 postcss 的位置写！错！了！

module.exports = {
  vue: {
    loaders: {
      css: ExtractTextPlugin.extract('css-loader'),
      scss: ExtractTextPlugin.extract('vue-style-loader', 'css-loader', 'sass-loader')
    },
    postcss: [
      require('autoprefixer')()
    ]
  }
};

终于成功了！参考链接请戳这里。

01 月 04 日

JavaScript

• 由于需要做扫码登录功能，还要作为 iframe 进行内嵌，所以需要跨域之间的通信，找到了一个第三方库 MessengerJS，还没测试可行性。

PHP

• 今天项目一直登录不上去，但是测试环境却登得上，后来发现是有人改了配置文件，晕。

05 月 17 日

ES6

• 暂时为了练习使用了 Google 的 Traceur 转码器；
• let 和 const，let 弥补了 var 没有块级作用域的缺陷，const 则可以定义只读的常量。

Shell 命令

• rm 命令，删除目录需添加 -r 参数。

10 月 12 日

JS

• 尽量不要使用 mouseover 和 mouseout；
• 使用 mouseenter 和 mouseleave 代替。

08 月 08 日

Vue

最近写 Select 组件时候将 Option 插入到了 body 下，用到了 transition 的钩子 @before-enter 和 @before-leave，但是发现在 IE9 上这些钩子是不触发的，所以暂时只能 watch visible 来触发事件。

参考链接 。

08 月 24 日

Canvas

绘制圆形；

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

context.strokeStyle = '#ff0000';
context.arc(100, 100, 50, 0, 2 * Math.PI);
context.stroke();

arc() 方法参数;

context.arc(x, y, r, startAngle, endAngle, counterClockWise);

beginPath() 方法的使用；

如果 beginPath() 和 closePath() 方法一同使用，会使得两个圆直接有连接线，所以不需要 closePath() 方法；

context.beginPath();
context.arc(100, 100, 50, 0, 2 * Math.PI);
context.stroke();

context.beginPath();
context.arc(200, 200, 50, 0, 2 * Math.PI);
context.stroke();

09 月 13 日

react-router withRouter

import React from 'react'
import { withRouter } from 'react-router'

const Page = React.createClass({

  componentDidMount() {
    this.props.router.setRouteLeaveHook(this.props.route, () => {
      if (this.state.unsaved)
        return 'You have unsaved information, are you sure you want to leave this page?'
    })
  }

  render() {
    return <div>Stuff</div>
  }

})

export default withRouter(Page)

2016 年 06 月，学习回顾

JS

阅读：《JavaScript权威指南》。

• 数组；
• 函数；
• 对象。

Webpack

• jshint-loader。

Shell

• rm 命令；
• cp 命令；
• vi 命令；
• ssh 和 scp 命令；
• 复制粘贴快捷键。

Git

• 查看与切换 tag；
• 同步 fork 的代码。

gulp

• copy。不需要用到 gulp-contrib-copy。

Zepto

• Touch events。

Canvas

• 绘制线条；
• 填充颜色。