前端岚枫-CSDN博客

原创表单设计器资料收集

由于公司一些需求，收集了一些有关表单设计器，主要是一些技术特点、各自的优缺点记录，以此记录一下。

2023-06-29 17:34:42 766

大家好，我是前端岚枫，两个多月没更新博客了，这段时间在忙着找工作，入职新公司，各项都有序的进行着，过去的一年算是很特殊的一年，经历7.20暴雨，8月疫情在家办公一个月，及后面的疫情，12月开始原公司长期放假，这些种种，真是一言难尽，但是进入2022年有个好的开始，1月入职新公司，年会抽奖中奖，紧接着没有被疫情留在郑州，顺利回家过年。新的一年开始，我的技术博文更新也会持续更新。今天主要跟大家分享我整理的浏览器渲染原理及性能优化：性能优化是我们工作中常遇到一些问题，也是面试官经常提问的问题，希望下面文章对大.

2022-02-10 18:24:27 6014 2

原创 2021年年终总结：工作10年宝妈级别的前端开发工程师年终总结

大家好，我是前端岚枫，一枚二线城市的程序媛，今天也是在公司上班的最后一天（因为公司要全员放长假，啥时候能上班待定），即将为从2011毕业到现在10年工作的历程画上句号。在这里总结一下自己2021年。工作方面一年工作部门调整了三次，最后还是没熬住经济压力，公司最终还是要全体放长假，公司发通知，从明天开始放假到2022年3月31日，具体是否上班，另发通知。收到消息那一刻，说不出啥感觉，从2011年3月28日到今天，换了不少的技术的部门，经历了不少公司项目，技术从刚开始的简单的切图，js,jq，到现在的.

2021-12-08 16:45:29 3629 18

原创 javascript系统系列：浅析js中的浏览器循环事件（eventLoop）

大家好，我是前端岚枫，今天主要跟大家分享我整理的浏览器事件循环eventLoop相关：eventloop, 微任务、宏任务等，此方面内容在我们的工作中常用到，也是大厂面试经常提问的问题，希望下面文章对大家有所帮助。event loopevent loop就是异步回调的实现原理同步代码，一行一行放在Call Stack 执行遇到异步，会先“记录”下，等待时机（定时、网络请求等)时机到了，就移动到Callback Queue如Call Stack为空（即同步代码执行完)Event Loop开.

2021-11-18 08:25:01 1265

原创 2021前端面试题系列：vue相关面试题（二）

大家好，我是前端岚枫，今天主要跟大家分享我整理的笔记2021前端面试题系列：使用Proxy代理跨域、watch监听、keep-alive、vue服务器端渲染、VUEX、vue单页面和多页面的使用等等，此方面内容在我们的工作中常用到，也是面试官经常提问的问题，希望下面文章对大家有所帮助。使用Proxy代理跨域什么是跨域？域名协议 ip地址端口任何一个不一样就跨域解决跨域？1 jsonp —使用script的src发送只能get 请求2 cors 后台设置允许跨域需.

2021-11-15 17:40:58 3229

原创 2021前端面试题系列： VUE相关的基础面试题

大家好，我是前端岚枫，今天主要跟大家分享我整理的笔记2021前端面试题系列：vue传值方式、vuex、router、vue服务器端渲染、多页面、权限、开发环境跨域方案等等，此方面内容在我们的工作中常用到，也是面试官经常提问的问题，希望下面文章对大家有所帮助。vue 传值方式vue传值‘父子传值使用props接受子父传值父亲写事件函数子 $emit触发传值兄弟传值 $bus 中转站如果组件之间关系很远是很多组件都要用的值 vuexprovide, i.

2021-11-12 22:04:02 2437

原创 2021前端面试题系列：fetch与axios、浏览器内多个标签页面通信及安全问题

