wclimb的个人博客--分享


  • 首页

  • 分类

  • 关于

  • 归档

  • 标签

  • 搜索

webpack系列之输出文件分析

发表于 2019-06-19 | 分类于 javascript , webpack
| 约 9 分钟

写在前面

上一篇文章我们讲了如何使用 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系列之初探

发表于 2019-06-06 | 分类于 javascript , webpack
| 约 14 分钟

写在前面

相信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简易教程以及使用nodejs连接redis

发表于 2019-04-19 | 分类于 javascript
| 约 8 分钟

前言

一直没机会学习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>

阅读全文 »

JavaScript之实现一个简单的Vue

发表于 2018-09-11 | 分类于 javascript , vue
| 约 7 分钟

补充:写一个较为强大的Vue,支持虚拟DOM、diff更新以及基本的API,项目地址:https://github.com/wclimb/euv

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文档。

阅读全文 »

JavaScript之Web Worker

发表于 2018-09-10 | 分类于 javascript
| 约 3 分钟

介绍

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://),它所加载的脚本,必须来自网络。后面我们允许会做处理。

阅读全文 »

JavaScript之实现一个简单的promise

发表于 2018-09-09 | 分类于 javascript , promise
| 约 8 分钟

我们在开发过程中大多会用到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(){

}
}
阅读全文 »

JavsScript之浅拷贝与深拷贝

发表于 2018-07-29 | 分类于 javascript
| 约 4 分钟

在开发的过程中,我们往往需要复制一个数据,在复制基本数据类型的时候不会出现问题,如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

阅读全文 »

node项目服务器部署(新手教程)

发表于 2018-07-28 | 分类于 Node , 教程
| 约 5 分钟

写在前面

之前在github写了几个项目,然后一直有很多人问我node项目怎么部署到服务器上,于是乎应大家要求就写了这篇文章,此篇教程只提供给新手借鉴,如果你是大佬的话可以不用往下看了,教程多少有些缺陷,都是按照自己的印象写出来的,所以有问题还望指正。

linux服务器安装node

首先
下载node包

1
wget https://npm.taobao.org/mirrors/node/latest-v8.x/node-v8.1.0-linux-x64.tar.gz

解压

1
tar xvf node-v8.1.0-linux-x64.tar.gz

阅读全文 »

JavaScript之函数记忆

发表于 2018-07-12 | 分类于 javascript
| 约 1 分钟

最近在读语言精粹,读到函数记忆这块,觉得有必要记录一下

我们在开发过程中经常使用递归的方式调用函数,但是开发过程中很少有关心性能问题

我们看一下下面这段代码

1
2
3
4
5
6
7
8
9
var count = 0
var f = function(n){
count++
return n < 2 ? n : f(n - 1) + f(n - 2);
}
for(var i = 0; i <= 10; i++){
console.log(i,f(i))
}
console.log('执行次数', count)

结果

1
2
3
4
5
6
7
8
9
10
11
12
0 0
1 1
2 1
3 2
4 3
5 5
6 8
7 13
8 21
9 34
10 55
'执行次数', 453

执行一遍发现,f这个函数被调用了453次,我们调用了11次,而它自身调用了442次去计算可能已经被刚计算过的值。如果我们让函数具备记忆功能,就可以显著减少运算量。

接下来,我们定义一个memo的数组来保存我们得储存结果,并把它隐藏在闭包中,让该函数能一直访问到这个数组,不被垃圾回收机制回收

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var count = 0
var f = function(){
var memo = [0,1];
var fib = function(n){
count++
var result = memo[n];
if(typeof result !== 'number'){
result = fib(n - 1) + fib(n - 2)
memo[n] = result
}
return result
}
return fib
}()
for(var i = 0; i <= 10; i++){
console.log(i,f(i))
}
console.log('执行次数', count)

执行结果

1
2
3
4
5
6
7
8
9
10
11
12
0 0
1 1
2 1
3 2
4 3
5 5
6 8
7 13
8 21
9 34
10 55
执行次数 29

现在f函数只被调用了29次,我们调用了它11次,它调用了18次去取得之前储存的结果。

先就分享到这吧,关键拓宽思路

GitHub:wclimb

JavaScript之原型与原型链

发表于 2018-06-13 | 分类于 javascript
| 约 4 分钟

万物皆对象

在JavaScript中除值类型之外,其他的都是对象,为了说明这点,我们举几个例子
我们可以使用typeof来做类型判断

1
2
3
4
5
6
7
8
9
typeof a;             // undefined
typeof 1; // number
typeof 'wclimb'; // string
typeof true; // boolean

typeof function(){}; // function
typeof []; // object
typeof null; // object
typeof {}; // object

除了undefined、number、string、boolean属于值类型之外,其他都是对象。你可能要问了,不是还有一个是function吗?要校验他是不是应该对象可以这样做:

1
2
var fn = function(){}
fn instanceof Object // true

由上面的例子所示,函数确实是对象,为什么呢?我们看一下下面的例子

1
2
3
4
5
function Person(name){
this.name = name;
}
var person = new Person('wclimb');
console.log(person) // Person {name: "wclimb"}

由此我们可以得知,对象都是通过函数创建的,这么说你可能又会说不对,你看下面的就不是函数创建的

阅读全文 »

12345
wclimb

wclimb

41 日志
19 分类
22 标签
GitHub QQ群 小程序 公众号
Links
  • Lsnsh
  • curtain Tan
  • eraylee
  • flutter体验
  • 技术鹏
  • 苏博客
  • Blog Luo
© 2017 - 2020 wclimb
赣ICP备 17009321号
访问人数 人次