发表于 | 分类于

业精于勤，荒于嬉；行成于思，毁于随

前言

关于周记

最近老是想起这句话，总觉得自己走在“荒于嬉，毁于随”的路上。一周下来感觉自己脑子空空的，除了工作周报上的几行记录，我再也想不出我做了什么。知乎刷了数百上千条，也没觉得见识上长见了多少。上一篇博客竟然是三个月前，半途而废的事情我倒是能列出一大堆，两周前就应该完成的那篇 blog、每晚的跑步计划…

这种状态我是憎恨的，让我整天过得 恍恍惚惚，每周过得 碌碌无为。仔细想想主要是这些原因：

  • 时间花在无意义的事情上
  • 新知识缺乏沉淀而导致遗忘
  • 持之以恒的毅力和自控力

早就该反省自己了，现在也是时候去改变了，所以打算提出周记系列的 blog。因为每周都在工作，也有零碎的时间去学习，总有值得记录的东西，不求多，但求精，记录下来周末回顾。以前在学校的时候，马老师也是强制我们写实验室周报，然而离开学校后，也没有养成这个习惯，枉费马老师苦心。是时候重拾起来了。

实现流程

一篇周记的完成是个持续的过程，是一周所有记录的入口，就把他当做草稿纸，遇到什么就写什么，然后周末整理成完整有序的文章，至此一篇周记结束。创建下一个循环。

利用好 Pocket 进行在线资源收藏，记录过程中难免有网上参考的内容，这个产品可以处理得很好。

每一篇周记需要有个独一无二的名字，格式：周记-*。

不强求每周一篇，但是希望能每周一篇，或者说称为阶段性总结更合适吧，这个阶段不能太长，也不能太短。

正文

这次打算记录如下三个知识点，后两个知识点是需要深入研究的，暂且记录一下吧。

Css 中的长度/尺寸单位

长度/尺寸单位分为相对单位和绝对值单位

绝对单位

mm, cm, in: 毫米（Millimeters），厘米（centimeters），英寸（inches）
pt, pc: 点（Points (1/72 of an inch)）， 十二点活字（ picas (12 points.)）

相对单位

em: 相对 当前元素 font-size 尺寸的倍数，1em = 1倍。
rem: 相对 根元素 font-size 尺寸的倍数，1rem = 1倍，根元素一般是 ，ie11+ 完全兼容
ex, ch: 分别是小写x的高度和数字0的宽度，所以值与字体相关，一般用于文字微调，兼容性不友好。
vw, vh: 分别是视口宽度的1/100和视口高度的1/100，兼容性不友好。

参考
CSS的值和单位
七个你可能不了解的CSS单位

Javascript 设计模式

设计模式是软件中常会提到的东西，通俗点就是解决问题的方式，js 是通过原型链继承的，所以有些模式的实现细节跟 java 等语言不太一样，而且前端一般业务代码中运营较少，框架层面的开发的话会应用较多，之前自己实现的 Jayce 框架就运用到了 单例模式 、 职责链模式 和 发布订阅模式。其实很多时候也会无意间写出模式，只是没发现而已。再次记录一些曾看过而且还不错的文章吧，以供后续查阅。

个人觉得想要掌握各种设计模式，还是需要写一个复杂的应用才行，尤其是框架这种，因为只有你的代码足够复杂，才会需要用设计模式去优化你的代码。

图说设计模式
详解 Javascript十大常用设计模式

网络通信过程

虽然学过网络原理，不过已经忘得一干二净，回头再去看的时候，却不知如何开始，网络涉及的知识很多，我觉得首先得了解网络的通讯过程，即在应用层的请求到回复会发生哪些事情。《网络通信过程》 这篇文章对流程讲解还不错，能初步了解全貌。

web 开发有个经典的问题：从输入url到显示页面会经历哪些过程？网络通讯过程在该问题的整个过程占有非常重要的一环，回答上也是绕不过去的。该问题也打算整理成一篇 blog，正在进行中。《当你在浏览器中输入 baidu.com 并且按下回车后发生了什么？》这篇文章值得参阅。

后记

有始有终

发表于 | 分类于

问题

最近遇到一个情况，正在开发一个npm包，但是这个包是配合react使用的，而这个包是单独作为项目开发的，也需要发布到npm上去，但是在开发过程中需要结合react项目进行调试等，通过修改再发布到npm，react项目中再install的方式肯定不方便，所以问题来了，如何在一个项目中引入本地正在开发的package呢？

解决方法

其实npm自带了这个功能：npm link，npm link会将一个package添加到npm全局环境中，然后再需要使用的地方链接到node_modules目录中去。

还有其他解决方法，不过最方便的还是这个方式。

用法

假设开发的package name 为 example-package，即package.json里的name字段值。

  • 在正在开发的package目录中执行npm link
  • 在需要引入这个package项目中执行 npm link example-package

然后就通过软连接的方式引入这个包了，你在原目录修改这个包都会同步到项目中去。

参考

你所不知道的模块调试技巧

发表于 | 分类于

About

birth

