前端
关注
分享
扫一扫
文章平均质量分 62
森哥的歌
把人生看成一场旅行是不是会让自己活的更舒服一些。
展开
-
Web Component 详解
Web Component 使用介绍原创 2022-07-23 15:04:57 · 9074 阅读 · 0 评论 -
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 · 1865 阅读 · 0 评论 -
npm optionalDependencies
optionalDependenciesnpm install xxx --save-optional使用场景optionalDependencies 适合一些可有可无的依赖包，比如一些增强的高级插件，这些插件不管能不能下载成功，不会阻塞其他包的正常下载以及业务都能正常使用，当然需要再业务代码中对这个包的是否存在已经做了降级判断处理。需要注意的是该配置会覆盖dependencies...原创 2021-11-09 18:17:58 · 1515 阅读 · 0 评论 -
npm peerDependencies 的使用
peerDependencies 配置的是当前包被安装后需要以来宿主环境必须安装的包。如果没有，会有警告。使用场景比如我们想给webpack 写一个plugin插件包，我们知道这个plugin 只是满足兼容webpack 某个版本。且这个包在被安装使用的时候肯定是配合必须要安装指定版本的webpack。所以我们可以通过配置peerdependencies来告诉使用环境。当前的包是需要宿主有某个包的，否则会警告。如果在自己项目里配置peerDependencies，在npm install 的时候pe原创 2021-11-09 18:12:32 · 3246 阅读 · 0 评论 -
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 · 636 阅读 · 0 评论 -
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 · 639 阅读 · 1 评论 -
webpack 源码阅读（二）：webpack 打包基本原理和过程详解
上一篇讲了webapck如何启动的，像是我们按下了电脑开机按钮，开机完了后，电脑就要开始做各种预先加载工作。等这些加载就绪后，才会开始做一系列的打包工作。本文将讲解webpack准备工作的大致流程：初始化 plugins读取loader这里需要提醒，如果你对tapable的机制还不熟悉，查看tapable如果你也不知道webpack启动执行机制，查看webpack启动上一篇我们探索到compiler执行run 操作。从compiler 开始，webpack正式开始了它的打包之路。compile原创 2020-10-30 19:09:39 · 855 阅读 · 0 评论 -
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 · 765 阅读 · 0 评论 -
webpack tapable 用法详解
尝试了解webpack的工作机制的时候，发现webpack大量使用了tapable这个核心库来组织代码，tapable 提供了很多中钩子注册，执行的机制。让webpack可以灵活的管理模块编译的各个阶段，灵活的在处理的不同阶段触发plugin的预先定义的钩子。仓库地址：githubgithub readme里有详细的使用文档本文通过自己使用的demo详细讲解tapable 包含了如下apiconst { SyncHook, SyncBailHook, SyncWaterfallHook,原创 2020-08-23 14:41:33 · 1631 阅读 · 2 评论 -
Javascript 正则表达式详解
正则表达式，又称为规则表达式，英文叫 Regular Expression，在代码中 通常简写为regexp，大量用在文本的检索和替换。大部分高级语言都是支持正则的。今天我们以javacript 里的正则来展开学习。一：简单的例子1.比如我们需要匹配一个字符串里面都是数值var reg = /^\d+$/; reg.test('1232323'); // true比如我们要匹配字符串中...原创 2020-03-02 01:36:21 · 365 阅读 · 1 评论 -
Javascript Number 类型详解
数值类型是js七大数据类型之一，js七大数据类型包括：数字，字符串，布尔，null, undefined,object, symbol一：平时工作中数字类型主要运用：数值的各种格式显示，比如保留几位小数，指数格式显示，本地格式显示数值的各种计算，比如 加减乘除，求余，以及其他Math函数包含的各种数值计算的使用二：JS 数值类型的存储方式？js中数值是使用64位浮点数形式储存，遵循I...原创 2020-02-24 18:21:00 · 1746 阅读 · 1 评论 -
css line-height 用法详解
21212原创 2020-02-22 17:44:06 · 1820 阅读 · 0 评论 -
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 · 3286 阅读 · 1 评论 -
Vue 中v-if 和 v-show实现的区别
Vue中提供了v-if 和v-show 指令来方便我们控制模版的显示逻辑，本文我们主要是通过简单的源码来分析两者的区别。一：使用方式<div v-if="show">test</div><div v-show="show">test</div>二：实现机制v-if 在条件变量为false的时候，不生成dom，v-show 则肯定存在dom...原创 2019-09-05 14:03:39 · 1696 阅读 · 0 评论 -
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 · 2278 阅读 · 0 评论 -
模块化之 CommonJS、AMD、CMD、UMD 详解
前端的发展日新月异，前端项目的复杂度也不可同日而语。很多时候，复杂的前端项目都是开发人员开发自己的业务核心逻辑，其余的都是调用了很多开源的现成模块来拼装。这样做有不仅效率高，而且质量也有一定的保证。毕竟下载量大的模块是经过了很多人很多项目的验证。就像java很多好用现成的jar包，python也有很多热门好用的工具包一样。那么很多人去贡献代码模块，千人前面，良莠不齐也在所难免，再加上前端使用的一...原创 2019-09-21 23:56:51 · 695 阅读 · 1 评论 -
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 · 1931 阅读 · 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 · 3619 阅读 · 0 评论 -
vue 组件生命周期钩子详解
Vue是一个自带组件系统的前端框架。Vue的每一个实例其实就是一个组件，我们在组织我们的页面结构的时候其实就是在定一个一个组件，然后拼装在一起，完成一个复杂的页面逻辑。组件主要包含：数据，模版，以及链接数据和模版的状态响应系统。除了这些，我们还需要对组件的不同渲染阶段做一些监控，定义一些hook来响应不同的时刻。比如：组件的初始加载阶段，组件销毁阶段，组件dom插入页面的时刻等等。下面是vu...原创 2019-09-28 01:25:58 · 1920 阅读 · 1 评论 -
Vuex 源码解析
vue 提供了vuex 来管理状态。如果你要在大型项目中使用vue，状态管理是个比较麻烦的事情。如果不用一个独立的模块来管理状态，全部在组件或者组件之间维系状态，那么我们的代码将很难维护和阅读。vuex很好的将状态和组件在一定程度上独立开了，提供统一的api来管理和响应状态变化。一: vuex的使用vuex官方文档很详细的由浅入深的讲解了vuex的使用，这里对常见的api做使用展示如何在项...原创 2019-09-30 02:18:56 · 305 阅读 · 1 评论 -
微任务宏任务以及EventLoop详解
先总结下那些我们常用的api是宏任务，哪些是微任务。宏任务scripts 正常同步脚本setTimeout 定时脚本setInterval 定时循环执行setImmediate node 常用 浏览器端兼容差requestAnimationFrame 按照屏幕刷新频率执行一次的时间执行I/O 数据读取，交互事件UI rendering 页面渲染微任务Promis...原创 2019-10-10 00:07:53 · 706 阅读 · 2 评论 -
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 · 7534 阅读 · 0 评论 -
Vue 中 Dep 和 Observer 的用法详解
Vue 中响应式系统利用了订阅发布模式来实现基本的逻辑。本文将介绍其中的两个重要角色，他们就是Dep和Observer。其中Observer 是观察者和 Dep是订阅收集和发布者。另外watcher是作为订阅者的角色。本文将重点将Observer和Dep。一：Observervue 通过Observer 构造函数，为响应式变量添加访问和赋值的get set的回调。 var Observer...原创 2019-09-21 01:13:54 · 9163 阅读 · 1 评论 -
XHR 和 Fetch 的使用详解和区别总结
test原创 2019-09-12 00:27:43 · 18874 阅读 · 1 评论 -
Vue $nextTick 用途详解
Vue 中更新dom的逻辑是异步执行的，我们都知道js是单线程的，通常异步是通过回调函数的方式来实现的，所以在vue中我们如果想获取到数据改变后异步更新dom的最新内容，必须也通过回调的方式来获取。nextTick就是vue为我们提供的一个回调语法。看下面的例子：<a>{{str}}</a>data: { str: 'str1'},mounted () { ...原创 2019-09-09 23:47:14 · 760 阅读 · 1 评论 -
Vue 响应式原理
Vue 具有一套非侵入式的响应式系统，这使得用户可以完全通过直接改变数据来驱动界面显示从而快速实现自己的业务逻辑，在以前，用户改变数据后，是需要自己编写dom操作逻辑来控制view显示的。响应式系统内在的处理逻辑对用户都是透明的，用户可以把大量的精力都用来维护好数据的状态。下图是vue官网提供的响应式的流程图五条箭头分别代表：1.组件render函数生成虚拟dom2. render过程变量...原创 2019-09-08 17:04:09 · 547 阅读 · 0 评论 -
css 引入方式 link 和 @import 的区别
区别一：使用方法的区别<!--link的用法 --><link rel="stylesheet" type="text/css" href="theme.css" /><link rel="stylesheet" type="text/css" href="print.css" media="print"/><!-- @import的用法 --&g...原创 2019-09-06 11:08:47 · 330 阅读 · 0 评论 -
Vue 中的事件处理机制详解
一：vue中如何绑定事件？vue事件分为两类，一个是原生dom事件，一个是组件自定义事件，绑定方法类似，#绑定原生dom事件<div id="example-1"> <button v-on:click="handle">Add 1</button> <p>The button above has been clicked {{ cou...原创 2019-09-05 11:52:35 · 7240 阅读 · 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 · 12884 阅读 · 0 评论 -
Vue 中 createElement 使用详解
test原创 2019-09-02 17:36:25 · 40093 阅读 · 7 评论 -
Vue 函数式组件原理和使用详解
Vue 提供了一种称为函数式组件的组件类型，用来定义那些没有响应数据，也不需要有任何生命周期的场景，他只接受一些props 来显示组件。一：使用方法Vue.component('my-component', { functional: true, // Props 是可选的 props: { // ... }, // 为了弥补缺少的实例 // 提供第二个参数作为...原创 2019-09-02 01:29:32 · 16760 阅读 · 1 评论 -
Vue 中虚拟dom diff 算法详解
test原创 2019-09-18 00:26:36 · 956 阅读 · 0 评论 -
Vue 修饰符.lazy .number .trim 的功能详解
test原创 2019-09-12 23:50:00 · 2014 阅读 · 0 评论 -
CSS BFC 详解
test原创 2020-02-23 16:42:17 · 508 阅读 · 0 评论 -
cookie 使用详解（samesite 配置详解）
test原创 2020-08-17 15:12:58 · 7552 阅读 · 0 评论 -
script 标签上的defer和async的区别
test原创 2019-09-19 02:22:59 · 726 阅读 · 0 评论 -
css 伪类和伪元素的用法和区别
test原创 2019-09-19 00:59:33 · 1664 阅读 · 0 评论 -
Vue Watch 和 Computed 的区别详解
test原创 2019-09-20 14:42:53 · 4844 阅读 · 0 评论 -
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 · 1134 阅读 · 0 评论