倪晓磊-CSDN博客

原创源码解析 vue3 createApp做了什么

当我们像下面这样使用 createApp 创建 vue app 实例过程中发生了什么？const { createApp } = VuecreateApp({ setup() { return { } }}).mount('#app')我们一起来看看。首先，进入的是 vue导出的 createApp 函数，它将所有参数都合并为了 args, 并调用了 ensureRenderer 函数并调用了其返回数据上的createApp ，然后将 args 打散传入。这里可以

2022-02-04 19:45:44 1521

原创源码学习 vue-loader源码

按执行流程一步步看vue-loader 源码通常配置webpack 时，我们会配置一个 loader 和一个 plugin// webpack.config.jsconst VueLoaderPlugin = require('vue-loader/lib/plugin')// ...{ test: /\.vue$/, loader: 'vue-loader'},// ...plugins: [ new VueLoaderPlugin(),]当我们运行 webpack 时，首

2022-02-04 03:50:37 833

原创手摸手教你开发一个postcss插件自动计算vw

因为平时工作中开发h5网页的时候，为了更好适配不同的尺寸，经常会使用vw单位，通常是通过vw = 元素尺寸 / 屏幕尺寸，比如一个元素在 37.5px的设计图下宽 100px, 那得到的 vw就是 37.5 / 375 * 100 = 10vw, 每次都需要这样去计算又特别麻烦，所想把这个事情给自动化postcsspostcss 会将 css转换为 ast，并提供了运行插件的机制，这么一看和babel 很像，只是处理的对象不同，一个是js ，一个是css，如果你对ast 或

2022-02-03 18:18:58 1290

原创如何实现一个min-webpack?

