- 博客(21)
- 收藏
- 关注
RSS订阅
原创 CRA 为什么要做成“黑盒”
最近，在搭建某个业务系统的过程中，我选用了 react 作为主要的技术栈。和同事的业务交流中，我提到了“黑盒”这个词汇。在我司同事的强烈要求火锅承诺 下，就有了今天这篇《CRA 为什么要做成“黑盒”》。什么是“黑盒”首先从前端 er 们熟悉的 vue-cli 说起，以下是vue 脚手架的基本目录：再来看下 create-react-app 的项目目录：在这里，我就不对每个文件进行介绍了。相比 create-react-app，vue-cli 将配置文件完全暴露出来。但是，create-reac
2020-12-17 12:00:33
118
原创 给 React 穿上美丽的‘嫁衣’
今天的题目，猛一看是不是很惊讶！啥玩意儿就给 React 穿上嫁衣了？莫慌！简单来说，就是怎么给 React 定义主题颜色，也就是我们今天的主题。创建 React 项目首先，使用 React 脚手架创建一个 React 项目：npx create-react-app project 。当项目创建完成之后目录如图所示：一个简单的项目目录，好像也没啥。但问题就在这里，怎么入手配置主题，值得咱们思考。这里我推荐 antd 中使用的 craco 来添加 react 项目的配置文件，不建议使用
2020-12-23 10:38:18
106
原创 基操勿 6 | Node.js 的异步I/O到底有多秀?
众所周知，JavaScript 作为网页中的执行脚本，通常是由浏览器来解释执行的。自从Node.js 出现后，解释执行 JavaScript 代码的工具又多了一种。与浏览器不同的是，JavaScript 可以借助 Node.js 提供的功能模块去完成更多事情。比如创建、修改、删除文件；比如发送接收网络信息等等。因此， JavaScript 版本的服务器程序随之诞生，也就有了后来大量的 JavaScript 版本的实用工具。毫不夸张地讲，正是因为有了 Node.js，才有了今天前端的蓬勃发展。与浏
2020-12-22 11:47:26
131
原创 如何区分强弱类型与JS自有类型系统的问题
类型系统的区分我们在区分不同编程语言时会有一些界定的标准。通常来讲，我们会从类型安全和类型检查上进行区分。类型安全：强类型、弱类型类型检查：静态类型、动态类型类型安全-强类型在语言层面限制函数的实参类型必须要和形参类型完全相同。这里以Java为例：class Main { static void foo (int num) { System.outprintln(num); } public static void main(String[]
2020-12-22 11:22:18
142
原创 你真的了解 Gulp 吗
今天的主题是 Gulp。在前端工具百家争鸣的情况下，Gulp 依然占据一席之地，被 web 程序猿们爱不释手。众所周知，Gulp 是基于流的自动化构建工具，而 Gulp 的作用就是将开发流程中让人痛苦或耗时的任务自动化，从而减少所浪费的时间、创造更大价值。在这里出现了一个概念——自动化构建。从语意上来讲，自动化指的是人类通过机器去代替手工完成一些工作。而构建可以理解为转换，把一个东西转换为另一个东西。总的来说，开发行业中的自动化构建指的就是把我们开发阶段写出来的源代码自动转换为生产环境当
2020-12-22 11:08:38
184
原创 JS 的内存管理与垃圾回收
内存为什么需要管理？如果我们在写代码时，不了解内存机制，就会让我们编写出一些不易察觉的内存性问题代码。这种问题多了以后会给程序带来一些意想不到的 bug，所以掌握内存管理十分必要。内存管理介绍内存：由可读写单元组成，表示一片可操作空间管理：由人主动去操作这片空间的申请，使用和释放内存管理：开发者主动申请空间，使用空间，释放空间管理流程：申请 — 使用 — 释放JS 中的内存管理ES 当中，没有提供相应的操作 API，所以 JS 不能像是 C 或者 C++ 那样由开发者主动调用相应的
2020-12-22 10:59:59
91
原创 别再复制粘贴了！高效工作神器—— plop
今天在工位上看见旁边的小伙伴在代码构建上 crtl+c => ctrl +v，着实让我心疼了几秒。都 2020 年了，怎么还有人不知道使用 plop！看在上周大份羊汤的份上，今天就破例分享下这个小巧高效的工具。都给我用起来嗷。安装要把大象放冰箱 使用 plop，总共分几步？首先，第一步，安装 plop。具体怎么装我就不说了，大家直接去官网扫一眼。安装成功之后，要在项目目录下创建一个 plopfile.js 的文件。//plopfile.jsmodule.exports =
2020-12-22 10:51:50
402
原创 Proxy 代理对象
你可能对 Proxy 稍感疑惑，首先我们举个例子来形象地解释下这个单词。现代人都有网上购物的习惯。在原来的交易过程中，消费者和卖家一手交钱一手交货。而网上购物不同。平台代替消费者向卖家买进，消费者把钱给到平台，买家收到信息后打包让快递小哥送货上门。当消费者收到货后，平台再将钱转给卖家，就这样达成了买卖交易。在这个过程中，平台就扮演 Proxy 代理对象的角色。本篇文章主要聊以下两点：Proxy 的基本用法Proxy 和 Object.defineProperty 的对比Proxy
2020-12-22 10:36:19
7632
原创 一秒就懂 | 聊聊 JS 宏任务和微任务
今天的主题或许让你感到害怕。别慌，这篇文章也许就是你想要的。首先来看一个眼熟的面试题：console.log(1)let promise = new Promise(function(resolve,reject){ console.log(2) resolve(3)}).then(function(data){ console.log(data)})setTimeout(function(){ console.log(4);})console.log(5)
2020-12-21 13:36:12
296
1
原创 效率提升利器：你还害怕自动化部署吗
比尔盖茨曾提到过自动化的重要性：“技术在业务中使用的第一原则是，将自动化应用在正确的操作上将大大提升效率。总体看来，自动化是件了不起的好事”。自动化部署概述开发和部署开发者使用脚手架创建初始项目，在本地搭建开发服务器进行项目开发，编码完成后，经过构建生成目标环境可用的代码，到此阶段的所有工作都属于开发环节。部署就是在开发结束后，使得软件在某一环境中运行起来，这个过程中会将源代码生成可运行的软件包，然后将软件包放到要部署的环境中，通过一些配置使得这个软件包在目标环境上也能够正常工作。自动
2020-12-21 11:40:27
107
原创 API 终结者 —— 杀手 Reflect
在我们学习 JavaScript 过程中，操作繁琐的 API 令人头秃，总是让我们顾了东头，又忘了西头。以 Object 为例，ES5 中提出的 Object.defineProperty() 是用来定义对象属性 API 的，它的用法也很明确。而在 ES6+ 中提出的 Proxy 也发挥了同样的作用，甚至比前者做得更好。这就让切图仔们痛苦不已。同样，这些问题在前端面试中也是常常被问到的。因此，Reflect 顺势而生。它给开发者提供了一套统一的操作对象的 API。这让对象操作终于有了一套自己的官
2020-12-21 11:33:21
88
原创 不会吧不会吧！不会真的有人不知道 API 如何设计吧。
“对于一个成熟的前端切图仔来说，压倒他的往往不是 Vue、React 这些框架，而是一个非常不起眼的 Web API 设计理念。”Web API 看起来毫不起眼，哪个程序员不常用呢？但是仔细一想，哦豁，完蛋，好像都是搭档老铁在后台写好的。写完以后就直接甩给我们前端用了。当我们大刀阔斧地“码起砖”来，还真不知道 API 到底有什么规则。万一哪天我们不小心成了个 Leader，被 CTO 叫去参与设计 API 时，这不就暴露自己水平了嘛。Restful 入手Restful 是一个特别成.
2020-12-21 11:27:22
61
原创 React 下同构渲染的优化手段
上两篇文章：手动实现一个自己的 React 服务端渲染React 下的同构渲染本篇我会结合这两篇文章来聊聊如何优化 React 下的同构渲染。主要从下面四点着手。配置文件优化启动指令优化打包体积优化代码拆分配置文件合并不论客户端还是服务端，都存在一套自己的配置文件。webpack.client.js 和 webpack.config.js 在内容层面，这里面的内容有很多相同之处。所以我们需要把这些雷同的代码抽取出来，单独创建一个基准文件 webpack
2020-12-21 11:19:39
96
原创 React 下的同构渲染
上篇：如何手动实现一个自己的服务端渲染 Reac SSRReact 的客户端渲染 CSR ，大家都比较熟悉，这里我就言简意赅的介绍下。Client 下的 webpack 配置在当前项目的目录下创建一个 webpack.client.js 的文件，它是客户端打包的处理文件，内容如下：//webpack.client.jsconst path = require("path")module.exports = { mode:"none", entry:"./src/client/
2020-12-21 11:10:09
148
原创 手动实现一个自己的 React 服务端渲染
为什么要有服务端渲染？框架开发是当前炙手可热的流行趋势，SPA 这种模式也被越来越多的人认可，但是随着研究的深入，一些问题就慢慢凸显出来了。最重要的两点，一是首页需要等待；第二，不利于 SEO 。为了解决这些问题，框架也推出了自己的解决方案——Server Side Rendering 服务端渲染。本篇文章咱们就以 React 为例，聊聊如何在 react 环境下手动实现一个 SSR。真枪实弹的第一步首先，在项目下创建一个文件夹 src，在里面放置三个文件夹 client （客户端代码）
2020-12-21 11:04:53
157
原创 三篇短文让你学会 NextJS（三）
前两篇文章：NextJS路由系统入门CSS 组件样式问题 / 数据请求 / SEO 信息配置继续聊聊 next 服务端渲染，重点是 API 路由和 Next.config.js 配置。API 路由API 路由的目的就是为了使用 Next.js，在构建自己的后台接口时，它提供了一种简单的解决方案。使用方法很简单，就是在 pages 目录下新建一个 api 的文件夹。在这个文件夹下的任何文件都会被映射到 /api/* 这个路径。我们不妨看看这个 api 文件夹下文件的书写格式，创建一个
2020-12-18 13:21:39
304
原创 三篇短文让你学会 NextJS（二）
上篇：NextJS路由系统的入门本篇主要聊三个话题：CSS 组件样式问题/数据请求 / SEO 信息配置CSS 样式导入首先，我们来看一下全局样式的导入。在项目目录下新建一个 styles.css 的文件，内容很简单，给 body 设置一个背景色。//styles.cssbody{ background:lightblue;}接着，在 pages 文件夹下新建一个 _app.js 文件，内容如下：//_app.jsimport '../styles.css'expo
2020-12-18 12:01:17
338
原创 三篇短文让你学会 NextJS（一）
NextJS 是一个用于生产环境的 React 框架，它可以提供生产环境所需的所有功能，开发体验极佳。它提供的功能包括静态及服务器端融合渲染、 支持 TypeScript、智能化打包、 路由预取等，无需任何配置。也许你现在还没用到服务端渲染，当你需要的时候，不妨看看这篇文章。基本介绍谈到 NextJS，使用过的程序员无不为它点赞。对它的优点，官方总结如下：直观的、 基于页面的路由系统（并支持动态路由）预渲染。支持在页面级的静态生成 (SSG) 和服务器端渲染 (SSR)自动代码拆
2020-12-18 11:36:34
772
原创 JavaScript 模块打包器——Rollup
最近无意间和同事聊到 Rollup 这个 JavaScript 模块打包器。出于“开源”的宗旨，今天就简单细腻地给大家讲讲 Rollup。官方介绍首先，可以看下中文官网。（英语读写无障碍的同学请移驾）Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。Rollup 对代码模块使用新的标准化格式，这些标准都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解决方案，如 CommonJS 和 AMD。ES
2020-12-18 11:12:50
175
原创 CRA 黑盒真不是你想的那么可怕
前两篇内容：CRA为什么要做成黑盒黑盒续集 | 如何在 CRA 黑盒中争取主动权？今天这篇文章我们继续谈谈 CRA 黑盒的实现。不管是 @vue/cli 还是 create-react-app，它们内部都暗藏着黑盒的机制。在这里大家万不可把 @vue/cli 和 create-react-app 都认为是黑盒。它们仅仅是官方提供的两个脚手架，用于快速搭建项目基础结构。 黑盒如何工作在项目开发中，我们把它分成三份：一份是是项目结构，一份是黑盒，一份是最终的产出。 简单来说，写好后的
2020-12-17 15:06:00
115
原创 黑盒续集 | 如何在 CRA 黑盒中争取主动权？
之前跟大家分享了“CRA 为什么要做成黑盒”的内容。之前我们聊到，之所以在 Vue 和 React 中实现黑盒功能，其目的很明确，就是方便版本升级后，我们所开发的项目的依赖会自动跟随升级。但是，一旦打破这种约束，表面上看起来是“我行我素”了，事实上项目变得糟糕透了，项目后期的维护会相当困难。今天我们就来聊聊如何使得两者兼具，即满足项目依赖自动升级，又能死死地拿捏住黑盒中配置文件的主动权。以 React 中的 CRA 为例当我们使用 create-r...
2020-12-17 12:25:15
90
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人