- 博客(47)
- 收藏
- 关注
RSS订阅
原创 webpack 源码阅读（二）：webpack 打包基本原理和过程详解
上一篇讲了webapck如何启动的，像是我们按下了电脑开机按钮，开机完了后，电脑就要开始做各种预先加载工作。等这些加载就绪后，才会开始做一系列的打包工作。本文将讲解webpack准备工作的大致流程：初始化 plugins读取loader这里需要提醒，如果你对tapable的机制还不熟悉，查看tapable如果你也不知道webpack启动执行机制，查看webpack启动上一篇我们探索到compiler执行run 操作。从compiler 开始，webpack正式开始了它的打包之路。compile
2020-10-30 19:09:39
706
原创 webpack 源码阅读（一）：webpack 启动
本文开始将深入探索webpack的工作细节。如果你也是第一次尝试了解细节，建议先看另外一篇文章tapable的用法，这个小小的库将贯穿整个webpack的始终。调度着各种模块构建有条不紊的进行。本篇我们探索当我们执行webapck 命令后发生了什么？新建一个文件夹npm i -D webpacknpm i -D webpack-cli新建一个webpack.config.js 文件先忽略大部分配置细节，只配置一个入口文件module.exports = { entry: './ind
2020-09-10 01:44:06
714
原创 webpack tapable 用法详解
尝试了解webpack的工作机制的时候，发现webpack大量使用了tapable这个核心库来组织代码，tapable 提供了很多中钩子注册，执行的机制。让webpack可以灵活的管理模块编译的各个阶段，灵活的在处理的不同阶段触发plugin的预先定义的钩子。仓库地址：githubgithub readme里有详细的使用文档本文通过自己使用的demo详细讲解tapable 包含了如下apiconst { SyncHook, SyncBailHook, SyncWaterfallHook,
2020-08-23 14:41:33
1537
2
原创 微任务宏任务以及EventLoop详解
先总结下那些我们常用的api是宏任务，哪些是微任务。宏任务scripts 正常同步脚本setTimeout 定时脚本setInterval 定时循环执行setImmediate node 常用 浏览器端兼容差requestAnimationFrame 按照屏幕刷新频率执行一次的时间执行I/O 数据读取，交互事件UI rendering 页面渲染微任务Promis...
2019-10-10 00:07:53
673
2
原创 vue 组件生命周期钩子详解
Vue是一个自带组件系统的前端框架。Vue的每一个实例其实就是一个组件，我们在组织我们的页面结构的时候其实就是在定一个一个组件，然后拼装在一起，完成一个复杂的页面逻辑。组件主要包含：数据，模版，以及链接数据和模版的状态响应系统。除了这些，我们还需要对组件的不同渲染阶段做一些监控，定义一些hook来响应不同的时刻。比如：组件的初始加载阶段，组件销毁阶段，组件dom插入页面的时刻等等。下面是vu...
2019-09-28 01:25:58
1884
1
原创 Vue 中 provide 和 reject 的使用详解和源码解析
Vue 提供了provide 和reject 属性为高阶组件提供了便利的数据传递。一：使用详解provide：Object | () => Objectinject：Array<string> | { [key: string]: string | Symbol | Object }完整的用法// 父级组件提供 'foo'var Provider = { data...
2019-09-03 23:36:27
12632
原创 Vue keep-alive 使用详解
Vue提供了keep-alive作为包裹组件来缓存内部的业务组件，使用该组件，能够缓存业务组件的状态，在一些场景里可以提高用户体验和性能，避免重复的请求。一：用法<keep-alive include="your-component" exclude="" max=""> <component is="your-component" v-if="show"><...
2019-08-30 16:30:28
1081
原创 DNS服务详解
DNS（Domain Name System）是一种网络应用层的服务。它是辅助网络应用层将人类可读的域名（csdn.net）转化为路由器转换友好的 IP地址（10.1.2.x）的一种服务。
2023-07-20 23:25:33
343
原创 说说我认为的AI和人类的未来
上面有一些是脑洞大开的一些想法，不一定准确，我来总结下我的观点：AI会在大部分领域全面替代人类，这应该没有什么悬念的事情，人类的学习能力是没有办法传承的，每一个新生小孩都要花费整个青春来学习基础的老套的知识，然后才能去发现新的知识。未来最好的结果，AI融入人类，成为人类的第二个大脑，帮助人类摆脱一代代重复学习知识而造成的文明时间的大量浪费，有了更多节约下来的时间人类很有可能提前产生新的技术大爆发，更快的摆脱银河系的束缚，避开周期性的地球文明毁灭，从而变成一种星际文明，散落在整个宇宙中。
2023-06-11 18:02:17
600
原创 npm ci 详解
和npm install 类似，也是用来执行安装区别npm ci 安装前会检测是否有 package-lock.json或者npm-shrinkwrap.json，没有会停止并提示npm ci 安装前会检测package-lock.json 里的版本和package.json 里的依赖版本是否有偏差，如果有会停止和报错npm ci 安装前会删除掉node_modules 里的内容npm ci 安装完成后不会改变package.json 或者package-lock.json里的内容npm ci
2021-11-11 19:04:10
1727
原创 npm optionalDependencies
optionalDependenciesnpm install xxx --save-optional使用场景optionalDependencies 适合一些可有可无的依赖包，比如一些增强的高级插件，这些插件不管能不能下载成功，不会阻塞其他包的正常下载以及业务都能正常使用，当然需要再业务代码中对这个包的是否存在已经做了降级判断处理。需要注意的是该配置会覆盖dependencies...
2021-11-09 18:17:58
1413
原创 npm peerDependencies 的使用
peerDependencies 配置的是当前包被安装后需要以来宿主环境必须安装的包。如果没有，会有警告。使用场景比如我们想给webpack 写一个plugin插件包，我们知道这个plugin 只是满足兼容webpack 某个版本。且这个包在被安装使用的时候肯定是配合必须要安装指定版本的webpack。所以我们可以通过配置peerdependencies来告诉使用环境。当前的包是需要宿主有某个包的，否则会警告。如果在自己项目里配置peerDependencies，在npm install 的时候pe
2021-11-09 18:12:32
2946
原创 devDependencies 和 Dependencies 的区别
安装的命令区别npm install react --savenpm install eslint --save-dev使用场景如果是自己项目中使用，其实没有什么本质区别，每次执行npm install都要全部安装，不管你的依赖是在dependencies 还是在 devDependencies。一般是在业务代码里必须使用到的，放在dependencies ，如果是babel类 eslint 或者proxy这类只是为了辅助构建或者调试类的，不参与实际项目代码业务逻辑的包，丢在devDepen
2021-11-09 18:06:21
574
原创 React Hook 使用详解
简介Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。hook 引入时间 (react 版本更新大事记)- 2013年05月29日 v0.3.0 Facebook 开源了React …..- 2014年10月28日 v0.12.0 使用BSD协议+附加专利授权协议 - 2016年03月30日 v0.14.0 拆分成React 和 ReactDOM-
2021-07-06 14:01:16
604
1
原创 案例：Excel 截取单元格中的json格式的数据 （Find 函数 和 Mid函数）
需求：提取下面Excel中B 单元格中的省份思路：截取字符串，但是省份的长度没有规律，比如河南省，比如黑龙江省，还有不是以省结尾的，比如直辖市：上海市，重庆市之类的。寻找其他规律：我们发现单元格里其实是一个JSON结构，那就好办了继续观察所有的省份都是在 province 这个key下的解法：Mid 和 FIND结合Mid函数用法参照https://support.microsoft.com/zh-cn/office/mid%e3%80%81midb-%e5%87%bd%e6%9
2020-11-04 23:36:52
2284
1
原创 Javascript 正则表达式详解
正则表达式，又称为规则表达式，英文叫 Regular Expression，在代码中 通常简写为regexp，大量用在文本的检索和替换。大部分高级语言都是支持正则的。今天我们以javacript 里的正则来展开学习。一：简单的例子1.比如我们需要匹配一个字符串里面都是数值var reg = /^\d+$/; reg.test('1232323'); // true比如我们要匹配字符串中...
2020-03-02 01:36:21
299
1
原创 Javascript Number 类型详解
数值类型是js七大数据类型之一，js七大数据类型包括：数字，字符串，布尔，null, undefined,object, symbol一：平时工作中数字类型主要运用：数值的各种格式显示，比如保留几位小数，指数格式显示，本地格式显示数值的各种计算，比如 加减乘除，求余，以及其他Math函数包含的各种数值计算的使用二：JS 数值类型的存储方式？js中数值是使用64位浮点数形式储存，遵循I...
2020-02-24 18:21:00
1671
1
原创 Apache kylin 入门介绍
Apache Kylin™是一个开源的分布式分析引擎，提供Hadoop/Spark之上的SQL查询接口及多维分析（OLAP）能力以支持超大规模数据，最初由eBay Inc. 开发并贡献至开源社区。它能在亚秒内查询巨大的Hive表。
2019-10-31 09:49:32
577
原创 npm 命令功能整理（最全）
本文对npm中所有的命令的基本功能进行整理，记录，具体功能使用可查看npm自带文档。npm -l 查看所有命令的用例信息npm help 查看某个命令的帮助信息npm help-search 在帮助文档中查找包含关键词的文档列表npm -h 查看某个命令的用法npm root [-g] 查看本地或者全局node-module目录的位置npm ping 验证registry的连...
2019-10-20 00:12:45
3189
1
原创 Apache Calcite 入门
Apahce Calcite 是一个动态的数据管理框架。它和经典的数据管理系统的主要区别在于它省略了经典数据管理系统的数据存储，数据加工，元数据存储等功能。正是因为Calcite 有意的回避了这些功能，使得它成为了在应用和数据库之间的很好的一个中间适配软件。如何引入calcite，以maven方式为例<dependency> <groupId>org.a...
2019-10-19 12:32:42
1925
原创 Vuex 源码解析
vue 提供了vuex 来管理状态。如果你要在大型项目中使用vue，状态管理是个比较麻烦的事情。如果不用一个独立的模块来管理状态，全部在组件或者组件之间维系状态，那么我们的代码将很难维护和阅读。vuex很好的将状态和组件在一定程度上独立开了，提供统一的api来管理和响应状态变化。一: vuex的使用vuex官方文档很详细的由浅入深的讲解了vuex的使用，这里对常见的api做使用展示如何在项...
2019-09-30 02:18:56
273
1
原创 Vue ref 的用法详解
ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。用法如下<!-- `vm.$refs.p` will be the DOM node --><p ref="p">hello</p><!-- `vm.$re...
2019-09-25 11:07:11
3408
原创 Vue v-model 指令详解
Vue 提供了v-model 指令来帮助用户方便的处理表单元素的数据绑定和用户输入内容同步到数据上（双向绑定）。用法如下：<input v-model="test" type="text"/>初始test的值会绑定到input的value中当用户修改input的内容test的变量也同时更新。"_c('input',{directives:[{name:"model",ra...
2019-09-24 12:15:02
1873
1
原创 模块化之 CommonJS、AMD、CMD、UMD 详解
前端的发展日新月异，前端项目的复杂度也不可同日而语。很多时候，复杂的前端项目都是开发人员开发自己的业务核心逻辑，其余的都是调用了很多开源的现成模块来拼装。这样做有不仅效率高，而且质量也有一定的保证。毕竟下载量大的模块是经过了很多人很多项目的验证。就像java很多好用现成的jar包，python也有很多热门好用的工具包一样。那么很多人去贡献代码模块，千人前面，良莠不齐也在所难免，再加上前端使用的一...
2019-09-21 23:56:51
660
1
原创 Vue mixins 和 extends 使用详解
function initMixin (Vue) { Vue.prototype._init = function (options) { var vm = this; // a uid vm._uid = uid$3++; var startTag, endTag; /* istanbul ignore if */ ...
2019-09-21 16:35:12
2210
原创 Vue $delete 和 delete 的区别
delete 是js原生方法，由于语言限制，此操作无法设置回调来响应$delete 是vue提供的实例方法，源代码如下：function del (target, key) { if (isUndef(target) || isPrimitive(target) ) { warn(("Cannot delete reactive property on undefi...
2019-09-21 11:25:40
7392
原创 Vue 中 Dep 和 Observer 的用法详解
Vue 中响应式系统利用了订阅发布模式来实现基本的逻辑。本文将介绍其中的两个重要角色，他们就是Dep和Observer。其中Observer 是观察者和 Dep是订阅收集和发布者。另外watcher是作为订阅者的角色。本文将重点将Observer和Dep。一：Observervue 通过Observer 构造函数，为响应式变量添加访问和赋值的get set的回调。 var Observer...
2019-09-21 01:13:54
8983
1
原创 Linux 用户和用户组权限
1.用户管理# 添加一个用户useradd testuser或者adduser testuser# 查看用户whoami2.用户组管理groupadd testgroup3.如何将用户添加到一个用户组里useradd -G testgroup testuser4.权限的分类5.如何查看用户或者组的权限6.如何给用户或者组设置权限...
2019-09-10 11:12:15
287
原创 Vue $nextTick 用途详解
Vue 中更新dom的逻辑是异步执行的，我们都知道js是单线程的，通常异步是通过回调函数的方式来实现的，所以在vue中我们如果想获取到数据改变后异步更新dom的最新内容，必须也通过回调的方式来获取。nextTick就是vue为我们提供的一个回调语法。看下面的例子：<a>{{str}}</a>data: { str: 'str1'},mounted () { ...
2019-09-09 23:47:14
708
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人