newbie (⊙o⊙)-CSDN博客

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box{ display: flex; width: 100%; justify-content: center; margin-top: 300px; align-items: center

2022-05-26 18:24:20 276

javascript 的new 原理// Func 为构造函数，args表示传参function myNew(Func,...args){ // 在内存中创建一个新对象 const obj = {} if(Func.prototype){ // 把新对象的原型指向Func构造函数的原型 Object.setPrototypeOf(obj,Func.prototype) } // 改变this指向，并执行构造函数 const result = Func.apply(obj,args)

2022-05-26 09:33:37 91

原创 web api==＞ Intersection Observer 的使用场景

Intersection Observer关于元素进入可视区域后，做一些记录（回调函数），并且只执行一次！

2022-05-25 15:47:01 244

原创 JavaScript将内容复制到剪切板

copyU() { let input = document.createElement('input') // 创建input对象 input.value = 'xxxxxxx' // 设置复制内容,可以动态赋值 document.body.appendChild(input) // 添加临时实例 input.select() // 选择实例内容 document.execCommand('copy') // 执行复制 docu...

2022-04-27 10:22:08 1570 1

原创后端传递base64对象数据解析,解决中文乱码问题

// 解析base64 getStr(){ let encode = decodeURIComponent(atob(this.code).split('').map(function (c){ return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2); }).join('')) //遍历每一个字符，（解决中文乱码问题） .split('').map(function (c){...

2022-04-26 17:36:02 469

原创 swiper 插件小圆点选中时样式穿透

/swiper 小圆点选中时样式穿透/.swiper-pagination >>> .swiper-pagination-bullet-active{background-color:#F86B7C}

2022-04-21 17:39:09 273

原创 script标记

标题script加标记当浏览器解析至script标签时，浏览器的主线程就会等待script，或者运行script，然后继续开始构建，在以前，如果你把script标签放到了文档的最上面，那么在等待下载和运行的这段时间内页面就会处于白屏和无法操作的状态，并且不是并行的下载，浏览器会逐个下载并运行，这是一个相当糟糕的体验。所以都会选择将script放在文档底部，尽可能推后脚本的执行时机，不过并不完全可控。时至今日，我们可以给script标签增加标记，使其异步(延迟)运行，把可控权交给开发者。标题async标

2022-04-06 16:21:53 481 2

原创 vue3.0 中的provide和reject使用，$ref,teleport

App.vue<template> <img alt="Vue logo" src="./assets/logo.png"> <modal :isOpen="modalisopen" @close-modal="onCloseModal"> 插槽 </modal> <div id="test"></div> <button @click="openModal" ref="modal">打开模态框

2022-03-16 17:15:49 1357

原创关于开发中遇到的一些问题记录

display:none与visibility：hidden 的区别1.dispaly:none;会让元素完全从渲染树消失，渲染的时候不占据任何空间;visibility：hidden 不会让元素从渲染树消失，渲染的元素继续占据空间，只是内容不可见2.display:none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示visibility：hidden；是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility：visible；可以让子孙

2022-03-07 11:38:03 321

原创常用正则表达式

// （1）匹配日期，如 yyyy-mm-dd 格式var regex = /^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/;// （2）匹配 qq 号var regex = /^[1-9][0-9]{4,10}$/g;// （3）手机号码正则var regex = /^1[34578]\d{9}$/g;// （4）用户名正则var regex = /^[a-zA-Z$][a-zA-Z0-9_$]{4,16}$/;...

2022-02-22 16:11:39 191

原创 JavaScript的数据类型

> JavaScript一共有六种基本数据类型，分别是 Undefined、Null、Boolean、Number、String，> 还有在 ES6 中新增的 Symbol 类型，代表创建后独一无二且不可变的数据类型，> 它的出现我????认为主要是为了解决可能出现的全局变量冲突的问题引用数据类型（对象、数组和函数）两种类型的区别是：存储位置不同。原始(基本)数据类型直接存储在栈（stack）中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储。引

2022-02-22 15:45:34 62

原创 ios底部白条（安全区处理），让背景能够铺满安全区

标题第一步1.viewport-fit=cover 重点<meta name="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui,viewport-fit=cover"/>2.body 设置body { height: 100%; width: 100%; /*overflow-x:hidden

2021-12-23 09:43:53 2848

原创 Android和ios时间兼容性写法(js)

function timerCal(time){ let oTime = time let postTime = new Date(time.replace(/-/g,'/')) let curTime = new Date() let timeDiff = curTime.getTime() - postTime.getTime() let min = 60 * 1000; let hour = min * 60; let day = hour *

2021-12-21 16:02:21 1283

原创 AES 加密解密

// var CryptoJS = require("crypto-js");import CryptoJS from 'crypto-js' // npm安装//解密方法// function Decrypt(word) {// let key = CryptoJS.enc.Utf8.parse("3W4D2aZ6YyEf0Cx5FR<1A{lSLP8oBMvu");// let decrypt = CryptoJS.AES.decrypt(word, key, {//

2021-12-21 16:00:12 309

原创 css隐藏滚动条，但使超出部分任然可以滚动

/*长tabs，隐藏滚动条，保留滚动功能*/.weChat-tabs{ height: 40px; display: flex; overflow-x: scroll; background-color: #d4237a; padding: 0 20px; white-space: nowrap;}.weChat-tabs::-webkit-scrollbar { display: none;}...

2021-11-11 14:22:37 151

原创 JavaScript闭包

作用域链就是一层一层往上找，直到找到全局作用域还没有，就宣布放弃，这一层一层的关系就叫作用域链。闭包会导致作用域链问题,“函数套函数，内层函数对外层函数变量的引用”。 let name = 'ao' let obj = { name:'bo', method:function(){ // let _this = this 将this指向当前对象 return function(){ return this.name } } .

2021-10-26 17:41:16 89

原创 JavaScript的函数重载

function sum(a,b) { return a + b}function sum(a,b,c){ return a + b + c}// js是弱类型语言，下面的sum函数会覆盖上面的sum函数// 使用累加器来实现这个加法函数的函数重载，不管传入几个参数都可以行function sum(){ let arr = Array.prototype.slice.call(arguments) return arr.reduce(function(a,b){

2021-10-26 14:09:05 231

原创判断一个真实存在的对象是否为空对象

let obj = {}function isEmpty(obj ) {// 遍历自身，看自身是否存在属性，不包括继承的 for(let key in obj ) { if(obj.hasOwnProperty(key)){ // 如果存在属性说明不是空对象 return false } } // 如果遍历完都没有存在于自身的属性，说明是个空对象 return true}...

2021-10-22 11:01:36 105

原创 webpack学习记录

webpackwebpack核心概念 webpack 静态模块打包器，是一种前端资源构建工具，前端所有资源文件（js/json/img/less…)都会作为模块处理，它将根据依赖关系进行静态分析，打包生成对应的静态资源（bundle）。一、Entry 入口（Entry）指示webpack以哪个文件为入口起点开始打包分析构建内部依赖图。二、Output 输出（Output）指示webpack打包后的资源bundles输出到哪里去，以及如何命名。三、Loader Loa

2021-10-21 11:41:06 94

原创数组join法

2021-10-11 17:37:35 94

原创大量数据，无缝渲染

// 渲染大数据，合理使用createDocumentFragment和requestAnimationFrame将操作分为一小段一小段执行 setTimeout(()=>{ // 比如插入10万条数据 const total = 100000 // 一次插入多少条的数据 const once = 20 // 插入数据需要的次数 const loopCount = Math.ceil(total / once) // 记录已渲染的次数

2021-09-18 14:41:29 69

原创图标懒加载

// 图片懒加载 function lazyLoad() { const imgs = document.getElementsByTagName('img') const len = imgs.length // 可视窗口高度 // console.log(imgs,'imgs[i].dataset') const viewHieght = document.documentElement.clientHeight // 滚动条高度 const

2021-09-18 13:54:17 137

原创 JavaScript封装优先级队列

// 优先级队列 function PriortyQueue(){ // element 数据项 // priorty 优先级别 function QueueElement(element,priorty){ // 保存数据，及保存优先级 this.element = element this.priorty = priorty } // 封装属性 this.items = [] PriortyQueue.prototype.enqueu

2021-09-08 16:14:33 99

原创遇到的一些问题的记录

数据过滤空值时常会使用array.filter,但其默认会把0、false这样具体的值过滤掉

2021-09-06 18:20:10 69

原创 vue3.0中使用vuex

npm install --save vuex@next -D 安装最新版本的vuex创建store文件夹，并新建index.jsimport {createStore} from "vuex"export default createStore({ state: { num: 0 }, getters: {}, mutations: { setNum(state, value) { state.num = .

2021-09-03 16:36:00 278

原创 vue3.0中vue-router路由的创建及使用

下载vue-router,一定要注意版本！npm install vue-router@/next --savesrc目录下创建router文件夹，router文件夹下创建index.jsvue3.0下需要引入createRouter, createWebHistory 模块去创建路由createWebHistory 使用history模式import { createRouter, createWebHistory } from 'vue-router'import Home fr..

2021-09-02 09:59:50 4492

base64.js jwt加密使用到的文件

hmac-sha256.js 资源文件，jwt时用到

空空如也