大家好，我是前端岚枫，今天主要跟大家分享我整理的笔记2021前端面试题系列：fetch与axios、浏览器内标签页之间的通讯方法、XSS 和CSRF以及如何防范，此方面内容在我们的工作中常用到，也是面试官经常提问的问题，希望下面文章对大家有所帮助。fetch与axios问题分析fetch与axios的定位认识。fetch是浏览器提供的api，axios是社区封装的一个组件。fetch 是一个低层次的API，你可以把它考虑成原生的XHR，所以使用起来并不是那么舒服，需要进行封装。多年来，XML.

2021-11-11 20:04:59 4560

原创 2021前端面试题系列：HTTP请求和HTTP缓存控制

大家好，我是前端岚枫，一枚二线城市的程序媛，今天主要跟大家分享我整理的笔记2021前端面试题系列：HTTP请求和HTTP缓存控制，此方面内容在我们的工作中常用到，也是面试官经常提问的问题，希望下面文章对大家有所帮助。1. 一次完整的HTTP服务过程问题分析当我们在web浏览器的地址栏中输入：www.baidu.com，具体发生了什么？对www.baidu.com这个网址进行DNS域名解析，得到对应的IP地址根据这个IP，找到对应的服务器，发起TCP的三次握手建立TCP连接后发起HTTP请.

2021-11-09 23:11:47 3603

原创前端性能优化的重要方案：图片懒加载

大家好，我是前端岚枫，一枚二线城市的程序媛，今天主要跟大家分享我整理的前端性能优化的重要方案：图片懒加载，主要包括其原理，我们常用的一些插件，及编写源码实现图片懒加载功能等，图片懒加载是项目比较常见的性能优化方案，也是面试中常遇到的问题。希望下面文章对大家有所帮助。1. 什么叫懒加载？懒加载也叫延迟加载或按需加载，比如图片延迟加载或符合某些条件时才加载某些图片。2. 使用场景：当我们进入到某个页面的时候，会加载许多图片，有些图片可能在下面，当我们点进页面但没有滚动全部展示时，其实下面的图片是没有.

2021-11-08 17:41:08 1759 2

原创前端性能优化经典：javascript防抖节流

大家好，我是前端岚枫，一枚二线城市的程序媛，今天主要跟大家分享我整理的前端的一些性能优化，js防抖节流，它是项目比较常见的性能优化方案，也是面试中常遇到的问题。希望下面文章对大家有所帮助。我们在做项目过程中会用一些方法，比如防抖、节流、去重、深拷贝浅拷贝、数组扁平化、乱序、柯里化等经典。我们平时在开发的时候，会有很多场景会频繁触发事件，比如搜索框实时发请求，onmousemove,onscroll oninput resize onkeyup keydown等等，我们需要优化这些高频率事件，降低

2021-11-03 22:30:07 1837 5

原创 Vue3核心概念、新特性及与Vue2的区别

大家好，我是前端岚枫，一枚二线城市的程序媛，上篇主要跟分享了《VUE系列-Vue中组件的应用(三)》，今天主要跟大家分享我整理的vue3的相关核心概念及其新特性，与Vue3的区别，主要包括Vue3性能提升、新的特性、生命周期、如何创建项目等等。1.Vue3简介2020年9月18日，Vue.js发布3.0版本耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者github上的tags地址：https://github.com/vuejs/vue-next/releases/.

2021-09-30 16:40:58 1385

原创 VUE系列-Vue中组件的应用(三)

