- 博客(33)
- 收藏
- 关注
RSS订阅原创 npm install如何⼯作
依赖管理是 npm 的核⼼功能，原理就是执⾏时， 从 package.json 中的 dependencies, devDependencies 将依赖包安装到当前⽬录的 ./node_modules ⽂件夹中，使⽤者⽆需关注这个⽬录⾥的⽂件夹结构细节，只管在业务代码中引⽤依赖包即可。⼀个 npm 版本号包含三个部分：MAJOR.MINOR.PATCH，npm 2 到 npm 5 有哪些变化和改进？假设应⽤⽬录为 app, ⽤两个流⾏的包 webpack, nconf 作为依赖包做⽰例说明。
2023-02-02 16:11:44
2464
2
原创 V8 工作原理之编译器和解释器
V8 工作原理之编译器和解释器要深入理解 V8 的工作原理，你需要搞清楚一些概念和原理，比如接下来我们要详细讲解的**编译器（Compiler）、解释器（Interpreter）、抽象语法树（AST）、字节码（Bytecode）、即时编译器（JIT）**等概念，都是你需要重点关注的。编译器和解释器之所以存在编译器和解释器，是因为机器不能直接理解我们所写的代码，所以在执行程序之前，需要将我们所写的代码“翻译”成机器能读懂的机器语言。按语言的执行流程，可以把语言划分为编译型语言和解释型语言。编译型语言在
2022-04-13 15:00:17
417
原创 V8 工作原理之垃圾回收
V8 工作原理之垃圾回收有些数据被使用之后，可能就不再需要了，我们把这种数据称为垃圾数据。如果这些垃圾数据一直保存在内存中，那么内存会越用越多，所以我们需要对这些垃圾数据进行回收，以释放有限的内存空间。不同语言的垃圾回收策略通常情况下，垃圾数据回收分为手动回收和自动回收两种策略。如 C/C++ 就是使用手动回收策略，何时分配内存、何时销毁内存都是由代码控制的，你可以参考下面这段 C 代码：// 在堆中分配内存char* p = (char*)malloc(2048); // 在堆空间中分配
2022-04-13 13:15:20
124
原创 V8 工作原理之栈空间和堆空间
V8 工作原理之栈空间和堆空间首先抛出一个问题：“JavaScript 中的数据是如何存储在内存中的”在解释问题之前，先来看两段代码function foo() { var a = 1 var b = a a = 2 console.log(a) // 2 console.log(b) // 1}foo()function foo() { var a = { name: '张三' } var b = a a.name = '李四' console.log(a
2022-04-12 23:50:51
2522
原创 宏观视角下的浏览器之渲染流程
宏观视角下的浏览器之渲染流程由于渲染机制过于复杂，所以渲染模块在执行过程中会被划分为很多子阶段，输入的 HTML 经过这些子阶段，最后输出像素。我们把这样的一个处理流程叫做渲染流水线，其大致流程如下图所示：按照渲染的时间顺序，流水线可分为如下几个子阶段：构建 DOM 树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成。内容比较多，我会用两篇文章来为你详细讲解这各个子阶段。接下来，在介绍每个阶段的过程中，你应该重点关注以下三点内容：开始每个子阶段都有其输入的内容；然后每个子阶段有其处理过程；
2022-04-06 21:05:39
129
原创 宏观视角下的浏览器之导航流程
宏观视角下的浏览器之导航流程一切都要从“在浏览器里，从输入 URL 到页面展示，这中间发生了什么？ ”这道面试题说起。下图是“从输入 URL 到页面展示完整流程示意图”从图中可以看出，整个过程需要各个进程之间的配合，所以在开始正式流程之前，我们还是先来快速回顾下浏览器进程、渲染进程和网络进程的主要职责。浏览器进程主要负责用户交互、子进程管理和文件储存等功能。网络进程是面向渲染进程和浏览器进程等提供网络下载功能。渲染进程的主要职责是把从网络下载的 HTML、JavaScript、CSS、图片等
2022-04-06 21:01:46
386
原创 宏观视角下的浏览器之 HTTP 请求
宏观视角下的浏览器之 HTTP 请求浏览器端发起 HTTP 请求流程构建请求首先，浏览器构建请求行信息（GET /index.html HTTP1.1），构建好后，浏览器准备发起网络请求。查找缓存在真正发起网络请求之前，浏览器会先在浏览器缓存中查询是否有要请求的文件。当浏览器发现请求的资源已经在浏览器缓存中存有副本，它会拦截请求，返回该资源的副本，并直接结束请求，而不会再去源服务器重新下载。准备 IP 地址和端口因为 HTTP 网络请求的第一步是建立 TCP 链接，建立 TCP 链
2022-02-09 17:39:50
131
原创 宏观视角下的浏览器之 TCP
宏观视角下的浏览器之 TCP本文分别从“数据包如何送达主机”“主机如何将数据包转交给应用”和“数据是如何被完整地送达应用程序”这三个角度来为你讲述数据的传输过程数据包如何送达主机 - IP数据包要在互联网上进行传输，就要符合网际协议（Internet Protocol，简称 IP）标准。互联网上不同的在线设备都有唯一的地址，地址只是一个数字，这和大部分家庭收件地址类似，你只需要知道一个家庭的具体地址，就可以往这个地址发送包裹，这样物流系统就能把物品送到目的地。计算机的地址就称为 IP 地址，访问任何网
2022-02-09 16:17:36
98
原创 js 中 this 指向问题
js 中 this 指向问题this的指向取决于函数如何调用，这里介绍 4 种调用模式函数调用模式函数调用模式的语法为函数名()其中this指向windowlet name = '李四'let obj = { name: '张三', sayHi: function () { console.log(this) console.log(this.name) }}let fn = obj.sayHifn() // window、李四方法调用模式方法调用模式的语
2021-09-16 14:53:24
106
原创 node os.hostname() 获取中文主机名乱码
node os.hostname() 获取中文主机名乱码如果电脑主机名含有中文，在使用node的os模块的hostname()方法获取到的主机名有可能会乱码，无论怎么转码都不对。于是本文不采用node提供的hostname()方法来获取主机名。取而代之的是采用cmd的hostname命令来获取主机名。相关依赖iconv-lite方法封装exports.getHostname = (cb) => { cb = cb || function () {} // 赋默认值，以防调用getHo
2021-03-05 10:43:05
1515
3
原创 electron 下载文件
electron 下载文件主进程在 utils 文件夹下创建 download.js，复制下面代码const { ipcMain, dialog, shell } = require('electron')const path = require('path')exports.initDownload = function (win) { let downloadObj = { downloadPath: '', // 要下载的链接或文件 fileName: '', //
2021-03-03 19:26:08
6300
4
原创 electron通过注册表打开软件
electron 通过注册表获取软件安装路径相关依赖electron-builder ^22.9.1regedit ^3.0.3使用需要在package.json的build对象中添加extraResources，否则打包后无法使用"build": { "extraResources": [ { "from": "node_modules/regedit/vbs", "to": "vbs", "filter": [ "**/
2021-03-02 15:13:47
1982
6
原创 js复制文本到剪切板中 支持换行
代码/** * 复制文本到剪切板中 * * @export * @param {*} value 需要复制的文本 * @param {*} cb 复制成功后的回调 */export function copy(value, cb) { // 动态创建 textarea 标签 const textarea = document.createElement('textarea') // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textar
2021-01-09 11:24:38
1607
1
原创 js滚动到页面指定位置
代码let requestAnimFrame = (function () { return ( window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60) } )})()
2021-01-09 11:08:32
580
原创 一文搞懂 构造函数 实例 原型 原型链 与他们的关系
构造函数、实例、原型之间的关系概念构造函数：构造函数就是一个函数，配合 new 可以新建对象。实例：通过构造函数实例化出来的对象我们把它叫做构造函数的实例。一个构造函数可以有很多实例。原型：每一个构造函数都有一个 prototype 属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数的实例继承。通过构造函数创建的对象，自带一个__proro__属性，这个属性指向了构造函数的prototype属性，也就是原型对象。默认情况下，原型对象中值包含了一个属性：constructor，该属性
2020-12-29 16:31:09
408
原创 JS判断变量是否为空对象的4种方法
方法 1JSON.stringify()const obj = {}const isEmptyObject = (obj) => { return JSON.stringify(obj) === '{}'}isEmptyObject(obj) // true方法 2for inconst obj = {}const isEmptyObject = (obj) => { // 这里需要判断传入obj的类型，如果不判断类型直接使用for in，会出现传入[], null,
2020-12-29 14:14:17
1833
原创 粗略解决js计算精度问题
该方法能解决 99%的精度问题，并非 100%。想完全解决问题请使用bignumber.jsfunction strip(num, precision = 12) { return +parseFloat(num.toPrecision(precision))}strip(0.1 + 0.2) // 0.30.1 + 0.2 // 0.30000000000000004
2020-12-16 16:37:44
147
1
原创 vue iconfont symbol 彩色图标封装
想要引入下图所示的 iconfont 彩色图标，必须使用 symbol 引用，其原理是 svg 合集。但是根据官方提供的使用方法来看并不方便，需要进行封装。编码main.js中引入下载好的iconfont.jsimport './PATH/TO/YOUR/iconfont.js'新建Icon-Svg.vue组件<template> <svg class="svg-icon" aria-hidden="true"> <use :xlink:hre
2020-12-16 16:28:45
348
1
原创 vue 线上环境 开启 vue-devtools
vue 项目打包正式环境时，是没有 vue-devtools 选项卡的，没法看 vue 内部的数据使用以下几步可以实现在不改代码的情况下开启 vue-devtools选中 Source 选项卡，找到打包好的 app.js，并格式化ctrl + f 搜索$mount并在new那里打断点，new后面的对象就是 Vue 对象，需要记住该变量名，下一步要用到F5 刷新页面就就会进入断点，并在控制台输入d["default"].config.devtools = true（.config之前的
2020-12-07 11:00:11
2944
6
原创 vue 把组件方法暴露到window对象中
方法 1（简单，但不推荐）mounted() { // 2. 在mounted阶段声明globalFn，来调用组件内的方法 window.globalFn = () => { this.getDetail() }},methods: { // 1. 组件内有一个getDetail方法，需要暴露给window，以供嵌入该页面的客户端调用 getDetail() { // 业务逻辑 }}优点：**简单：**适合暴露的方法不太多的系统缺点：*
2020-12-04 18:03:11
8378
2
原创 移动端 原生 js + canvas 实现刮奖效果（适配rem布局）
移动端 原生 js + canvas 实现刮奖效果（适配 rem 布局）效果思路使用 canvas 绘制刮奖灰色遮罩部分监听 touchstart、touchmove 和 touchend 事件在事件中处理擦除效果rem 环境本文的 rem 布局基础为：基于宽度为 750px 的设计图，1rem = 100px编码<!DOCTYPE html><html> <head> <meta charset="UTF-8" />
2020-11-30 14:37:20
503
1
原创 vue 实现粘贴上传图片
vue 实现粘贴上传图片实现原理mounted阶段监听paste事件，粘贴板的内容在事件对象event.clipboardData.items中代码实现mounted() { // 监听粘贴事件，上传图片 document.addEventListener('paste', this.handlePaste)},methods: { handlePaste(event) { let items = event.clipboardData && event.cl
2020-11-18 13:28:34
1031
8
原创 vue 切换主题色
vue 切换主题色效果切换主题色思路使用 vuex 存放当前主题变量根据主题动态切换根元素 #app 的类名使用 less 函数与 less 变量控制相应主题色main.js导入主题文件代码实现目录结构@/theme/themeFunction.less用于写 less 函数，主要作用是提供主题样式@/theme/theme.less用于调用 less 函数，传入主题色编码vuex 中存放主题色和修改主题色的方法state: { theme: 'blue' // 主
2020-11-18 10:40:16
654
原创 原生纵向滚动与横向滚动，完美解决滚动问题
纵向滚动与横向滚动1 原理先来看一下浏览器的滚动原理：当页面内容的高度超过视口高度的时候，会出现纵向滚动条；当页面内容的宽度超过视口宽度的时候，会出现横向滚动条。也就是当我们的视口展示不下内容的时候，会通过滚动条的方式让用户滚动屏幕看到剩余的内容。同理当子元素内容高度或宽度超过父元素后，父元素也会产生滚动条。所以我们需要准备以下 DOM 结构：DOM 结构分为三层，wrapper => content => itemwrapper: 可视区 or 滚动区，一般是有固定高度的容器c
2020-11-09 15:05:09
1626
1
原创 原生js设置与获取cookie
原生 js 设置与获取 cookie设置 cookie先上代码/** * 设置cookie * * @export * @param {string} name cookie名称 * @param {string} value cookie值 * @param {number} [days=7] 过期时间（天） * @param {string} [path='/'] cookie路径 */const setCookie = (name, value, days = 7, pat
2020-11-04 17:55:31
355
1
原创 找到任意组件实例的方法
找到任意组件实例的方法由一个组件，向上找到最近的指定组件/** * 由一个组件，向上找到最近的指定组件 * @param {*} context 当前上下文，比如你要基于哪个组件来向上寻找，一般都是基于当前的组件，也就是传入 this * @param {*} componentName 要找的组件的 name */function findComponentUpward(context, componentName) { let parent = context.$parent le
2020-10-21 15:22:59
437
原创 Vue纵向滚动组件
纵向滚动组件使用说明npm i notice-bar -Simport noticeBar from 'notice-bar'export default { components: { noticeBar, },}<notice-bar />属性说明参数说明类型默认值noticeBarList消息数组Array[]speed速度（毫秒）Number2000height高度（px）Number40
2020-07-24 13:37:29
729
原创 前端自动化发布 - Jenkins安装与配置
JenkinsJenkins 安装Centos 7需要 Java 环境yum install java-1.8.0-openjdk-devel.x86_64需要安装 Gityum install git安装 jenkins方法一（可能会安装很慢甚至失败，推荐方法二）wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.reporpm --import htt
2020-07-23 14:44:18
519
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人