js学习笔记之class类、super和extends关键词
目录前言1.es6之前创建对象2.es6之后cla 的声明3.类的继承4.继承类的静态成员写在最后 前言
JavaScript 语言在ES6中引入了 cla 这一个关键字,在学习面试的中,经常会遇到面试官问到谈一下你对 ES6 中cla 的认识,同时我们的代码中如何去使用这个关键字,使用这个关...[2021/8/9]
关于ECMAScript中的原始值和引用值详解关于ECMAScript中的原始值和引用值详解
目录前言什么是动态属性
值的复制
判断值类型
总结 前言
这应该是很基础的 JavaScript 的知识点,但估计很多小伙伴都只是简单带过,到面试时一问三不知。这里结合我之前的笔记,再简单的介绍下原始值和引用值的相关知识,来,开始。
ECMAScript 规定变量可以包含两种数据类型,要...[2021/8/4]
捣鼓系列:前端大文件上传
某一天,在逛某金的时候突然看到这篇文章,前端大文件上传,之前也研究过类似的原理,但是一直没能亲手做一次,始终感觉有点虚,最近花了点时间,精(熬)心(夜)准(肝)备(爆)了个例子,来和大家分享。
本文代码:github
问题
Knowing the time available to p...[2021/6/28]
[测试]Sprint Boot
昨天,我们介绍了如何在Spring Boot中实现文件的上传。有读者问:那么如果有多个文件要同时上传呢?这就马上奉上,当碰到多个文件要同时上传的处理方法。
动手试试
本文的动手环节将基于Spring Boot中实现文件的上传一文的例子之上,所以读者可以拿上一篇的例子作为基础来进行改造,以体会这...[2021/6/28]
循序渐进BootstrapVue,开发公司门户网站(2)--- 使用wow.js动画组件以及自定义的CSS样式处理动态效果
在我们开发的页面中,让页面有一些动画效果,可以让页面更加有吸引力,只要不是处理太过,一般人还是希望有一些动态效果,如滚动动画加载,悬停处理变化等效果,本篇随笔介绍使用wow.js动画组件以及自定义的CSS样式处理动态效果,增加公司门户网站页面的动画效果。
1、使用wow.js动画组件
WOW....[2021/6/28]
「免费开源」基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之文件上传(十)
基于Vue和Quasar的前端SPA项目实战之文件上传(十)
回顾
通过之前一篇文章 基于Vue和Quasar的前端SPA项目实战之数据导入(九)的介绍,实现了业务数据批量导入功能,本文主要介绍文件上传相关内容。
简介
crudapi支持附件字段,表字段里面保存的是文件url字符串。附件可以通...[2021/6/28]
循序渐进BootstrapVue,开发公司门户网站(3)--- 结合邮件发送,收集用户反馈信息
在我们公司门户网站里面,如果有需要,我们可以提供一个页面给用户反馈信息,以便获得宝贵的用户信息反馈或者一些产品咨询的记录,一般这个结合邮件发送到负责人的邮箱即可。本篇随笔结合后端发送邮件的操作,把相关信息发送到门户网站的负责人邮箱里面。
1、客户反馈界面
我们这个主题主要介绍Bootstrap...[2021/6/28]
ES2015+ 常用新特性一口气看个够
ES2015 也叫 ES6,区别只是一个是以发布的年份来命名,一个是以版本号来命名
从那以后组织每年都会发布一个新版本,根据这个规则,ES2016 === ES7... ES2020 === ES11
但通常我习惯将 ES2015 及其后续版本统称为 ES2015+
变量声明
ES2015...[2021/6/28]
JavaScript 沙盒模式
微前端已经成为前端领域比较火爆的话题,在技术方面,微前端有一个始终绕不过去的话题就是前端沙箱
什么是沙箱
Sandboxie(又叫沙箱、沙盘)即是一个虚拟系统程序,允许你在沙盘环境中运行浏览器或其他程序,因此运行所产生的变化可以随后删除。它创造了一个类似沙盒的独立作业环境,在其内部运行的程序...[2021/6/28]
DOM 获取元素节点 的 n多方法
DOM
获取元素节点 的 n多方法
/**
根据''标签名''进行元素的获取
由于HTML中可以存在多个相同的标签名的元素
因此接受的变量是可以存储多个数据的类数组
通过下标获取具体的内容。
*/
let ulEle = document.getElementsByTagName...[2021/6/28]
实现SLIC算法生成像素画
前言
像素风最早出现在8bit的电子游戏中,受制于电脑内存大小以及显示色彩单一, 只能使用少量像素来呈现内容,却成就了不少经典的像素游戏。随着内存容量与屏幕分辨率的提升,内存与显示媒介的限制不再是问题,而像素风也慢慢演变成一种独特的创作风格。
像素画的一般的绘制流程包括了勾线、填色等,而逐个像...[2021/6/28]
前端开发中常用的数组方法(一)
前端开发中常用的数组方法(一)
JavaScript提供了大量不同处理数组的方法,这里花几分钟介绍常用的几个数组方法。
1、Array.map()
map()方法返回一个新数组,数组中的元素未原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素的顺序依次处理元素。
示例一:
...[2021/6/28]
Typescript学习总结
typescript(以下简称TS)出来也有好长时间了,下面记录一下学习心得。
首先学这门语言前,请确保有以下基础知识:
扎实的javascript基础知识
es6的基础知识
面向对象编程的概念(没有也可以,就当是重新学一遍了)
接下来看一下TS的一些概念:
一、基本类型
TS的基础类...[2021/6/28]
分享Sql性能优化的一些建议
随着业务体量和逻辑复杂度的增加,workcenter 对接口的性能耗时有了新的要求,而提升接口性能最有效的方法当然 对数据库操作逻辑和SQL语句进行优化了。本篇分享一些数据库性能优化的经验和建议
数据库结构优化
mysql 逻辑架构图:
第一层:客户端通过连接服务,将要执行的 sql...[2021/6/28]
Cookie的工作原理和应用详解
目录1. Cookie 原理1.1 Cookie 背景信息1.2 Cookie 工作原理1.3 Cookie 创建、获取、修改1.4 Cookie 共享范围1.5 Cookie 生命周期1.6 Cookie 中文乱码 - 解决方案1.7 Cookie 优缺特点分析2. Cookie 应用2.0 工具...[2021/6/21]
WebStorm 设置换行符
不同操作系统使用的换行符是不一样的。
Dos 和 windows 采用回车+换行 CR/LF 表示下一行
UNIX/Linux 采用换行符 LF 表示下一行
MAC OS 则采用回车符 CR 表示下一行
git 文件回退,拉取代码都会修改这些换行符。结合 eslint 就会出现满屏报错,就需...[2021/6/21]
循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面
在前面随笔《使用BootstrapVue相关组件,构建Vue项目界面》概括性的介绍了BootstrapVue的使用过程,其实选用这个主要就是希望能够用来构建一些公司门户网站的内容,毕竟基于Bootstrap的样式界面很多,而且可以在很多模板网站上找到相关的Bootstrap页面模板,由于Vue开...[2021/6/21]
前端安全 — 浅谈JavaScript拦截XSS攻击
XSS/跨站脚本攻击,是一种代码注入网页攻击,攻击者可以将代码植入到其他用户都能访问到的页面(如论坛、留言板、贴吧等)中。
如今,XSS 攻击所涉及的场景愈发广泛。越来越多的客户端软件支持 html 解析和 JavaScript 解析,比如:HTML 文档、XML 文档、Flash、PDF、Q...[2021/6/21]
简单易懂的设计模式(上)
一、单例模式
1. 什么是单例模式
单例模式的定义是,保证一个类仅有一个实例,并提供一个访问它的全局访问点。
有一些对象,比如线程池/全局缓存/浏览器中的 window 对象等等,我们就只需要一个实例。
下面将根据实际场景进行介绍。
2. 实际场景
1. 登录浮窗
当我们单击登录按钮时,页...[2021/6/21]
按需引入element-ui报错按需引入element-ui报错
按需引入element-ui报错
项目用的脚手架是 vue-cli 3
按照官方文档按需引入组件: https: element.eleme.cn/#/zh-CN/component/quickstart
安装 babel-plugin-component
npm install bab...[2021/6/21]
基于webpack5封装的cli工具packx
安装
用 npm / yarn 安装:
$ npm install -D packx
$ yarn add -D packx
特性
基于 webpack5
支持 le ,sa
支持 spa/mpa
支持 typescript
支持自定义html模板和自动生成 html入口
支持 reac...[2021/6/21]
Dreamweaver基础教程:学习JavaScript - time-flies
目录简介用法输出语法字面量变量操作符语句关键字注释数据类型函数函数表达式Function() 构造函数自调用函数箭头函数arguments 对象使用构造函数调用函数作为函数方法调用函数闭包对象对象定义对象属性对象方法作用域局部作用域全局变量变量生命周期HTML 中的全局变量事件HTML 事件常见...[2021/6/21]
[测试]Sprint Boot
昨天,我们介绍了如何在Spring Boot中实现文件的上传。有读者问:那么如果有多个文件要同时上传呢?这就马上奉上,当碰到多个文件要同时上传的处理方法。
动手试试
本文的动手环节将基于Spring Boot中实现文件的上传一文的例子之上,所以读者可以拿上一篇的例子作为基础来进行改造,以体会这...[2021/6/21]
js 数组 find,some,filter,reduce区别详解
区分清楚Array中filter、find、some、reduce这几个方法的区别,根据它们的使用场景更好的应用在日常编码中。
Array.find
Array.find 返回一个对象(第一个满足条件的对象)后停止遍历
const arrTest = [
{...[2021/6/15]
如何使用ES6的class类继承来实现绚丽小球效果
介绍
本效果采用Canvas画布绘制,再利用cla 类继承实现,实现的效果鼠标在指定Canvas位置移动,会在当前鼠标的位置产生随机颜色的小球,之后小球会慢慢消失。
效果图示
实现步骤
书写HTML
创建canvas画布环境
书写小球类Ball
...[2021/6/15]
JS如何实现页面截屏功能实例代码
"页面截屏"是前端经常遇到的需求,比如页面生成海报,弹窗图片分享等,因为浏览器没有原生的截图API,所以需要借助canvas来实现导出图片实现需求。
可行性方案
方案1: 将 DOM 改写成 canvas ,调用canvas的toBlob或者toDataURL方法即刻上传到七牛云或...[2021/6/15]
使用JS实现简易计算器
使用JS完成简易计算器,供大家参考,具体内容如下
要求:输入的值只能是数字,使用正则表达式
onchange():值改变时执行事件
onblur():鼠标移出时执行事件
<!DOCTYPE html>
<html lang="en">
<hea...[2021/6/15]
07.ElementUI 2.X 源码学习:源码剖析之工程化(二)
0x.00 ?? 前言
?? 项目工程化系列文章链接如下,推荐按照顺序阅读文章 ??。
1?? 源码剖析之工程化(一):项目概览、package.json、npm script
2?? 源码剖析之工程化(二):项目构建、MD解析
3?? 源码剖析之工程化(三):打包配置
前文对项目目录结...[2021/6/15]
javascript数组排序算法之选择排序
前言
作为一名程序员数组的排序算法是必须要掌握的,今天来图解----选择排序
选择排序原理
首先在未排序序列中找到最小(大)元素,存放到排序序列的起始位置,然后,再从剩余未排序元素中继续寻找最小(大)元素,然后放到已排序序列的末尾。以此类推,直到所有元素均排序完毕。
选择排序原理图(未优化...[2021/6/15]
图解Google V8,搞懂 JavaScript 执行逻辑
V8 是 Google 推出的开源高性能 JavaScript 与 WebA embly引擎,主要的应用包括Chrome浏览器以及Node.js。得益于Chrome浏览器的市场占有率,V8已经成为了当今最主流的JavaScript引擎。
很多前端开发人员对 V8 的理解还停留在...[2021/6/15]
ES6学习-8 数值的扩展
1、二进制和八进制表示法
ES6 提供了二进制和八进制数值的新的写法,分别用前缀0b(或0B)和0o(或0O)表示。
如果要将0b和0o前缀的字符串数值转为十进制,要使用Number方法。
如:Number(''0b11'') 3
2、Number.isFinite()
判断一个数字...[2021/6/15]
08.ElementUI 2.X 源码学习:源码剖析之工程化(三)
0x.00 ?? 前言
?? 项目工程化系列文章链接如下,推荐按照顺序阅读文章 ??。
1?? 源码剖析之工程化(一):项目概览、package.json、npm script
2?? 源码剖析之工程化(二):项目构建、MD解析
3?? 源码剖析之工程化(三):打包配置
本系列文章主要通...[2021/6/15]
vue对组件进行二次封装
vue对组件进行二次封装
经常遇到常用组件与设计图有微小区别的情况,但是自写组件功能又太单一(划掉 其实原因就是懒),这个时候对组件封装就很有用处
例如对 element 的 Me ageBox 二次封装
组件有很多自定义内容
例如 Me ageBox 可自定义配置不同内容。
<te...[2021/6/15]
Vue&Element 前端应用开发之菜单和路由的关系
我们一般的应用系统,菜单是很多功能界面的入口,菜单为了更好体现功能点的设置,一般都是动态从数据库生成的,而且还需要根据用户角色的不同,过滤掉部分没有权限的菜单;在Vue&Element的纯前端框架中,还引入了路由的概念,路由是对应具体的页面视图和布局的相关信息集合,是用户可访问的页面连接...[2021/6/15]
JavaScript 12 动态创建元素
动态创建元素
为何要动态创建元素: 输入电脑,传入之后动态的出现下拉表
动态创建元素方法:
document.write() document.write(''<p&g...[2021/6/15]
「免费开源」基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之EXCEL数据导入(九)
基于Vue和Quasar的前端SPA项目实战之数据导入(九)
回顾
通过之前一篇文章 基于Vue和Quasar的前端SPA项目实战之业务数据(七)的介绍,实现了业务数据基本crud功能,本文主要介绍业务数据批量导入相关内容。
简介
当数据量比较大的时候,如果手工录入数据就会比较慢,所以通过批量...[2021/6/15]
初窥鸿蒙
一、什么是鸿蒙
鸿蒙即 HarmonyOS ,是华为公司推出的支持手机、平板、智能穿戴、智慧屏、车机等多种终端设备的分布式操作系统,并且它提供了多语言开发的 API,支持 Java、XML、C/C++、JS、CSS、HML(类 html 的鸿蒙自己的标记语言)等开发语言,而且它提供多种响应式布局...[2021/6/15]
10分钟用JS实现微信 "炸屎"大作战10分钟用JS实现微信 "炸屎"大作战
大家好,我是秋风,近日,微信又发布了新功能(更新到微信8.0.6)。最火热的非"炸屎"功能莫属了,各种群里纷纷玩起了炸屎的功能。
不知道大家是否经历过那样一个时候,小时候(我是说很小的时候,在我还在上小学的时候)过年也尝试过这种恶趣味,没想到微信给它做成了一个线上版本。这个功能发明,连创造...[2021/6/15]
使用BootstrapVue相关组件,构建Vue项目界面
基于Vue的前端框架有很多,Element算一个,而BootstrapVue也可以非常不错的一个,毕竟Bootstrap也是CSS中的大佬级别的,它和Vue的整合,使得开发起来更加方便了。BootstrapVue 是基于 Bootstrap v4 + Vue.js 的前端 UI 框架。它是流行的...[2021/6/15]
JavaScript 13 事件详解及应用
.addEventListener() 同一个事件注册多个处理函数
<input type="button" value="按钮" id="btn">
<script>
btn = document.getElementById(''btn'');
btn...[2021/6/15]
JavaScript 14 BOMJavaScript 14 BOM
BOM(Browser Object Model)是指浏览器对象模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM是由多个对象组成,其中代表浏览器窗口的window对象是BOM的顶层对象,其他对象都是该对象的子对象
浏览器的顶级对象是window,当我们用的是w...[2021/6/15]
分享Sql性能优化的一些建议分享Sql性能优化的一些建议
随着业务体量和逻辑复杂度的增加,workcenter 对接口的性能耗时有了新的要求,而提升接口性能最有效的方法当然 对数据库操作逻辑和SQL语句进行优化了。本篇分享一些数据库性能优化的经验和建议
数据库结构优化
mysql 逻辑架构图:
第一层:客户端通过连接服务,将要执行的 sql...[2021/6/15]
数组扁平化的几种方式
什么是数组扁平化?
数组扁平化其实就是将多维数组转为一维数组。
数组扁平化的几种方式
方式一:ES6的flat方法
const arr = [1,[2,[3,[4,5]]],6]
方法一:数组自带的扁平化方法,flat的参数代表的是需要展开几层,如果是Infinity的话,就是不过嵌套...[2021/6/7]
一个简易的小程序日历组件
代码仓库地址:https: github.com/imxiaoer/WeChatMiniCalendar
一、效果图如下:
二、业务场景介绍
客户原始需求:用户需要知道在选中的月份中,哪些日期是有客户预约的,并且显示当天预...[2021/6/7]
如何替换json对象中的key如何替换json对象中的key
看到标题你可能会想,如此简单的问题值得去探究吗?如果我有一个json object,只需下面简单的几行代码就可以完成:
var obj = {
"_id": "5078c3a803ff4197dc81fbfb",
"email": "user1@gmail.com",
...[2021/6/7]
在react中使用redux并实现计数器案例
React + Redux
在recat中不使用redux 时遇到的问题
在react中组件通信的数据是单向的,顶层组件可以通过props属性向下层组件传递数据,而下层组件不能向上层组件传递数据,要实现下层组件修改数据,需要上层组传递修改数据的方法到下层组件,当项目越来越的时候,组件之间传递数据...[2021/6/7]
JavaScript 07 数组常用方法
arr = [1,3,5,2,7];
toString() 将数组内容变成字符串并用逗号隔开
valueOf() 返回数组对象本身
学习一个方法的步骤:
1 了解方法的作用
2 方法的参数
3 方法的返回值
4 测试,练习
var array = ...[2021/6/7]
JavaScript 08 字符串JavaScript 08 字符串
基本包装类型:将简单类型包装成复杂类型(简单类型没有属性和方法,包装成复杂类型可以调用属性和方法)
基本包装类型:String Number Boolean
当简单类型调用方法的时候,把基本类型变成基本包装类型会创建一个对应的临时对象,执行完之后销毁。过程类似:
var _str = ...[2021/6/7]
JS 反射机制及 Reflect 详解
一、什么是反射机制
反射机制是在编译阶段不知道是哪个类被加载,而是在运行的时候才加载、执行。
也就是说,反射机制指的是程序在运行时能够获取自身的信息。
js 中的 apply 就是反射机制。
二、Reflect
1、Reflect 定义
Reflect 是一个内建的对象,用来提供方法去拦截...[2021/6/7]