大家好，我是前端岚枫，一枚二线城市的程序媛，上篇主要跟分享了《VUE系列-Vue核心应用(二)》，今天主要跟大家分享我整理的vue的组件相关的，主要包括组件声明、组件种类、组件间的几种数据通信方式及一些常用的面试题，vue面试题相关的答案我后期会专门整理分享。Vue中的组件是开发中非常重要的一部分，组件化的好处：方便维护、方便复用、减少不必要的渲染一.组件的声明1.1 全局组件<my-button></my-button> Vue.component('my-bu.

2021-09-28 20:51:34 828

原创 VUE系列-Vue核心应用(二)

大家好，我是前端岚枫，一枚二线城市的程序媛，上篇主要跟分享了《Vue核心概念及特性 (一)》，今天主要跟大家分享我整理的vue的一些常用的核心应用，主要包括一些表单组件、自定义指令、修饰符、watch、computed、动画、vue的生命周期及可能涉及到一些常用的面试题，vue面试题相关的答案我后期会专门整理分享。一.v-model的使用1.1 select<select v-model="select"> <option v-for="fruit in.

2021-09-27 18:29:08 388

原创 vue系列：Vue核心概念及特性 (一)

大家好，我是前端岚枫，一枚二线城市的程序媛，下半年对于我们来说是比较特殊的几个月，7月底，郑州出现好多年不遇的水灾，没法出行，在家休息，8月出现了疫情，在家办公一个月，9月疫情过去，终于能来公司上班了。博客也荒废了一段时间，接下来，我会陆续更新一些vue相关的文章，跟一家一起努力进步Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。特点: 易用，灵活，高效渐进式框架可以随意组合需要用到的模块 vue + components + vue-router ..

2021-09-18 17:13:54 2272 7

原创前端经常遇到的跨域问题几种解决方案

跨域（非同源策略请求）同源策略请求 ajax/fetch跨域传输部署到同一个web服务器上：同源策略xampp 修改本地的host文件127.0.0.1:1234 http://api.qq.comhttp: //127.0.0.1:1234/index.htmlhttp://api.qq/.com/getData服务器拆分web服务器：静态资源data服务器：业务逻辑和数据分析图片服务器：三者都一样就是同源，只要有一个不同就是跨域协议域名端口号web服务器地址：h

2021-07-01 07:10:47 5414 7

原创 javascript基础系列：DOM相关的技术知识点

DOM及其基础操作DOM: document object model 文档对象模型，提供一些属性和方法供我们操作页面中的元素获取DOM元素的方法document.getElementById() 指定在文档中，基于元素的ID或者这个元素对象[context].getElementsByTagName() 在指定上下文（容器）中，通过标签名获取一组元素集合[context].getElementsByClassName() 在指定上下文中，通过样式类名获取一组元素集合（不兼容ie6-8）[

2021-01-06 08:15:40 364 2

原创 javascript基础系列：字符串的常用方法

字符串的常用方法所有用的单引号、双引号、反引号包起来的都是字符串1. charAt/charCodeAtcharAt:根据索引获取指定位置的字符charCodeAt: 获取指定字符的ASCII码值（UNicode编码值）@paramsn[number] 获取字符指定的索引@return返回查找到的字符（找不到返回的是空字符串不是undefined,或者对应的编码值）let str = 'lanfengqiuqiuyangfangqihang';console.log(str.char

2020-11-17 20:23:05 559

原创前端javascript经典面试题集合（2020年最新）

1. call和apply的区别是什么，哪个性能更好一些fn.call(obj, 10, 20, 30)fn.apply(obj, [10, 20, 30])call性能要比apply性能好一点，（尤其是传递给函数的参数超过三个的时候），所以后期研发的时候，可以使用call多一点let arr = [10, 20, 30]obj = {}function fn(x, y, z) {}fn.apply(obj, arr)fn.call(obj, ...arr) // 基于ES6的展开运算符也可

2020-11-16 19:49:54 846

原创 javascript基础系列：数组常用方法解析

javascript基础系列：数组常用方法解析今天是比较特殊的日子，我们编程人员共同的节日，1024，祝每个编程人员节日快乐！数组是javascript必不可少的一项，今天让我们来总结一下数组操作的一些常用方法。数组及数组中常用方法数组是对象类型的，属于特殊的对象let ary = [12, 23, 34, 45]console.log(typeof Ary) // =>"object"console.dir(ary) // 1. 数字作为索引（key属性名） 2. leng

2020-10-24 08:36:12 744 2

原创 javascript基础系列：函数（三）

函数 function函数就是一个方法或者一个功能体，函数就是实现某个功能的代码放到一起分装，以后想要操作实现这个功能，只需要把函数执行即可，减少页面中的冗余代码，提高代码重复使用率（低耦合高内聚）创建函数形参返回值执行函数实参arguments函数底层运行机制创建函数的时候，我们设置了形参变量，但如果执行的时候并没有传递对应的实参，那么形参变量默认的值是undefinedfunction[函数名]([形参变量1],...) { // 函数体：基于js完成需要实现的功能 return [处理后.

2020-09-16 23:37:24 335

原创 javascript基础系列：堆栈内存（stack&amp；heap）(二)

忙了一段时间，很容易忘记更新博客文章，拖延症很严重，今天晚上趁着有时间，继续系统温习，希望对大家有所帮助。本文章仅代表前端岚枫的个人观点，有不正确还望指出。浏览器运行机制及基本类型与引用类型的区别/* * 1. 创建变量a,放到当前栈内存变量存储区域中 * 2. 创建一个值12，把它存储到当前栈内存值区域中（简单的基本类型值是这样存储的，复杂的引用类型值不是这样的） * 3. = 为赋值，其实赋值是让变量和值相互关联的过程*/let a = 12; //，let b = a;b = 1.

2020-09-15 22:44:56 748 1

原创 javascript基础系列：javascript中的变量和数据类型（一）

javascript基础系列：javascript中的变量和数据类型（一）今天开始去重新系统温习一遍js基础，并作下记录javascript是由三部分组成：ECMASCRIPT(ES): 描述了该语言的语法和基本对象DOM: 文档对象模型，描述处理网页内容的方法和接口BOM:浏览器对象模型，描述与浏览器进行交互的方法和接口js做客户端语言按照相关的js语法，去操作页面中的元素，有时还要操作浏览器里面的一些功能ECMAScript3/5/6,js的语法规范（变量、数据类型、操作语句

2020-08-03 08:19:30 729 2

原创夯实基础，彻底掌握js的核心技术(四)：ES5、ES6对象方法详解

ES5 Object 对象方法扩展ES5给Object扩展了一些静态方法，常用的2个Object.create(prototype,[descriptors])作用：以指定对象为原型创建新的对象为新对象指定新的属性，并对属性进行描述value: 指定值writable: 标识当前属性值是否是可修改的，默认为falseconfigurable: 标识当前属性是否可以被删除，默认为falseenumerable: 标识当前属性是否能用 for in 枚举默认为falseObject.

2020-07-24 08:13:21 566 1

原创夯实基础，彻底掌握js的核心技术(三)：堆栈内存及闭包详解

数据渲染机制及堆栈内存1. 数据值操作机制/** 1. 先声明一个变量a,没有赋值（默认值谁undefined）* 2. 在当前作用域中开辟一个位置存储12这个值* 3. 让变量a和12关联在一起（定义：赋值）*/var a = 12var b = a;b = 13;console.log(a);var ary1 = [12, 23];var ary2 = ary1;ary2.push(100);console.log(ary1)function sum() { var .

2020-07-21 20:32:56 530 1

原创夯实基础，彻底掌握js的核心技术(二)：面向对象编程（Object Oriented Programming）

单例设计模式（Singleton Pattern）1. 单例模式解决的问题：表现形式：Var obj = {xxx; xxx,…}2. 作用：把描述同一件事物的属性和特征进行“分组、分类”（存储在同一个推内存空间中），因此避免了全局变量之间的冲突和污染var pattern1 = {name: ‘xxx’}var pattern2 = { name: ‘xxx’}//name值并不是一个值，属于两个堆内存空间中在单例设计模型中，obj不仅仅是对象名，它被称为”命名空间[N.

2020-07-13 22:42:52 1043 3

原创夯实基础，彻底掌握js的核心技术(一)

由于工作项目原因，最近很少更新博客了，不过忙中抽闲，利用晚上时间，总结了一些有关JS的基础知识，并分享一些大厂面试题，根据知识点进行具体分析讲解，希望能对方便大家来学习。数据类型/堆栈内存JS中的数据类型基本数据类型number string boolean null undefined symbol bigint引用数据类型object function数据类型结构如下图数字类型中的比较奇怪的值NaN是number类型Console.log(typeof NaN)

2020-07-09 18:29:14 645

原创小程序入门到精通（三）：学小程序必备技术基础-flex布局

学小程序我们需要有点html、css、js基础，而flex布局是我们小程序常用的css布局，学习小程序之前，我们需要了解一些css方面的布局知识-Flex布局，Flex 布局将成为未来布局的首选方案1. flex 布局是什么Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。2. flex布局体验2.1 传统布局与flex布局传统布局兼容性好布局繁琐局限性，不能再移动端很好的布局flex布局操作方便，布局极为简单，移动端应用很.

2020-05-24 23:59:45 646 5

原创小程序入门到精通（二）：了解小程序开发4个重要文件

1. 小程序没有DOM对象，一切基于组件化2. 小程序的四个重要的文件*.js —> view逻辑 —> javascript*.wxml —> view结构 ----> html*.wxss —> view样式 -----> css*. json ----> view 数据 -----> json文件注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。2.1 WXMLWXML（WeiXin Markup..

2020-05-22 23:14:55 2744 8

原创 vue-codemirror基本用法：实现搜索功能、代码折叠功能、获取编辑器值及时验证

昨天实现了一些codemirror：基本的编辑代码功能、插入变量功能、codemirror语法验证功能、代码格式化（由于主要是json数据，所以暂时没引用其他组件，如果需要建议引用js-beautify，因为查资料发现codemirror在新的版本中已经去掉autoFormatRange方法），如果想了解更多，请参考《教你轻松搞懂vue-codemirror的基本用法：主要实现代码编辑、验证提示、代码格式化》，今天接着昨天的功能代码继续，主要分享vue-codemirror实现搜索功能、代码折叠功能、获取.

2020-05-15 20:29:32 11311 14

原创教你轻松搞懂vue-codemirror的基本用法：主要实现代码编辑、验证提示、代码格式化

2017年的时候用过codemirror,当时用的是jQuery库、codemirror、beautify插件。主要实现代码的编辑功能、插入一些变量功能、beautify插件主要用来格式化代码，实现代码美化效果。不过这两年做项目都是用vue了，需要用到代码编辑器，于是我又找到了代码编辑器vue-codemirror，感觉组件再变，其原理、底层还是没多大变化，用vu e-codemirror,codemirror的方法，配置参数都是通用的，今天我就来分享一下我今天研究的vue-codemirror用法及一些.

2020-05-14 18:16:29 19567 26

原创小程序入门到精通：微信小程序介绍及开发准备工作（一）

1. 什么是小程序？微信小程序（wei xin xiao cheng xu），简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是无需安装，用完即走，实际上是需要安装的，只不过小程序的体积特别小，下载速度很快，用户感觉不到下载的过程 )。小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。2. 小程序用途同App进行互补，提供同app类似的功能，比app操作更加简洁的轻应用通.

2020-05-12 08:46:19 1845 13

原创前端工程师需要懂的前端面试题（c s s方面）总结（二）

实现元素水平垂直居中的几种方法：<div id="wrap"> <div class="box"></div></div>1. 定位方法实现水平垂直居中<style>*{ margin: 0; padding: 0;}#wrap { width: 500px; height: 500px; back...

2020-04-22 08:33:29 693 9

原创每个前端工程师都应该去了解的前端面试题总结(一)

当我们需要找工作的时候，面试对于我们每个程序员来说都是非常重要的环节，掌握一些面试题技巧是非常有必要的，今天主要分享几个js有关的面试题作用域var num1 = 55var num2 = 66function f1(num, num1) {num = 100num1 = 100num2 = 100console.log(num) //100console.log(num1...

2020-04-13 11:59:43 3476 10

原创每个前端工程师都应该懂的前端性能优化总结：

文章目录采用css雪碧图（css sprite/css图片精灵）技术在项目中，我们最好把css或者js文件进行合并或者压缩，尤其是在移动端开发的时候，如果css或者j s内容不是很多，我们可以采用内嵌式，以此减少http的请求次数，加快页面加载速度采用图片懒加载技术，在页面开始加载的时候，不请求真实图片地址，而是用默认图占位，当前页面加载完成后，在根据相关的条件依次加载真实图片（减少页面首次加载h...

2020-04-02 10:57:44 18276 30

原创 axios学习笔记（二）：轻松弄懂XHR的使用及如何封装简易axios

使用 XMLHttpRequest（XHR）对象可以与服务器交互。您可以从URL获取数据，而无需让整个的页面刷新。这允许网页在不影响用户的操作的情况下更新页面的局部内容。在 AJAX 编程中，XMLHttpRequest 被大量使用。文章目录1. 理解XHR区别一般http请求与ajax请求3. API4. XHR的ajax封装，也算是简单版的axios4.1 特点4.2 简单版的axio...

2020-03-15 23:06:03 1410 12

原创 axios学习笔记（一）：学习HTTP相关的技术知识点

**HTTP是一种能够获取如 HTML 这样的网络资源的 **protocol(通讯协议)。它是在 Web 上进行数据交换的基础，是一种 client-server 协议，也就是说，请求通常是由像浏览器这样的接受方发起的。一个完整的Web文档通常是由不同的子文档拼接而成的，像是文本、布局描述、图片、视频、脚本等等。1. HTTP请求交互的基本过程前后应用从浏览器端向服务器发送HTT...

2020-03-09 20:38:46 4646 7

原创 ES6学习笔记（五）：轻松了解ES6的内置扩展对象

前面分享了四篇有关ES6相关的技术，如想了解更多，可以查看以下连接《ES6学习笔记（一）：轻松搞懂面向对象编程、类和对象》《ES6学习笔记（二）：教你玩转类的继承和类的对象》《ES6学习笔记（三）：教你用js面向对象思维来实现 tab栏增删改查功能》《ES6学习笔记（四）：教你理解ES6的新增语法》文章目录Array的扩展方法扩展运算符（展开语法）构造函数方法： Array.from...

2020-03-08 22:19:03 951 11

原创 ES6学习笔记（四）：教你轻松搞懂ES6的新增语法

letES6新增的用于声明变量的关键字let声明的变量只在所处于的块级有效不存在变量提升暂时性死区// 使用let声明的变量具有块级作用域if(true) { let a = 10 console.log(a) // 10 if(true) { let c= 30 } console.log(c) // c is not defined}console...

2020-03-07 21:58:22 951 5

原创教你轻松搞定javascript中的正则

文章目录1 正则表达式概述1.1 什么是正则表达式1.2 正则表达式特点2 正则表达式在Javascript中的使用2.1 创建正则表达式2.2 测试正则表达式 test3 正则表达式中的特殊字符3.1 正则表达式的组成3.2 边界符3.3 字符类3.4 量词符3.5 括号总结3.6 预定义类4 正则表达式中的替换4.1 replace 替换4.2 正则表达式参数总结1 正则表达式概述1....

2020-03-06 09:17:04 3510 7

原创带你学习javascript的函数进阶（二）

1 严格模式1.1 什么是严格模式JavaScript除了提供正常模式外，还提供了严格模式（strict mode）。ES5的严格模式是采用具有限制性Javascript变体的一种方式。即在严格的条件下运行js代码。严格模式在IE10以上版本的浏览器中才会被支持，旧版本浏览器会被忽略。严格模式对正常的javascript语义做了一些更改：消除了Javascrip语法的一些不合理、不严谨...

2020-03-03 08:37:36 3312 6