随笔分类 - 原创文章
摘要：Node.js 10已经进入LTS时代！其应用场景已经从脚手架、辅助前端开发（如SSR、PWA等）扩展到API中间层、代理层及专业的后端开发。Node.js在企业Web开发领域也日渐成熟，无论是在API中间层，还是在微服务中都得到了非常好的落地。本书将通过Web开发框架Koa2，引领你进入Node.js的主战场！
本书系统讲解了在实战项目中使用Koa框架开发Web应用的流程和步骤。第1章介绍Node.js的安装、开发工具及调试。第2章和第3章介绍搭建Koa实战项目的雏形。第4章详细介绍HTTP基础知识及其实战应用。第5章介绍MVC、模板引擎和文件上传等实用功能。第6～8章介绍数据库、单元测试及项目的优化与部署。第9～13章介绍从零开始搭建时下火爆的微信小程序前端及后台管理应用的全部过程，以及最终的服务器部署，包括HTTPS、Nginx。
本书示例丰富、侧重实战，以完整的实战项目贯穿全部章节，并提供书中涉及的所有源码及部分章节的配套视频教程，将是前端开发人员立足新领域和后端开发人员了解Node.js并使用Koa2开发Web应用的得力助手。
阅读全文
摘要：### React 深入系列2：组件分类
> React 深入系列，深入讲解了React中的重点概念、特性和模式等，旨在帮助大家加深对React的理解，以及在项目中更加灵活地使用React。
React 组件有很多种分类方式，常见的分类方式有函数组件和类组件，无状态组件和有状态组件，展示型组件和容器型组件。好吧，这又是一篇咬文嚼字的文章。但是，真正把这几组概念咬清楚、嚼明白后，对于页面的组件划分、组件之间的解耦是大有裨益的。
阅读全文
摘要：>React 深入系列，深入讲解了React中的重点概念、特性和模式等，旨在帮助大家加深对React的理解，以及在项目中更加灵活地使用React。
React 中的元素、组件、实例和节点，是React中关系密切的4个概念，也是很容易让React 初学者迷惑的4个概念。现在，老干部就来详细地介绍这4个概念，以及它们之间的联系和区别，满足喜欢咬文嚼字、刨根问底的同学（老干部就是其中一员）的好奇心。
阅读全文
摘要：编程技巧，再通过装饰器的结合完全了关注上的分离。同时使用了Typescript(也支持Javascript)为主要开发语言，更保证了整个后端系统的健壮性。
阅读全文
摘要：如果你使用 React ，你可以在各个工程里面看到 [Dan Abramov](https://github.com/gaearon?tab=repositories) 的身影。他于 2015 年加入 facebook，是 React Hot Loader 、React Transform、redux-thunk、redux-devtools 等等的开发者。同样也是 React、Redux、Create-React-App 的联合开发者。从他的签名 *Building tools for humans.* 或许表明了他想打造高效的开发环境以及调试过程。
作为 Dan 的小迷妹，如他说 *is curious where the magic comes from*。这篇文章会带你们去了解 React Hot Loader 的由来，它实现的原理，以及在实现中遇到的问题对应的解决方法。也许你认为这篇文章太过于底层，对日常的业务并没有帮助，但希望你和我一样能通过了解一个实现得到乐趣，以及收获一些思路。
阅读全文
摘要：**重新定义微信小程序的开发**
>官网：[https://qiu8310.github.io/minapp/](https://qiu8310.github.io/minapp/)
>作者：[Mora](https://github.com/qiu8310)
# minapp
**重新定义微信小程序的开发**
## 使用
1. 用 npm 安装命令行工具： `npm install -g @minapp/cli --registry "https://registry.npmjs.org/"` （避免从淘宝镜像上安装，它上面的还是老版本，已经给他们提了一个 [issue](https://github.com/cnpm/cnpm/issues/243)）
2. 初始化项目：`minapp init <你要创建项目的文件夹>` (同时支持创建 js 和 ts 项目)
3. 安装两个 vscode 插件：[minapp][vscode-minapp] 和 [dot-template][vscode-dot-template]（可选，但建议安装）
阅读全文
摘要：与众不同的学习方式，为你打开新的编程视角
- 独特的『同步学习』方式
- 文案讲解+视频演示，文字可激发深层的思考、视频可还原实战操作过程。
- 云集一线大厂有真正实力的程序员
- iKcamp 团队云集一线大厂经验丰厚的码农，开源奉献各教程。
- 改版自真实的线上项目
- 教程项目并非网上随意 `Demo`，而是来源于真实线上项目，并改版定制为教程项目
- 源码开放
- 课程案例代码完全开放给你，你可以根据所学知识自行修改、优化。
阅读全文
摘要：# 处理错误请求
> 爱能遮掩一切过错。
当我们在访问一个站点的时候，如果访问的地址不存在(404)，或服务器内部发生了错误(500)，站点会展示出某个特定的页面，比如：
那么如何在 `Koa` 中实现这种功能呢？其实，一个简单的中间件即可实现，我们把它称为 `http-error`。实现过程并不复杂，拆分为三步来看：
- 第一步：确认需求
- 第二步：整理思路
- 第三步：代码实现
阅读全文
摘要：> 文：正龙（沪江网校Web前端工程师）
>本文原创，转载请注明作者及出处
之前的文章“[走进Node.js之HTTP实现分析](http://mp.weixin.qq.com/s?__biz=MzI1MTE2NTE1Ng==&mid=2649516579&idx=1&sn=cb3ef197a637429774d3eb297e01828f&chksm=f1efeaa8c69863bedfd102bca2abb67de44b92cfee99feb4825a73386617517856a2b64a8a87&scene=21#wechat_redirect)”中，大家已经了解 Node.js 是如何处理 HTTP 请求的，在整个处理过程，它仅仅用到单进程模型。那么如何让 Web 应用扩展到多进程模型，以便充分利用CPU资源呢？答案就是 Cluster。本篇文章将带着大家一起分析Node.js的多进程模型。
阅读全文
摘要：经常逛 webpack 官网的同学应该会很眼熟上面的图。正如它宣传的一样，webpack 能把左侧各种类型的文件（webpack 把它们叫作「模块」）统一打包为右边被通用浏览器支持的文件。webpack 就像是魔术师的帽子，放进去一条丝巾，变出来一只白鸽。那这个「魔术」的过程是如何实现的呢？今天我们从 webpack 的核心概念之一 —— loader 来寻找答案，并着手实现这个「魔术」。看完本文，你可以：
- 知道 webpack loader 的作用和原理。
- 自己开发贴合业务需求的 loader。
## 什么是 Loader ？
在撸一个 loader 前，我们需要先知道它到底是什么。本质上来说，loader 就是一个 node 模块，这很符合 webpack 中「万物皆模块」的思路。既然是 node 模块，那就一定会导出点什么。在 webpack 的定义中，loader 导出一个函数，loader 会在转换源模块（resource）的时候调用该函数。在这个函数内部，我们可以通过传入 `this` 上下文给 Loader API 来使用它们。回顾一下头图左边
阅读全文
摘要：> 作者：佳杰
> 本文原创，转载请注明作者及出处
# 如何实现VM框架中的数据绑定
## 一：数据绑定概述
视图（view）和数据（model）之间的绑定
## 二：数据绑定目的
不用手动调用方法渲染视图，提高开发效率；统一处理数据，便于维护
## 三：数据绑定中的元素
视图（view）：说白了就是html中dom元素的展示
数据（model）：用于保存数据的引用类型
## 四：数据绑定分类
view > model的数据绑定：view改变，导致model改变
model > view的数据绑定：model改变，导致view改变
## 五：数据绑定实现方法
view > model的数据绑定实现方法
修改dom元素（input,textarea,select）的数据，导致model产生变化，
只要给dom元素绑定change事件，触发事件的时候修改model即可，不细讲
model > view的数据绑定实现方法
1.发布订阅模式（backbone.js用到）；
2.数据劫持
阅读全文
摘要：# JSON 数据
> 我颠倒了整个世界，只为摆正你的倒影。
前面的文章中，我们已经完成了项目中常见的问题，比如 `路由请求`、`结构分层`、`视图渲染`、`静态资源`等。
那么，`JSON` 呢？`JSON` 格式数据的传输，已经深入到了我们的码里行间，脱离了 `JSON` 的人想必是痛苦的。那么，复合吧！
## 如何设置 JSON 格式
伟大的武术家——李小龙先生——说过这样一段话：
```txt
Empty your mind, Be formless,shapeless like water.
You put water in a cup, it becomes the cup.
You put water in a bottle, it becomes the bottle.
You put water in a teapot , i
阅读全文
摘要：# 处理静态资源
> 无非花开花落，静静。
## 指定静态资源目录
这里我们使用第三方中间件： `koa-static`
### 安装并使用
安装 `koa-static`：
```js
npm i koa-static -S
```
修改 `app.js`，增加并指定 `/public` 目录为静态资源目录。
阅读全文
摘要：在前面几节中，我们已经实现了项目中的几个常见操作：启动服务器、路由中间件、`Get` 和 `Post` 形式的请求处理等。现在你已经迈出了走向成功的第一步。
目前，整个示例中所有的代码都写在 `app.js` 中。然而在业务代码持续增大，场景更加复杂的情况下，这种做法无论是对后期维护还是对患有强迫症的同学来说都不是好事。所以我们现在要做的就是：『分梨』。
阅读全文
摘要：# Http 请求
> 在学习了 `koa-router` 之后，我们就可以用它来处理一些常见的请求了，比如 `POST/GET` 。
`koa-router` 提供了 `.get`、`.post`、`.put` 和 `.del` 接口来处理各种请求，但实际业务上，我们大部分只会接触到 `POST` 和 `GET`，所以接下来只针对这两种请求类型来说明。
当我们捕获到请求后，一般都需要把请求带过来的数据解析出来。数据传递过来的方式一般有三种：
阅读全文
摘要：# 路由 koa-router
> 上一节我们学习了中间件的基本概念，本节主要带大家学习下 `koa-router` 路由中间件的使用方法。
路由是用于描述 `URL` 与处理函数之间的对应关系的。比如用户访问 `http://localhost:3000/`，那么浏览器就会显示 `index` 页面的内容，如果用户访问的是 `http://localhost:3000/home`，那么浏览器应该显示 `home` 页面的内容。
要实现上述功能，如果不借助 `koa-router` 或者其他路由中间件，我们自己去处理路由，那么写法可能如下所示：
阅读全文
摘要：# 文章
## middleware 中间件
> 正是因为中间件的扩展性才使得 `Koa` 的代码简单灵活。
在 `app.js` 中，有这样一段代码：
```js
app.use(async (ctx, next)=>{
await next()
ctx.response.type = 'text/html'
ctx.response.body = 'Hello World'
})
```
它的作用是：每收到一个 `http` 请求，`Koa` 都会调用通过 `app.use()` 注册的 `async` 函数，同时为该函数传入 `ctx` 和 `next` 两个参数。而这个 `async` 函数就是我们所说的中间件。
阅读全文
摘要：* [小程序和 H5 区别](#xcx1)
* [小程序的运行过程](#xcx2)
* [解决小程序接口不支持 Promise 的问题](#xcx3)
* [小程序组件化开发及通信](#xcx4)
## 小程序和 H5 区别
> 我们不一样，不一样，不一样。
### 运行环境 runtime
首先从官方文档可以看到，小程序的运行环境并不是浏览器环境：
```txt
小程序框架提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，可以让开发者可以方便的聚焦于数据与逻辑上。
小程序的视图层目前使用 WebView 作为渲染载体，而逻辑层是由独立的 JavascriptCore 作为运行环境。在架构上，WebView 和 JavascriptCore 都是独立的模块，并不具备数据直接共享的通道。当前，视图层和逻辑层的数据传输，实际上通过两边提供的 evaluateJavascript 所实现。即用户传输的数据，需要将其转换为字符串形式传递，同时把转
阅读全文
摘要：# 文章
## Koa 起手 - 环境准备
由于 `koa2` 已经开始使用 `async/await` 等新语法，所以请保证 `node` 环境在 `7.6` 版本以上。
### 安装node.js
- 直接安装 node.js ：node.js官网地址 [https://nodejs.org](https://nodejs.org)
- nvm管理多版本 node.js ：可以用nvm 进行node版本进行管理
- Mac 系统安装 nvm [https://github.com/creationix/nvm#manual-install](https://github.com/creationix/nvm#manual-install)
- windows 系统安装 nvm [https://github.com/coreybutler/nvm-windows](https://github.com/coreybutler/nvm-windows)
- Ubuntu 系统安装 nvm [https://gi
阅读全文
摘要：## 🇨🇳 与众不同的学习方式，为你打开新的编程视角
- 独特的『同步学习』方式
- 文案讲解+视频演示，文字可激发深层的思考、视频可还原实战操作过程。
- 云集一线大厂有真正实力的程序员
- iKcamp 团队云集一线大厂经验丰厚的码农，开源奉献各教程。
- 改版自真实的线上项目
- 教程项目并非网上随意 `Demo`，而是来源于真实线上项目，并改版定制为教程项目
- 源码开放
- 课程案例代码完全开放给你，你可以根据所学知识自行修改、优化。
阅读全文
浙公网安备 33010602011771号