![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
MonkeySoft
这个作者很懒,什么都没留下…
展开
-
这些鲜为人知的前端冷知识,你都GET了吗?
背景最近公司项目不多,比较清闲,划水摸鱼混迹于各大技术博客平台,瞬间又GET了好多前端技能,一些属于技巧,一些则是闻所未闻的冷知识,一时间还消化不过来,不由的发出一声感叹!前端可真是博大精深于是突发奇想,现分类整理出来分享给大家,也补充了一些平时的积累和扩展了一些内容,俗话说,独乐乐不如众乐乐,大家一起来接受前端的洗礼吧!!!论被玩坏了的前端HTML篇浏览器地址栏运行JavaScript代码这个很多人应该还是知道的,在浏览器地址栏可以直接运行JavaScript代码,做法是以javas原创 2020-12-02 13:39:23 · 2063 阅读 · 14 评论 -
h5页面在浏览器上好好的,到手机上熄火了又看不到报错信息怎么办?
背景最近小编接了一个新需求,用h5开发页面,通过webview嵌入原生APP中,自己在浏览器上开发爽歪歪,什么信息都能看到,可是一嵌入原生app中,瞬间就熄火了,啥也看不到了,不知道为什么,反正就是页面点不动了。这可把我急坏了,不知道有没有小伙伴有和我一样的困扰,我们在开发手机版网页的时候,常常会出现下面的情景:(1) 开发时,在自己电脑上运行得好好的,在手机上打开就挂了,但是手机上又看不到error log;(2) 上线后,某用户表示页面失灵,但我们自己又重现不出来,看不到用户侧的出错信息。如原创 2020-09-19 11:18:03 · 819 阅读 · 0 评论 -
web网页人脸识别tracking.js
what?你没有看错,强大的JavaScript也可以实现人脸识别功能。小编精心整理了一个人脸识别的JavaScript库(tracking.js),通过这篇文章,你可以了解到如何在网页中实现一个人脸识别功能。tracking.jsTracking.js 是一个独立的JavaScript库,用于跟踪从相机实时收到的数据。跟踪的数据既可以是颜色,也可以是人,也就是说我们可以通过检测到某特定颜色,或者检测一个人体/脸的出现与移动,来触发JavaScript 事件。它是非常易于使用的API,具有数个方法和事件原创 2020-08-18 09:22:18 · 2737 阅读 · 3 评论 -
项目实战之跨域处理~一文搞定所有跨域需求
什么是跨域?跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制。什么是同源策略?同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,它是由Netscape提出的一个著名的安全策略。同源策略是浏览器的行为,是为了保护本地数据不被JavaScript代码获取回来的数据污染,因此拦截的是客户端发出的请求回来的数据接收,即请求发送了,服务器响应了,但是无法被浏览器接收。其主要限制以下几个方面:C原创 2020-07-31 13:27:47 · 332 阅读 · 0 评论 -
项目实战之接口处理篇~一文搞定接口请求
在项目开发中,接口请求是必不可少的,为了方便使用和维护,大家都会将接口请求的方法二次封装。下面小编将我项目中接口封装使用的方法分享给大家,希望可以帮到大家。喜欢的给个三连击再走哟。目前前端常用的请求方式主要有两种:axios、Fetch。下面小编就这两种给大家详细的介绍介绍。axiosaxios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范。特点从浏览器中创建 XMLHttpReq原创 2020-07-24 11:06:00 · 602 阅读 · 0 评论 -
项目实战之本地存储篇
在前端项目开发中,前端的本地存储是必不可少的,今天小编就前端的本地存储在项目中的使用详细的介绍一下。前端本地存储主要有:cookielocalStoragesessionStoragewebSQL/indexDB接下来就这三种前端常用的存储方式进行介绍。cookiecookie就是存储在客户端的一小段文本,大小不能超过4kb,在请求接口的时候,cookie会被请求携带着,进而被服务器所读取使用。打开浏览器控制台,F12>>Application>>Cookies,原创 2020-07-22 11:56:26 · 375 阅读 · 0 评论 -
前端性能优化总结
gzip压缩gzip压缩效率很高,可以达到70%的压缩率//npm i -D compression-webpack-plugin 安装插件依赖configureWebpack: config => { const CompressionPlugin = require('compression-webpack-plugin') config.plugins.push(new CompressionPlugin())}去掉console.log生产环境中,不需要打印日志。通过对原创 2020-07-10 22:08:52 · 124 阅读 · 0 评论 -
Event Loop我知道,宏任务微任务是什么鬼?
在介绍宏任务和微任务之前,先抛出一个问题。相信大家在面试的时候,会遇到这样的相似的问题:setTimeout(function(){console.log('1')});new Promise(function(resolve){ console.log('2'); resolve();}).then(function(){console.log('3')});console.log('4');请说出控制台打印的数据,很多小伙伴经过深思熟虑之后,会自信的说出原创 2020-07-09 10:53:12 · 193 阅读 · 0 评论 -
深入探讨深拷贝浅拷贝两兄弟
基本数据类型在深入探讨深拷贝和浅拷贝之前,我们需要先了解一下Javascript得数据类型。众所周知JavaScript得数据类型,分为基本数据类型和引用数据类型。那么这两种类型到底有什么区别?接下来我们详细的谈谈。导图:js内存接下来我们还需要了解一个重要的知识点----js中的内存js中的内存为两种-----栈和堆。基本数据类型存储基本数据类型的值存在栈里面,并且值与值之间独立存在,修改一个值,不会影响其他的值。举个列子:把a的值传给b下面解释为什么当a的值变为124时,b为什么原创 2020-07-03 15:03:49 · 119 阅读 · 0 评论 -
React、Vue添加全局的请求进度条(nprogress)
全局的请求进度条,我们可以使用nprogress来实现,效果如下:首先需要安装插件:npm i nprogress -S然后使用的时候主要有两种方式,第一种是切换页面的时候,第二种则是请求接口的时候。切换页面可以在入口文件添加如下代码:import NProgress from 'nprogress' // 引入nprogress插件import 'nprogress/nprogress.css' // 这个nprogress样式必须引入router.before..原创 2020-06-11 14:55:44 · 901 阅读 · 0 评论 -
react后台管理系统路由方案及react-router原理解析
最近做了一个后台管理系统主体框架是基于React进行开发的,因此系统的路由管理,选用了react-router(4.3.1)插件进行路由页面的管理配置。实现原理剖析1、hash的方式 以 hash 形式(也可以使用 History API 来处理)为例,当 url 的 hash 发生变化时,触发 hashchange 注册的回调,回调中去进行不同的操作,进行不同的内容的展示function Router() { this.routes = {}; this.curren原创 2020-06-11 14:53:42 · 1162 阅读 · 0 评论 -
函数节流和去抖的用法和区别
我们都知道频繁触发执行一段js逻辑代码对性能会有很大的影响,尤其是在做一些效果实现方面,或者逻辑中需要进行后端请求,更是会导致卡顿,效果失效等结果,所以在处理类似的情况时,可以考虑使用函数节流和函数去抖来解决,至于具体使用哪一种方式,根据实际情况分析定夺,先来讲解一些这两者的概念,以下是我个人的一些看法,若有不足,希望大家可以提出.函数节流在频繁触发的情况下,需要执行的逻辑只有执行完之后,...原创 2019-02-14 10:15:28 · 445 阅读 · 0 评论 -
原型链继承
【寒暄】好久没有更新博客了,说来话长,因为我下定决心要从一个后台程序员转为Front End,其间走过了一段漫长而艰辛的时光,今天跟大家分享下自己对javascript中原型链继承的理解。总的说来,js中的常用的继承方式可以分为两种,一种是原型链式继承,这也是本文要谈的重点;另外一种是借用构造函数继承,...转载 2018-05-15 09:44:15 · 219 阅读 · 0 评论 -
网页中分页的数据查询
有些网页中通常会有一个分页的样式,点击上一页或者下一页或者是具体的某一页的页码,页面中可以显示具体的从数据库查询的对应的数据。 以下介绍两种分页查询的方法。 第一种也是最常用的,就是通过数据库的limit来指定查找某个位置的几条数据。limit语法格式为: limit[offset] rows ...原创 2018-05-08 10:13:06 · 927 阅读 · 1 评论 -
JavaScript中用画布canvans做贪吃蛇
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>贪吃蛇</title> <style type="text/css"> *原创 2018-05-07 20:47:51 · 741 阅读 · 0 评论 -
JavaScript产生随机颜色
//获取rgb类型的颜色 IE7不支持 function randomColor(){ var r = Math.floor(Math.random()*256); var g = Math.floor(Math.random()*256); var b = Math.floor(Math....原创 2018-04-26 20:04:34 · 166 阅读 · 0 评论 -
粗谈对ajax的理解
ajax: Asynchronous JavaScript and XML 异步JavaScript和XML技术 Asynchronous: JavaScript:XMLHttpRequest XML:实现数据存储和交换 ----- JSON 特点: AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。 不重新加载整个页面的情况下实现页面局部内容的刷新(无刷新技术-...原创 2018-05-03 20:40:16 · 221 阅读 · 0 评论 -
封装ajax函数
/* *封装ajax函数* @param options * options = {* type : "get|post", // 请求方式,默认为 get* url : "", // 请求服务器资源url* data : {username:"xxx", password:""}, // 向服务器传递的数据* dataType : "text|json", // 预期从服务...原创 2018-05-03 20:30:38 · 250 阅读 · 0 评论 -
JavaScript做简单的购物车效果(增、删、改、查、克隆)
比如有时候遇到下面这种情况,点击加入购物车,然后在上方的购物车中动态的添加商品以及商品的信息,我们就可以通过JavaScript实现简单的这些操作。首先我们需要在html文档中,通过css对页面的布局做一些简单的设置。并创建两个模板,其display属性设为隐藏。后面再通过克隆的方法往指定的位置添加元素。大致css样式如下:.buy { width: 200px; ...原创 2018-04-14 14:06:31 · 7298 阅读 · 1 评论 -
查询字符串转对象
接下来给大家介绍一个封装的函数,可以通过这个函数将一个url地址中的查询字符串提取出来,并且转换为一个对象。总所周知,url地址的组成为: 协议://域名:端口/资源路径?查询字符串#hash 通过这个我们可以发现,查询字符串在url地址中是在“?”后面“#”号的前面,但是查询字符串和#hash都是可以有可无的,所以我们就需要先进行一个判断,然后再进行接下来的操...原创 2018-04-14 14:38:03 · 802 阅读 · 0 评论 -
谈谈JavaScript中的声明提前(hoisting)
谈谈 JavaScript 中的 声明提前(hoisting)有许多同学知道js在执行的时候,是从上到下,从左到右,一行一行执行的,但是不知道在这之前还要做一些事情,js程序在正式执行之前,会将所有var 声明的变量和function声明的函数,预读到所在作用域的顶部,但是对var 声明只是将声明提前,赋值仍然保留在原位置,function 声明,会将函数名称和函数体都提前...转载 2018-04-14 16:17:27 · 363 阅读 · 0 评论 -
自定义下拉列表
自定义下拉列表,也就是点击一个选择框的时候,下面会弹出相对应的推荐的选项,再选择一个之后,选项的内容会填充到选择框里面。选项框随之消失。首先我们先定义两个框,一个选择框,一个选项框,代码结构如下:<div id="info"> 选择一个你最喜欢的游戏 </div> <ul id="chose"> <li>...原创 2018-04-16 19:17:32 · 4783 阅读 · 0 评论 -
JavaScript易错知识点
JavaScript易错知识点整理1.变量作用域上方的函数作用域中声明并赋值了a,且在console之上,所以遵循就近原则输出a等于2。上方的函数作用域中虽然声明并赋值了a,但位于console之下,a变量被提升,输出时已声明但尚未被赋值,所以输出undefined。上方的函数作用域中a被重新赋值,未被重新声明,且位于console之下,所以输出全局作用域中的a。上方函数作用域中使用了ES...原创 2020-07-01 17:47:49 · 74 阅读 · 0 评论 -
JavaScript中DOM查询封装函数
在JavaScript中可以通过BOM查询html文档中的元素,也就是所谓的在html中获取对象然后对它添加一个函数。常用的方法有以下几种: ①document.getElementById() 通过元素ID在全局查找元素 ②document.getElementsByTagName() 通过元素标签名字在全局查找元素 element.getEleme...原创 2018-04-13 09:32:48 · 433 阅读 · 0 评论 -
JavaScript写倒计时
在网页中,特别是电商网站中,倒计时的出现频率很高,接下来给大家介绍一下怎么用JavaScript写一个倒计时。代码如下: 首先我们通过Date构造函数的方法创建一个倒计时的结束的时间。并将其转换为毫秒值。 再获取现在的时间,同样转换为毫秒值。 两值相减,就是倒计时中的毫秒值。 当倒计时中的毫秒值大于或者等于0的时候,让它执行定时器中的函数,一秒变化一次。 再根...原创 2018-04-13 09:56:12 · 2246 阅读 · 2 评论 -
jQuery做轮播图
这是我自己做的一个简单的轮播图,效果图如下:我觉得轮播图中最主要的是要理解到图片为什么会滑动,是怎么控制的。上面这个我自己做的,是搭好的一个结构,在无序列表中插入需要的图片。然后在插入图片的后面添加一个空的无序列表,作为轮播图中下方的小点。 <div class="box"> <ul class="imageList"> <li><img s...原创 2018-04-23 11:28:26 · 1204 阅读 · 0 评论 -
常用正则表达式
一、校验数字的表达式1 数字:^[0-9]*$2 n位的数字:^\d{n}$3 至少n位的数字:^\d{n,}$4 m-n位的数字:^\d{m,n}$5 零和非零开头的数字:^(0|[1-9][0-9]*)$6 非零开头的最多带两位小数的数字:^([1-9][0-9]*)+(.[0-9]{1,2})?$7 带1-2位小数的正数或负数:^(\-)?\d+(\.\d{1,2})?$8 正数、负数、和小...原创 2018-04-19 19:44:56 · 125 阅读 · 0 评论 -
javascript写淡入淡出效果的轮播图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-04-24 11:42:42 · 222 阅读 · 0 评论 -
javascript写无缝平移的轮播图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * {margin: 0原创 2018-04-24 19:53:24 · 1086 阅读 · 0 评论 -
JavaScript写放大镜效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #middle {原创 2018-04-24 19:55:04 · 138 阅读 · 0 评论 -
自己封装的tools.js文件
/* * 生成指定范围的随机整数 * @param lower 下限 * @param upper 上限 * @return 返回指定范围的随机整数,上/下限值均可取 */function random(lower, upper) { return Math.floor(Math.random() * (upper - lower)) + lower;}/* * 生成rgb...原创 2018-04-24 19:58:08 · 715 阅读 · 0 评论 -
js中通过ajax调用网上接口
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-05-10 15:20:22 · 23905 阅读 · 4 评论 -
JavaScript中动态生成表格
动态生成表格,首先需要输入并获取动态的数字,html中结构代码如下:行:<input type="text" id="row" value="5"><br> 列:<input type="text" id="col" value="10"><br> &l原创 2018-04-14 11:15:49 · 3550 阅读 · 0 评论