不许动一二三-CSDN博客

原创 Vue源码一行行分析（二）双向绑定原理

今天来一步步实现Vue双向绑定，先引入一张的图片，此图片来源，他这篇文章写得挺好的，大家可以去看看（我写这篇文章的主要目的就是记录一下自己模仿Vue的写法，以供后面回忆，可能知识量还没有达到，不是很好表述，所以直接上代码，代码里有注释，完全是按照vue.js的写法来写的，我只是按照自己的思路，先实现vue构造函数->Observer->Dep->Watcher->compi...

2020-01-15 11:22:51 212

原创 Vue源码一行行分析（一）整体分析

一、前言Vue的项目也已经做了四五个了，虽然已经能够基本的做项目，但是要知其然，知其所以然，所以今天来研究一下源码，虽然自己前面也断续了看了一下源码，但是你懂得，看源码真的看得头痛，所以就放弃了很多次，今天，就开始写这一部分，一则是为了记录自己的学习，以供自己的成长，以及后续的回顾，避免走弯路，二则则是表明自己的决心，相当于立一个flag，督促自己研究下去，好啦，闲话少叙，开工。二、准备这...

2020-01-14 11:16:32 1561

原创 vue-cli设置mode环境变量打包之后没有CSS文件

如下图设置了–mode xxb之后打包，只有js，img等文件夹却没有CSS文件夹。

2022-12-29 10:45:26 1162 1

原创 uni-app从后端返回的mp4链接视频截取一帧为封面

后端返回包含视频链接的数组对象，格式如下：从上面的mp4视频中截取一帧设置为封面，如下图，下面的封面图从视频中截取而来。按照上面的代码，其中posterList就是对应的每一个视频的封面base64数组，一切看起来都挺好，在H5正常运行，但是在APP端使用，明显是不可以的，因为在app端，document为undefined，那么怎么弄呢，查阅了资料，发现使用renderjs即可以识别。1）当 videoLists变化时，通过 :change:videoLists="renderScript.cre

2022-12-06 14:22:50 3157 9

原创连续子数组的最大和

题目：输入一个整型数组，数组中的一个或连续多个整数组成一个子数组。求所有子数组的和的最大值。输入: nums = [-2,1,-3,4,-1,2,1,-5,4]解释: 连续子数组 [4,-1,2,1] 的和最大，为 6。上面的方法还是很巧妙的，但是再加一个，还要输出该连续子数组。

2022-11-29 14:50:21 154

原创微信支付（关于h5支付与JSAPI支付）

的接口，，会生成h5_url,，在h5直接window.location.href,意思就是下面的在非微信浏览器中点击确认支付调用goToPage方法。需求：如果在微信自带浏览器可直接调用支付(JSAPI支付)，如果是在非微信浏览器(qq浏览器，safari…)拉取微信客户端再支付。通过上面的简单介绍，画个简单的图。如果是外部浏览器，后端通过调取。贴上pay.vue完整代码。微信浏览器中支付，使用。

2022-11-14 15:42:00 2498 1

原创 electron

Electron+Vue+ElementUI excel简单合并

2022-09-07 16:16:53 694

原创 VUE微信H5生成二维码海报保存在本地相册

公司需求：宣传海报从后台获取，二维码地址也从后台获得，然后生成一个海报，海报上固定位置放二维码，长按图片可以保存在本地相册(其实前面的需求是点击按钮，下载海报图到本地相册，然后h5下载的实现原理是生成一个a标签链接，然后下载，在电脑模拟器可以下载，在微信浏览器一点反应没有，所以退一步，长按保存),下面是使用版本，UI插件用的是vant(有赞)vue：“^2.6.11”,“html2canvas”: “1.4.1”,“vant”: “^2.8.1”，“vue_qrcodes”: “^1.1.3”从后端获取海报

2022-06-06 16:47:57 4475 10

原创 VUE跑马灯之文字无缝连接

VUE跑马灯之文字无缝链接

2022-06-06 15:33:31 521

原创用 css 或 js 实现多行文本溢出省略

用 css 或 js 实现多行文本溢出省略CSS：<div class="container"> <div class="single">单行：凡世的喧嚣和明亮,世俗的快乐和幸福,如同清亮的溪涧,在风里,在我眼前,汨汨而过,温暖如同泉水一样涌出来,我没有奢望,我只要你快乐,不要哀伤</div> <div class="more">多行：生活是一部大百科全书,包罗万象;生活是一把六弦琴,弹奏出多重美妙的旋律:生活是一座飞马牌大钟,上紧发条,

