发表于 | 分类于 ，

vuex使用

当前vuex版本：3.1.0

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);
const state = {
  test: 1
}
const actions = {
  changeTest({ commit }, payload){
    commit('setTestValue', payload)
  }
}
const mutations = {
  setTestValue(state, payload){
    state.test = payload
  }
}
export default new Vuex.Store({
  state,
  actions,
  mutations,
})
1
2
3
4
5
6
7
8
9
import Vue from 'vue';
import store from './store';

new Vue({
  el: '#app',
  store,
  template: '<App/>',
  components: { App }
});

首先我们先注册vuex，然后设置一些state/mutation/actions 实例化出来，最后交给 Vue 处理

阅读全文 »

发表于 | 分类于 ，

写在前面

webpack的loader的应用是非常广泛的，完全离不开它，我们开发的过程往往都是使用别人编写好的loader来处理文件，今天我们就来编写一个loader。

基础

首先我们看看loader是怎么使用在webpack上的

1
2
3
4
5
6
7
8
9
10
11
module.exports = {
  entry: '...',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: 'css-loader',
      },
    ],
  },
}

使用起来很简单，如果你需要处理css文件，那么安装好css-loader包，然后正则匹配到所有.css的文件，使用css-loader进行文件得处理

阅读全文 »

发表于 | 分类于 ，

写在前面

使用webpack或者自己配置研究过webpack的人都知道plugin，也就是webpack的插件，对于大多数人来说，经常使用的插件诸如：clean-webpack-plugin、html-webpack-plugin等等，在很多情况下，我们只会去用它，知道他是干什么的，但是其内部做的操作缺知之甚少，今天我们就来写一个plugin

基础

首先我们看看插件是怎么使用在webpack上的

1
2
3
4
5
6
7
8
9
10
11
12
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: '...',
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './index.html',
    }),
  ]  
}
阅读全文 »

发表于 | 分类于 ，

写在前面

上一篇文章我们讲了如何使用 webpack，执行打包会在 dist 生成一堆文件，那么 webpack 输出的文件里面到底长啥样呢？用过的人100%看过，大部分的还是压缩混淆后的代码，一般我们不会去关心它，只管当前持续运行正常就行了。今天我们来看看 webpack 输出的文件

配置

安装

开发环境 webpack: 4.34.0

1
2
> npm init -y
> cnpm i webpack webpack-cli -D

新建文件

新建文件 webpack.config.js
新建文件夹 src
webpack.config.js

1
2
3
4
5
6
7
8
9
10
const path = require('path');
module.exports = {
  devtool: 'inline-source-map',
  mode: 'development',
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js',
  },
};

阅读全文 »

发表于 | 分类于 ，

写在前面

相信webpack这个名称对于前端的同学来说并不陌生，只要你在用vue、react等等之类的框架，就得天天和它打交道。但是大部分人都只是直接怼一个vue-cli脚手架生成一个项目，运行起来就开始一顿写，完全不会去看这个项目的其他相关的东西，今天开始，咱们就来说说这个又爱又恨的webpack

问题

使用wepack的时候经常会出现下面这些疑问

  1. 你webpack只能打包单页面的文件吗？
  2. WTF，我包怎么这么大，加载太慢了
  3. 我打包速度怎么这么慢，什么破玩意？
    …

为什么要使用webpack

哈，你问我为什么要用？因为大家都在用啊😃😃。开个玩笑，前端发展到今天，新技术新思想新框架爆发式增长，当前的浏览器环境跑不赢啊，你说你写个ES6/7在浏览器环境都能跑起来？扯淡的。这个时候babel就出现了，你跑不起来是吧，那我转成ES5你总该跑起来吧~，那babel我还是不能直接用啊，肯定得借助工具编译呀，所以我们需要webpack去做这件事情了。这个时候有人就要站出来说了，我gulp不服，我也能做，我就不用webpack。你这么说我就要跟你唠唠了，现在我们先来比较一下webpack和gulp。

gulp 是 task runner，Webpack 是 module bundler

webpack的优势在模块化，gulp除了模块化方面都很不错。但是前端发展至今，模块化真的很重要，CMD、AMD就是模块化的产物。
简单来说，如果你当前项目需要模块化编程，那就选webpack，如果是处理其他事情，比如把图片拼接成雪碧图或者压缩，那么gulp是最擅长的

感兴趣的可以看看这个回答 gulp 有哪些功能是 webpack 不能替代的？

安装

这里可以参考webpack官网
开发环境 webpack: 4.34.0

1
2
3
> mkdir webpack && cd webpack
> npm init -y
> npm install webpack webpack-cli -D

入口（entry）

每个webpack都会有一个entry，就是入口的意思，指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。

注意点：

  1. 入口可以有多个，如果是单页面只需要一个入口，多页面可以设置多个入口
  2. 入口的文件必须是.js文件，因为webpack只认识js（不完全对，其实任意文件都可以，只是webpack会把它当做js来处理）

举个🌰

阅读全文 »

发表于 | 分类于 ， ， ，

前言