个人比较对实时性的应用比较感兴趣，而自己是个前端爱好者，非常喜欢基于react的单页应用开发，于是想能否结合react高点事情呢？于是诞生了开发Jayce这个框架的想法，一句话描述就是:

基于websocket的实时单页应用开发框架

Jayce可以让开发者用node.js + websocket + redux + react 开发出能够灵活的、健壮的、复杂的实时web应用，让程序员有更多时间喝咖啡。:coffee: :coffee:

progress

经过了大半个月的设计和开发，目前开发出了非常基础的版本，完成了核心架构的开发，基本上能够完成需要的功能。但是目前只是个婴儿，还不能用于正式项目中。

目前相当于踏出了第一步，后续还有很长的路要走。:muscle: :muscle: :muscle:

Installation

Jayce由三个子框架组成：jayce、jayce-dom、jayce-server，与其对应的npm包为 jayce-fe、jayce-dom、jayce-server

jayce-fe与jayce-dom用于前端部分，jayce-server用于服务端

前端项目安装:

1
npm i jayce-fe jayce-dom --save

服务端安装

1
npm i jayce-server --save

Documention

由于框架还有很多部分需要完善，暂时还没有编写开发文档，关于框架的详细介绍，可以看这一篇文章

License

Jayce is MIT licensed.

发表于 | 分类于

在使用react的时候，会有需要监听react-router路由变化的需求，针对特殊路由进行处理等。

  • 一种方案是将所有的路由组件都放在一个父组件里面，然后通过父组件的 this.props.location.pathname 进行手动获取。
  • 如果结合redux存储的话可以使用 react-redux-router这个库。

最直接的方案是 使用 history 对象，react-router 也是基于这个 history 库实现的。

引入history库并实例化history对象，添加监听方法，然后传入到 的history属性中。

示例代码：

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
28
29
30
import React from 'react';
import ReactDOM from 'react-dom';
import createHashHistory from "history/createHashHistory"
import {
  Router,
  Route,
  Link,
  Switch
} from 'react-router-dom';

const history = createHashHistory()

history.listen((location, action) => {
  console.log(
    `The current URL is ${location.pathname}${location.search}${location.hash}`
  )
  console.log(`The last navigation action was ${action}`)
})

ReactDOM.render(
  <Router history={history}>
    <div>
      <App />
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route component={NoMatch}/>
      </Switch>
    </div>
  </Router>, document.getElementById('root'));
registerServiceWorker();

发表于

最近经常购买阿里云的产品，发现阿里云有幸运券这个东西，于是自己也申请了个阿里云大大使，在此提供我的阿里云幸运券。注意我的名称：houserqu@qq.com

立即领券

使用说明

  • 进入领取页面领取需要的产品幸运券，建议一键领取
  • 只能在新购和升级产品的时候抵用！！！
  • 有效期：幸运券自领取之日（含）三十天内有效。
  • 在幸运券有效期内会默认优先使用第1个领取的幸运券（但有权选择使用谁的幸运券）
  • 幸运券可以和其他优惠（包含但不限于官网折扣、代金券、储值卡等）同时使用。

houserqu的幸运券

了解更多关于云大使问题

发表于

最近需要开启一个新的项目，本开始就是用各种核心技术连接在一起。回头一看真是感觉毫无特色啊，而且还老长老长，依然无法描述出这个项目到底是干啥的，既然如此，还不如还不如取个简短个性的名称，说不定某一天这个项目就火了呢！

网上搜了一波，可以从这些角度入手。除非预知项目一定会火，不建议创建新的单词。选好名字后去github搜索一下，没有重名就可以考虑使用了。

动物名称

推荐一个动物检索网站

成功示例

游戏角色名称

魔兽角色名称检索

成功示例

中国风

麒麟 盘古 女娲…

各种电影,小说的角色名

发表于

日常开发中会遇到值得记录的东西，发在博客中意义不大，对读者来说降低了博客质量，而且太零散，不成体系，所以有必要搭建个人知识管理系统。

需求

  • 通过git进行版本控制
  • markdown编写
  • 能够以web发布供别人访问

首先考虑的是 GitBook ，然后国内访问效果不太理想，即使翻墙也很慢，只好放弃。

hexo这种模式也不错，但是其针对还是blog，无法层级式的管理内容。

最适合替代 GitBook 的目前来看只有 看云 了。功能基本完善，最终选择了看云。

可以通过左边导航进入我的 Wiki。

欢迎指教。

发表于

如需将 DomCollection 转换成Array, 常用的方法是 Array.prototype.slice.call(list,0)。不过在IE下无法工作，应为DOMCollection对象与标准的Dom对象不同。建议用额外的方法去完成，从而保证兼容性.

1
2
3
4
5
6
7
8
function toArray(obj) {
  var array = [];
  // iterate backwards ensuring that length is an UInt32
  for (var i = obj.length >>> 0; i--;) { 
    array[i] = obj[i];
  }
  return array;
}

参考

How to convert a DOM node list to an array in Javascript?
Array.prototype.slice.call()方法详解

发表于

最近遇到一个需求，开发chrome插件的时候存在多个html页面，create-react-app 脚手架默认是单html开发的，所以需要重新配置一下wepack，实现多个页面输入和输出。

