- 博客(123)
- 收藏
- 关注
RSS订阅
原创 vue面试题整理
1、对MVVM的理解MVVM分为Model、View、ViewModel。Model代表数据模型，数据和业务逻辑都在Model层中定义；泛指后端进行的各种业务逻辑处理和数据操控，对于前端来说就是后端提供的 api 接口。View代表UI视图，负责数据的展示；视图层，也就是用户界面。前端主要由 HTML 和 CSS 来构建 。ViewModel负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作；Model和View并无直接关联，而是通过ViewModel来进行联系的，M...
2021-02-24 09:59:49
1289
3
原创 vue双向绑定原理
vue双向绑定原理分析当我们学习angular或者vue的时候，其双向绑定为我们开发带来了诸多便捷，今天我们就来分析一下vue双向绑定的原理。简易vue源码地址：https://github.com/jiangzhenfei/simple-Vue1.vue双向绑定原理vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。我们先来看Object.
2020-12-31 14:43:39
335
原创 前端常用函数实现
1:创建一个指定长度的可遍历的数组var a = Array.apply( null, { length: 3 } ); // [ undefined, undefined, undefined ]
2020-12-03 15:18:10
302
原创 web前端兼容性问题总结
1.HTML对象获取问题FireFox：document.getElementById("idName");ie:document.idname或者document.getElementById("idName").解决办法：统一使用document.getElementById("idName");2. const问题说明:Firefox下,可以使用const关键字...
2019-04-10 15:06:29
3338
原创 url最大长度
对于前端作为分享页，或者跳转新页面时，或者做hrbrid 通信，需要用到一系列的参数来处理相对的业务逻辑，那么具体url可以携带多少参数合适
2023-01-10 14:48:36
7956
原创 前端特定手机兼容问题汇总
1: iphone5 iphoneX 对象的结构赋值 会导致字段的顺序发生变化，后面赋值的会在最后面2: 红米K30 pro 微信公众号环境 css透明度 50% 不透明，必须为0.5
2021-09-26 17:43:34
326
原创 React 中 setState的对象、数组的操作
import {useState} from 'react'import './App.css';function App() { let [count, setCount] = useState(0); let [arr, setArr] = useState([]); const handleClick = () => { count += 1; setCount(count) console.log(count) } const.
2021-06-06 19:22:08
4675
1
原创 手写promise.all
promise.all 有以下特点promise.all()返回值是new Promise需要用一个数组存放每一个promise的结果值遍历参数数组，判断是否是promise，是的话执行得到结果后压入结果数组；否则直接放入结果数组。当每个都成功执行后，resolve（result）当有一个失败，rejectfunction isPromise(obj) { return !!obj && (typeof obj === 'object' || typeof
2021-04-29 09:58:50
157
原创 webpack优化
Webpack优化可以分为优化开发体验和优化输出质量两部分1、优化开发体验优化开发体验的目的是为了提升开发时的效率，其中又可以分为以下几点： 优化构建速度。在项目庞大时构建耗时可能会变的很长，每次等待构建的耗时加起来也会是个大数目。 4-1 缩小文件搜索范围 4-1-1 在配置 Loader 时通过 include 去缩小命中范围 4-1-2 优化 resolve.modules 配置，指明存放第三方模块的绝对路径..
2021-04-27 10:40:52
123
原创 Electron 进程间通信
Electron桌面应用中有两个进程，分别是Main主进程和Renderer渲染进程。两个进程间有多种方法进行通信。一、主进程和渲染进程1、主进程Mainmain.js在启动应用后就创建了一个主进程main process，它可以通过electron中的一些模块直接与原生GUI（在你的应用窗口）交互。2、渲染进程Renderer仅启动主进程并不能给你的应用创建应用窗口。窗口是通过main文件里的主进程调用叫BrowserWindow的模块创建的。每个页面都是运行在自己的进程里，这些进程我
2021-04-27 10:04:16
1463
原创 js手动实现 Reduce 方法
Array.prototype.myReduce = function (fn, initValue) { if (initValue === undefined && !this.length) { throw new Error('myReduce of empty array with no initial value'); } // let result = initValue === undefined ? this[0] : initValue;不要这样.
2021-04-25 11:26:11
368
1
原创 js 如何实现循环跳出请求
1.for方法跳出循环function getItemById(arr, id) { var item = null; for (var i = 0; i < arr.length; i++) { if (arr[i].id == id) { item = arr[i]; break; } } return item;
2021-04-22 14:32:17
511
原创 兔子数列
兔子在出生两个月后，就有繁殖能力，一对成年而有繁殖力的兔子每个月能生出一对小兔子来。假设一年以后所有兔子都不死，那么一对小兔子一年以后可以繁殖多少对兔子？1，递归function add(n){ if(n <= 2){ return 1; }else{ return add(n-1) + add(n-2); }}2，尾递归优化function add(n,res1 =1,res2 = 1){ if(n <=
2021-04-08 21:53:34
256
原创 web前端柯里化面试题
定义实现柯里化，是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。1.实现一个函数功能：sum(1,2,3,4…n)转化为 sum(1)(2)(3)(4)…(n)// 使用柯里化 + 递归function curry ( fn ) { var c = (...arg) => (fn.length === arg.length) ? fn (...arg) : (...arg1) =>
2021-03-26 11:22:50
381
原创 js实现deepCopy
function deepClone (data) { const type = metaType(data); let obj = null; if (type === 'array') { obj = []; for (let i = 0; i < data.length; i++) { obj.push(deepClone(data[i])); } } else if (type === '.
2021-03-25 15:47:10
487
原创 移动端视口配置
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />initial-scale: 初始的缩放比例； minimum-scale: 允许用户缩放到的最小比例； maximum-scale: 允许用户缩放到的最大比例； user-scalable: 用户是否可以手动缩放； ...
2021-03-25 11:41:02
123
原创 前端性能优化都有哪些
1，SEO优化 合理的 title 、 description 、 keywords ：搜索对着三项的权重逐个减小， title 值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面 title 要有所不同； description 把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面 description 有所不同； keywords 列举出重要关键词即可 语义化的 HTML 代码，符合W3C规范：语义化代码让搜索引擎容易理解网页 重要内容 HTML 代码放在最前：搜索引擎
2021-03-24 18:06:40
262
原创 事件委托
什么是事件委托 事件代理 （ Event Delegation ） ，又称之为事件委托。是 JavaScript 中常用的绑定事件的 常用技巧。顾名思义，“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监 听的职务。事件代理的原理是 DOM 元素的事件冒泡。使用事件代理的好处是可以提高性能 可以大量节省内存占用，减少事件注册，比如在 table 上代理所有 td 的 click 事件就非常棒 可以实现当新增子对象时无需再次对其绑定 ...
2021-03-18 19:48:38
92
原创 CSS3有哪些新特性
1:新特性 新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点） 圆角 （border-radius:8px） 多列布局 （column） 阴影和反射 （Shadow\Reflect） 文字特效 （text-shadow） 线性渐变 （gradient） 旋转，缩放,定位,倾斜 （transform） 动画 （Animation） 多背景，背景裁剪2: 新增伪类 - 伪元素p:first-of-type 选择属..
2021-03-18 17:44:28
1130
原创 js new 手写实现 new做了哪些事情
new到底做了哪些事情(1) 创建一个新对象；(2) 将构造函数中的this指向该对象(3) 执行构造函数中的代码（为这个新对象添加属性） ；(4) 返回新对象。function _new(obj, ...rest){ // 基于obj的原型创建一个新的对象 const newObj = Object.create(obj.prototype); // 添加属性到新创建的newObj上, 并获取obj函数执行的结果. const result = obj.ap...
2021-03-18 10:12:56
200
原创 this, bind,call,apply 面试题
了解 this 嘛，bind，call，apply 具体指什么它们都是函数的方法call: Array.prototype.call(this, args1, args2]) apply: Array.prototype.apply(this, [args1, args2]) ：ES6 之前用来展开数组调用, foo.appy(null, [])，ES6 之后使用 ... 操作符New 绑定 > 显示绑定 > 隐式绑定 > 默认绑定 如果需要使用 bind 的柯里化和 app
2021-03-16 16:24:38
251
原创 JS 隐式转换，显示转换
一般非基础类型进行转换时会先调用 valueOf，如果 valueOf 无法返回基本类型值，就会调用 toString字符串和数字"+" 操作符，如果有一个为字符串，那么都转化到字符串然后执行字符串拼接 "-" 操作符，转换为数字，相减 (-a, a * 1 a/1) 都能进行隐式强制类型转换[] + {} 和 {} + []复制代码布尔值到数字1 + true = 2 1 + false = 1转换为布尔值for 中第二个 while if 三元表达式 || ...
2021-03-16 15:26:40
183
1
原创 事件冒泡和事件捕获
1、事件阶段如下图所示一般的，事件分为三个阶段：捕获阶段、目标阶段和冒泡阶段。（1）捕获阶段（Capture Phase）事件的第一个阶段是捕获阶段。事件从文档的根节点流向目标对象节点。途中经过各个层次的DOM节点，并在各节点上触发捕获事件，直到到达事件的目标节点。捕获阶段的主要任务是建立传播路径，在冒泡阶段，事件会通过这个路径回溯到文档跟节点。（2）目标阶段（Target Phase）当事件到达目标节点的，事件就进入了目标阶段。事件在目标节点上被触发，然后会逆...
2021-03-15 17:01:39
841
原创 reflow(回流)和repaint(重绘)
reflow(回流)和repaint(重绘)简要：整个在浏览器的渲染过程中（页面初始化，用户行为改变界面样式，动画改变界面样式等）reflow(回流)和repaint(重绘) 会大大影响web性能，尤其是手机页面。因此我们在页面设计的时候要尽量减少reflow和repaint。什么是reflow和repaint（原文链接：http://www.cnblogs.com/Peng2014/p/4687218.html）reflow：例如某个子元素样式发生改变，直接影响到了其父元素以及往上追溯很多祖先
2021-03-10 23:34:42
144
原创 js 递归运用 求阶乘 求斐波那契数
//求阶乘function factorial(n) { if (n === 1 || n === 0) { // 基线条件 return 1; } return n * factorial(n - 1); // 递归调用}//求斐波那契数列function fibonacci(n){ if (n < 1) return 0; // {1} if (n <= 2) return 1; // {2} return fibonacci(n - 1) + .
2021-03-09 17:00:52
92
原创 Number.MAX_SAFE_INTEGER 后端long类型的ID 导致前端 精度丢失
Number.MAX_SAFE_INTEGERNumber.MAX_SAFE_INTEGER常量表示在JavaScript 中最大的安全整数（maxinum safe integer)（253- 1）。描述MAX_SAFE_INTEGER 是一个值为9007199254740991的常量。因为Javascript的数字存储使用了IEEE 754中规定的双精度浮点数数据类型，而这一数据类型能够安全存储-(253- 1)到253- 1 之间的数值（包含边界值）。这里安全存...
2021-03-09 11:22:42
645
1
原创 JS中Map,Set,Array,Object之间的相互转换
原生js能够支持这几种类型数据格式之间的转换，先了解下Object.entries和Object.FromEntries这两个原生方法的作用：Object.entries获取对象的键值对Object.FromEntries把键值对列表转成对象Object.entries和Object.fromEntries之间是可逆的。Object转Maplet arr={foo:'hello',bar:100};let map=new Map(Object.entries(arr));console
2021-03-08 20:50:30
2336
原创 set 快速实现 并集 交集 差集
// 并集const union = (setA, setB) => { return new Set([...setA, ...setB])}// 交集const intersection = (setA, setB) => { return new Set([...setA].filter(x => setB.has(x)))}//差集const difference = (setA, setB) => { return new Set([...
2021-03-08 20:31:40
496
原创 js使用类 实现链表
“我们先来看看它们的职责”push(element)：向链表尾部添加一个新元素。 insert(element, position)：向链表的特定位置插入一个新元素。 getElementAt(index)：返回链表中特定位置的元素。如果链表中不存在这样的元素，则返回undefined。 remove(element)：从链表中移除一个元素。 indexOf(element)：返回元素在链表中的索引。如果链表中没有该元素则返回-1。 removeAt(position)：从链表的特定位置移除一
2021-03-08 18:24:51
176
2
原创 node 环境 启用 ES2015导入功能
在Node.js中使用原生的ES2015导入功能如果能在Node.js中使用原生的ES2015导入功能，而不用转译的话就更好了。从Node 8.5版本开始，可以将ES2015导入作为实验功能来开启。要演示这个示例，需要将文件的扩展名由js修改为mjs（.mjs是本例成功运行的必要条件）我们将在node命令后添加--experimental-modules来执行代码。...
2021-03-04 16:08:46
163
1
原创 AMD && CMD ES6 模块
前言JavaScript初衷：实现简单的页面交互逻辑，寥寥数语即可；随着web2.0时代的到来，Ajax技术得到广泛应用，jQuery等前端库层出不穷，前端代码日益膨胀问题：这时候JavaScript作为嵌入式的脚本语言的定位动摇了，JavaScript却没有为组织代码提供任何明显帮助，甚至没有类的概念，JavaScript极其简单的代码组织规范不足以驾驭如此庞大规模的代码一、模块模块化：是一种处理复杂系统分解为代码结构更合理，可维护性更高的可管理的模块的方式。在理想状态下我们只
2021-03-04 15:12:13
239
1
原创 vue 混入 相同的对象，钩子的合并规则
当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。const myMixin = { data() { return { message: 'hello', foo: 'abc' } }}const app = Vue.createApp({ mixins: [myMixin], data() { return { message:
2021-02-24 15:39:04
785
原创 vue slot使用 具名插槽 作用域插槽
具名插槽父组件<template lang="pug"> .home img(alt="Vue logo" src="../assets/logo.png") HelloWorld(msg="Welcome to Your Vue.js + TypeScript App") h2(slot="header") 标题 p 正文内容1 div(slot="footer") 底部信息 div(slot="footer2...
2021-02-22 15:38:24
674
原创 vue 子组件快速更改父组件prop的置 update:modelValue
v-model参数默认情况下，组件上的v-model使用modelValue作为 prop 和update:modelValue作为事件。我们可以通过向v-model传递参数来修改这些名称：<my-component v-model:foo="bar"></my-component>在本例中，子组件将需要一个fooprop 并发出update:foo要同步的事件：const app = Vue.createApp({})app.co...
2021-02-22 14:34:41
9251
转载 原生js 知识图谱
目录JavaScript BOM对象JavaScript Dcoument对象JavaScript 事件处理JavaScript变量JavaScript函数基础JavaScript流程控制JavaScript数据类型JavaScript数组JavaScript运算符JavaScript正则表达式JavaScript字符串函数JavaScript BOM对象JavaScript Dcoument对象JavaScript 事件处理Jav..
2021-02-20 14:25:29
257
原创 Vue $emit $event 传值
事件名始终使用 kebab-case 的事件名。通过事件向父组件发送信息子组件中EnFontsize.vue中$emit <button @click="$emit('enlarge-text')">Enlarge text</button>父组件中<template> <div id="app"> <div :style="{ fontSize: postFontSize + 'em' }">
2021-02-20 11:00:16
2922
原创 Vue在组件上使用v-model
Vue在组件上使用v-model（2.0+版本）自定义事件也可以用于创建支持v-model的自定义输入组件。记住：<input v-model="searchText">等价于：<input :value="searchText" @input="searchText = $event.target.value">当用在组件上时，v-model则会这样：<custom-input :value="searchText" ...
2021-02-20 10:04:22
329
1
原创 vue 频繁操作使用 防抖和节流
防抖和节流Vue 没有内置支持防抖和节流，但可以使用Lodash等库来实现。如果某个组件仅使用一次，可以在methods中直接应用防抖：<script src="https://unpkg.com/[email protected]/lodash.min.js"></script><script> Vue.createApp({ methods: { // 用 Lodash 的防抖函数 click: _.debounc...
2021-02-19 16:02:54
786
转载 手写vue-router源码 实现属于自己的路由
前置知识前端路由的两种模式Hash模式 URL中#后面的内容作为路径地址 监听HashChange事件 根据当前路由地址找到对应的组件重新渲染 History模式 通过history.pushState()方法改变地址栏 监听popstate 事件 根据当前路由地址找到对应组件重新渲染手写路由的准备工作新建一个没有vue-router的vue项目在项目中新建router相关文件新建一个route文件夹，文件夹下新建一个index.js，用于存放路由规则import V
2021-02-19 11:52:46
224
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人