青阳的博客

原创 webpack library

【代码】webpack library。

原创 webpack loader

会将上面的cssModule交给style-loader。通过style标签将css样式插入html的head中。插件是整个生命周期，loader只对应一个环节。1%：表示需要支持全球使用率超过 1% 的浏览器。是一个转换函数，接收老内容，返回新内容。loader只能转换模块。

原创 webpack学习之output

当有多个入口起点的时候：则用占位符来确保每个文件具有唯一的名称。path:需要绝对路径，filename代表输出文件名。output是指打包之后的配置。

原创 数据类型的8种判断方式

typeof 目前能返回string，number，boolean，symbol（ES6新增基本数据类型，表示独一无二的值，使用 symbol 作为属性名可以保证不会出现同名属性），bigint（es10新增一种基本数据类型，BigInt 可以表示任意大的整数，整数溢出将不再是问题。），unfined，object，function这八种判断类型。：已经不是绝对安全（暂时性死区。

原创 webpack学习笔记-entry

比如：entry:''./src/index.js"会自动解析成以main命名的对象，这也是为什么当我们没有给设置output的时候，打包时得到的文件是main.js，这是因为打包的时候会以entry的对象的key作为包名。

原创 typeof null返回值为什么是object?

是第一版本的JavaScript的问题，使用32位表示一个变量，其中前3位代表值的类型，000 表示对象，010 表示浮点数，100 表示字符串，110 表示布尔值，和其他的值都被认为是指针。，在这种情况下null被解释为000的指针，即被认为是一个空对象引用，因此typeof null的结果为object，属于历史遗留问题。

原创 每周算法题---逆波兰表示法，求该后缀表达式的计算结果

采用栈结构，如果不是运算符就入栈，如果是运算符就弹出栈中前两个值进行运算，需要注意用出栈的顺序，除法是除数在前，eval方法用（）包起来,最后运算结果也要入栈。给定逆波兰表达式总是有效的。换句话说，表达式总会得出有效数值且不存在除数为 0 的情况。有效的算符包括 +、-、*、/。每个运算对象可以是整数，也可以是另一个逆波兰表达式。根据 逆波兰表示法，求该后缀表达式的计算结果。整数除法只保留整数部分。

原创 移动App开发环境配置

安装最新版本的java jdk修改环境变量，新增JAVA_HOME的系统环境变量，值为C:\Program Files (x86)\Java\jdk1.8.0_112，也就是安装JDK的根目录 修改系统环境变量Path，在Path之后新增%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin; 新建系统环境变量CLASSPATH，值为.;%JAVA_HOME%\lib\dt...

原创 canvas Image处理

针对canva处理图片不清晰的处理var canvasZan = document.createElement('canvas') canvasZanCtx = canvasZan.getContext('2d') var devicePixelRatio = window.devicePixelRatio || 1, backingStoreRatio = canvasZanCtx.webkitBackingStorePixelRatio || canvasZanCtx..

原创 new vue 主要干了啥？

Vue 初始化主要就干了几件事情，合并配置，初始化生命周期，初始化事件中心，初始化渲染，初始化 data、props、computed、watcher 等等。初始化的最后，检测到如果有 el 属性，则调用 vm.$mount 方法挂载 vm ，挂载的目标 就是把模板渲染成最终的 DOM，那么接下来我们来分析 Vue 的挂载过程Vue 不能挂载在 body 、 html 这样的根节点上。接下来的是很关键的 逻辑 —— 如果没有定义 render 方法，则会把 el 或者 tem.

原创 vue兼容ie9-11

vue项目兼容ie,采用core-js的方式，安装core-js：3.0以上版本采用vue-cli脚手架，vue-cli3.0开始默认会安装core-js3.0的版本

原创 vite,elementuiPlus重置表单无效

当我门在table中里面操作编辑详情，添加时针对同一个表单的时候，而这个表单时作为一个弹出框弹出的时候，希望点了编辑，再点添加的时候，需要重置表单的校验，这个重置表单的校验，是可以要放在弹出框显示的位置，否则不起作用，打印表单的值会看到undefined

原创 vite vue3项目打包,跳过ts检查

