javascript
文章平均质量分 65
程序不了猿
一个还在成长的程序员,分享自己学到的点滴经验。
展开
-
探索埋点基本技术实现
1.为什么要探索这纯属是我个人意愿,不想不明不白的使用一个东西,不求完全掌握,但想大概知道如何实现。刚进亚运项目小组,接到埋点任务,通过组内学习基本上明白了埋点API的使用,半懂半蒙的完成了埋点任务。近期手上任务都提测了,闲下来想去探索探索我心中的几个疑问:埋点是否会影响性能?埋点是Ajax请求吗?背后实现思想是什么?2.如何探索?本人没有技巧,混迹各种技术社区,俗称水群,总有大佬会说出一些你不知道的web规范、或者说新规范。其实是自己懒,不能想各种大佬一样每周都会去看看web mdn。原创 2022-04-30 11:04:33 · 847 阅读 · 0 评论 -
canvas实现图像裁剪
1.技术背景随着都市类程序开发业务推进,在各类活动、个人信息等模块逐渐依赖图像裁剪、上传等功能,那么如何实现图像缩放、裁剪就成了前端工程师们关注优化的重点。2.应用技术本次使用的技术主要是依赖canvas,又叫画布,是H5新增内容,可以使用js脚本在其中绘制图像的元素。可以完成图片处理、动画渲染、图表渲染等操作。最近用uni-app的推流组件做了个图片裁切、上传的组件,拍照、选择照片完成后还需要对图片进行裁切,才能真正使用。3.处理思路使用两个canvas分别为操作canvas、目标canva原创 2022-04-24 17:47:04 · 4885 阅读 · 0 评论 -
怎么实现一个简单的模板引擎及其原理分析
怎么实现一个简单的模板引擎及其原理分析首先最近读者在温顾模板引擎相关的知识点所以简单给写一些总结和分享一下自己写的一个极度简单的模板引擎,同时也是通过这个让大家理解模板引擎的实现原理。模板引擎的作用模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档。模板引擎的原理模板引擎的实现方式有很多,最简单的是“置换型”模板引擎,这类模板引擎只是将指定模板内容(字符串)中的特定标记(子字符串)替原创 2021-08-18 15:32:51 · 480 阅读 · 3 评论 -
【leecode 剑指offer】 1~n整数中1出现的次数
题目输入一个整数 n ,求1~n这n个整数的十进制表示中1出现的次数。例如,输入12,1~12这些整数中包含1 的数字有1、10、11和12,1一共出现了5次。示例示例1输入:n = 12输出:5示例2输入:n = 13输出:6解题思路将 11 ~ nn 的个位、十位、百位、…的 11 出现次数相加,即为 11 出现的总次数。这边可以使用排列组合的方法解决,统计所有1出现的次数,我们可以吧所有整数理解为行李箱上的密码锁,先固定某一位上的数据控制为1,然后归纳所有数字的原创 2021-06-05 16:30:09 · 452 阅读 · 0 评论 -
【leecode 剑指offer】连接连续二进制数字
连接连续二进制数字给你一个整数 n ,请你将 1 到 n 的二进制表示连接起来,并返回连接结果对应的 十进制 数字对 109 + 7 取余的结果。解题思路对于第n个数和前n-1个数连接之后的数值sum,将n转成二进制字符串,假定长度为k,sum需要整体左移k个长度,就是乘以Math.pow(2,k),所以一次遍历就完成了,注意每次取余即可。代码展示/** * @param {number} n * @return {number} */var concatenatedBinary = f原创 2021-03-25 10:12:02 · 200 阅读 · 0 评论 -
【leecode 剑指offer】复杂链表的深拷贝
复杂链表的深拷贝请实现 copyRandomList 函数,复制一个复杂链表。在复杂链表中,每个节点除了有一个 next 指针指向下一个节点,还有一个 random 指针指向链表中的任意节点或者 null。解析用一个哈希表表示映射关系:键是原节点,值是复制的节点。整体算法流程是:第一次遍历,复制每个节点和 next 指针,并且保存“原节点-复制节点”的映射关系第二次遍历,通过哈希表获得节点对应的复制节点,更新 random 指针代码实现/** * // Definition for原创 2021-03-18 10:41:55 · 126 阅读 · 0 评论 -
【leecode 剑指offer】二叉树中和为某一值的路径
题目二叉树中和为某一值的路径描述输入一棵二叉树和一个整数,打印出二叉树中节点值的和为输入整数的所有路径。从树的根节点开始往下一直到叶节点所经过的节点形成一条路径。思路本问题是典型的二叉树方案搜索问题,使用回溯法解决,其包含 先序遍历 + 路径记录 两部分先序遍历: 按照 “根、左、右” 的顺序,遍历树的所有节点。路径记录: 在先序遍历中,记录从根节点到当前节点的路径。当路径为 ① 根节点到叶节点形成的路径 且 ② 各节点值的和等于目标值 sum时,将此路径加入结果列表。算法流程:原创 2021-02-25 16:57:34 · 179 阅读 · 2 评论 -
【node】异步编程之异步函数promise、async、await
异步编程之异步函数一、简介node.js是一个Javascript运行环境(runtime environment),实质是对Chrome V8引擎进行了封装;node.js不是一个 JavaScript 框架,也不是浏览器端的库,node.js是一个让 JavaScript 运行在服务端的开发平台,它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。1.1 特点异步IO事件与回调函数单线程(javascript语言的特点)跨平台1原创 2020-12-26 15:51:58 · 860 阅读 · 0 评论 -
【leecode 剑指offer】二叉搜索树的后序遍历序列
二叉搜索树的后序遍历序列题目输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历结果。如果是则返回 true,否则返回 false。假设输入的数组的任意两个数字都互不相同。参考以下这颗二叉搜索树:解题思路后续遍历是左右根。因此postorder的顺序是左子树+右子树+根。二叉搜索树的性质是,左子树都比根节点小,右子树都比根节点大。并且每个节点(除叶子节点)都符合这个情况。因此检查左子树是否都小于根节点,右子树是否都大于根节点。并递归检查每个子树。都符合返回true算法展示/**原创 2020-12-26 14:35:01 · 120 阅读 · 0 评论 -
【node】不使用其他库实现简易访问静态资源
不使用其他库实现简易访问静态资源代码示例const http = require('http');const url = require('url');const path = require('path')const fs = require('fs')const app = http.createServer();app.on('request',(req,res)=>{ let pathname = url.parse(req.url).pathname; le原创 2020-12-24 15:45:41 · 111 阅读 · 0 评论 -
【node】利用Promise解决回调地狱问题
利用Promise解决回调地狱问题代码展示:const fs = require('fs');// 创建promise对象// let promise = new Promise((reslove,reject)=>{// fs.readFile('./1.txt','utf-8',(err,result)=>{// if(err!=null){// // 传给外部then方法// reject(err);原创 2020-12-25 09:51:59 · 136 阅读 · 0 评论 -
【leecode 剑指offer】从上到下打印二叉树
从上到下打印二叉树题目从上到下打印出二叉树的每个节点,同一层的节点按照从左到右的顺序打印。示例例如:给定二叉树: [3,9,20,null,null,15,7]返回[3,9,20,15,7]思路BFS层序遍历需要使用一个队列来存储有用的节点。整体的思路如下:子节点顺序:自左向右将 root 放入队首取出队首元素,将 val 放入返回的数组中检查队首元素的子节点,若不为空,则将子节点放入队列检查队列是否为空,为空,结束并返回数组;不为空,回到第二步代码实现/**原创 2020-12-13 15:56:52 · 79 阅读 · 0 评论 -
【leecode 剑指offer】 从上到下打印二叉树 II
从上到下打印二叉树 II一、题目从上到下按层打印二叉树,同一层的节点按从左到右的顺序打印,每一层打印到一行。二、示例例如:给定二叉树: [3,9,20,null,null,15,7],返回其层次遍历结果:提示:节点总数 <= 1000三、思路I. 按层打印: 题目要求的二叉树的 从上至下 打印(即按层打印),又称为二叉树的 广度优先搜索(BFS)。BFS 通常借助 队列 的先入先出特性来实现。II. 每层打印到一行: 将本层全部节点打印到一行,并将下一层全部节点加入队列,以此原创 2020-12-19 18:27:56 · 117 阅读 · 1 评论 -
【Ajax】 ajax的函数封装 json
ajax的函数封装目的当页面数据需要更新时,需要频繁使用Ajax通讯时,不进行ajax函数封装的话,需要针对不同请求追加不同的ajax处理代码,会产生代码冗余,所以ajax函数封装旨在减少代码冗余。基本思路将ajax请求所需要的各类参数以对象形式传入封装函数请求参数要考虑的问题: 1.请求参数的位置问题 将请求参数传递到ajax函数内部,在函数内部根据请求方式的不同将请求参数放置在不同的位置 get 放在请求地址的后面 p原创 2020-12-11 17:19:03 · 349 阅读 · 1 评论 -
【leecode 剑指offer】 判断栈的压入、弹出序列是否对应
判断栈的压入、弹出序列是否对应题目输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否为该栈的弹出顺序。假设压入栈的所有数字均不相等。例如,序列 {1,2,3,4,5} 是某栈的压栈序列,序列 {4,5,3,2,1} 是该压栈序列对应的一个弹出序列,但 {4,3,5,1,2} 就不可能是该压栈序列的弹出序列。示例1输入:pushed = [1,2,3,4,5], popped = [4,5,3,2,1]输出:true解释:我们可以按以下顺序执行:push(1), push(2)原创 2020-12-11 16:19:59 · 106 阅读 · 1 评论 -
【leecode 剑指offer】 顺时针打印矩阵
[leecode 剑指offer] 顺时针打印矩阵题目输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字。示例输入:matrix = [[1,2,3],[4,5,6],[7,8,9]]输出:[1,2,3,6,9,8,7,4,5]输入:matrix = [[1,2,3,4],[5,6,7,8],[9,10,11,12]]输出:[1,2,3,4,8,12,11,10,9,5,6,7]思路:按层模拟可以将矩阵看成若干层,首先打印最外层的元素,其次打印次外层的元素,直到打印最内原创 2020-12-08 08:13:31 · 116 阅读 · 2 评论 -
CSS3造轮子之3D轮播图
CSS3造轮子之3D轮播图源码这个轮播图组件基于3D构建的轮播图,3D最关键在于透视perspective和transformstyle这两个样式属性以及三维建模的基本认知。3D建模的最关键要理解的是他的坐标系:1.原点:原点是建立在父盒子元素的中心,和2D不同,2D的原点在元素的左上角;2.x轴:x轴证方向为水平向右3.Y轴:Y轴正方向为竖直向下4.Z轴:Z轴正方向为垂直屏幕向外,即屏幕向眼睛的方向<!DOCTYPE html><html lang="en">原创 2020-12-07 14:07:42 · 829 阅读 · 2 评论 -
深入理解JS中的prototype、_proto_和constructor的三角关系
深入理解JS中的prototype、_proto_和constructor的三角关系1.前言 作为一名前端工程师,必须搞懂JS中的prototype、__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞懂它们。这里说明一点,__proto__属性的两边是各由两个下划线构成(这里为了方便大家看清,在两下划线之间加入了一个空格:_ _proto_ _,读作“du原创 2020-11-21 09:27:14 · 221 阅读 · 1 评论 -
【jquery】jquery中事件委托的原理以及使用
事件委托的原理事件委托(委派)是利用JavaScript的事件冒泡机制,指定一个事件处理程序,就可以管理某一类型的所有事件。通俗的来讲(此处引用前端大牛的例子),就是: 有三个同事预计会在周一收到快递。为签收快递,有两种办法:一是三个人在公司门口等快递;二是委托给前台MM代为签收。现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递)。前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款。这种方案还有一个优势,那就是即使公司里来了新员工(不管原创 2020-11-03 08:49:25 · 1403 阅读 · 0 评论 -
fastclick 解决移动端click事件延迟300ms和点击穿透问题
一、移动端click点击事件300ms延迟介绍在正常情况下,如果不进行特殊处理,移动端在触发点击事件时,会有300ms的延迟。换句话说,当我们在点击移动端页面后不会立即做出反应,而是会等待300ms才会触发click事件。在移动web兴起初期,用户对300ms的延迟没有太大的感觉,但随着用户对交互体验的要求的提高,如今,移动端的300ms延迟严重影响了用户体验。300ms延迟由来07年,苹果公司发布首款Iphone前夕,遇到一个问题:当时的网站都是为大屏设计,手机屏幕太小无法正常浏览,于是苹果工程师原创 2020-10-19 10:59:34 · 16424 阅读 · 13 评论 -
vue中lodash的简介、安装及_.cloneDeep(value)深拷贝的使用
一、loadsh简介Lodash是一个意在提高开发者效率,提高JS原生方法性能的JS库。简单的说就是,很多方法lodash已经帮你写好了,直接调用就行,不用自己费尽心思去写了,而且可以统一方法的一致性。Lodash使用了一个简单的 _ 符号,就像Jquery的 $ 一样,十分简洁。二、如何安装loadsh在vue中安装1.使用vue-cli可视化工具安装插件:2.使用npm工具安装:npm i -save lodash \\全局安装这两种安装方法选择其一即可,安装完成后,几个导入使用。。。原创 2020-07-21 18:20:33 · 12500 阅读 · 1 评论 -
this.$nextTick (callback)方法的分析与使用
$nextTick 方法简介$nextTick(callback) 方法的作用,就是当页面上元素被重新渲染(即DOM更新)之后,才会执行回调函数中的代码$nextTick 方法使用举例<!-- 此案例是通过 v-if 判断 scope.row.inputVisible(布尔值)来控制显示input框还是button按钮 --> <template slot-scope="scope"> <!-- 输入的文本框 -->原创 2020-07-19 17:29:20 · 767 阅读 · 1 评论 -
es6中‘...’扩展运算符的使用
es6中‘…’扩展运算符的使用'…'在数组中的扩展运算符复制数组let arr = [1, 2], arr1 = [...arr];console.log(arr1); // [1, 2] // 数组含空位let arr2 = [2, , 3], arr3 = [...arr2];console.log(arr3); // [2, undefined, 3]2.合并数组console.log([...[1, 2],...[3, 4]]); // [1, 2, 3,原创 2020-07-12 10:22:48 · 322 阅读 · 1 评论