一直没机会学习redis，最近抽空学了一下，因为知道reids还是比较重要的，经常看到有人开发公众号因为没有对access_token进行缓存，判断是否过期，导致access_token的调用api次数超过限制而影响业务的情况，熟悉的人都知道使用redis基本上都是做缓存，因为他简单、速度快，可以说是个”快男”。使用reids做抽奖也很普遍，有空可以试试。本篇本章暂时只讲key、hash、list

redis简介

  • Redis 是完全开源免费的，遵守BSD协议，是一个高性能的key-value数据库。
  • Redis 与其他 key - value 缓存产品有以下三个特点：
    1. Redis支持数据的持久化，可以将内存中的数据保存在磁盘中，重启的时候可以再次加载进行使用。
    2. Redis不仅仅支持简单的key-value类型的数据，同时还提供list，set，zset，hash等数据结构的存储。
    3. Redis支持数据的备份，即master-slave模式的数据备份。

为什么要用redis（优势）

  1. 性能极高 – Redis能读的速度是110000次/s,写的速度是81000次/s 。
  2. 丰富的数据类型 – Redis支持二进制案例的 Strings, Lists, Hashes, Sets 及 Ordered Sets 数据类型操作。
  3. 原子 – Redis的所有操作都是原子性的，意思就是要么成功执行要么失败完全不执行。单个操作是原子性的。多个操作也支持事务，即原子性，通过MULTI和EXEC指令包起来。
  4. 丰富的特性 – Redis还支持 publish/subscribe, 通知, key 过期等等特性。

安装运行及调试（这里以mac为例）

  1. 先去官网下载安装包：http://www.redis.net.cn/download/
  2. 解压安装
1
2
3
4
5
> tar xzf redis-3.0.6.tar.gz
> make
> sudo make install
> cd /usr/local/bin && redis-server // 开启redis服务
> cd /usr/local/bin && redis-cli // 开启redis调试服务

开启调试会显示下面的界面，现在你就可以开始使用redis的api了

1
2
> cd /usr/local/bin && redis-cli
127.0.0.1:6379>

阅读全文 »

发表于 | 分类于 ，

vue的使用相信大家都很熟练了，使用起来简单。但是大部分人不知道其内部的原理是怎么样的，今天我们就来一起实现一个简单的vue

Object.defineProperty()

实现之前我们得先看一下Object.defineProperty的实现，因为vue主要是通过数据劫持来实现的，通过get、set来完成数据的读取和更新。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var obj = {name:'wclimb'}
var age = 24
Object.defineProperty(obj,'age',{
	enumerable: true, // 可枚举
    configurable: false, // 不能再define
    get () {
        return age
    },
    set (newVal) {
        console.log('我改变了',age +' -> '+newVal);
        age = newVal
    }
})

> obj.age
> 24

> obj.age = 25;
> 我改变了 24 -> 25
> 25

从上面可以看到通过get获取数据，通过set监听到数据变化执行相应操作，还是不明白的话可以去看看Object.defineProperty文档。

阅读全文 »

发表于 | 分类于

介绍

Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。此外，他们可以使用XMLHttpRequest执行 I/O (尽管responseXML和channel属性总是为空)。一旦创建， 一个worker 可以将消息发送到创建它的JavaScript代码, 通过将消息发布到该代码指定的事件处理程序（反之亦然）。

Web Worker使用要点

  • 同源限制：分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。

  • DOM 限制：Worker 线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无法使用document、window、parent这些对象。但是，Worker 线程可以navigator对象和location对象。

  • 通信联系：Worker 线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过消息完成。

  • 脚本限制：Worker 线程不能执行alert()方法和confirm()方法，但可以使用 XMLHttpRequest 对象发出 AJAX 请求。

  • 文件限制：Worker 线程无法读取本地文件，即不能打开本机的文件系统（file://），它所加载的脚本，必须来自网络。后面我们允许会做处理。

阅读全文 »

发表于 | 分类于 ，

我们在开发过程中大多会用到promise，想必大家对promise的使用都很熟练了，今天我们就来实现一个简单的promise，实现的效果如有出入还往指正。

整体结构

我们先来梳理一下整体的结果，以便后续好操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class MyPromise {
    constructor(fn){
        
    }
    resolve(){

    }
    then(){

    }
    reject(){

    }
    catch(){

    }
}
阅读全文 »

发表于 | 分类于

在开发的过程中，我们往往需要复制一个数据，在复制基本数据类型的时候不会出现问题，如string、number、null等。
但是我们复制一个引用类型的数据时，往往会出现问题，如array、object。

浅拷贝

看下面这段代码

1
2
3
var arr1 = [1,2,3];
var arr2 = arr1;
arr2.push(4)

我们打印一下看看arr1 arr2的结果

1
2
arr1: [1, 2, 3, 4]
arr2: [1, 2, 3, 4]

我们发现，改变arr2的同时也改变了arr1，WTF？

接下来我们看看对象

1
2
3
4
5
var obj1 = {
        name:'wclimb'
    };
var obj2 = obj1
obj2.age = 24

阅读全文 »