- 博客(81)
- 收藏
- 关注
RSS订阅
原创 lerna管理前端packages的最佳实践
背景对于维护过多个package的同学来说，都会遇到一个选择：这些package是放在一个仓库里维护还是放在多个仓库里单独维护，数量较少的时候，多个仓库维护不会有太大问题，但是当package数量逐渐增多时，一些问题逐渐暴露出来：package之间相互依赖，开发人员需要在本地手动执行npm link，维护版本号的更替；issue难以统一追踪，管理，因为其分散在独立的repo里；每一个pa...
2019-12-31 14:46:47
342863
58
原创 创业公司，大厂，外企，离职之后我都做了什么？
开通了自己的淘宝店铺，接到了一个电商项目的单子已经开发中，一般对接3方电子商务平台需要软著才能调取接口，所以申请了软著，目前在下证中，客户还介绍了一个客户，需求也在对接中。做这块的想法是可以有一个独立的业务中心承接核心业务，在楼主的思想里其实远程的盈利模式无非3种，接单，卖课，做产品。离职之后收入这块明显跟不上躺 而且还面临结婚成家的问题，所以也是做了很多的尝试，要问我都做了哪些那就是：加群接单，开店接单，独立建站，寻找远程工作的机会。在创业公司带过团队，在大厂拧过螺丝，外企搬过砖，慕课网讲过课。
2024-03-25 11:24:56
195
原创 dumi之搭建博客提升影响力(良心之作)
简介dumi 是啥，啥是dumi，相信react的忠实粉，都有这么几个痛点：憋了几年的技术和业务积累写了一套贴合自身业务的组件库。吭哧吭哧…终于写完了。队友：看不懂大湿的代码啊。emmm…好吧。这个函数是…这个class是…这个组件要…用。好吧看来是时候整个文档了。搜索引擎啊，请你告诉我是一名优秀的程序员吗？搜索引擎：嗯，算…是吧。我刚造了个火箭，他需要一本书起飞的说明书，帮我...
2020-03-30 00:35:49
6071
2
原创 深入v8提供的堆栈跟踪
错误定位是开发中的一项必备的重要能力，我们来看下在前端开发中v8为我们提供的Error关键字Error作为函数使用当像函数一样使用 Error 时 – 如果没有 new，它将返回一个 Error 对象。所以， 仅仅调用 Error 将产生与通过new 关键字构造 Error 对象的输出相同。// this:const x = Error('I was created using a fun...
2019-11-04 02:55:10
3892
原创 npm shrinkwrap
什么是 npm shrinkwrap？npm shrinkwrap 是 npm 包管理器的一项功能。可以按照当前项目 node_modules 目录内的安装包情况生成稳定的版本号描述。shrinkwrap 文件的结构类似以下这种形式{ "name": "A", "version": "1.1.0", "dependencies": { "B": { "versi...
2019-09-03 20:27:53
3087
原创 babel7相关
在前端开发领域，浏览器兼容性问题来来去去，不曾消失过。除了 CSS，我们还要面对 JavaScript 的兼容性问题：你用了 JavaScript 的 A 特性，能够在 B 浏览器上正常运行，却在 C 浏览器的 D 版本上报错。@babel/cli是 babel 提供的命令行工具，用于命令行下编译源代码。这里假定我们已通过 npm init 初始化项目。首先，在项目中安装@babel/cli...
2019-08-26 21:40:33
2536
原创 nodejs玩儿转进程
序言nodejs是如何充分利用多核cup 服务器的？如何保证进程的稳健型？正文因为Node运行在V8引擎上，我们的JavaScript 将会运行在单个进程的单个线程上。它带来的好处是: 程序状态是单一的，在没有多线程的情况 下没有锁、线程同步问题，操作系统在调度时也因为较少上下文的切换，可以很好地提高CPU的使用率从严格的意义上而言，Node并非真正的单线程架构,Node自身还有 一...
2019-08-15 13:44:48
1862
原创 basic 认证机制
basic 认证机制 基本流程第一次判断请求头headers 中authorization字段的值为空，这时让用户输入，然后第二次的时候判断用户输入的值是否正确 做相应的处理nodejs 代码const http = require('http');const server = http.createServer(function(req,res){ const authorizat...
2019-08-15 13:04:33
1747
原创 node 正确使用process 结束进程的方式
以下示例说明了 process.exit() 方法的错误用法，该方法可能导致打印到 stdout 的数据被截断和丢失：// 这是一个错误用法的示例：if (someConditionNotMet()) { printUsageToStdout(); process.exit(1);}这是有问题的原因是因为对 Node.js 中的 process.stdout 的写入有时是异步的，...
2019-08-05 09:22:43
11002
原创 vue相关（ 适合先接触react 然后再接触vue的 ）
vue 中的自定义事件父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，应该怎样做？那就是自定义事件！每个vue实例都有触发事件的方法使用 $on(eventName) 监听事件使用 $emit(eventName) 触发事件父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。然后再对应子组件方法执行处触发事件，两者缺一不可in父组件...
2019-08-04 20:15:32
959
原创 webpack plugin 透过现象看本质
这是使用 vue-cli 编译过后的输出显示是不是看起来不是很对你的胃口，是不是想改改样式看起来好看点，是不是想输出的内容丰富点，比如编译后的文件详情…1改样式：那么问题来了，如何找到这是在什么地方输出的，以及如何修改它:...
2019-07-29 22:25:40
1013
原创 dom细节番外篇
Document.adoptNode()采用一个dom节点采用的节点及其子树将从其原始文档（如果有）中删除，并将其ownerDocument更改为当前文档。然后可以将节点插入当前文档中。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>D...
2019-07-28 21:00:48
852
原创 jest 指北
Your test suite must contain at least one test.这是因为__tests__/fixtures/index.js 文件中没有测试脚本所导致的解决方案：package.json中添加jest配置 "jest": { "testPathIgnorePatterns": [ "/node_modules/", "<...
2019-07-28 19:12:41
3685
原创 Chrome DevTools 代码覆盖率功能详解
Chrome DevTools 中又一个功能查看我们的代码的覆盖率打开姿势1打开调试面板 用快捷键 shift+command+P （mac）输入 show Coverage调出相应面板2 .点击relaod 按钮开始检测3 点击相应文件即可查看具体的覆盖情况（绿色的为用到的代码，红色表示无用代码）查看了当下各大网站的覆盖率普遍存在无用代码的问题 二而且网上给出的所谓treesh...
2019-07-06 14:50:18
2676
原创 nodejs中的网络编程
Node提供了net、dgram、http、https这4个模块，分别用于处理TCP、UDP、HTTP、HTTPS， 适用于服务器端和客户端。TCP服务在网络应用中十分常见，目前大多数的应用都是基于TCP搭建而成的TCP全名为传输控制协议，在OSI模型(由七层组成，分别为物理层、数据链结层、网络层、 传输层、会话层、表示层、应用层)中属于传输层协议。许多应用层协议基于TCP构建，典型的 是HT...
2019-06-11 01:45:37
1113
原创 webkit 之 javaScript 引擎
JavaScript 是一种脚本语言，主要用在 Web 的客户端，是控制网页客户端的逻辑，例如同用户的交互，异步通信等需求。本质上它是一种解释语言，函数是它的第一等公民，也就是函数也能够当作参数或者返回值来传递。JavaScript 语言的一个重大特点就是，它是一种无类型语言，或者说是动态类型语言。这一特性导致我们没有办法有编译的时候知道变量的类型，所以只能在运行的时候才能确定。这也是导致他...
2019-06-06 18:27:12
998
原创 浏览器之硬件加速机制
硬件加速技术是指：使用 GPU 的硬件能力为帮助渲染网页， GPU 的作用主要是用来绘制 3D 图形并且性能特别好。对于 GPU 绘图而言，当网页分层之后，部分区域的更新可能只在网页的一层或者几层，而不需要将整个网页都重新绘制。 通过重新绘制网页的一个或者几个层，并将它们和其他之前绘制完的层合成起来，既能使用 GPU 的能力，又能减少重绘的开销。在 WebKit 中，只有把编译的 C 代码宏（...
2019-06-06 17:55:58
1423
原创 webkit之渲染基础
使用以下基础的前端代码来说明。<!DOCTYPE html><html lang="en"><head></head><body> <div>abc</div> <canvas id="webg1" width="80" height="80"></canvas>...
2019-06-06 16:54:15
960
原创 浏览器内核之 CSS 解释器和样式布局
从整个网页的加载和渲染过程来看，CSS 解释器和规则匹配处于 DOM 树建立之后，RenderObject 树建立之前，CSS 解释器解释后的结果会保存起来，然后RenderObject 树基于该结果来进行规范匹配和布局计算。当网页有用户交互或者动画等动作的时候，通过 CSSDOM 等技术，JavaScript 代码同样可以非常方便地修改 CSS 代码，WebKit 此时需要重新解释样式并重复以...
2019-06-06 16:11:29
907
原创 HTML 解释器
解释过程HTML 解释器的工作就是将网络或者本地磁盘获取的 HTML 网页和资源从字节流解释成 DOM 树结构。这一过程大致可以理解成下图WebKit 中这一过程如下：首先是字节流，经过解码之后是字符流，然后通过词法分析器把字符流解释成词语（Tokens），之后经过语法分析器构建成节点，最后这些节点被组建成一棵 DOM 树。词法分析在进行词法分析之前，解释器首先要做的事情就是检查该网页内...
2019-06-04 02:50:31
3238
原创 定位解决web开发中的性能问题
运行时性能是页面在运行时执行的方式，而不是加载。本教程将教您如何使用Chrome DevTools Performance面板分析运行时性能。就RAIL模型而言，您在本教程中学到的技能对于分析页面的响应，动画和空闲阶段非常有用在本教程中，您将在实时页面上打开DevTools，并使用“性能”面板查找页面上的性能瓶颈以隐身模式打开Google Chrome 。隐身模式可确保Chrome以干净...
2019-06-02 01:09:05
1281
原创 react 中的测试
得益于 React 的组件化开发，测试应用变得很简单。我们可以用许多工具编写 React 测试。Jest 是一套完备的测试框架方案，由 Facebook 的 Christopher Pojer 以及社区中的多名贡献者 所维护，它致力于提供最佳的开发体验;你也可以选择用 Mocha 自行搭建框架。本章将介绍构 建最佳测试环境的这两种方式。jestJest是一个JavaScript测试框架 它...
2019-06-01 18:02:44
1228
原创 antd 源码解读 之 scripts中的 start
antd中的scripts 中的start 定义的脚本如下"start": "rimraf _site && mkdir _site && node ./scripts/generateColorLess.js && cross-env NODE_ENV=development bisheng start -c ./site/bisheng.con...
2019-05-22 03:53:29
1548
原创 postcss 插件 开发
PostCSS 是一个使用JavaScript转换CSS的工具总之来说是一个非常不错的工具 ，弊端的话暂时没有发现 。总的来说他可以极大的提高我们的开发效率 ，加入用过他的话 你可能对以下这些插件比较熟悉rucksack-csspostcss-importcssnanoatcsspostcss-urlprecss…等等但插件究竟干了啥，值得我们研究以下，其实感觉和babel 的...
2019-05-22 01:15:37
1473
原创 在 CSS 动画中使用硬件加速
近些年，我们总是听到硬件加速，以及它如何帮助我们提升网页的动画性能，让网页动画变得更好，在移动端更流畅。但是我想一大部分经验少的工程师是不知道硬件加速是如何工作的以及我们如何使用它来帮助我们让动画变得更流畅。在GPU渲染元素并不是所有的CSS属性变化都会直接在GPU处理。只有下面的属性会这样处理：transformopacityfilter因此为了页面更加流畅，高性能的动画，我们需...
2019-05-19 02:35:05
1083
原创 nodejs 中的 buffer
Buffer是一个典型的JavaScript与C++结合的模块，它将性能相关部分用C++实现，将非性能相关的部分用JavaScript实现Buffer内存分配Buffer对象的内存分配不是在V8的堆内存中，而是在Node的C++层面实现内存的申请的Node在内存的使用上应用的是在C++层面申请内存、在JavaScript中分配内存的策略Node以8 KB为界限来区分Buffer是大对象...
2019-05-04 20:01:03
987
原创 node中的内存控制
基于无阻塞、事件驱动建立的Node服务，具有内存消耗低的优点，非常适合处理海量的网络 请求。内存控制正是在海量请求和长时间运行的前提下进行探讨 的。在服务器端，资源向来就寸土寸金，要为海量用户服务，就得使一切资源都要高效循环利用。在Node中通过JavaScript 使用内存只能使用部分内存64位系统下约为1.4 GB，32位系统下约为0.7 GB）V8的对象分配在V8中，所有的JavaS...
2019-05-03 18:20:13
3545
原创 antd源码解读 之 构建工具antd-tools
antd-tools 作为antd源码中一个重要的构建工具存在 文档相对不是很完善我们来研究下他的源码一探究竟antd 的 package.json 中的scripts（一）prepublish"prepublish": "antd-tools run guard"这调命令涉及到了npm scripts 中的 hook prepublish是 publish 这条命令的 hook意...
2019-04-26 22:06:56
4171
原创 react使用中的细节
react 中顺序加载script 标签export default class Script extends React.Component { static defaultProps = { attributes: {}, onCreate: () => {}, onError: () => {}, onLoad: () => {},...
2019-04-26 22:06:00
851
原创 async.series 实现
function isType(type){ return function(obj){ return Object.prototype.toString.call(obj) == "[object "+type+"]"; }}let async = { series(taskArray,callback){ let index = 0; let length = task...
2019-04-24 21:19:16
1147
2
原创 node中的事件发布/订阅的机制
Node对事件发布/订阅的机制做了一些额外的处理，这大多是基于健壮性而 考虑的。下面为两个具体的细节点。如果对一个事件添加了超过10个侦听器，将会得到一条警告。这一处设计与Node自身单线 程运行有关，设计者认为侦听器太多可能导致内存泄漏，所以存在这样一条警告。调用 emitter.setMaxListeners(0);可以将这个限制去掉。另一方面，由于事件发布会引起一 系列侦听器执行，如果...
2019-04-22 00:30:54
1288
原创 node中 setImmediate 和setTimeout的区别
现有以下代码 ： 请现设想输出结果const fs = require('fs');fs.readFile('./index.json', () => { setTimeout(() => { console.log('fs =》timeout'); }); setImmediate(() => { console.log('fs =》setIm...
2019-04-21 19:53:31
5013
原创 node 中的异步
Node在*nix平台下采用了libeio配合libev实现I/O部分，实现了异步I/O在Node v0.9.3中，自行实现了线程池来完成异步I/Olibeio 实质上依然是采用线程池与阻塞I/O模拟异步I/ONode在Windows下采用IOCP来实现异步I/O完成整个异步I/O环节的有事件循环、观察者 和 请求对象等。事件循环 白话讲解：这个过程就如同饭馆的厨房，厨房一轮一...
2019-04-21 19:46:30
1011
原创 nodejs细节篇
node中的核心库1 GYP项目生成工具 一个专有的扩展构建工具node-gyp，这 个工具通过npm install -g node-gyp这个命令即可安装。2 V8引擎C++库 可以实现JavaScript 与C++的互相调用3 libuv库 它是Node自身的动力来源之二 。libuv封...
2019-04-19 03:00:25
891
原创 react 中的 function Component
因为hooks的出现 解决了函数式 组件没有生命周期的一个痛点 同时也有一些新的坑等待我们遇到的第一个坑就在配置了react-hot-loader的情况下无法使用hoosk原因是react-hot-loader的那个babel插件的问题 可能在解析某些语法上做了特殊的处理class Component 和 function Component 的区别为什么要了解 Function 写法的组件...
2019-03-26 18:38:36
6787
2
原创 《学习javascript数据结构与算法》算法
排序算法冒泡排序：拿当前值跟后面的值挨个比较 如果当前值比后面的值大 就替换位置选择排序：每次找到数组中最小的值的索引 跟当前索引位置元素交换插入排序：把当前索引的值当作一个基准 拿前一个值跟这个值对比 如果比他大就替换他的位置 最后把它插入到自己该在的位置。排序小型数组时，此算法比选择排序和冒泡排序性能要好归并排序：把数组先剁两半 然后各自排序 不断递归这个过程 最后把两大半数...
2019-03-23 18:44:36
906
原创 《学习javascript数据结构与算法》图
图邻接表 创建（队列+字典）图是网络结构的抽象模型。图是一组由边连接的节点(或顶点)。学习图是重要的，因为任何二元关系都可以用图来表示。在着手实现算法之前，让我们先了解一下图的一些术语。术语解释相邻顶点由一条边连接在一起的顶点称为相邻顶点。度一个顶点的度是其相邻顶点的数量路径路径是顶点v1, v2,…,vk的一个连续序列环环也是一...
2019-03-21 18:26:31
976
原创 《学习javascript数据结构与算法》树
树树是一种分层数据的抽象模型。现实生活中最常见的树的例子是家谱，或是公司的组织架构 图，如下图所示:树的相关术语术语解释根节点位于树顶部的节点节点树中的每个节点内部节点至少有一个子节点 (7、5、9、15、13和20是内部 节点)外部节点没有子元素的节点 (3、6、8、10、12、14、18和25是叶节点)子树子树由节点和它的后代构成...
2019-03-20 18:35:36
1051
原创 《学习javascript数据结构与算法》 集合，字典和散列表
集合集合是由一组无序且唯一(即不能重复)的项组成的。这个数据结构使用了与有限集合相同 的数学概念，但应用在计算机科学的数据结构中。在数学中，集合也有并集、交集、差集等基本操作.我们要实现的类就是以ECMAScript 6中Set类的实现为基础的有一个非常重要的细节，我们使用对象而不是数组来表示集合(items)。但也可以用数组 实现。在这里我们用对象来实现，稍微有点儿不一样，也学习一下实现相...
2019-03-19 23:19:16
756
原创 《学习javascript数据结构与算法》链表
链表要存储多个元素，数组(或列表)可能是最常用的数据结构。正如之前提到过的，每种 语言都实现了数组。这种数据结构非常方便，提供了一个便利的[]语法来访问它的元素。然而， 这种数据结构有一个缺点:(在大多数语言中)数组的大小是固定的，从数组的起点或中间插入 或移除项的成本很高，因为需要移动元素( 尽管我们已经学过的JavaScript的Array类方法可以帮 我们做这些事，但背后的情况同样是这样 ...
2019-03-18 21:45:47
581
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人