2022-02-09 10:50:41 1615

原创 error Expected indentation of 2 spaces but found 4 indent

在VUE开发的时候，使用了eslint，然后报error Expected indentation of 2 spaces but found 4 indent的警告，如何去除呢？解决方法：打开.eslintrc.js文件，找到其中的no-multiple-empty-lines，将他设置为0，然后重启项目即可...

2022-01-12 10:23:57 846

原创 js防抖与节流

JS防抖与节流1、前言通常我们在监听滚动事件(scroll事件)，或者在输入框输入值就操作dom时，如果你一滚动或者只要输入一个字母就触发事件，那你想想，你这边刚输入一个字母，还没处理完，这边又输入一个，或者你这边刚滚动一下，事件都没处理完，又触发一个滚动事件，那么你觉得浏览器顶得住这个频率触发的事件的的压力吗？或者说由此而影响的一些举动会让用户体验极差，这肯定也不是我们想要的效果，所以我们的防抖和节流就诞生了。2、定义防抖（debounce）: 当触发一个事件的时候，在

2022-01-07 16:42:10 789

原创 arguments.callee和caller的区别

arguments.callee和caller的区别1、argumentsarguments 是一个对应于传递给函数的参数的类数组对象。白话就是这是一个函数的传参的集合，不是数组，但是是一个类数组function func() { console.log(arguments) console.log(arguments instanceof Array) console.log(arguments instanceof Object)}func(3,'Hello');

2022-01-03 18:48:57 779

原创 axios取消重复请求

