前端
文章平均质量分 52
前端开发
tfjy1997
这个作者很懒,什么都没留下…
展开
-
Echarts 的 dispatchAction
echart 的 dispatchAction 应用场景转载 2022-05-17 10:22:32 · 27699 阅读 · 2 评论 -
【深入理解ES6】Symbol
创建Symbol新增基础类型 Symbol,用于解决 私有属性 问题let firstName = Symbol()let person = {}person[firstName] = 'Nicholas'console.log(person["firstName"])注意, Symbol是原始值,不能 new Symbol()构建实例,只能是new Object(【Symbol 值】)Symbol 接受可选参数,用于描述该 Symbol 值内部存储在 [[Descr...原创 2022-05-04 19:49:46 · 449 阅读 · 0 评论 -
【深入理解ES6】解构
为何使用解构功能是数据访问更便捷// ES5 及以前let options = { repeat: true, save: false}let repeat = options.repeat, save = options.save;// -------------------------------------// ES6 解构let { repeat, save } = options对象解构let node = { type: 'Identifier原创 2022-04-16 09:28:04 · 458 阅读 · 0 评论 -
【深入理解ES6】对象
对象的分类普通对象(Ordinary Object):具备Javascript 对象所有的默认内部行为。 特异对象(Exotic Object):具备某些与默认行为不符的内部行为。 标准对象(Standard Object):ES6中定义的对象,例如 Array、Date 等。既可以是普通对象,又可以是特异对象 内置对象(Build-in Object):JS脚本中的环境对象(window、document等)对象字面量的扩充属性初始值简写// ES5function create.原创 2022-03-27 21:43:06 · 1407 阅读 · 0 评论 -
【深入理解ES6】函数(3)
元属性new.taget、块级函数、箭头函数、尾调用优化原创 2022-03-24 11:48:11 · 639 阅读 · 0 评论 -
【深入理解ES6】函数(2)
Function 构造函数、展开运算符、name属性原创 2022-03-16 21:10:20 · 272 阅读 · 0 评论 -
【深入理解ES6】函数(1)
对于《深入理解ES6》的学习记录,本篇为【默认参数】的学习原创 2022-03-15 21:32:20 · 237 阅读 · 0 评论 -
Vue 无法访问.env.development中自定义的 变量
process.env undefined Vue问题:自己定义的env变量命名有问题。官方文档是这么说的:Note that only variables that start with VUE_APP_ will be statically embedded into the client bundle with webpack.DefinePlugin.所以,定义变量的时候,需要以***VUE_APP_***开头。如:VUE_APP_SECRET=secret...转载 2021-03-05 10:16:32 · 1468 阅读 · 2 评论 -
9、vue中计算属性computer和普通属性method的区别是什么?(前端)
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。这就意味着只要message还没有发生改变,多次访问reversedMessage计算属性会立即返回之前的计算结果,而不必再次执行函数。计算属性computer初次执行函数后,值会存储缓存中,依赖项未改变,不会再执行函数而是从缓存中立即取出 method中的函数每次调用都会执行一次...原创 2021-02-07 09:07:18 · 1010 阅读 · 0 评论 -
8、webpack中的常见的loader以及作用的总结(前端)
用法module.exports = { module: { rules:[ { test: /\.ts$/, use: 'ts-loader'} ] }}常用的loader style-loader 将css添加到DOM的内联样式标签style里 css-loader 允许将css文件通过require的方式引入,并返回css代码 less-loader 处理less sass-load原创 2021-01-20 09:25:18 · 751 阅读 · 0 评论 -
node.js依赖express解析post请求四种数据格式
分别是这四种:www-form-urlencoded,form-data,application/json,text/xmlwww-form-urlencoded 这是http的post请求默认的数据格式,需要body-parser中间件的支持 服务器端的demo:var express = require('express');var app = express();var bodyParser = require('body-parser');app.use(bodyP转载 2021-01-19 11:27:06 · 366 阅读 · 1 评论 -
(前端)7、在css中link和@import的区别是什么?
<!-- link方式 --><link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" /><!-- @import方式 --><style type="text/css" media="screen"> @import url("CSS文件");</style>两者区别:(祖宗级)link是XHTML标签,除了加载C.原创 2021-01-18 09:22:06 · 156 阅读 · 0 评论 -
(前端)6、防抖节流原理、区别以及应用
防抖 - debounce原理:将多个函数调用合成为一个函数,并在设置一定的时间后仅被调用一次。应用:搜索框等待用户输入完成后,延迟一定时间在进行搜索功能。代码实现function debounce(fn, delay) { // 维护一个 timer,用来记录当前执行函数状态 let timer = null; return function() { // 通过 ‘this’ 和 ‘arguments’ 获取函数的作用域和变量 let contex...原创 2021-01-18 09:09:55 · 406 阅读 · 0 评论 -
(前端)5、vue-router的原理
vue-router核心实现原理1.实现一个静态install方法,因为作为插件都必须有这个方法,给Vue.use()去调用;2.可以监听路由变化;3.解析配置的路由,即解析router的配置项routes,能根据路由匹配到对应组件;4.实现两个全局组件router-link和router-view;(最终落地点)核心代码实现简版:let Vue;class KVueRouter { constructor(options){ this.$option..转载 2021-01-16 09:44:40 · 139 阅读 · 0 评论 -
实用javascript富文本编辑器
百度UEditor 官方网址:http://ueditor.baidu.com/website/ UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码... 2bootstrap-wysiwyg 官方网址:http://www.bootcss.com/p/bootstrap-wysiwyg/ bootstrap-wysiwyg 为Bootstrap定制的微型所见即所得(What转载 2021-01-15 12:38:11 · 387 阅读 · 0 评论 -
cookie 、localStorage 、sessionStorage 、vuex 比较
一、简介cookie 4K 有时效性 可服务器传递HTML5 Web Storage 5M 仅本地保存,不会自动发送服务器 隐私模式不可读取、不可被爬虫抓取localStorage 永久存储(除手动删除) 保存在硬盘 兼容IE8+ sessionStorage 临时存储 关闭页面即清空(刷新不清除)VUEX 保存在内存 刷新页面清除二、对于不同窗口,不同标签页,不同浏览器下的sessionStorage、localStorag、cookie的状...原创 2021-01-15 09:12:10 · 265 阅读 · 0 评论 -
(前端)4.浏览器的本地存储的cookie的了解
cookie是一种最原始也最简单的客户端存储方式,几乎所有的网站的都有使用cookie,各有各的用途,看到这篇文章的不少人也是都是使用过cookie的人同学吧,但是我们反问下自己,我们真的懂cookie了吗?我自己创建了一个网站,网址为http://ppsc.sankuai.com。在这个网页中我设置了几个cookie:JSSESSIONID,PA_VTIME,skmtutc,test。在 chrome 浏览器中打开这个网站,进入开发者模式,点击Resources栏 -> 选择cookies,转载 2021-01-14 09:21:04 · 1791 阅读 · 1 评论 -
(前端)2.在Webpack中,Loader和Plugin的区别是什么?
loader用于转换、将A文件进行编译形成B文件plugin用于处理打包过程中的自定义操作的扩展器,不直接操作文件Loaderwebpack自身只支持对于js和json类型文件的处理,而其他非js文件则需要通过loader转换成commonJS规范的文件后,才能被webpack进行解析例如: css-loader、sass-loader、style-loaderPluginwebpack打包编译过程中,对某些事件进行自定义操作,比如资源管理、bundle文件优化等例如: ug..原创 2021-01-14 09:14:06 · 298 阅读 · 0 评论 -
(前端)3.请解释React中props和state的区别?
props和state都是用于描述component状态的,并且这个状态应该是与显示相关的。1.State(由内部改变的)如果component的某些状态需要被改变,并且会影响到component的render,那么这些状态就应该用state表示。例如:一个购物车的component,会根据用户在购物车中添加的产品和产品数量,显示不同的价格,那么“总价”这个状态,就应该用state表示。2.Props(由外部传送的)如果component的某些状态由外部所决定,并且会影响到compon.原创 2021-01-14 09:11:55 · 186 阅读 · 0 评论 -
(前端)1.vue的双向绑定的原理是什么?
vue的双向绑定的原理是什么?(2020/01/12)前台UI数据改变实时反应在ViewModel上,后会通过ajax传到后台model上后台改变的也会通过ViewModel响应到前台UI上当data 有变化的时候它通过Object.defineProperty()方法中的set方法进行监控,并调用在此之前已经定义好data 和view的关系了的回调函数,来通知view进行数据的改变 而view 发生改变则是通过底层的input 事件来进行data的响应更改...原创 2021-01-12 11:49:56 · 213 阅读 · 0 评论 -
axios中的POST请求,前端数据正常,但后端无法接受问题
在最近的项目开发中,突然发现 POST 请求异常,虽然一眼看见是id没传递导致的,明明前端传递了,可是后端怎么也接收不到。最终花费1天时间才找到问题的根源。通常我们会把 HTTP 请求分为三个部分:状态行、请求头、消息主体。协议规定 POST 提交的数据必须放在消息主体(entity-body)中,但协议并没有规定数据必须使用什么编码方式。所以数据的编码类型是存在分类 的 ,即请求头Content-Type 属性。常见的POST请求分类(https://blog.csdn.net/wgf19原创 2021-01-05 15:07:38 · 721 阅读 · 0 评论 -
POST 常见的数据提交方式
定义和用法enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。默认地,表单数据会编码为 "application/x-www-form-urlencoded"。就是说,在发送到服务器之前,所有字符都会进行编码(空格转换为 "+" 加号,特殊符号转换为 ASCII HEX 值)。enctype属性值值 描述 application/x-www-form-urlencoded 在发送前编码所有字符(默认) multipart/form-data转载 2021-01-05 14:51:36 · 1647 阅读 · 0 评论 -
用 Css3动画 绘制 水波纹DIV
效果图<!DOCTYPE html><html><head><style>@keyframes roll { form { transform: rotate(0deg); } to { transform: rotate(360deg); }}.shuiqiu { width: 200px; height: 200px; border-radius:原创 2020-12-08 09:32:04 · 527 阅读 · 0 评论 -
webpack打包报错:ERROR in multi ./src/main.js ./dist/bundle.js Module not found: Error: Can‘t resolve ‘.\
刚刚接触webpack就遇到好几个问题,成功安装最新版webpack和cli后,第一个打包就出现了问题,其实也算是语法错误当运行webpack .\src\main.js .\dist\bundle.js打包时,出现如下错误:产生错误原因:最新版本的webpack命令有所改变解决方法:在以前的命令里加个-o就可以啦运行webpack .\src\main.js -o .\dist\bundle.js...转载 2020-09-12 15:25:24 · 890 阅读 · 2 评论 -
滚动条滑动距离
let element = document.getElementById("Id")console.log("纵向" + element.scrollTop + "px")console.log("横向" + element.scrollLeft + "px")原创 2020-09-10 17:02:13 · 783 阅读 · 0 评论 -
登录页面报警告: This page includes a password or credit card input in a non-secure context.
This page includes a password or credit card input in a non-secure context. A warning has been added to the URL bar. For more information, see https://goo.gl/zmWq3m.从网上找到的解决方案:1. 有http该为https,因为页面里面有input type是password,谷歌浏览器建议升级https传输密码2.将passwrod一栏转载 2020-08-06 09:02:59 · 1346 阅读 · 0 评论 -
ES2020 系列:可选链 “?.“
可选链 "?."可选链?.是一种访问嵌套对象属性的防错误方法。即使中间的属性不存在,也不会出现错误。问题如果你才刚开始读此教程并学习 JavaScript,那可能还没接触到这个问题,但它却相当常见。例如,我们有些用户会有地址信息,但有一少部分用户并没有提供相关信息。那么我们就不能安全地读取到user.address.street:letuser={};//这个user恰巧没有addressalert(user.address.street);//Error...转载 2020-07-23 13:07:07 · 612 阅读 · 0 评论 -
ES2020 系列:空值合并运算符 ‘??‘
空值合并运算符 '??'空值合并运算符??提供了一种简短的语法,用来获取列表中第一个“已定义”的变量(译注:即值不是null或undefined的变量)。a ?? b的结果是: a,如果a不是null或undefined, b,其他情况。 所以,x = a ?? b是下面这个表达式的简写:x=(a!==null&&a!==undefined)?a:b;下面是一个更长一点的例子。假设,我们有一个用户,...转载 2020-07-21 08:51:32 · 359 阅读 · 0 评论 -
js用对象模拟switch
以前写switch:switch(foo){case"bar":alert("thevaluewasbar--yay!");break;case"baz":alert("boobaz:(");break;default:alert("everythingelseisjustok");}现在可以用对象进行模拟:varstuffToDo={"b...转载 2020-06-15 14:17:13 · 305 阅读 · 0 评论 -
vue核心之虚拟DOM(vdom)
一、真实DOM和其解析流程? 浏览器渲染引擎工作流程都差不多,大致分为5步,创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting第一步,用HTML分析器,分析HTML元素,构建一颗DOM树(标记化和树构建)。 第二步,用CSS分析器,分析CSS文件和元素上的inline样式,生成页面的样式表。 第三步,将DOM树和样式表,关联起来,构建一颗Render树(这一过程又称为Attachment)。每个DOM节点都有a...转载 2020-06-11 10:17:15 · 580 阅读 · 0 评论 -
Js读取Excal数据
借助js-xlsx 进行辅助官方github:https://github.com/SheetJS/js-xlsx$("#btnUpLoad").click(function () { var files = $("#inputUpload").prop("files"); // 获取文件列表 if (files.length == 0) { ...原创 2020-04-07 15:37:05 · 233 阅读 · 0 评论 -
常用的正则表达式——身份证
身份证// 18位身份证var res = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/// 15位身份证var res2 = /^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20...原创 2020-04-01 15:47:36 · 480 阅读 · 0 评论 -
echart效果图配置1
option = { xAxis: { type: 'category', boundaryGap: false, data: [0,1,2,3,4,5,6,7,8,9,10,11,12], axisLine:{ show: true, lineStyle:{ ...原创 2020-03-30 16:08:09 · 150 阅读 · 0 评论 -
Js实现Html转义和反转义方法
<script> var HtmlUtil = { /*1.用浏览器内部转换器实现html编码(转义)*/ htmlEncode: function (html) { //1.首先动态创建一个容器标签元素,如DIV var temp = document.createElement("div");...转载 2020-03-25 10:44:53 · 512 阅读 · 0 评论 -
JavaScript的RegExp中的$1含义
RegExp 是javascript中的一个内置对象。为正则表达式。RegExp.$1是RegExp的一个属性,指的是与正则表达式匹配的第一个 子匹配(以括号为标志)字符串,以此类推,RegExp.$2,RegExp.$3,..RegExp.$99总共可以有99个匹配var r= /^(\d{4})-(\d{1,2})-(\d{1,2})$/; //正则表达式 匹配出生日期(简单匹配)...原创 2020-03-13 15:23:07 · 1247 阅读 · 0 评论 -
Vue项目中使用element-ui,表格动态样式
<el-table :row-style="tableRowClass"> // 。。。</el-table>methods: { tableRowClass({row, rowIndex}) { // row 该行数据, rowIndex 该行索引 if(rowIndex%2 == 0) { return ...原创 2020-02-10 09:21:57 · 1015 阅读 · 0 评论 -
Js的debounce 方法使用
应用场景由于事件频繁被触发,因而频繁执行DOM操作、资源加载等重行为,导致UI停顿甚至浏览器崩溃。简单用法/**2 * 空闲控制 返回函数连续调用时,空闲时间必须大于或等于 idle,action 才会执行3 * @param fn {Function} 相关执行函数4 * @param delay {Number} 延迟时间,也就是阈值,单位是毫秒5 * @re...原创 2019-12-26 15:25:59 · 1912 阅读 · 0 评论 -
elementUI form表单验证不通过的三个原因
<el-form :model="form" :rules="rules"> <el-form-item prop="input"> <el-input v-model="form.input"></el-input> </el-form-item></el-form>如上面的代码1、<...转载 2019-12-23 11:43:51 · 1854 阅读 · 0 评论 -
element-ui 表单自定义日期输入验证
methods: { validateDate(rule, value, callback){ if (value) { let timestamp = new Date(value).getTime() let start = new Date(this.shiftStartTime).getTime() let end ...转载 2019-12-03 09:14:07 · 952 阅读 · 0 评论 -
vue-cli全集 学习笔记
什么是前台、后台前台:是指以Html5、CSS为基础的页面的开发,重在页面的布局美化后台:是指包括但不限于以JAVA这样的开发工具来进行的开发,也称为服务器的开发什么是前端、后端”前端就是前台,后端就是后台“这句话不严谨!前端和后端属于前台的分支前端:特指页面的开发,修饰,美化等,页面的基本元素。后端:指后端的服务,为了使页面能正常的跳转、页面之间可以变量进行共享,为页...原创 2019-12-12 10:18:22 · 304 阅读 · 0 评论