npm 和 yarn 是目前比较常用的包管理工具。本文主要对 npm5+ 和 yarn 来做简单的对比和介绍。

npm 与 yarn 主要的命令对比：

一、yarn

yarn是2016年10月发布，目前在Github上获取了3.4w+的 star。官方给出的解释是：快速、可靠、安全的依赖管理。

1.1 特点

1.1.1 并行安装：

无论 npm 还是 yarn 在执行包的安装时，都会执行一系列任务。npm 是按照队列执行每个 package，也就是说必须要等到当前 package 安装完成之后，才能继续后面的安装。而 yarn 是同步执行所有任务，提高了性能。

1.1.2 离线模式：

如果之前已经安装过一个软件包，再次安装时就不用再从网络下载了。

1.1.3安装版本统一：

安装版本统一为了防止拉取到不同的版本，yarn 有一个锁定文件 (lock file) 记录了被确切安装上的模块的版本号。每次只要新增了一个模块，Yarn 就会创建（或更新）yarn.lock 这个文件。这么做就保证了，每一次拉取同一个项目依赖时，使用的都是一样的模块版本。

1.1.4 多注册来源处理：

所有的依赖包，不管他被不同的库间接关联引用多少次，安装这个包时，只会从一个注册来源去装，要么是 npm 要么是 bower, 防止出现混乱不一致

认识

高阶函数（Higher Order Function）作为函数式编程众多风格中的一项显著特征，经常被使用着。

那什么是高阶函数呢？高阶函数是对其他函数进行操作的函数，操作可以是将它们作为参数，或者是返回它们，即满指至少满足下列条件之一的函数：

• 函数作为参数被传递
• 函数作为返回值输出

应用

实际上我们日常开发中也会经常用到高阶函数。接下来看一下几个典型的应用实例：

做为参数传递

Array.prototype.map()

map() 接受一个函数作参数，这个函数封装了创建新数组的规则，从 map() 的使用可以看到，我们的目的是根据原数组获取一个新数组，这是不变的部分；而使用什么规则去创建，则是可变的部分。把可变的部分封装在函数参数里，动态传入 map()，使 map() 方法成为了一个非常灵活的方法。

1
2
3
4

const arr1 = [1,3,5]
const arr2 = arr1.map(item => tem*2)

console.log(arr2) //2,6,10

如今 Git 在团队开发中使用已经越来越普遍，那么如何做好提交信息的规范化呢？本文主要结合 Angular Git Commit message 规范，来介绍一下相关的配套工具使用。

Commit message 规范化的好处

• 提供更多的历史信息，方便快速浏览。
• 可以过滤某些commit（比如文档改动），便于快速查找信息。

如何规范化 Commit message

下面主要介绍一下相关的工具。

Commitizen

commitizen是一个撰写合格 Commit message 的工具。

VUE组件之间数据传递

父子组件之间传递

父 -> 子

(props)属性值方式

• 父组件关键代码：

  1 2 3

  <template> <Child :child-msg="msg"></Child> </template>