axios取消重复请求axios提供了两种取消请求的方式：1.通过CancelToken.source().token取消const CancelToken = axios.CancelToken;const source = CancelToken.source();axios.get('xxx', { cancelToken: source.token}).catch((error) => { if(axios.isCancel(error)) { c

2021-12-30 15:03:59 1105

原创 js手写promise

JS手写PromisePromise是异步编程的一种解决方案，简单的来说，Promise作为一个容器，保存着某个未来才会结束的事件的结果。Promise有两个特点：1）对象的状态不受外界影响。Promise有三种状态：pengding（进行中），fulfilled（完成），rejected（失败），只有异步操作的结果，可以决定当前是哪一个状态。2）一旦状态改变，就不再改变。class MyPromise { static PENDING = 'pending'; static F

2021-12-28 17:48:57 474

原创 elementui select可下拉框选择可输入(不需要点回车，不需要额外的操作)

看文档我们知道可以使用这个属性都设置为true，可以下拉框可以自己输入<el-select v-model="form.pcode" clearable filterable placeholder="请选择产品" class="product-input" allow-create > <el-option v-for="(item,index) in arr_product"

2021-12-23 11:06:25 13568 10

原创 Vue禁用Promise reject输出控制台

看过我前面的Vue封装axios的文章，传送门我把错误使用reject暴露出来了return Promise.reject(response)，不知道的可以去看一下这篇文章，具体表现如下：但是现在问题来了，我在生产环境并不想在控制台显示，那么在main.js加入一个监听事件就可以了main.jswindow.addEventListener('unhandledrejection', function browserRejectionHandler(event) { // 禁用Promise rej

2021-12-17 09:27:40 1389

原创 Vue信息聊天框首次进入有图片加载滚动到最底部

场景：我们有个聊天室，进入聊天室的话我们的需求是，进入聊天室，滚动到最新信息底部，如果是文字的话，很简单，异步获取数据，然后设置滚动高度即可，我们的使用的是VUE，我们先来操作一下：<template> <div> <div id="service">  </div> </div></template><script>export default {

2021-12-16 15:34:07 944 3

原创 map,set,weakmap,weakmap的区别

Map,Set,WeakMap,WeakSet的区别1. Set与WeakSet存在三个区别： 1）WeakSet的成员只能是对象，不能是其他类型的值var ws = new WeakSet();ws.add(1); // Invalid value used in weak setws.add(null); // Invalid value used in weak setws.add(Symbol()); // Invalid value used in weak setconst a

2021-12-15 17:36:36 1248

原创 js手写深拷贝

JS手写深拷贝深拷贝：假设我有一个对象A，我赋值给B，无论怎么改变B，A都不会发生任何的改变，即为深拷贝浅拷贝：假设我有一个对象A，我赋值给B，改变一下B，A就会跟着改变，A，B对象的地址指向一个地方，只是简单的赋值，即为浅拷贝。网上有很多说数组的slice、concat方法对数组使用，或者对象使用Object.assign()和ES6的扩展运算符(…)可以实现深拷贝，这是不对的，以上的方法只能对一层的对象有用，多层嵌套的是不起作用的，什么是多层嵌套，下面是两层，obj对象属性name也是一个对象，还

2021-12-12 19:32:31 3801 6

原创 js手写reduce

js手写reduce

2021-12-11 23:34:59 285 3

原创圣杯双飞翼

圣杯布局与双飞翼布局圣杯与双飞翼布局主要解决三列布局，要求中间内容优先渲染，左右内容宽度固定，中间内容宽度自适应圣杯与双飞翼布局原理是利用浮动，负外边距以及相对定位来实现1.圣杯布局圣杯的原理是将上中下三个容器包裹在一个父容器里，这里的重点是**#center容器要放在第一位** **注意点：**圣杯布局的最小尺寸为2*200+200=600px，前一个200为#left容器的宽度，后一个200为#right容器的宽度，所以要设置#container的最小宽度为600px<di

2021-12-04 18:22:59 398

原创手写new

1.new操作符到底做了什么？1）创建一个新的对象2）将构造函数的作用域赋值给新对象3）执行构造函数的代码（给新对象添加属性）4）返回新对象2.手写newfunction _new(fn, ...args) { // 创建一个以fn原型为原型的对象 const obj = Object.create(fn.prototype); const result = fn.apply(obj, args); // 将构造函数的作用域赋值给新对象且执行构造函数的代码 /

2021-12-04 18:22:27 457

原创手写apply,call,bind方法

1.手写call方法Function.prototype.customCall = function(context) { if(typeof this !== 'function') { // 如果不是函数调用返回异常 throw new TypeError('Not a Function'); } context = context || window; // 如果没有传递指向对象，则默认为window

2021-12-04 18:21:50 608

原创 js继承的几种方法

1.原型链继承function Person(name) { // 提供父类 this.name = name; this.sayName = function () { console.log(this.name) }}Person.prototype.age = 20;// 原型链继承function Man() { this.name = '亚当';}Man.prototype = new Person();var man = n

2021-12-04 18:21:02 364

原创 Vue3.0开发环境跨域代理

Vue2.0:vue.config.js文件下配置devServer: { port: 8080, // 端口号 host: "0.0.0.0", https: false, // https:{type:Boolean} open: false, //配置自动启动浏览器 proxy: { "/api": { target: "", //对应自己的接口URL

2021-09-28 14:29:46 336

原创 react+typescript+antd-mobile(tabbar切换路由页面)

一、项目目录结构二、App.tsximport React from "react";import Routes from "./router/index";function App() { return <Routes></Routes>;}export default App;三、tabbar.tsximport React, { Component } from "react";import { TabBar } from "antd-mobile";

2020-08-27 17:45:24 1537

原创 react antd-mobile lib-flexible自适应（px2rem无效的解决方法）

一、前言适应时代，接触了点typescript，正好公司做了个移动端项目，不过我用的是vue，利用一些时间，用react+typescript来重新写一个，正好样式有了，省了一部分时间，但是typescript还是有诸多限制，其中波折，难以言述，闲话少述，本项目采用react+typescript+aixos+antd-mobile+scss搭建而成，因为是移动端，所有肯定要考虑自适应问题，但是出现了问题，很心累。二、自适应选取淘宝自适应方案lib-flexible,加px2rem，px自动转换rem

2020-08-25 14:55:24 3004 1

原创 vue微信改变了字体影响了项目的布局

在正常情况下，项目一切是好的，但是有些老年人他看不清，所以他在微信设置里把字体放大了，所以导致系统的布局全乱了，所以要禁止改变字体大小，因为使用的是vue项目，所以在index.html页面中加入一些代码就行,一个是ios的一个是android 亲测有效<style> body { // ios -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; -m

2020-06-29 15:20:02 963 5

原创 vue设置多行省略号

一、前言在网上找了很多css多行省略号，虽然模拟器有用，但是在手机浏览器上虽然有省略号，但是下一行还是有多余的字显示，这显然不是所想要的，这有可能涉及到兼容性问题，所以，打算用js来设置省略号，原理就是通过offsetHeight和scrollHeight来比较，如果两个相等，代表没有滚动区域，如果scrollHeight大于offsetHeight则代表出现滚动区域二、编码如上图所示，因为我是要设置列表的标题两行省略号，如下图，上图ref用于获取当前元素，当然，class="left-title"

2020-06-29 11:19:33 1310 3

空空如也

空空如也