javaScript(二)
javaScript(二)
1. 内置对象
JavaScript中的对象分为4种:内置对象、自定义对象、浏览器对象、DOM对象。
1.1 Math
Math.PI 圆周率
常用方法
Math.random() 生成随机数
Math.floor() 向下取整
Math.ceil(...[2021/5/17]
Js Array常用操作
Array
ECMAScript的数组每个槽位可以存储任意类型,同时也是动态大小,自动增长的。
1.创建数组
let colors = new Array();
let colors2 = []; 字面量
let colors3 = new Array(3); 初始化长度
let...[2021/5/17]
初次使用create-react-app初次使用create-react-app
最近玩了一下React,感觉还挺好玩的,说实话对后端的来说比vue好多了,记得刚学vue的时候是一头雾水;
基础知识暂时后面慢慢说,其实感觉还是挺容易的吧,今天就简单使用一下react脚手架,后续的用这个脚手架写点东西
1.准备node版本
使用create-react-app...[2021/5/17]
Ajax向后台发送简单或复杂数据,后端获取数据的方法
Ajax向后台发送消息分为2种情况:
Ajax正常返回,并且返回数据格式不是很复杂
复杂情况,前端会将复杂 数据进行反序列化为一个JSON串
下面本人就根据这 2 种情况,在后端如何获取数据的方法与大家分享。
第一种情况:(数据简单)
前端:
$.ajax({
...
da...[2021/5/17]
一行代码解决JS数字大于2^53精度错误的问题
服务端使用长整型(Int64)的数字,在浏览器端使用JS的number类型接收时,当这个实际值超过 (2^53-1)时,JS变量的值和实际值就会出现不相等的问题。常见场景比如使用雪花算法生成Id。
在服务端,数字长整型...[2021/5/17]
谷歌浏览器安装react-developer-tools报错
谷歌浏览器用一下react-developer-tools插件,结果使得原来的本来可以运行的react项目也报错,类似下面这种:Uncaught TypeError: Cannot read property ‘forEach‘ of undefined at Object.injectIn...[2021/5/17]
JavaScript
JavaScript基础
JavaScript:
* 概念: 一门客户端脚本语言
* 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
* 脚本语言:不需要编译,直接就可以被浏览器解析执行了
* 功能:
* 可以来增强用户和html页面的交互过程,可以来控制html...[2021/5/17]
开箱即用的Vite-Vue3工程化模板
开箱即用的Vite-Vue3工程化模板
前言
由于临近毕业肝毕设和论文,停更有一段时间了,不过好在终于肝完了大部分内容,只剩下校对工作
毕设采用技术栈Vue3,Vite,TypeScript,Node,开发过程中产出了一些其它的东西,预计会出一系列的文章进行介绍
废话不多了步入正题...
体...[2021/5/17]
从几道题目带你深入理解Event Loop_宏队列_微队列
目录深入探究JavaScript的Event LoopEvent Loop的结构回调队列(callbacks queue)的分类Event Loop的执行顺序通过题目来深入
深入探究JavaScript的Event Loop
Javascript是一门单线程语言
但是在运行时难免会遇到需要...[2021/5/17]
html2canvas渲染时候,样式走样问题。(前端)
工作需求中要做一个将整个页面变成图片下载在本地的功能。
使用了html2canvas第三方JS插件。
在渲染的时候,因为原页面含有DIV和canvas连线,出来的图片,div正常,但是canvas连线相对DIV偏移向上了。
一开始以为是html2canvas在渲染原页面canvas的时候会...[2021/5/10]
原生Js 实现的简单无缝滚动轮播图的示例代码
简单无缝滚动轮播图存在很多漏洞,就是后期增加图片时会很不方便,需要改动的地方也很多,耦合性也很强,只适用于一部分程序,所以我们可以通过改动图片结构和计算折算点的方式,升级代码。
原简单的滚动轮播代码
...[2021/5/10]
html如何为“选择”框创建占位符?
我在文本输入中使用占位符,效果很好。但我也想为我的选择框使用一个占位符。当然,我可以使用以下代码:
<select>
<option value="">Select your option</option>
<option value=...[2021/5/10]
同一个域名下部署多个前端项目,修改vue-cli 环境变量BASE_URL
公司让用vue重构一个angular项目,需要可以在新旧版本间切换,慢慢过渡到只用新版本。
查询Nginx配置,得知
想要在同一个域名下部署多个前端项目,通过不同url来区分调用相应前端项目。 比如:部署项目a,项目b。想要效果如下。 浏览器输入:http: localhost:8082/a...[2021/5/10]
[测试]Sprint Boot
昨天,我们介绍了如何在Spring Boot中实现文件的上传。有读者问:那么如果有多个文件要同时上传呢?这就马上奉上,当碰到多个文件要同时上传的处理方法。
动手试试
本文的动手环节将基于Spring Boot中实现文件的上传一文的例子之上,所以读者可以拿上一篇的例子作为基础来进行改造,以体会这...[2021/5/10]
前端数据结构--二叉树先序、中序、后序 递归、非递归遍历前端数据结构--二叉树先序、中序、后序 递归、非递归遍历
二叉树遍历
二叉树的遍历是指从根节点出发,按照某种顺序依次访问所有节点,而且只访问一次,二叉树的遍历方式很多,如果限制了从左到右的方式,那么主要有4种:
前序遍历:根左右
中序遍历:左根右
后续遍历:左右根
层序遍历:按层级、从上到下,在同一层从左到右遍历
以上一篇的二叉树为例子,先序...[2021/5/10]
进程与线程
先来看一下基本概念
进程: 操作系统分配的占有CPU资源的最小单位。拥有独立的地址空间。
线程: 安排CPU执行的最小单位。是进程内的一个独立执行单元
计算机含有多个进程,每个进程有含有多个线程。
关系:
一个进程至少有一个线程。
一个进程内的数据可以供其中的多个线程直接共享
多个...[2021/5/10]
javaScript
JavaScript
1. 基础
1.1 javaScript 的组成
ECMScirpt(js语法规范)、DOM(文档对象模型)、BOM(浏览器对象模型)
1.2 怎么写c
在html的文件中,script的标签中写js代码
js代码可以在html的标签中写
在js文件中可以写js代码,但...[2021/5/10]
用 vitePress 快速创建一个文档项目用 vitePress 快速创建一个文档项目
其实开发一个项目最需要的就是操作文档,文档的质量决定了项目的开发流程,开发规范等等。
对于前端框架来说,文档最友好的还是vue,不仅是中国人的框架,而且文档支持了中文。仔细查看 Vue 的官方文档,还有Vue-Router,Vuex,Vite。发现尤大的文档都是一个模板刻出来的,而且也非常简洁...[2021/5/10]
前端界面添加水印,部分前端界面添加水印及整个界面添加水印 - 近水楼台-张
给前端局部界面(比如弹框里的内容)添加水印,亲测有效 function watermark(settings) {
var ele = document.getElementById("myBody");
默认设置 var defaultSettings = { watermark_txt...[2021/5/10]
js sort排序是从大到小还是从小到大
sort()方法用于对数组的元素进行排序。
排序顺序可以是字母或数字,并按升序或降序。
默认排序顺序为按字母升序。
数字排序(数字和升序):
语法 arr.sort([compareFunction])
参数 在JavaScript中 方括号 里的内容是可选的,可就是compareFunc...[2021/5/10]
前端数据结构--树
前面介绍过的都是线性的数据结构,本文将介绍一种非线性数据结构——树,它对于存储需要快速查找的数据非常有用。树是一种一对多的数据结构,树这种数据结构在生活中经常看到,如 组织结构图
图中每个元素我们叫做节点,即树(Tree)可以理解为是n(n>=0)个节点的有限集合。当...[2021/5/10]
原生js实现表单的正则验证(验证通过后才可提交)
实现了如下功能:
1.用户名:onfouc显示msg规则;onkeyup计算字符,其中中文为两个字符;onblur,验证是否通过
2.邮箱:onblur 正则匹配,正则是根据自己的需求写的,可以根据个人需求更改
3..密码:onkeyup时显示密码的强弱度,onblur时验证密码,是...[2021/5/7]
JS根据奖品权重计算中奖概率
一、示例场景
1.1、设置抽奖活动的奖项名称
奖项名称:["一等奖", "二等奖", "三等奖", "未中奖"]。假设抽奖活动设置了这四个奖项,当然开发者可以扩展更多。
var prizes = ["一等奖","二等奖","三等奖","未中奖"]; 奖项名称数组
1....[2021/5/7]
JavaScript 01
论文告一段落了,剩下要修改的就非常少了,抽一天时间就能解决了。所以有时间来这写东西了。前端三件套html、c (和x 要分开,完全不是一个东西)、JavaScript之前学过,这次先过一遍JavaScript,为实习打基础,后续更新html和c 。有时间的话会同时更新一下渗透测试的东西,也是从0...[2021/5/6]
前端工程师进阶之旅-手撕代码【前端常用方法以及面试常见题】
前端工程师进阶之旅-手撕代码
主要包括一些工作中常用的方法,面试常问到的方法。还有一些不太了解,趁机深入了解的知识点。都弄懂之后还是有点提升的。
数据类型判断
function myTypeof(data) {
return Object.prototype.toString.call(d...[2021/5/6]
前端数据结构--散列表(哈希表)
散列表的由来
前面说了数组、链表,他们各自有自己的特点:
数组:具有随机访问的特点,可以快速的根据下标访问到数据,缺点是插入、删除需要移动数据
链表:插入、删除只需要改变结点之间的引用,缺点是查找数据需要从根结点遍历访问
散列表是组合了数组和链表的优势,规避它们的不足而产生...[2021/5/6]
算法学习:二分法从入门到精通
今天在力扣看到一道题,顺手写了下,用到了二分法和贪心算法,这里记录一下思路。
二分法查找,也称折半查找,是一种在有序数组中查找特定元素的搜索算法。查找过程可以分为以下步骤: (1)首先,从有序数组的中间的元素开始搜索,如果该元素正好是目标元素(即要查找的元素),则搜索过程结束,否则进行下一步。...[2021/5/6]
前端缓存API请求数据
1. 背景
在一些项目中,有时候会出现不同模块重复请求大量相同api接口的情况,特别是在一些功能相似的后台管理页面中。以下面这几个页面为例,每次进入页面都需要请求等大量重复的下拉框数据,下拉框数据短时间内改动不大,但也不能在前端使用静态数据,所以可以考虑在前端进行数据缓存,避免重复请求api。
...[2021/5/6]
JavaScript 02 流程控制 三元运算符
分支结构
1. if ( 条件) { 条件成立执行 }
2. if ( 条件) { 条件成立执行 } else {否则执行语句 }
3. if ( 条件) { 条件成立执行 } else if {条件2执行语句 } else {&nb...[2021/5/6]
JavaScript 03 数组 ,数组倒序,数组遍历,提取非零元素,求大小值,数组增删改查
避免在表达式中写一个固定的值,要用变量代替
数组和 python中的列表差不多,可以按着列表来理解
数组是一种数据类型Array ,数组字面量 [ ]
var names = [''zs'', ''ls'', ''ww''];
获取数组的字面量:索引/下标
co...[2021/5/6]
在Bootstrap开发框架基础上增加WebApi+Vue&Element的前端
基于Metronic的Bootstrap开发框架是我们稍早一点的框架产品,界面部分采用较新的Bootstrap技术,框架后台数据库支持Oracle、SqlServer、MySql、PostgreSQL、DB2、Sqlite、Acce 等常规数据库,可通过配置进行自由切换,使用Enterprise...[2021/5/6]
如何使用CSS将文本垂直居中?
我有一个<div>包含文本的元素,我想对齐此<div>垂直中心的内容。
这是我的<div>风格:
#box {
height: 170px;
width: 270px;
background: #000;
font-si...[2021/5/6]
05.ElementUI源码学习:项目发布配置(github pages&npm package)05.ElementUI源码学习:项目发布配置(github pages&npm package)
0x00.前言
书接上文。项目第一个组件已经封装好,说明文档也已编写好。下面需要将说明文档发布到外网上,以此来展示和推广项目,使用 Github Pages功能实现。同时将组件发布之 npm 上,方便直接在项目中安装使用。
0x01.Github Pages发布
进入项目的 Github re...[2021/5/6]
React Hook用法详解(6个常见hook)
1、useState:让函数式组件拥有状态
用法示例:
计数器
import { useState } from ''react''
const Test = () => {
const [count, setCount] = useState(0);
return ...[2021/5/6]
使用vue-element-admin框架从后端动态获取菜单
1、前言
? vue-element-admin是一个纯前端的框架,左侧菜单是根据路由生成的。实际开发中经常需要根据当前登陆人员的信息从后端获取菜单进行展示,本文将详细介绍如何实现该功能。
2、详解
? 整体思路为:登陆 > 成功后根据用户信息获取菜单 > 根据菜单生成路由信...[2021/5/6]
JavaScript 04 函数,参数,形参,实参,返回值return,arguments的使用,冒泡排序法,匿名函数,自调用函数,作用域,作用域链,预解析
东西有点绕,需要好好消化,冒泡排序明天补上
-------------------------------------------------------------------------------------------------------
函数:封装一段特定功能的代码,然后通过函...[2021/5/6]
JS原生2048小游戏源码分享
最近在学习算法方面的知识,看到了一个由算法主导的小游戏,这里给大家分享下代码:
效果:
代码:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=360p...[2021/5/6]
搞懂JS的事件循环(Event Loop)和宏任务/微任务
在之前的一篇文章中简单理了下JS的运行机制,顺着这条线深入就又遇到了几个概念,什么是事件循环,什么又是宏任务、微任务呢,今天用这篇文章梳理一下。
以下是我自己的理解,如有错误,还望不吝赐教。
事件循环与消息队列
首先大家都知道JS是一门单线程的语言,所有的任务都是在一个线程上完成的。而我们知...[2021/5/6]
JavaScript异步编程3——Promise的链式使用
目录概述详论回调地狱Promise实现参考
??概述
在上一篇文章《JavaScript异步编程2——结合XMLHttpRequest使用Promise》中,简要介绍了Ajax与Promise的结合使用。这样,我们就有了两个异步操作的例子:读取一个json文件;通过一个地址加载图像。考虑一下...[2021/5/6]
Vue.js组件的使用Vue.js组件的使用
Vue.js组件的使用
一.组件
组件是可复用的vue实例,可分为局部组件和全局组件。
二.组件入门小案例
要求定义一个组件”one“,并重复使用它。
2.1.代码实例
1 <html lang="en">
2 <head>
3 <...[2021/5/6]
了解Ajax及Ajax如何发送请求
由于JavaScript能力有限,它所提供的API都只停留在单机阶段。这样会造成一些功能无法实现,如:无法实现用户登录时,用户在输入用户账户时显示用户对应的头像;无法实现用户注册时,用户输入账号或用户名时提示是否存在;无法实现在留言板功能看到最新的用户留言。
上述这些问题的共同点就是:数据存放...[2021/5/6]
详解JavaScript中的正则表达式详解JavaScript中的正则表达式
实际工作中,JavaScript正则表达式还是经常用到的。所以这部分的知识是非常重要的。
一、基础语法:
第一种:字面量语法
var expre ion=/pattern/flags;
第二种:RegExp构造函数语法
var pattern = /\w/gi; 字面量语法
var pa...[2021/5/6]
JavaScript异步编程4——Promise错误处理
目录1. 概述2. 详论3. 参考
1. 概述
在上一篇文章《JavaScript异步编程3——Promise的链式使用》中,通过Promise的链式使用,避免程序中多次嵌套回调(回调地狱)。根据前面的文章我们可以知道,Promise是基于状态的,成功/失败的状态会分别去处理相应的回调函数。...[2021/5/6]
DPlayer.js视频播放插件使用方法
DPlayer.js视频播放插件简单的使用
主要用到了实现了:视频播放 、监听开始、结束、暂停、播放时间、切换视频
官方文档:http: dplayer.js.org
效果图:
**
注意:我是在本地起了个服务,用局域网连接到手机测试,其中苹果手机中,视频的跳转视频位置失...[2021/4/19]
css如何将元素水平居中
如何使用CSS<div>在另一个文件中水平居中<div>?
<div id="outer">
<div id="inner">Foo foo</div>
</div> 解决方案:
您可以将此CSS应用于内部<d...[2021/4/19]
js递归实现对象的深拷贝
function clone(o) {
var temp = {}
for (var key in o) {
if (typeof o[key] == ''object'') {
temp[key] = clone(o[key])
...[2021/4/19]
01.ElementUI源码学习:项目初始化和webpack配置
0x00.项目初始化
由于整个过程像素级 copy element,所以将不使用vue-cli初始化项目。
创建项目
新建一个空的文件夹,使用npm init 来初始化项目,并安装vue模块。
修改目录结构
根目录中添加文件夹
根目录下创建项目配置文件: .gitignore R...[2021/4/19]
JavaScript之变量解构赋值的使用
引言
解构赋值是ES6中引入的一种能快速方便的进行变量赋值的方法,其主要也就是分为解构和赋值两部分内容。解构者,也就是匹配结构,然后分解结构进行赋值。
数组的解构赋值
使用
const arr = [1,3,5]
const [a,b,c] = arr;
console.log(a) 1...[2021/4/19]
封装一个处理 react 异常的最简 ErrorBoundary 组件 🎅
前言 ??
?? 从 React 16 开始,引入了 Error Boundaries 概念,它可以捕获它的子组件中产生的错误,记录错误日志,并展示降级内容,具体 官网地址。 ??
错误边界避免一个组件错误导致整个页面白屏不能使用等情况,使用优雅降级的方式呈现备用的 UI,错误边界可以...[2021/4/19]
02.ElementUI源码学习:babel配置
书接上文,接下来项目将引入babel支持ES6+语法兼容。
Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。中文官网
0x00.babel概念
Babel 是一个编...[2021/4/19]