前端
文章平均质量分 53
tanleiDD
这个作者很懒,什么都没留下…
展开
-
HarmonyOS 应用开发记录
前言采用 JS + Java 混合开发模式通过 JS、CSS、HML 描述页面Java 提供系统能力接口供 JS 调用类似于客户端开发时,JS 通过 JSB 调用 Java 接口遇到的坑1. 页面顶部的 TitleBar 去不掉如图:官方文档也没提咋去,论坛里得知:// 在 config.json 中的 module 里如下配置 "metaData": { "customizeData": [ { "name":原创 2022-04-01 19:58:07 · 2698 阅读 · 0 评论 -
每天一个小知识:HOTP
HOTP概述HOTP: 基于HMAC的一次性密码算法【An HMAC-Based One-Time Password Algorithm】一次性密码意味着通过该算法生成的密码只能使用一次,使用一次后就会失效,下一次又会是另一个密码。步骤通过 HMAC 的 SHA-1 算法,生成一个 20 字节的字符串,称为 HS ,即 HS = HMAC-SHA-1(K, C)通过动态截断 DT 将 20 字节的 HS 转换为 4 字节的字符串,称为 Sbits,即 Sbits = DT(HS)将 Sb原创 2021-08-29 09:35:27 · 3270 阅读 · 0 评论 -
每天一个小知识:Monorepo
Monorepo解释:mono指单一的,repo是仓库的简写。“mono” meaning ‘single’ and “repo” being short for ‘repository’所以Monorepo指单一的仓库,是将多个项目在同一个仓库中开发的策略。优点:可以轻易的实现代码复用:可以把共用的代码放在共享的文件夹下,每个项目直接导入就可以使用简化了第三方库的管理:可以将多个项目共同依赖的库放在共用的位置原子提交:当多个项目在多个仓库中分别开发的时候,一个项目的原创 2021-08-28 10:01:37 · 751 阅读 · 0 评论 -
解决 npm 安装包时,出现 Refusing to delete xxx,Move it away, and try again.
我想重新安装一下 @vue/cli然后就出错了按照提示,找到它不能删除的文件,手动删除,然后重新运行结果还是出错,同样的错误提示,又让删除另一个文件不知道还要梅开几度,所以我直接把文件夹删除了,然后再重新执行 npm install @vue/cli -g 进行安装我这里是提示这个文件夹下有文件不能删除,我就直接把它整个给删了,具体看自己0.0...原创 2021-04-29 18:09:21 · 5642 阅读 · 1 评论 -
JS声明提升的一些问题
声明提升的坑变量声明提升:通过var定义(声明)的变量,在定义语句之前就可以访问到,值为undefinedvar a = 2function fn() { console.log(a) var a = 1}上面的代码将输出undefined,因为var声明的变量存在提升,等价于下面这段代码var a = 2function fn() { var a // 屏蔽了外部的变量a,同时自身未被赋值 console.log(a) a = 1}函数声明提升:通过function原创 2021-04-01 11:34:07 · 309 阅读 · 0 评论 -
JS中 Object 与 Map 的区别
概述在很多时候,我们都把Object当成Map来使用,例如使用Objectlet dict = { 'hello': '你好', 'world': '世界'}console.log(dict['hello'], dict['world'])// 你好 世界使用Maplet dict = new Map([ ['hello', '你好'], ['world', '世界']])console.log(dict.get('hello'), dict.get('wo原创 2021-03-24 20:07:47 · 1232 阅读 · 0 评论 -
两栏布局——左边固定宽度、右边自适应
HTML <div class="main"> <div class="left"></div> <div class="right"></div> </div>基于 flex代码 .main { display: flex; } .left { background-color: pink; height: 200px; flex-basis: 200px原创 2021-03-24 16:15:11 · 902 阅读 · 0 评论 -
DOM元素获取位置信息各类方法图示
getBoundingClientRect用法domRect = element.getBoundingClientRect();图解The returned value is a DOMRect object which is the smallest rectangle which contains the entire element, including its padding and border-width.返回值是一个DOMRect对象,该对象是包含这个元素的最小矩形,原创 2021-03-23 20:01:27 · 1292 阅读 · 0 评论 -
绑定 unhandledrejection 事件,处理未显式捕获的Promise异常
绑定方式其一window.addEventListener("unhandledrejection", event => { console.warn(`UNHANDLED PROMISE REJECTION: ${event.reason}`);});其二window.onunhandledrejection = event => { console.warn(`UNHANDLED PROMISE REJECTION: ${event.reason}`);};原创 2021-03-17 20:11:18 · 4389 阅读 · 1 评论 -
TypeScript 类型操作符、类型保护
环境搭建typescript 安装npm install typescript -g // 全局安装ts目录结构tsconfig.json配置内容{ "compilerOptions": { "target": "ES2015", // 编译的目标标准 "outDir": "./dist", // 编译后的文件输出目录 "watch": true // 进入监听模式,文件发生变动立即重新编译 }, "include"原创 2021-03-15 16:48:31 · 381 阅读 · 0 评论 -
TypeScript 联合、交叉、字面量类型,类型别名、推导、断言
环境搭建typescript 安装npm install typescript -g // 全局安装ts目录结构tsconfig.json配置内容{ "compilerOptions": { "target": "ES2015", // 编译的目标标准 "outDir": "./dist", // 编译后的文件输出目录 "watch": true // 进入监听模式,文件发生变动立即重新编译 }, "include"原创 2021-03-15 15:28:42 · 383 阅读 · 0 评论 -
NodeJS事件循环
事件循环原理流程图timers:本阶段执行setTimeout()和setInterval()调度的回调函数pending callbacks:本阶段执行某些系统操作的回调函数,例如文件操作回调idle、prepare:本阶段仅系统内部使用,我们并不关心poll:检索新的I/O事件,执行与I/O相关的回调,以及其他几乎所有的回调check: 本阶段执行setImmediate()调度的回调函数close callbacks: 本阶段执行一些与关闭相关的回调函数,如 socket.on('cl原创 2021-03-13 21:24:47 · 266 阅读 · 0 评论 -
为什么使用setTimeout模拟setInterval
setInterval的缺点“丢帧”现象:setInterval()仅当没有该定时器的任何其他代码实例时,才将定时器代码添加到队列中,即在向队列插入代码实例之前,会先检测是否正在执行该代码实例,以及队列中是否已经存在该代码实例,只要存在其一就都不会再向队列中插入。实际代码执行间隔 <= 设定的时间间隔:比如一个1000ms的interval,在插入队列后因为前一个任务执行超时(假设超时800ms),导致该任务不能及时执行,当它执行完毕后(假设执行不耗时,即还剩下200ms),下一个代码(相原创 2021-03-13 18:39:34 · 327 阅读 · 0 评论 -
浏览器之DNS解析过程详解
概念域名解析是把域名指向网站空间IP,让人们通过注册的域名可以方便地访问到网站的一种服务。简单的说,域名解析就是将域名转换为IP地址的过程。因为想要访问一台服务器,最终是靠IP地址访问的,而不是靠域名访问的,他们的之间的映射关系保存在本地缓存和网络上的各种域名解析服务器中,如浏览器缓存,系统缓存,域名商的域名解析服务器,…,那么他们的查询顺序和查询方式就是本文的内容。域名结构域名结构就以mail.baidu.com域名为例,域名最后一个.的右侧部分我们称之为顶级域名,倒数第二个.右侧部分称之为转载 2021-03-12 10:27:16 · 1738 阅读 · 0 评论 -
5种对象属性遍历方法对比
实验代码// 创建对象x,并分别赋值可遍历与不可遍历属性let x = {}x.name = 'tl'Object.defineProperty(x, 'age', { value: 17, writable: true, enumerable: false, configurable: true})// 创建x的原型对象p,并分别赋值可遍历与不可遍历属性let p = {}p.sex = 'm'Object.defineProperty(p, 'job'原创 2021-03-11 17:45:36 · 345 阅读 · 0 评论 -
CSS @import 用法
目录结构a.cssp { color: pink}b.css/* 引入 a.css, 注意结尾需要分号 */ @import 'a.css'; /* 或者 @import url('a.css'); */ p { font-size: 30px;}index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <原创 2021-03-06 19:25:50 · 6524 阅读 · 0 评论 -
绕脑的 js 问题
. 以下输出什么 var a = {n: 1}; var b = a; a.x = a = {n: 2}; console.log(a.x) console.log(b.x) // 输出 undefined {n: 2}解释:首先,a 和 b 同时引用了 {n: 1} 对象 , 接着执行到 a.x = a = {n:2}语句。虽然赋值是从右到左的,但是.的优先级比=要高。首先执行 a.x,相当于为 a(或者 b)所指向的{n: 1}对象新增了一个属性 x,即此时对象将变为 ..原创 2021-03-04 11:44:38 · 256 阅读 · 2 评论 -
ES6模块化使用方法
目录结构a.js对外导出对象let name = 'j'let age = 18let sex = 'm'// 导出对象export { name, age}// 默认导出export default sexb.js// 导入a.js中导出对象import {name, age} from './a.js'// 导入a.js中默认导出import sex from './a.js'console.log(name, age, sex)index原创 2021-03-03 15:44:33 · 346 阅读 · 6 评论 -
Array.isArray 跟 instanceof 的差异
Array.isArray如果参数是数组一定返回true,否则一定返回false,在判断对象是否为数组时,采用Array.isArray 更加可靠instanceof众所周知,instanceof 的工作原理是判断右边参数的原型是否在左边参数的原型链上对比Array.isArray// Array.prototype 也是一个数组。Array.isArray(Array.prototype); // true// 原型对象指向数组原型的对象也可以被分辨Array.isArr原创 2021-03-03 15:06:37 · 2067 阅读 · 1 评论 -
nodejs 作为代理服务器替换网页文件
背景有时候我们调试某个网页的时候,由于直接访问目标服务器,会返回些阻止调试的代码,为了方便可以将这些 js 替换掉 (fiddler的autoResponder也可以达到这种效果)另一种情况则是,我们需要达到访问某个站点,而转到另一个站点的效果思路将自己的服务器设置为代理服务器,这样所有请求都会经过处理使用express + requests转发:对不需要过滤的请求,直接放行,需要过滤的特殊处理假如我们想达到 访问 http://www.origin.com ,但是返回http://www原创 2021-03-03 10:59:33 · 674 阅读 · 0 评论 -
为什么 [‘1‘, ‘2‘, ‘3‘].map(parseInt) 的结果不是 [1, 2, 3]
.map方法接受一个callback作为回调,同时会为这个回调传入三个参数,分别是value、index、arr,即迭代中的值、索引、数组本身parseInt接收两个参数,分别是s、radix,即要解析的字符串、解析为的进制基数因此 ['1', '2', '3'].map(parseInt),每一次迭代相当于执行 parseInt(‘1’, 0)、parseInt(‘2’, 1)、parseInt(‘3’, 2)第一次执行,radix为0,默认为10进制,因此返回1, 而后面两次执行,radix为1.原创 2021-03-01 10:31:39 · 208 阅读 · 0 评论 -
Vue 组件的生命周期
单个组件的生命周期beforeCreate组件创建之前执行,此时还没有data和methodsexport default { name: 'App', data() { return { count: 0 } }, beforeCreate() { console.log(this.count) this.test() }, methods: { test() { console.log(1234)原创 2021-02-03 17:50:45 · 283 阅读 · 0 评论 -
JSONP跨域介绍
跨域跨域就是提供前端服务的源与提供后端服务的源不同,前后端分离的项目都要考虑跨域问题JSONP 的跨域方式原理:某些标签默认拥有跨域的能力,例如script标签,可以加载外部脚本,并且立即执行。这时我们返回这样一段代码data = { code: '200', message: 'ok'}callback(data);这时候,这段代码如果被加载执行,那么就会调用callback函数,这样我们就可以在前端js文件里面定义callback这个函数的行为。例如function call原创 2021-01-31 17:23:33 · 230 阅读 · 0 评论 -
获取页面元素的位置
获取视口的大小视口即viewport,指的是浏览器窗口中可显示页面内容的区域,即下图红框中的区域网页上的每个元素,都有clientHeight和clientWidth属性。这两个属性指元素的内容部分再加上padding的所占据的视觉面积,不包括border和滚动条占用的空间。根据这一点,我们只需要求出documentElement(即兜底的html元素)的宽高就可以得出视口大小了 function getViewport(){ return { width:原创 2021-01-31 13:37:59 · 4771 阅读 · 0 评论 -
Vue2.x到Vue3.x的变化
template替换差异在Vue2.x中,会将template中全部内容覆盖到要替换的位置,也就是原标签会消失<!-- App.vue --><template> <div id="appx"> test </div></template><!-- index.html --><div id="app"></div>// main.jsnew Vue({ render:原创 2021-01-29 23:34:17 · 323 阅读 · 0 评论 -
前端大文件上传中的:分片上传、断点续传、秒传
方案前端:vue、element-ui服务端:nodejs分片上传将大文件切片成多个小文件块,然后同时上传思路前端前端通过<input type="file" />的文件选择器,获取用户选择的文件<template> <div> <input type="file" @change="handleFileChange" /> </div></template><script&原创 2021-01-29 16:32:04 · 2071 阅读 · 0 评论 -
浏览器工作原理
页面加载过程正常的加载流程浏览器一边下载HTML网页,一边开始解析解析过程中,浏览器发现<script>元素,就暂停解析,把网页控制权交给JavasScript引擎如果<script>元素引用了外部脚本,就下载该脚本再执行,否则直接执行代码JavaScript引擎执行完毕,将控制权交还渲染引擎,恢复往下解析HTML网页加载外部脚本时,浏览器会暂停页面渲染,等待脚本下载并执行完成后,再继续渲染。原因是 JavaScript 代码可以修改 DOM,所以需要把控制权让给它原创 2021-01-27 20:43:25 · 288 阅读 · 0 评论 -
浏览器操作文件对象
ArrayBuffer 对象ArrayBuffer对象表示一段二进制数据,用来模拟内存里面的数据。通过这个对象JavaScript可以读写二进制数据浏览器原生提供ArrayBuffer()构造函数,用来生成实例。它接受一个整数作为参数,表示这段二进制数据占用多少个字节。var buffer = new ArrayBuffer(8);buffer.byteLength // 8, 表示当前实例占用的内存长度(单位字节)。buffer.slice() // 进行切片拷贝,用法同数组sli原创 2021-01-27 16:42:43 · 366 阅读 · 0 评论 -
JS 中的 Iterator, Generator, async
Iterator任何数据结构只要部署 Iterator 接口,就可以完成遍历操作。Iterator 的遍历过程:– 创建一个指针对象,指向当前数据结构的起始位置。– 不断调用指针对象的next方法ES6 规定,一个数据结构只要具有Symbol.iterator属性,就可以认为是“可遍历的”。Symbol.iterator属性本身是一个函数,就是当前数据结构默认的遍历器生成函数。const obj = { [Symbol.iterator] : function () {原创 2021-01-20 12:59:40 · 226 阅读 · 0 评论 -
Promise.all和Promise.race的作用
Promise.all所以Promise都返回,或者出现reject才返回值得注意的是,返回的数组结果顺序与传入的promise数组的顺序一致Promise.all成功返回数组,失败返回失败数据,一但失败就不会继续往下走 let p1 = Promise.resolve('aaa') let p2 = Promise.resolve('bbb') let p3 = Promise.reject('ccc') let p4 = Promise.resolve('ddd'原创 2021-01-20 11:14:52 · 493 阅读 · 0 评论 -
.d.ts文件的作用
描述在使用ts的时候,最大的一个好处就是可以给js各种类型约束,使得js能够完成静态代码分析,推断代码中存在的类型错误或者进行类型提示ts完成类型推断,需要事先知道变量的类型,如果我们都是用ts书写代码,并且给变量都指定了明确的类型,这时ts可以很好的完成类型推断工作但是有时,我们不免会引入外部的 js 库,这时ts就对引入的js文件里变量的具体类型不明确了,为了告诉ts变量的类型,因此就有了.d.ts (d即declare),ts的声明文件。举例比如我们在项目中使用了jQuery,那么对原创 2021-01-20 11:01:00 · 6276 阅读 · 1 评论 -
JS监听对象属性的两种方式
Object.definePropertyfunction observeKey(obj, key) { let value = obj[key]; Object.defineProperty(obj, key, { get() { console.log("读取属性", value); return value; }, set(newValue) { console.log("设置属性", newValue); value原创 2021-01-18 10:36:02 · 2632 阅读 · 0 评论 -
CommonJS、AMD、CMD介绍
CommonJS根据CommonJS规范,一个单独的文件就是一个模块。Nodejs,Webpack等是CommonJS的实践者CommonJS 主要用于服务器端模块化开发CommonJS是同步加载模块AMDAMD全称Asynchronous Module Definition,即异步模块定义AMD是浏览器端模块化开发的规范AMD 是RequireJS在推广的过程中对模块定义的规范化产出AMD推崇依赖前置,在定义模块的时候要先声明其依赖的模块,如下:// 定义模块 my原创 2021-01-16 18:10:39 · 405 阅读 · 0 评论 -
node 命令行工具 起步教程
第一步创建一个文件夹,比如my-cli,将它初始化为一个npm包:$ mkdir my-cli$ cd my-cli && npm init -y第二步创建入口文件。在根目录下新建一个bin文件夹,并在bin文件夹中创建一个叫my-cli.js的文件:$ mkdir bin && cd bin$ touch my-cli.js第三步在my-cli.js中,声明使用nodejs作为脚本的解释器,并且在脚本里面随便写点什么。// my-cli.转载 2021-01-15 20:32:51 · 259 阅读 · 0 评论 -
为什么Object.prototype.toString可以判断数据类型,而[].toString不行
Object.prototype.toString同时,{}.toString 与 Object.prototype.toString是相等的,因此具有相同的效果[].toString答:因为Object.prototype.toString方法在对象原型链的最末端,而[]在原型链靠前的位置重写了toString方法,因此在[]调用toString时,使用的是重写后的toString,效果与Object.prototype.toString不同...原创 2021-01-01 16:15:26 · 529 阅读 · 0 评论 -
利用blob对象预览将上传的图片
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Blob Test</title> <script> function handleFile(e) { // 取得文件并生成blob流 var file = e.files[0];原创 2020-12-25 19:10:14 · 602 阅读 · 0 评论 -
ts学习笔记
简介TypeScript 是JavaScript 的超集,对js提供了类型标注,使得静态推断成为可能,让一些错误在运行之前就可以被诊断出来。TypeScript 可以编译出纯净、 简洁的 JavaScript 代码,并且可以运行在任何浏览器上、Node.js 环境中和任何支持 ECMAScript 3(或更高版本)的JavaScript 引擎中。安装// 全局安装npm install -g typescript// 查看版本号tsc -V 编译代码// 使用ts编译xxx.ts文原创 2020-12-15 11:52:09 · 1053 阅读 · 0 评论 -
AJAX(异步JavaScript和XML)学习笔记
原生AJAX基本套路// 1. 创建对象const xhr = new XMLHttpRequest();// 2. 初始化 设置类型与URLxhr.open('POST', 'http://127.0.0.1:8000/server');// 3. 发送xhr.send('message');// 4. 事件绑定xhr.onreadystatechange = function () { // 判断 if (xhr.readyState === 4) { if (xhr.st原创 2020-12-11 19:26:24 · 255 阅读 · 1 评论 -
CSS3 transition失效问题及宽高不确定时如何设置transition属性
关于transition,css教程中有一个很简单的例子:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .a { transition: opacity .5s;原创 2020-12-04 10:37:37 · 5119 阅读 · 1 评论 -
vuex使用教程详细笔记
简介vuex是专门用来管理vue.js应用程序中状态的一个插件。他的作用是将应用中的所有状态都放在一起,集中式来管理。需要声明的是,这里所说的状态指的是vue组件中data里面的属性。vuex组成结构示意图vuex的特点是把数据单独隔离,形成一棵树状图。单独隔离就意味着它有自己的生态系统。输入和输出,其中action作为数据的输入,state作为数据的输出。vuex里有这么一个规则:只能在mutaions里修改state,actions不能直接修改statemutations即变化,修改s原创 2020-12-01 12:06:16 · 783 阅读 · 1 评论