实例说明

项目地址

完成后的目录结构

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
.
├── LICENSE
├── README.md
├── build
│   ├── asset-manifest.json
│   ├── favicon.ico
│   ├── houser.jpg
│   ├── index.html
│   ├── location.png
│   ├── popup.html
│   ├── service-worker.js
│   └── static
│       ├── css
│       │   ├── index.773fa05a.css
│       │   └── index.773fa05a.css.map
│       └── js
│           ├── index.98348617.js
│           ├── index.98348617.js.map
│           ├── popup.7ae02277.js
│           └── popup.7ae02277.js.map
├── build.zip
├── config
│   ├── env.js
│   ├── jest
│   │   ├── cssTransform.js
│   │   └── fileTransform.js
│   ├── paths.js
│   ├── polyfills.js
│   ├── webpack.config.dev.js
│   ├── webpack.config.prod.js
│   └── webpackDevServer.config.js
├── package-lock.json
├── package.json
├── public
│   ├── background
│   │   ├── 139.jpg
│   │   └── 444H.jpg
│   ├── favicon.ico
│   ├── houser.jpg
│   ├── index.html
│   └── location.png
├── scripts
│   ├── build.js
│   ├── start.js
│   └── test.js
└── src
    ├── index
    │   ├── App.js
    │   ├── App.less
    │   ├── App.test.js
    │   ├── components
    │   ├── config.js
    │   ├── index.js
    │   ├── index.less
    │   ├── logo.svg
    │   ├── page
    │   ├── registerServiceWorker.js
    │   ├── service
    │   ├── stores
    │   └── utils
    └── popup
        ├── App.js
        ├── App.less
        ├── components
        ├── index.js
        └── registerServiceWorker.js

目录说明： 多个页面在分文件夹单独放置在src下,分别为index和popup，build之后都在一个文件里。为了缩短篇幅，删除一些无用目录。

流程

暴露出create-react-app的配置文件

1
$ create-react-app eject

修改path

找到config目录下的paths.js，添加需要的路径变量，后续引用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
module.exports = {
  dotenv: resolveApp('.env'),
  appBuild: resolveApp('build'),
  appPublic: resolveApp('public'),
  appHtml: resolveApp('public/index.html'),
  appIndexJs: resolveApp('src/index/index.js'),   //此处是默认页面入口js路径
  appPopupJs: resolveApp('src/popup/index.js'),   //自行添加的popup.html页面的入口js路径
  appPackageJson: resolveApp('package.json'),
  appSrc: resolveApp('src'),
  yarnLockFile: resolveApp('yarn.lock'),
  testsSetup: resolveApp('src/setupTests.js'),
  appNodeModules: resolveApp('node_modules'),
  publicUrl: getPublicUrl(resolveApp('package.json')),
  servedPath: getServedPath(resolveApp('package.json')),
};

修改webpack.config.dev.js

修改webpack.config.dev.js

entry增加入口文件

1
2
3
4
5
6
7
8
9
10
11
12
entry: {
    index: [
      require.resolve('./polyfills'),
      require.resolve('react-dev-utils/webpackHotDevClient'),
      paths.appIndexJs,
    ],
    popup: [
      require.resolve('./polyfills'),
      require.resolve('react-dev-utils/webpackHotDevClient'),
      paths.appPopupJs,   // paths.js中配置的路径，也可以写成  paths.appSrc + '/popup/index.js',
    ]
  },

修改output输出文件名，避免冲突

1
2
3
4
5
6
7
8
output: {
  pathinfo: true,
  filename: 'static/js/[name].bundle.js',  // 添加 [name]
  chunkFilename: 'static/js/[name].chunk.js',
  publicPath: publicPath,
  devtoolModuleFilenameTemplate: info =>
    path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
},

增加并修改 HtmlWebpackPlugin 插件配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
plugins: [
  // ...
  new HtmlWebpackPlugin({
    inject: true,
    chunks: ["index"],  // 指定入口 js 文件
    filename: 'index.html', //配置输入文件名
    template: paths.appHtml,
  }),
  new HtmlWebpackPlugin({
    inject: true,
    chunks: ["popup"],  // 指定入口 js 文件
    filename: 'popup.html', //配置输入文件名
    template: paths.appHtml,
  }),
  // ...
],

修改webpack.config.prod.js

webpack.config.prod.js 修改方式跟 webpack.config.dev.js基本一样，只需要配置入口，出口和html插件,其他配置不要改变。

结语

webpack的基本流程就是入口和出口，中间经过loader和插件进行处理，所以多页面的配置只需要针对入口和出口进行增加配置即可。例如build的时候也可以进行分文件导出，只需要调整一下文件生成路径就行。

发表于 | 分类于

全栈开发者 Kamran Ahmed 在github上制订了一份现代全栈开发的路线图，目前包含三部分：前端、后端、软件工程。目前该项目GitHub的stars达到了47000+，可见认可度非常高。本文是她对前端开发的整个学习过程的详细解释。

原文 译文

在此放上其前端路线图

路线图