- 博客(86)
- 收藏
- 关注
RSS订阅原创 按“enter回车”或者“失去焦点”实现输入框内容的修改
最近做一个简单的todo应用时，有这样一个场景：某个输入框中点击回车（@keyup.enter）和失去焦点（@blue）这两个操作均可以触发修改数据的接口。然而每次按回车后又会触发@blur，接口会调用两次。但是又的确得加入这两个操作，仅适用一个操作会显得不友好。因此考虑对@keyup.enter处理，回车触发失去焦点事件即可如下： <input @keyup.enter="$event.target.blur()" @blur=" (e) => {
2022-03-22 21:14:42
1607
1
原创 为什么使用serveless
1、基于当下最流行的三大前端框架（React.js/Anguler/Vue.js），现在的渲染方式大部分都是客户端渲染。页面初始化的时候，只加载一个简单 HTML 以及对应的 JS 文件，再由 JS 来渲染出一个个页面。这种方式最主要的问题就是白屏时间和 SEO 搜索引擎优化2、为了解决这个问题，前端又开始尝试服务端渲染。本质思想其实和最早的模板渲染是一样的。都是前端发起一个请求，后端 Server 解析出一个 HTML 文档，然后再返回给浏览器。只不过以往是 JSP、PHP 等服务端语言的模板，现在是基
2021-07-19 16:04:30
411
转载 JS浏览器事件循环机制
进程、线程进程是系统分配的独立资源，是 CPU 资源分配的基本单位，进程是由一个或者多个线程组成的。线程是进程的执行流，是CPU调度和分派的基本单位，同个进程之中的多个线程之间是共享该进程的资源的。2、浏览器内核浏览器是多进程的，浏览器每一个 tab 标签都代表一个独立的进程（也不一定，因为多个空白 tab 标签会合并成一个进程），浏览器内核（浏览器渲染进程）属于浏览器多进程中的一种。2.1 GUI 渲染线程：1、负责渲染页面，解析 HTML，CSS 构成 DOM 树等，当页面重绘或者由于某
2021-07-17 20:50:48
336
原创 关于项目node server层的思考和笔记
最近单页面和多页面的都做过，可是做完后有人给我提出一个概念我感觉自己答不出来，心里有点明白，但是又不深刻，正巧读了一篇文章（关于服务端渲染）的问题，所以这里想记录下，以便日后回顾。一、 什么是服务端渲染简单理解是每次打开页面都通过服务器生成html字符串，再发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序。如何判断是服务端渲染还是前端渲染，打开一个页面 “加载源代码”，下面第一张图所示是后端传入的完整的html代码，所以是服务端渲染；再看第二张图，后端只是传来一个空的body，至于展示是
2021-07-13 19:31:55
1241
1
原创 输入框如何实现历史记录（项目实习总结）
1、出现历史记录的需求前些天，项目的啄木鸟计划中提出这样一个问题，每次用户输入什么，应该有历史记录供选择，搜索框获取焦点后会展示搜索历史，搜索历史记录可以存储在前端，由浏览器存储记录，这里就要提到我们常见的localStorage和sessionStorage了。可以先打开浏览器的检查—Application检查存储的数据（当然这是已经实现好了的存储），也就是说我每次查询时都将我的输入存到localstorage中，下次获取到改输入框的焦点时将所有数据源展示出来。当然，思想很简单，但实施起来还是出了一些
2021-07-12 21:17:59
4811
8
原创 项目遇到的难点、印象深刻点总结
一、概念serverless、为什么（前端）要推动建设 Serverless?应用的运行演变为更细粒度函数的运行，用户开发特定业务的处理函数，托管给函数平台，按需使用相关的后端服务，通过特定条件的触发完成开发者业务逻辑函数的计算。用户无需为应用持续付费，只需支付函数运行时产生的资源消耗费用，而这，就是 Serverless 服务的模型。1、更快地创建一个服务且免运维：大量的 Node.js 服务，创建服务，需要申请节点、申请机器，对接构建、部署、日志、监控，还要持续运维。我们希望能更快创建一个服务并且免
2021-07-11 22:29:53
1931
转载 vue数据双向绑定原理
vue数据绑定是通过数据劫持结合发布者-订阅模式实现的，说起数据劫持，vue是如何进行数据劫持，前面也提过get和set方法，实际上vue是通过**Object.defineProperty()**来实现数据劫持的。1、object.defineProperty它可以来控制一个对象属性的一些特有操作，比如读写权、是否可以枚举，这里我们主要先来研究下它对应的两个描述属性get和set。var Book = { name: 'vue权威指南'};console.log(Book.name); /
2021-07-11 11:59:16
113
原创 Vue要做权限管理该怎么做？控制到按钮级别的权限怎么做？
权限是对特定资源的访问许可，所谓权限控制，也就是确保用户只能访问到被分配的资源。请求触发的方式页面加载触发请求发起的方式有两种，1、页面上的按钮点击触发；2、页面加载触发总的来说，所有的请求发起都触发自前端路由或视图。路由控制的思路有两种，一种是初始化即挂载全部路由，每次路由跳转前做校验；另一种是只挂载用户拥有的路由，相当于从源头上做了控制。1、接口权限目前一般采用jwt的形式来验证，没有通过的话一般返回401，跳转到登录页面重新进行登录。登录完拿到token，将token存起来，通过axios请求
2021-07-04 15:56:11
787
1
原创 项目笔记（只涉及思想，不会贴出业务代码）
项目中碰到的问题：一、新增和修改公用一个页面，通过点击不同的按钮得到的数据来获取数据，新增时选中城市后才获取到围栏数据；而修改则是获取当前行的围栏id，mounted时得到围栏数据。新增城市下面会默认展示 “全城配置的围栏”，该行不能删除，后端不提供接口，需要自己生成。本来后端传来的围栏是数组格式，循环渲染得到几行，第一行用到的数据在data里先给个默认数据，但是select-option中数据源没有该行，数据没显示。只创建围栏的假数据展示出来就好了。<el-select
2021-07-04 15:01:07
116
原创 单页面复应用和多页面之间的区别
1、区分SPA和MPA单页应用又称 SPA（Single Page Application）指的是使用单个 HTML 完成多个页面切换和功能的应用。这些应用只有一个 html 文件作为入口，一开始只需加载一次 js,css 等相关资源。使用 js 完成页面的布局和渲染。页面展示和功能室根据路由完成的。单页应用跳转，就是切换相关组件，仅刷新局部资源。 (我们从浏览器输入url，不管你的url是匹配的哪个路由，后端统统都给你index.html，然后加载js匹配对应的路由组件，渲染对应的路由。)-----
2021-06-30 18:05:35
280
1
原创 JS实现两个大数相加
js最大安全整数为2^53-1，如果给定的两个数超过该范围，需要我们实现该方法，虾皮的笔试题，没做出来，这里想总结下。将数字分割为字符串，从后面最后一个数字（个位）开始相加，如果有进位，则下一个数字需要加1，将每个字符串push进去，最后需要reverse一下。代码出处，自己写还是写不出来，但是思想很简单~...
2021-06-29 21:37:02
476
原创 浏览器缓存策略
DNS, 全称 Domain Name System ,即域名系统。当用户输入url后，该数据库可映射出对应的IP地址，使用户更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串。www.dnscache.com (域名) - DNS解析 -> 11.222.33.444 (IP地址)浏览器缓存，可用于优化用户体验，无论在节省带宽、提高加载和渲染速度、减少网络阻塞，以及提高用户体验上，都发挥着很重要的作用。浏览器的缓存过程如下：1. 开始加载，域名解析，DNS缓存2. 本地缓存（m
2021-06-27 22:49:35
955
原创 手写new函数的思想和实现
首先看一下正常的new方法，通过new一个Person得到实例化的lj，此时lj可调用Person里的方法和属性，即 lj.sayName()被调用，打印结果。这其中涉及到new的过程。 function Person(name) { this.name = name; this.sayName = function () { console.log(this.name); //'liujie' }; }
2021-06-27 14:20:26
402
原创 项目中遇到的原型解惑
原型链这个之前面试经常问，可我只知道概念，后来在公司做了项目后感觉对这个概念又深刻了一些，以此记录一下。对于创建对象，可能比较熟悉的是构造函数，通过new实例化创建不同的对象，可它有个缺点就是每个实例上都会创建多个相同的方法，事实上，这样是很占用内存的。1、原型简要介绍如果你能考虑prototype，也就是说当我们需要通过一个函数创建大量的对象,并且这些对象还都有许多相同的方法的时候，这时我们就要考虑在函数的prototype上添加这些方法。这种情况下我们代码的内存占用就比较小。看下面这个代码：这里的
2021-06-23 20:35:59
158
原创 this指向问题详解及显式改变this指向
this在前端开发中可以说是最常见的概念了，它其实也不难，但经常有人问起我this，我却不知从何说起，直到旁边的老哥跟我手敲代码解释起来，我终于对它的理解更加深刻了，下面想总结一下。1、this的默认绑定场景1.1 一般在函数调用时，打印this,，结果是window对象，这里可将this看作是函数的一个隐藏的变量。function fn() { console.log(this); //window};fn()上面的函数其实类似于下面call（apply\bind类似）调用func
2021-06-22 22:40:06
204
原创 git将maste拉取过来合并
首先要说明一下，一般开发时都需在master上新建一个分支，在该分支上上传你的代码，这样就不会修改到master上的别人的代码，而引起不必要的麻烦。你的分支代码经过联调、测试、预发就可以与master merge，再经过预发和联调git 新建本地分支，并上传至远程分支 步骤如下：1、先切到master分支上，git checkout master2、查看一下本地分支git branch;git branch -a 查看本地和远程的所有分支3、新建一个本地的分支git branch -b
2021-06-21 18:16:53
280
原创 手写深拷贝的思想及代码
接上文，为手写深拷贝，首先需要了解一些知识，首先如何判断数据类型，我们可能知道typeof可判断数据类型，但其实它只能区分基本类型，即：number、string、undefined、boolean、object。 而对于null、array、function、object来说，使用typeof都会统一返回object字符串。要想区分对象{}、数组[]、函数function、单纯使用typeof是不行的。在JS中，可以通过Object.prototype.toString方法，判断某个对象之属于哪种内置类
2021-06-17 14:12:36
180
1
原创 深浅拷贝简介、深拷贝的方法有哪些、项目中遇到的深拷贝
也许我们都了解javascript中的基础类型有哪些：原始数据类型（Undefined、Null、Boolean、Number、String、Symbol），引用类型:Object先看下面的场景，通过=赋值只是浅拷贝，因为属性是引用类型，拷贝的是内存地址，导致 其中一个对象(oldObj)改变了这个地址，就会影响到另一个对象（newObj)。这种情况怎么解决呢，当然是深拷贝了。可以通过下面的图了解下深浅拷贝的区别。console.log(oldObj == newObj);//true，说明指向了同一个
2021-06-16 17:43:31
706
原创 js判断时间先后问题
记录一个开发中遇到的问题：在开启***开关页中，围栏是否开启根据checkbox的勾选和不勾选，生成了开启和关闭的字样，但没考虑到围栏时间的生效问题，比如，10:00开启了8:00至9:00的围栏，生成字样是关闭，因此要考虑一个结束时间endTime是否在当前时间之后，是的则认为是生效，用到下面的方法：setHours() 方法根据本地时间为一个日期对象设置小时数，返回从1970-01-01 00:00:00 UTC 到更新后的 日期 对象实例所表示时间的毫秒数。这里的思路就是将时分秒的时间转换为当前
2021-06-11 13:56:37
1344
1
原创 表单验证笔记
这几天把项目基本做完后完善页面时在验证表单时出现了问题，这里想总结一下，用到了vue和element ui组件。第一种是在表单el-form中绑定model和rules，注意是：model而不是v-model，还有这里的cityList必然是个对象类型，你需要将其在data里面定义初始值；然后需要在data()中写入rule{},对于需要校验字段prop中的如cityname写上验证规则；当你想对那一项进行验证，给个prop,在data里面给定好设置 <el-form :model="city
2021-06-03 18:25:22
127
原创 didi实习笔记1
今天在对接口时发现保存时要传给后端到的数据不完整，尤其在el-select时会默认选中围栏的列表，下拉选择时通过el-option绑定选中的id值，显示的是name,一旦el-select触发时，需要获取到name，这里对el-select绑定change事件，一旦触发，返回目前的选中值，可同时获取到index,对数据处理，一直在这里没想通。触发时应这样写:<div v-for="(item,index) in itemList"> <el-select v-model="
2021-06-01 19:36:29
99
原创 迭代：数组的map方法、forEach方法、filter方法
map和forEach都是 ES5 为处理数组而新增的迭代方法。区别在于 map 方法返回一个新数组，而 forEach 方法没有返回值,break和return 不能跳出循环。（我们了解的for循环：return可以跳出循环，continue可以跳出本次循环，break跳出循环）var arr = [1, 3, 5, 7, 9];// 目标：上述数组里的每一项奇数都+1，使整个数组里都是偶数// map 方法var result = arr.map(function(item) { .
2021-04-18 15:38:57
180
原创 v-if与v-show的区别
他们属于条件渲染这一块，v-if 指令用于条件性地渲染一块内容。比如下面的场景：<div id="app"> <h1 v-if="ok">Vue is awesome!</h1> <h1 v-else>Come on</h1> <p v-show="ok">哈哈哈哈</p> <p v-show="!ok">拉看看俺</p> <button @click
2021-04-17 22:02:14
48
原创 new操作符构建实例对象
ECMAScript中的构造函数是用来创建特定类型对象，像Object和Array这类原生构造函数，运行时直接在执行环境下使用。也可自定义构造函数，以函数形式为自己的对象定义属性和方法。new操作符构建实例对象function Person(name,age){//let this = {};1.将一个空对象的引用赋值给this,这是隐式的//2.给this对象赋值this.name = name;this.age = age;//return this 3.隐式的返回this对象}let
2021-04-15 21:49:50
504
原创 对象的解构赋值
ES6新增了对象解构的语法，可在一条语句里面实现一个或多个赋值操作，简单来说，就是使用与对象匹配的结构实现对象属性的赋值。不使用解构赋值： let person = { name: "Matt", age: 12 } let personName = person.name; perAge = person.age;使用解构赋值 let { name:
2021-04-15 21:05:05
194
原创 理解对象的数据属性和访问器属性、实现简单的双向绑定
面试官或许也会要求你用某函数实现js下的数据双向绑定，可是这个函数的用法你了解吗，对象的某些内部属性不能直接访问时，你需要使用哪个函数呢，内部属性又包括哪些呢？带着这些疑问，继续往下读吧~js中通常使用一些内部特性来描述属性的特征，这些特性是由为JS实现引擎的规范定义的，开发者不能在javascript中直接访问这些内部特性，比如：[[Enumerable]]。属性有两种，数据属性和访问器属性。首先，数据属性包含一个保存数据值的位置，4个特性来描述数据值的行为。[[configure]]: 表示属性
2021-04-15 20:33:04
161
原创 进制转换
1. 十进制转其他进制Number.toString(radix)：返回表示该数字的指定进制形式的字符串。（把10进制的数据转为指定进制，并以字符串形式输出） var num = 10; a = num.toString(2); console.log(a); //10转为2 进制10102. 其他进制转十进制2.1 字符串转换为字符: a = parseInt("11"); console.log(a);//字符串转换为字符2.2 parseInt(str,r
2021-04-07 22:23:50
58
原创 手写promise.all方法
promise.all接收一个promise对象的数组作为参数，只有数组里的所有promise状态为rosolve时，才会去调用 .then 方法,它们是并发执行的。 var p1 = Promise.resolve(1), p2 = Promise.resolve(2), p3 = Promise.resolve(3); Promise.all([p1, p2, p3]).then((e) => { console.log(e)
2021-04-07 22:10:18
315
原创 电商后台管理5-数据统计页面，利用Echarts渲染
页面布局如图:主要是一个面包屑导航+一个卡片视图，配置router.js1、获取 ECharts ，通过 npm 获取 echarts，npm install echarts --save2、通过标签方式直接引入构建好的 echarts 文件import * as echarts from 'echarts'3、准备一个呈现图表的盒子 <el-card> <div id="main" style="width:750px;height:400px;">&l
2021-04-06 22:16:03
964
原创 简要讲下ECharts
ECharts是一个使用Javascript实现的开源可视化库，兼容性强，底层依赖于矢量图ZRender，提供直观，交互性强的图标类型。包括：折线图、柱状图、饼状图、k线图等对数据的支持：key-value、二维表对流数据的支持：增量的渲染技术，三维可视化...
2021-04-06 21:46:50
51
原创 总结watch\computed\methods不同点
computed中可以定义一些属性，称之为计算属性，其本质是一个方法，只不过我们在使用这些计算属性时，是将他们的名称直接当作属性使用，并不作为方法调用，值得注意的是：1、这个function内部，所用到的数据一旦发生变化，就会重新进行计算；2、计算属性的求值结果会被缓存起来，方便下次使用，如果计算属性的方法中，所有数据都不变化则不会重新求值；3、函数内部一定要return。methods 其不同点在于：1、内部主要书写大量的业务逻辑，需要手动调用，不能主动监听;2、相对于computed没有缓存..
2021-04-06 20:41:49
68
原创 diff算法笔记
搭建测试环境snabbdom:snabbdom 是著名的虚拟 DOM 库，是 diff 算法的鼻祖，Vue 源码就是借鉴了 snabbdom创建一个全英文路径下的空文档，在vscode的命令行先初始化文档:npm init搭建webpack 和 webpack-dev-server 开发环境，必须安装最新版 webpack@5，不能安装 webpack@4，这是因为 webpack@4 没有读取身份证(package.json)中 exports 的能力，建议大家使用这样的版本： npm i -D
2021-04-04 15:38:08
235
原创 静态资源有关问题
网站中会引入哪些常见的静态资源？JS.js .jsx .coffee .tsCSS.css .less .sass .scssImages.jpg .png .gif .bmp .svg字体文件.svg .ttf模板文件.vue .jade网页中引入的静态资源多了会引起什么问题网页加载速度慢，因为我们会发起很多二次请求要处理错综复杂的依赖关系如何解决上述问题（1）可合并、压缩、精灵图、图片的Base64编码;（2）使用之前学过的requireJS、使用webpack.
2021-04-03 17:27:27
213
原创 创建对象的方法，理解各个方法的好处和缺点，为什么要改进
1. new Object或字面量虽然Object构造函数或字面量都可以创建单个对象，可是其明显的缺点在于，使用同一个接口创建很多个对象，会产生很多重复性代码。 obj = { name: 'liujie', age: 12 }2. 工厂模式为解决上面问题，考虑采取工厂模式，考虑到ECMAacript中无法创建类，开发人员发明了一种函数，用函数来封装特定接口创建对象的细节。函数Person根据接受的参数来构建所有必要信息的Pers
2021-04-03 16:00:24
144
原创 es6的const和let
其实也是由于面试官喜欢提到这两者的区别，了解基本的比如：let和const不存在变量提升，存在暂时性死区(TDZ)，不允许重复声明，但面试官可能更想听到，你深入说下怎么变量提升，为什么变量提升就不好了，以并能提及对应的应用场景就更好了。为此，下面主要内容会讲到块级作用域绑定，let和const与var的联系和区别。过去，javascript 的变量声明机制一直让人感到困惑，因为大多数c语言在声明变量时也会创建变量绑定，但js中，可能使用变量之后你再声明变量也能打印value。var声明及变量提升机制
2021-04-03 12:09:41
76
原创 电商后台管理4-商品列表及添加商品(list.vue和add.vue)
1、商品列表页面商品列表的页面如图：这个页面其实比较简单，面包屑导航、搜索框、添加商品按钮，以及下面的表格，代码如图：基本比较容易，就一个过滤器需要实现，本身的创建时间是以毫秒显示出来，这里需要格式化为年月日时分秒的格式。首先在main.js中注册了全局过滤器（以下出自vue.js官网）Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达
2021-04-01 15:19:48
3277
1
原创 混杂记忆的面试题目
1、跨域和解决2、了解XSS(Cross Site Scripting)跨站脚本攻击和CSRF(Cross-site request forgery)跨站请求伪造3、常见状态码4、盒模型5、new一个构造函数的实现步骤6、原型和原型链7、vue-router怎么实现局部刷新8、双向绑定原理9、v-if和v-text区别10、从输入 url 到展示的过程11、了解的es6语法...
2021-03-31 22:13:04
72
原创 熟悉w3c规范
面试上写了个熟悉W3C新标准，真是坑惨了，因为记得不太熟，所以可能给面试官留下了不好的印象，真的不能给自己留坑啊啊啊！！现在总结一个以后有准备。1、DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。其中的DTD(例如xhtml1-transitional.dtd)叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定
2021-03-31 17:22:39
255
原创 xiaomi
1、怎么用css动画实现时钟效果2、es6的常见新特性，let\var\const，iteration、promise.all怎么实现3、vue的v-model原理4、vue-router怎么实现跳转5、v-show、v-if的区别6、w3c新标准有哪些
2021-03-31 16:51:49
124
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人