今天来实现一个简单的打包工具文件依赖src├─ a.js├─ b.js├─ c.js└─ index.js[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xXKFCW02-1643883138652)(https://raw.githubusercontent.com/nxl3477/md-img-storage/study/2022/202201271747838.png)]文件内容如下// src/index.jsimport { aInit } fro

2022-02-03 18:12:56 953

原创还在手动上传网页压缩图片？推荐你一个好用的命令工具!

咱们前端仔，开发过程中，为了网页的加载性能，总是免不了需要对使用到的图片进行压缩。曾几何时，我总是手动的上传到 [tinypng](https://tinypng.com/) 网站进行压缩然后再下载回来，但这个过程感觉特麻烦，也用过 webpack 的相关插件，感觉压缩效果不是很理想。因此决定基于 tinypng 封装一个快捷的工具。npm地址： [tinypng-helper](https://www.npmjs.com/package/tinypng-helper)# 安装```.

2021-10-09 09:51:48 86

原创一文看懂 webpack 的所有 source map ！

一直以来对source map 都懵懵懂懂，被webpack 所提供的多样的source 给乱花了眼。这次就决定来一一尝试一下各种source map的区别什么是source map现代的前端开发总是伴随的各种框架，在使用这些框架开发的代码需要经过编译才可以在生产环节使用，编译后就伴随着可读性的降低，也会影响我们的错误调试。那source map就是为了解决这个问题。Source map可以理解为一个地图，通过它可以获知编译后的代码对应编译前的代码位置。这样当代码遇到异常，我们就可以通

2021-10-08 09:48:58 578

原创保姆级教学！这次一定学会开发babel插件！

如果你有babel相关知识基础建议直接跳过前置知识部分，直接前往 "插件编写" 部分。前置知识什么是AST学习babel, 必备知识就是理解AST。那什么是AST呢？先来看下维基百科的解释:在计算机科学中，抽象语法树（Abstract Syntax Tree，AST），或简称语法树（Syntax tree），是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构"源代码语法结构的一种抽象表示&quot

2021-09-27 09:30:29 564

原创 @babel/preset-env 与@babel/plugin-transform-runtime 使用及场景区别

之前在用babel 的时候有个地方一直挺晕的，@babel/preset-env 和 @babel/plugin-transform-runtime都具有转换语法的能力，并且都能实现按需 polyfill ,但是网上又找不到比较明确的答案，趁这次尝试 roullp 的时候试了试.如果我们什么都不做，没有为babel 编写参数及配置，那babel 并没有那么大的威力，它什么都不会做， ...

2019-12-04 00:44:02 3288 1

原创【React】PureComponent解决了什么问题

PureComponent 是和 shouldComponentUpdate这个生命周期息息相关的React 重新渲染问题React中，当父组件中触发setState，尽管未修改任何 state 中的值也会引起所有子组件的重新渲染，更何况是修改了某个state还有，当父组件传给子组件的props 发生改变，不管该props是否被子组件用到，都会去重新渲染子组件。其实我们也可以...

2019-11-23 21:16:46 498

原创 vue-cli3脚手架配置px2rem适配方案

安装npm i lib-flexible --savenpm install px2rem-loader引入进入 main.jsimport 'lib-flexible/flexible'进入index.html<meta name="viewport" content="width=device-width, initial-scale=1.0">根目录新建 v...

2019-04-04 22:28:44 12206 1

原创 node学习笔记读写文件与开启第一个web服务器

读取文件Node中的js 具有文件操作的能力使用require 方法加载fs核心模块fs是 files-ystem 的简写，就是文件系统的意思第一个参数就是要读取的文件路径第二个参数是一个回掉函数,两个参数 error 如果读取失败，error 就是错误对象如果读取成功，error就是Null data 如果读取失败，data 就是undefi...

2018-05-14 19:38:59 233

原创 JS 学习笔记闭包小案例

直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Document</title></head><style type="tex

2018-05-12 20:26:04 178

原创 JS学习笔记原型链和利用原型实现继承

原型链原型链是一种关系，实例对象和原型对象之间的关系，关系是通过原型(__proto__)来联系的实例对象中有__proto__,是对象,叫原型,不是标准的属性,浏览器使用,并且有的游览器不支持构造函数中有prototype属性,也是对象,叫原型注意原型中的方法是可以互相访问的实例代码 function Animal(name,age){ this.name=name; ...

2018-05-12 09:53:41 17065 4

原创 JS 学习笔记贪吃蛇小demo

最近跟着视频教程打了一个贪吃蛇,来记录一下实现思路,先上代码静态页<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>贪吃蛇</title></head>&

2018-05-10 21:09:23 842

原创 JS学习笔记构造函数和实例对象之间的关系

自定义构造函数function Person(name,age,sex){ this.name=name; this.age=age; this.sex=sex; }实例对象实例对象的构造器是指向Person 的，结果是true,所以,这个实例对象per就是通过Person来创建的var per=new Person("小红",21,"男"...

2018-05-09 10:10:26 788

原创 JS学习笔记什么是面向对象、创建对象的几种方法、利用原型节省内存空间

编程思想面向过程:所有事情都是亲力亲为，注重的是过程面向对象:提出需求，找对象，对象解决，注重的是结果举个例子: 面向过程: 比如你想吃面条，面向过程就是自己去买面粉，然后买来自己和面，自己煮面，所有的过程都是得自己一步一步去做面向对象: 我想吃面，在附近找一家面馆，跟老板说要吃什么面，你只需要给老板钱，就会给你煮好的面，你本身不需要关心任何过程面向对象的特性封装: 将一些可能会重复使用到...

2018-05-08 15:47:24 311

原创 JS学习笔记数组去重

操作的数组 let arr=[0,1,23,'1',4,2,8,5,5,6,9,'asdasd','5']方法1，利用ES6 的set 来进行数组去重 console.time("set") let type1=new Set(arr) console.log(type1) type1=[...type1] console.log(type1) consol...

2018-05-08 11:56:37 152

原创 JS学习笔记 location.href和location.replace的大致区别

今天学校的外聘老师告诉我们,公司开发过程中，因为新手的一些误操作造成了许多问题，举个例子，在项目中比如要购买一件商品，并且有一个这个商品的优惠券，而使用这张优惠券需要取请求一个第三方的地址，中间会有一次跳转，因为使用了location.href 后,按流程操作是没问题的，但是如果用户点击返回，则无法跳回原本的提交订单的页面，会一直进行重复请求，造成程序出错，所以，必须替换成locatio...

2018-05-07 20:46:45 25829 2

原创 Vue学习笔记利用Vue 实现树形视图

这是学习代码以来的第一篇文章利用简单的树形视图实现，熟悉了组件的递归使用这是模拟的树形图数据let all={ name:'all', children:{ A:{ name:'A', children:{ a1:{ ...

2018-05-07 11:45:03 25422 1

倪晓磊的博客