wclimb的个人博客--分享


  • 首页

  • 分类

  • 关于

  • 归档

  • 标签

  • 搜索

JavaScript之实现一个简单的promise

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

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

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

写在前面

之前在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
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

万物皆对象

在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"}

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

阅读全文 »

JavaScript之节流与防抖

发表于 2018-06-12 | 分类于 javascript

背景

我们在开发的过程中会经常使用如scroll、resize、touchmove等事件,如果正常绑定事件处理函数的话,有可能在很短的时间内多次连续触发事件,十分影响性能。
因此针对这类事件要进行节流或者防抖处理

节流

节流的意思是,在规定的时间内只会触发一次函数,如我们设置函数500ms触发一次,之后你无论你触发了多少次函数,在这个时间内也只会有一次执行效果

先来看一个例子

See the Pen gKWLpO by wclimb (@wclimb) on CodePen.

我们看到使用了节流的在1000ms内只触发了一次,而没有使用节流的则频繁触发了调用的函数

接下来看看代码实现
v1 第一次不触发,不传参实现

1
2
3
4
5
6
7
8
9
10
11
12
13
function throttle(fn,interval){
var timer;
return function(){
if(timer){
return
}
timer = setTimeout(() => {
clearTimeout(timer)
timer = null
fn()
}, interval || 1000);
}
}

效果是实现了,但是我在尝试在执行函数里console.log(this),结果发现this指向的是window,而且还发现我们不能传递参数,下面就来改进一下

阅读全文 »

HTTP缓存——304与200 from cache

发表于 2018-03-06 | 分类于 javascript , HTTP

HTTP与缓存相关的字段

1. 通用字段

字段名称 释义
Cache-Control 控制缓存具体的行为
Pragma HTTP1.0时的遗留字段,当值为”no-cache”时强制验证缓存
Date 创建报文的日期时间(启发式缓存阶段所用)

2. response字段

字段名称 释义
ETag 服务器生成资源的唯一标识
Vary 代理服务器缓存的管理信息
Age 资源在缓存代理中存贮的时长(取决于max-age和s-maxage的大小)

3. request字段

字段名称 释义
If-Match 条件请求,携带上一次请求中资源的ETag,服务器根据这个字段判断文件是否有新的修改
If-None-Match 和If-Match作用相反,服务器根据这个字段判断文件是否有新的修改
If-Modified-Since 比较资源前后两次访问最后的修改时间是否一致
If-Unmodified-Since 比较资源前后两次访问最后的修改时间是否一致

4. 实体字段

字段名称 释义
Expires 告知客户端资源缓存失效的绝对时间
Last-Modified 资源最后一次修改的时间

协商缓存(304)

If-modified-Since/Last-Modified

  • 浏览器在发送请求的时候服务器会检查请求头request header里面的If-modified-Since,如果最后修改时间相同则返回304,否则给返回头(response header)添加last-Modified并且返回数据(response body)。
    1
    2
    if-modified-since:Wed, 31 May 2017 03:21:09 GMT
    if-none-match:"42DD5684635105372FE7720E3B39B96A"
阅读全文 »

nodejs微信支付之扫码支付

发表于 2018-02-14 | 分类于 javascript , node , 微信支付 , egg

前言

本篇文章主要是记录本人在微信扫码支付过程中所遇到的问题,给大家一个借鉴作用,希望对你们有帮助

开发环境

  • nodejs v8.1.0
  • egg v1.1.0

准备工作

  • 微信公众号-appid
  • 微信商户号-mch_id
  • key值(签名算法所需,其实就是一个32位的密码,可以用md5生成一个)(key设置路径:微信商户平台(pay.weixin.qq.com)–>账户设置–>API安全–>密钥设置)

扫码支付-统一下单

以下才用的是微信模式二,因为比较简单

阅读全文 »

使用 Vue2.js + Node.js 搭建一个小型的全栈项目

发表于 2017-09-08 | 分类于 javascript , node , vue

写在前面

由于最近公司业务不是很忙,空闲时间比较多,于是就在纠结Vue.js(之前就学习过)和Node.js先专研哪个比较好,最终选择了先玩玩Node.js。经过一段时间的学习,就有了教程 Node+Koa2+Mysql 搭建简易博客 GitHub地址,想要了解的可以先看看,个人水平有限,希望可以帮到你。
大概过来一个多月,我决定两路开工。使用Node.js给前端写接口,配备后台管理功能,先把后台搭建好。大概几天过后,后台一些简单的功能实现后,就开始用Vue.js开始搭建前台,也一直在想做点什么比较好,于是就做了个豆瓣评分类似的项目。

前端项目地址 https://github.com/wclimb/vue-video
前端预览 http://video.wclimb.site

后端项目地址 https://github.com/wclimb/video-admin
后台管理 http://vue.wclimb.site

API接口地址 https://github.com/wclimb/video-admin/blob/master/API.md

技术栈(Vue2.js + Node.js 全栈项目)

由于页面不是很多,vuex用的不多,关键掌握怎么实现就好了

vue2 + vuex + vue-router + webpack + fetch + sass + flex + svg + 阿里字体图标

运行

1
2
3
4
5
6
7
8
9
10
11
git clone https://github.com/wclimb/vue-video.git

cd vue-video

npm install 建议使用淘宝镜像(https://npm.taobao.org/) => cnpm i

npm run dev (运行项目)

npm run build (打包项目)

ps: 如果打包之后文件运行不了,请打包之前把路由的 mode:'history'注释掉,该功能去掉了url中丑陋的 # 号
阅读全文 »

MySQL基础

发表于 2017-07-20

转载自 mysql-tutorial

开始使用

MySQL 为关系型数据库(Relational Database Management System),一个关系型数据库由一个或数个表格组成, 如图所示的一个表格:

  • 表头(header): 每一列的名称;
  • 列(col): 具有相同数据类型的数据的集合;
  • 行(row): 每一行用来描述某个人/物的具体信息;
  • 值(value): 行的具体信息, 每个值必须与该列的数据类型相同;
  • 键(key): 表中用来识别某个特定的人\物的方法, 键的值在当前列中具有唯一性。

    登录MySQL

1
2
3
4
5
6
mysql -h 127.0.0.1 -u 用户名 -p
mysql -D 所选择的数据库名 -h 主机名 -u 用户名 -p
mysql> exit # 退出 使用 “quit;” 或 “\q;” 一样的效果
mysql> status; # 显示当前mysql的version的各种信息
mysql> select version(); # 显示当前mysql的version信息
mysql> show global variables like 'port'; # 查看MySQL端口号

创建数据库

对于表的操作需要先进入库use 库名;

1
2
3
4
5
6
7
8
-- 创建一个名为 samp_db 的数据库,数据库字符编码指定为 gbk
create database samp_db character set gbk;
drop database samp_db; -- 删除 库名为samp_db的库
show databases; -- 显示数据库列表。
use samp_db; -- 选择创建的数据库samp_db
show tables; -- 显示samp_db下面所有的表名字
describe 表名; -- 显示数据表的结构
delete from 表名; -- 清空表中记录
阅读全文 »
123
wclimb

wclimb

26 日志
19 分类
22 标签
GitHub Weibo QQ群 小程序
Links
  • dcdcdog
  • 技术鹏
  • 苏博客
© 2017 - 2019 wclimb
赣ICP备 17009321号
访问人数 人次