• 子组件关键代码：

  1 2 3 4 5 6

  export default { name: 'child', props: { child-msg: String //这里指定了字符串类型，如果类型不一致会警 } };

child-msg 为父组件给子组件设置的额外属性值，属性值需在子组件中设置props，子组件中可直接使用child-msg变量。

为什么要用子模块

痛点

在我们开发项目的时候可能会遇到下面这个问题：在你的项目中使用另外一个项目，也许这个是一个第三方开发的库或者是你独立开发和并在多个父项目中使用的。简单的说就是A同学开发的一个模块，被B、C…同学共同调用（使用），可能就形成了如下的这种关系。

这个场景下一个常见的问题产生了：你想将两个项目单独处理但是又需要在其中一个中使用另外一个。

解决方案

这种问题，Git 已经帮我们有了处理方案——子模块。

• 子模块允许你将一个 Git 仓库作为另一个 Git 仓库的子目录。 它能让你将另一个仓库克隆到自己的项目中，同时还保持提交的独立。
• 子模块关键字：git submodule
  阅读全文 »

最近利用空余时间研究学习了前端“三剑客”之 —— Angular。Angular 是一个开发平台。它能帮你更轻松的构建 Web 应用。Angular 集声明式模板、依赖注入、端到端工具和一些最佳实践于一身，为你解决开发方面的各种挑战。Angular 为开发者提升构建 Web、手机或桌面应用的能力（好官方～～～）。好了，接下来结合自己做 DEMO 的过程来说说。

github >> https://github.com/Hancoson/ng-zhihuDaily Star Star Star ~~

开始

• 脚手架：本 demo 是使用 Angular CLI 工具来构建的，不熟悉的同学可以去官网看看。
• 技术栈：
  • Angular 6，中文版
  • element-angular

自从 ES6 诞生以来，异步编程的方法得到了很大的发展。从 Promise 到 ES7 提案中的 async/await。目前，它仍处于提案阶段，async 函数可以说是目前异步操作最好的解决方案，是对 Generator 函数的升级和改进。那么今天就来具体说说 async/await 函数。

async/await 简介

• async/await 是异步代码的新方式
• async/await 基于 Promise 实现
• async/await 使得异步代码更像同步代码
• await 只能用在 async 函数中，不能用在普通函数中
• await 关键字后面必须跟 Promise 对象
• 函数执行到 await 后，Promise 函数执行完毕，但因为 Promise 内部一般都是异步函数，所以事件循环会一直 wait，直到事件轮询检查到 Promise 有了状态 resolve 或 reject 才重新执行这个函数后面的内容

async/await 用法

async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数。当函数执行的时候，一旦遇到 await 就会先返回一个 Promise 对象，等到异步操作完成，再接着执行函数体内后面的语句。

1
2
3
4
5
6
7
8
9
10

function timeout(ms) {
  return new Promise(resolve => {
    setTimeout(resolve, ms);
  });
}
async function asyncPrint(value, ms) {
  await timeout(ms);
  console.log(value);
}
asyncPrint('hello world', 50);

话说 PHP 是世界上“最好”的语言，我不是 PHPer ，所以今天我们的主角不是 PHP ，而是前端（Nextjs）。那么问题来了，Nextjs 是什么？

Next.js is a lightweight framework for static and server-rendered applications.

说直白了：Next.js 是一个基于 React 实现的服务端渲染框架。
好了，今天我们就来聊聊 Next.js 实现。

介绍

该项目通过使用 Nextjs 技术，实现了 React 同构方案。采用 Nodejs 搭建服务，结合 Mongoose 数据库，实现了一个简单的博客系统。
也可以参考项目 v1.0 版本通过 Ejs 模版的实现，相关文章>>。

好几年之前【大前端】这个词语就开始在“dev er”中流行起来了，那么大前端到底包含了哪些技术呢？传统的FE、Native（Hybrid）、Node、图形技术、VR……，今天我们来着重说说其中简单的一块——Nodejs（请求转发）。

需求

明确用 Node 来干什么，很重要。

• 从后台读取对应的 API
• 处理读取的数据，并发给前端（自己）

很明显这样可以完全抛弃 JSP 语言，并由前端自己来完成。

开发

说完就撸起袖子干吧～～～，下文以「blog中的demo（已开源）」为例，引入 Express 框架。

目录机构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.
├── app.js //入口文件
├── config //配置文件
├── controllers //控制器
├── logs //日志
├── models  //模型
├── node_modules //依赖
├── package.json
├── public //静态资源
├── routes //路由
├── services //服务
├── utils //工具方法
├── views //模版
│   └── index.html
└── yarn.lock

从目录机构开看是比较简单的，好了，我们来详细介绍一下比较主要的功能吧。

在一个经典的 React 应用中，组件之间通信是常用到的技术方案。在父子组件之间通常通过 props 来传递参数，而非父子组件就比较麻烦了，要么就一级一级通过 props 传递，要么就使用 Redux or Mobx 这类状态管理的状态管理库，但是这样无疑增加了应用的复杂度。在 FEers 的期盼中，React 团队终于从 16.3.0 版本开始新增了一个新的 API Context，福音啊。好了，今天我就来一起学习一下这个新的 Context。

什么时候使用 Context

Context 目的是为了共享可以被认为是 React 组件“全局”树的数据。例如当前应用的主题、首选语言等等。接下来看看通过 props 和 Context 两种方式实现按钮组件样式参数传递方式的对比：