vite vue3项目打包,跳过vue-tsc检查

原创 css3画.5个像素的边框

css border实现，单边.5个像素，整个.5个像素

原创 vite +elementPlus vue3自定义主题色

vite自定义主题色，elementPlus按需加载先安装sass，elementPlus样式是scss写的，

原创 vite配置 vue3中怎么使用svg图标

vite vue3中怎么使用svg图标svg图片在项目中使用的非常广泛，如何在vue3 + vite 中使用svg图标。vite-plugin-svg-icons预加载在项目运行时就生成所有图标,只需操作一次 dom高性能内置缓存,仅当文件被修改时才会重新生成

原创 vite为vue3配置@路径，vite路径配置

vite为vue3配置@路径，vite路径配置

原创 vue mixin混入，生命周期执行阶段简易实现

vue源码实现，vue.mixin

原创 js时间格式化

js时间格式化

原创 自己实现一个vue插件第一步

通过rollup打包vue.js插件,上一篇文章讲解了怎么通过rollup打包一个js库vue是mvvm结构，M (model)：模型对象：指的是构成界面内容的相关数据 V(view): view: 视图对象：指的是给用户或者开发者展示数据的界面 VM(viewmodel): 视图模型对象：是view与model之间的桥梁Vue.js的核心ViewModelViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body

原创 rollup打包项目

选择rollup打包纯js插件。rollup只是把我们的代码转成目标js并没有其他的像webpack的可以打包图片等 新建项目文件 通过cmd进入文件，使用npm初始化项目 npm init -y 3. 安装包我们需要安装，rollup来打包我们的插件，我们在编写js插件的时候会需要用到es6语法，我们还需要安装将es6转成es5的babel， 所以需要安装，@babel/core，@babel/preset-env我们还需要安装插件rollup...

原创 为什么this.key可以访问data,prop,methed里的值

