JavaScript
关注
分享
扫一扫
文章平均质量分 80
等时钟成长
“在你还是一个难看的小姑娘时，琼玛，我就爱你。那时你穿着方格花布连衣裙，系着一块皱巴巴的围脖，扎着一根辫子拖在身后。我仍旧爱你”。
展开
-
【JavaScript】文件分片上传
大文件分片上传原创 2023-05-28 01:20:45 · 2702 阅读 · 0 评论 -
【JavaScript】瀑布流布局
瀑布流布局原创 2022-07-13 19:42:16 · 1931 阅读 · 0 评论 -
【JavaScript】动手实现一个音乐播放器
【JavaScript】动手实现一个音乐播放器文章目录【JavaScript】动手实现一个音乐播放器前言技术效果实践基础组件`Icon``Button``Progress`使用`audio`播放本地音乐播放控制播放列表旋转唱片歌词解析LRC隐藏滚动条自动滚动渐淡工具栏页面底部固定音乐进度音量调节参考前言技术利用svelte框架利用<audio></audio> 播放音乐利用animation-play-state 控制动画启停利用正则解析歌词利用scrollInto原创 2022-03-28 15:33:17 · 1708 阅读 · 1 评论 -
【JavaScript】图片的懒加载
【JavaScript】图片的懒加载文章目录【JavaScript】图片的懒加载1. 懒加载2. 利用`scroll`事件利用`HTMLElement.offsetTop`利用`Element.getBoundingClientRect()`节流优化3. 利用`IntersectionObserver`4. References1. 懒加载在一个很长很长的页面里，只渲染可视区域里的内容对于性能提升非常有用。图片懒加载就是这样一种技术，我们可以在图片进入可视区域之后再去请求/渲染。这需要一个技巧，就是原创 2022-03-25 19:32:00 · 4780 阅读 · 0 评论 -
【面试记录】字节社招面试记录
【面试记录】2021-8月字节社招面试记录文章目录【面试记录】2021-8月字节社招面试记录ContentReferenceContent502 及解决方案https 和 http 区别cookiescss 实现一个秒针旋转动画<body> <div class="stage"> <div class="pointer"></div> </div> <style>原创 2021-08-18 00:33:12 · 689 阅读 · 0 评论 -
【JavaScript】实现简单的图片处理
目录图片在前端的存储形式前端上传图片图片处理灰度操作负片效果压缩膨胀马赛克字符画参考资料图片在前端的存储形式图片以Uint8ClampedArray的格式存储. 这是一个一维数组,每四位组成一个像素点,分别代表rgba四个参数,每个参数的取值范围都是0~2^8-1(0~255).// 这是一个全黑色,透明的像素点const pixel = new Uint8ClampedArrray([0,0,0,255]);一张图片就是由宽 x 高个这..原创 2021-08-08 03:00:40 · 4175 阅读 · 7 评论 -
【项目组织】前端项目`Api`模块的目录结构建设
前端项目Api模块的目录结构建设文章目录前端项目`Api`模块的目录结构建设`model``route``method`按模块建目录，内部目录结构如下:x-module ├── model │ └── xModel.ts |── route | └── xRoute.ts ├── xMethod.ts假如系统有user 和 menu 两大模块，大概如下：user ├── model │ └── user.ts | └── menu.ts |─原创 2021-07-14 10:54:37 · 598 阅读 · 0 评论 -
【JavaScript】 迭代协议
JavaScript迭代协议文章目录JavaScript迭代协议开场 | Question迭代协议 | Iteration Protocol可迭代协议 | Iterable符号 | Symbol迭代器协议 | Iterator生成器 | Generator常用场景 | Context`for-of`循环 | `for-of` Iteration解构赋值 | Destructuring Assignment扩展运算符 | Spread Operator其他 | The Others总结 | Summary回原创 2021-07-13 11:41:55 · 236 阅读 · 0 评论 -
【JavaScript】ES5和ES6面向对象
前言（Preface）Object Oriented 的一个标志就是 Class （类），通过类可以创建任意多个具有相同属性和方法的对象。然而，JavaScript中只有对象，没有类。 ECMA-262 把对象定义成：无序的属性集合。由于许多开发者都喜欢并习惯于面向类的软件设计，所以JavaScript中充斥着各种模拟类的实现，以致 ES6 专门新增了 class 语法使类的概念在JavaScript中落地。本文主要整理了在ES5和ES6中模拟类的不同实现方式，分析二者之间的联系，...原创 2020-09-09 16:51:37 · 349 阅读 · 0 评论 -
【JavaScript】JavaScript-MDN-tutorials-Advanced
MDN上的JavaScript教程——高级篇文章目录`MDN`上的JavaScript教程——高级篇继承与原型链（Inheritance and the prototype chain）拓展原型链的4种方式（Extending prototype chain）严格模式（Strict Mode）调用严格模式（Invoking strict mode）严格模式中的变化（Changes in strict mode）将过时错误转成异常（Converting mistakes into errors）简化变量的使原创 2020-09-04 15:11:05 · 282 阅读 · 0 评论 -
【JavaScript】编码风格指南
JavaScript Code Style Guide文章目录JavaScript Code Style Guide空格（Spacing）缩进符（Soft Tab）空白（Whitespace）符号（Symbols）文件（Source File）注释（Comments）单行注释（Single line）多行注释（Multiline）文档注释（Document）命名习惯（Naming Conventions）变量（Variable）函数（Function）数组（Array）代码风格一致（Code Style原创 2020-07-14 10:43:59 · 484 阅读 · 0 评论 -
【JavaScript】key、code、keycode
键盘码keycode不再被赞成使用了，请使用code键名使用主键盘回车小键盘回车event.keycode不被赞成1313event.key按键的描述EnterEnterevent.code按键唯一识别码EnterNumpadEnter键盘码查看网站 http://keycode.info/...原创 2020-06-04 19:03:56 · 1285 阅读 · 0 评论 -
【JavaScript】关于无数据该不该当做异常の思考
该不该把无数据当做一个异常方式一：ctx.body = { "status":1, "data":{}, "message":"未查询到数据！"}方式二：ctx.body = { "status":0, "data":{ "total": 0, "dataList": [] }, "message":"未查询到数据！"}我认为无数据不值得单独作为异常提出。异常，是需要通过弹出式的对话框Dialogue、显式的的消息通知Toast等进行用户提示的原创 2020-05-14 15:21:59 · 205 阅读 · 0 评论 -
【JavaScript】关于前端收到字段为nullの思考
关于前端收到字段为null的思考null、undefined：都应当被认为是该字段无意义，前端不需要，统一处理成不传数组字段：应当返回[]字符串字段：返回""数字字段: 0或者一个特定的数字？现在会出现一种奇怪的现象：字段的类型是string， 但是返回的值是null那就要思考，null到底是一个独立的类型还是“所有类型中代表空的标志”，string里有null，number里也...原创 2020-04-23 16:40:01 · 684 阅读 · 0 评论 -
【JavaScript】分享一个定时到网站上签到/签退的JS脚本
之前介绍过使用temperMonkey屏蔽优快云广告的方法，主要就是要针对性地分析网站结构，然后用代码去改变或者操作DOM。今天也一样，我们需要观察网页结构，找到我们要操作的按钮，触发他的click事件就可以了。下面分享一个定时签到或者签退的程序：(function() { 'use strict'; // user setting const SIGN_IN_TIME =...原创 2020-04-21 17:28:20 · 3513 阅读 · 3 评论 -
【JavaScript】函数参数は一个对象の部分属性てす
情景描述：// 对象a拥有多个属性var a = {b: 1, c: true, d: ‘string’, e: 1587226319818};// 函数console需要其中的b和e属性function console(b, e){ console.log(b, e);}// 函数log需要其中的c和d属性function log(c,d){ console....原创 2020-04-19 00:23:10 · 140 阅读 · 0 评论 -
【一句话博客】SyntaxError: Failed to execute ‘querySelector’ on ‘Document’: “xxx” is not a valid selector."
出现了报错SyntaxError: Failed to execute ‘querySelector’ on ‘Document’: “xxx” is not a valid selector."原因我使用了guid做div的id，出现了数字为首的id形式，而querySelector不识别数字开头的命名，所以报错。解决办法改用getElementById()即可...原创 2020-04-14 00:26:57 · 17341 阅读 · 0 评论 -
【JavaScript】判断整数
JavaScript判断整数1. Number.isInteger()Number.isInteger([]); // false几乎可以完美的判断类型2. Math.floor/ceil/round()function isInteger(obj) { return Math.floor(obj) === obj;}3. parseInt()function isInteg...原创 2020-04-03 16:17:32 · 196 阅读 · 0 评论 -
【JavaScript】常用表单验证规则
表单验证规则实现参考参考了jQuery.validators.js的实现，使用“n~m”来标记范围规则 - Rules使用 - Usagevalidators.email("12345@mail.com"); // truevalidators.positive()("12345"); // truevalidators.integer("1~2")("123"); // 输入范...原创 2020-04-03 15:11:03 · 1419 阅读 · 0 评论 -
【JavaScript】Eslint规则学习记录
Eslint 规则0. 前言lint工具是检测语法，规范代码的工具。JavaScript语言主要有JsLint，JSHint和Eslint三种。机遇让Eslint成为了最受欢迎的lint工具，详见参考链接Eslint全面指南。1. 配置方式一般有两种方式，一是package.json风格；二是独立的.eslintrc.js文件rc文件都是配置文件，rc是 run control 的缩写...原创 2020-03-27 14:02:03 · 254 阅读 · 0 评论 -
【Jest】Jest学习记录
Jest学习记录一、安装npm isntall jest --global # 全局npm install --save-dev jest # 项目二、概念1. MatcherstoBe, toEqual, nottest('two plus two is four', () => { expect(2 + 2).toBe(4);});toBe 使用Object...原创 2020-03-24 18:57:06 · 238 阅读 · 0 评论 -
【jsDoc】jsDoc学习记录
jsDoc学习记录一、安装npm install -g jsdoc # 全局安装二、书写规范@abstract 抽象方法 @virtual@access 访问权限 private protected package public/** constructor */function Thingy() { /** @access private */ var foo...原创 2020-03-22 02:07:35 · 299 阅读 · 0 评论 -
【canvas】JS五子棋UI与AI
注：本文思路源于幕客网JS实现人机大战五子棋0. 效果1. 代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=...原创 2020-02-16 15:29:32 · 321 阅读 · 0 评论 -
【JavaScript】字符串处理の压缩字符串
分享一道字符串编程题目：1. 解决function abbr(str){ str = str + "*"; // 添加一个结尾标志，不同于输入字符串中的任何值即可 let cur = str[0]; // 当前 let pre = cur; // 前一个 let res = ""; // 最终结果 let pad = ""; // 每次增加的 let num = 1; // 计数...原创 2019-11-17 21:22:33 · 1309 阅读 · 1 评论 -
【JavaScript】贪吃蛇
在线试玩：GITHUB<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt...原创 2019-11-13 16:50:13 · 167 阅读 · 1 评论 -
【JavaScript】找出数组中最大值的索引
对于简单数组，我们直接使用indexOf最为简洁美观。var a = [1,2,3,4,5,6,7,7,6,5,4,3,2,1];// for循环var indexOfMax = 0;var tempMax = a[0];for(let i = 0; i < a.length; i ++){ if(a[i] > tempMax){ tempMax...原创 2019-05-20 15:30:22 · 11386 阅读 · 2 评论 -
字节跳动秋招2020.8.11笔试记录
字节跳动2020秋招8月11笔试记录1. 第一题关于闹钟的(80%)// 1. 可能有多个闹钟可以及时到达教室// 2. 要在所有闹钟中找一个最优解// 时间描述成绝对时间: A * 60 + B 分钟function getTime(arr) { return arr[0] * 60 + arr[1];}// 输入部分var N = parseInt(readline...原创 2019-08-12 17:03:58 · 1117 阅读 · 0 评论 -
【一句话博客】JavaScriptの纯函数
纯函数是指结果只依赖于传入参数并且不会产生副作用的函数。JavaScript中纯函数三个原则：只使用内部变量，包括传入参数。不产生副作用side effects，不改变外部变量。相同输入，永远相同输出same input -> sameoutput。纯函数的优势：容易测试testable相同输入相同输出，所以可以缓存结果cacheable自我记录self-docum...原创 2019-08-20 09:12:34 · 131 阅读 · 0 评论 -
【LeetCode】力扣代码记录
LeetCode记录leetcode简单题目整理1. 两数之和利用obj或map存储，查找的时候O(1)而不必像数组一样遍历一遍才能查找O(n)// 两遍独立的for循环，O(n)var twoSum = function(nums, target) { var obj = {} var len = nums.length for(let i = 0; i ...原创 2019-08-23 17:06:50 · 1692 阅读 · 0 评论 -
【JavaScript】浅复制与深拷贝
浅复制与深复制1. 浅复制浅复制最大的特点就是对于对象，只复制对象引用一. Object.assign()，对象融合var a = { prop: 'haha', hello: 'Hi world', obj: { inner: 'yes' }}var b = Object.assign({}, a);a.obj === b.obj; // true二. spre...原创 2019-08-14 17:24:30 · 133 阅读 · 0 评论 -
【JavaScript】正则表达式相关的API
JavaScript里正则常用API1. testreg.test(str); // 返回是否包含正则 true/falsevar str = "abcdefghijkl3mnop2qts";/\d/.test(str); // true2. matchstr.match(reg); // 一般正则表达式加g，会返回包含所有匹配项的数组var str = "abcdefghij...原创 2019-08-07 21:10:45 · 1084 阅读 · 0 评论 -
【JavaScript】遍历对象属性
遍历对象属性这篇博客的灵感来自于牛客网的一道题：属性遍历题目描述：找出对象 obj 不在原型链上的属性(注意这题测试例子的冒号后面也有一个空格~)1、返回数组，格式为 key: value2、结果数组不要求顺序1. for infor-in会漏掉不可枚举属性;for-in会遍历原型链上的属性，需要配合hasOwnProperty过滤function iterate(ob...原创 2019-08-07 20:35:35 · 224 阅读 · 1 评论 -
【JavaScript】Fibonacci数列
斐波那契数列のJavaScript实现1. 递归function Fibonacci(n){ if(n < 2) return n; return Fibonacci(n-1) + Fibonacci(n-2);}2. 尾递归function Fibonacci(n){ return tailRecursive(n, 0, 1); function tail...原创 2019-08-16 17:14:54 · 116 阅读 · 0 评论 -
【JavaScript】顺时针打印矩阵的问题
顺时针打印矩阵のJavaScript实现这道题是牛客网上剑指offer的一道题目原题链接1. 递归这个实现思路，重点在于分析log函数内部圈数n与矩阵坐标之间的关系，比较复杂只能打印n*n的方阵function printMatrix(matrix) { // write code here var result = []; // 递归 var o...原创 2019-08-18 14:10:46 · 380 阅读 · 0 评论 -
【JavaScript】解析URL
JavaScript解析url，返回参数对象1. split()split()的参数可以是正则表达式var url = "www.meituan.com/waimai?name=zpj&counts=2&time=1506";url.split(/[?&]/g) // 使用?&分割 .slice(1) // 去掉非参数信息 .map( d =>...原创 2019-08-28 17:30:23 · 213 阅读 · 0 评论 -
【面试题】按照深度降维数组
按照深度降维数组刚参加完阿里2020前端第一次笔试，这是其中的一道题目。由于是问答题，当时写完没法测，出来测试了一下没问题，故记录一下。var a = [1,[2,3]];a.reduceDepth(); // [1,2,3]var a = [1,2,[3,4,[5,6],7]];a.reduceDepth(); // [1,2,3,4,[5,6],7]a.reduceDepth(...原创 2019-08-28 20:12:16 · 156 阅读 · 0 评论 -
【JavaScript】关于作用域
这是一篇阅读笔记，原文在此1. 作用域内部原理var a = 2;编译分词tokenizing词法单元流数组[ "var": "keyword", "a": "identifier", "=": "assignment", "2": "integer", ";": "eos" // (end of statement)]解析parsing抽象语法树AST...原创 2019-09-02 19:31:57 · 130 阅读 · 0 评论 -
【JavaScript】this指向机制
this指向问题this机制：this绑定只取决于函数调用的方式，大的来说有三种：函数调用：window/undefined方法调用：调用对象构造函数：返回的实例对象此外，注意两点：利用call、apply、bind可以改变this指向箭头函数的this继承外层函数1. this机制全局作用域中，window函数调用（普通调用、IIFE），window方法调用，...原创 2019-09-02 21:39:06 · 194 阅读 · 0 评论 -
【JavaScript】关于Infinity
目录&快速连接关于`Infinity`1. 满足数学性质2. 用来区分正负零关于Infinity在Number下有静态变量Number.POSITIVE_INFINITY1. 满足数学性质Infinity === Infinity; // trueInfinity + 1 === Infinity; // trueInfinity * 2 === Infinity; /...原创 2019-09-15 12:39:45 · 976 阅读 · 0 评论 -
【面试题】JavaScript不要用name作全局变量名
这是2020海康威视的一道笔试题var obj = { name: 'zpj', sayHello: ()=>'Hello ' + this.name}obj.sayHello(); // ？分析：this指向取决于函数的调用方式。如果是function函数，当作方法调用打印的应该是’zpj’var obj = { name: 'zpj', sayHello: fu...原创 2019-09-15 15:11:55 · 343 阅读 · 0 评论