前端程小程

  • Home

  • Archives

深入理解Source Map

Posted on 2018-09-06 | Edited on 2018-09-07 | In 深入探究

背景

我们的项目源码通常通过一系列转换才能投入生产。但是,这也意味着,最终生成的代码已经改头换面了,不方便调试。

常见的源码转换,主要是以下三种情况

  • 压缩,减小体积
  • 多个文件合并,减少http请求数
  • 通过loader编译语言,例如TypeScript转换到js

Source Map为我们解决了这一问题。Source Map能将打包后文件映射到源文件中的原位置,方便开发者debug。

什么是Source Map

Source Map是一个信息文件,里面存储着位置信息,也就是转换之后的代码的每一个位置,所对应的转换前的位置。debug的时候,可以直接显示源代码,而不是转换后的代码。

Read more »

深入理解react-redux

Posted on 2018-08-24 | In 深入探究

redux和react-redux区别

待搞,先占坑。

理解redux中间件

什么是redux中间件

待搞,先占坑。

自己实现一个redux中间件

redux中间件的本质就是重写dispatch方法:

1
2
3
4
5
6
// 一个简单的logger中间件实现原理
store.dispatch = function dispatchLogger(action) {
console.log('before action....');
next(action);
console.log('after action....');
}

通过redux-promise来实现异步中间件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

// 一个promise异步中间件使用方法

// 1、返回一个action,action本身是promise
const actionCreatorA = (dispatch, title) => new Promise((resolve, reject) => {
return fetch('xx/xx/xx').then(res=> {type: 'addTodo', payload: res.value});
})

// 2、返回一个action,action.payload是promise(需要从redux-actions模块引入createAction方法)
dispatch(createAction(
'addTodo',
fetch('xx/xx/xx').then(res=> res.value);
))

// 一个promise异步中间件实现原理
store.dispatch = function dispatchPromise(action) {
// 如果action本身是promise,执行then,传入dispatch方法, 把异步请求到的action作为传入dispatch的入参。
return isPromise(action) ? action.then(dispatch) : next(action);
// 如果返回的payload是promise,执行action.payload.then,
return isPromise(action.payload) ?
action.payload.then(res => {
dispatch({...action, payload: res})
}).catch(error => {
return Promise.reject(error)
}) :
next(action)
}

面向对象编程(封装&继承)

Posted on 2018-08-22 | In 深入研究

最近开始重新梳理js基础知识,边学习、边思考、边练手、边记录。github源码地址

封装

构造函数模式

在构造函数中封装对象的属性和方法。

demo1

缺点: 原型对象中定义相同的属性或者方法时,每次新建实例都会生成一次,多占用内存。

思考: 能否将共有的方法只在内存中生成一次呢?

答案: 能。用原型模式

Read more »

Koa学习笔记

Posted on 2018-08-20 | In 学习笔记

Koa是干啥的

  • 一个基于node.js平台的web开发框架。
  • 由Express原班人马打造。
  • 没有捆绑任何中间件,更小。

api

一个无作用的Koa程序被绑定到3000端口

1
2
3
4
const Koa = require('koa');
const app = new koa();

app.listen(3000);
Read more »

关于我

Posted on 2018-07-26 | Edited on 2018-08-20 | In 生活点滴

关于我

react-koa-app-cli命令行工具

Posted on 2018-07-19 | Edited on 2018-08-20 | In 深入探究

基本思路

Read more »

Dockfile学习笔记

Posted on 2018-07-18 | Edited on 2018-09-11 | In 学习笔记

是什么东西?

是一个脚本。
是创建了一个新镜像的脚本。
是基于基础镜像创建一个新镜像的脚本。

干啥用的?

创建新的docker镜像。在公司内部环境,需要基于公司内部的node镜像,指定公司内部的sass源和npm源,在指定的生产环境中运行项目。

Read more »
12
一只程小程

一只程小程

你说开心就拍手~

17 posts
6 categories
4 tags
© 2019 一只程小程
Powered by Hexo v3.7.1
|
Theme — NexT.Pisces v6.3.0