在vue源码中，对this.key做了代理，比如data(){retrun {message:'mess'}},我们访问this.message，其实是访问this._data.message是在instate的时候，对data进行了proxyvar sharedPropertyDefinition = { enumerable: true, configurable: true, get: noop, set: noop}function proxy(ta.

原创 instanceof原理

left instanceof right 是通过检测 right的prototype属性是否在left的原型链上function myInstanceof(left, right) { // 这里先用typeof来判断基础数据类型，如果是，直接返回false if(typeof left !== 'object' || left === null) return false; // getProtypeOf是Object对象自带的API，能够拿到参数的原型对象...

原创 js new的时候干了些啥？

创建一个空的简单JavaScript对象（即{}） 链接该对象（即设置该对象的构造函数）到另一个对象 将步骤1新创建的对象作为this的上下文 如果该函数没有返回对象，则返回this模仿newlet that = this function CutOb () { this.date = that.getNowDate() } let cutOb = new CutOb() function createObject (fn) { let

原创 vue 自定义指令防抖

directives: { throttle: { bind: (el, value) => { var falg = null el.addEventListener('click', function (event) { if (falg) { event.stopImmediatePropagation() } else { falg = setTimeo.

原创 有效的括号

给定一个只包括 '('，')'，'{'，'}'，'['，']'的字符串 s ，判断字符串是否有效。有效字符串需满足：左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。示例 1：输入：s = "()"输出：true示例2：输入：s = "()[]{}"输出：true示例3：输入：s = "(]"输出：false示例4：输入：s = "([)]"输出：false示例5：输入：s = "{[]}"输出：true提示：1 &l...

原创 vue-router源码第一步阅读

为什么必须定义一个install方法，并且把他赋予VueRouter呢？其实这跟Vue.use方法有关，大家还记得Vue是怎么使用VueRouter的吗？import VueRouter from 'vue-router'Vue.use(VueRouter) // 第一步export default new VueRouter({ // 传入的options routes // 第二步})import router from './router'new Vue({ ...

原创 js原型链

原创 vue源码为什么vue是一个方法而不是一个calss类

// 引入模块import { initMixin } from './init'import { stateMixin } from './state'import { renderMixin } from './render'import { eventsMixin } from './events'import { lifecycleMixin } from './lifecycle'import { warn } from '../util/index'// 什么时候需要把代码放到u.

原创 vue源码解析之initMixin

initLifecycle(vm);// 初始化组件数据，initEvents(vm);initRender(vm);callHook(vm,'beforeCreate');initInjections(vm);//resolveinjectionsbeforedata/propsinitState(vm);initProvide(vm);//resolveprovideafterdata/...

原创 webpack编译多个html

通过webpack编译打包多个html，通过webpack-dev-server自动刷新启动服务，解决webpack-cli跟webpack-dev-server版本不兼容问题

原创 webpack之entry

entry的三种形式配置文件中entry接受三种形式的值：字符串，数组和对象对象entry对象形式如下：entry: { <key>: <value> ...}先介绍对象形式，是因为这个是最完整的entry配置，其他形式只是它的简化形式而已。对象中的每一对属性对，都代表着一个入口文件，因此多页面配置时，肯定是要用这种形式的entry配置。keykey可以是简单的字符串，比如：'app', 'main', 'entry-1'等。...

原创 webpack-初探-import，require

以前我们写的js我们把js按照功能裁分，在传统的html写法，是要在html中把所有需要的js全部在页面html中引入，而不是在各个自己需要用到其它js文件的文件中引入，这样引入必须保证引入的顺序是否正确。在最早的时候是没有模块的概念的。随着前端工程的发展，前端开发也越来越规范化，更像是软件工程了。那么随之而来的，为了解决工程化的问题，就引入了模块的概念。但是在早期，因为ecmascript原本是没有模块语法的，所以采用的都是社区的各种版本协议，其中影响最深的，就是nodejs使用的CommonJS规范

原创 js组合继承

原型链继承： //原型对象上的任何类型的值，都不会被实例所重写/覆盖， //在实例上设置语原型对象上同名属性的值，只会在实例上创建一个同名的本地属性 //但是是引用类型的就会修改//原型链继承 function Person(name){ this.name='dfdf' } Person.setName=function(name){ this.name=name } Person...

转载 js继承-原型链继承

构造函数、原型与实例之间的关系每创建一个函数，该函数就会自动带有一个prototype属性。该属性是个指针，指向了一个对象，我们称之为原型对象。什么是指针？指针就好比学生的学号，原型对象则是那个学生。我们通过学号找到唯一的那个学生。假设突然，指针设置 null, 学号重置空了，不要慌，对象还存在，学生也没消失。只是不好找了。　　原型对象上默认有一个属性constructor，该属性也是一个指针，指向其相关联的构造函数。　　通过调用构造函数产生的实例，都有一个内部属性，指向了原型对象。所以...

原创 js防抖节流

//防抖this.debounce((ff)=>{ console.log('ff'+ff) setInterval(()=>{//节流 this.throttle((kk)=>{ console.log(kk) },500)(44) },900) },200)(3)debounce(fn,delay){ var timer=null var that=this return ..

原创 uniapp分包路由跳转

分包之后还需要跳转到主包里的话，路由跳转：把url提出来就可以，如果不把url提出来就不行。是不是很魔性

原创 elementUI 样式修改

1，通过全局样式新建common.css,并在main.js中引入import "./assets/style/common.css";可以用来修改项目整体颜色风格2单个组件<style></style>中不要加scope,修改第三方样式的不加，自己的样式加<style></style><style scoped></style>3：deep将废弃：/deep/深度修改标签样式找到需要修改的 Eleme.

原创 uni-app 更改 checkbox的样式

不能再除app.vue外的.vue写样式，很可能无效，再app.vue里面也不能写scope.datiMain uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked{ border-color:#404E9F; color: #DA4A37 !important; } .datiMain uni-checkbox .uni-checkbox-input { border-color: #404E9F; }

原创 elementUI-表单验证踩坑记录

简单表单验证：:model必须是对象，否则报错。 <el-form-item prop="shareTitle">中的prop必须和<el-input>这个的v-model一致否则不能验证。 <el-form :model="jcData" ref="activeInfo" :rules="rules"> <el-form-item prop="shareTitle"> <el-input