JavaScript
文章平均质量分 79
fuux
前端开发
展开
-
前端:打开你的摄像头
前端调用摄像头本篇文章将会通过一个demo来介绍前端如何通过浏览器打开用户摄像头并实现抓拍获取图片getUserMedia APIgetUserMedia API早期版本是navigator.getUserMedia,不过目前已被废弃,如果想要兼容ie或者低版本浏览器,可以使用。目前最新标准getUserMedia API为navigator.MediaDevices.getUserMedia。基本用法navigator.mediaDevices.getUserMedia(constra原创 2020-08-27 14:23:03 · 3938 阅读 · 3 评论 -
前端实现图片或视频预览的3种方法
前端实现图片或视频预览的3种方法1. 通过上传服务器实现预览上传服务器是早期经常使用的方法,主要思想就是先把图片视频资源,通过ajax请求上传到服务端,然后服务端返回一个视频路径,前端使用这个路径即可加载出资源并实现预览。因为H5之前,前端是没办法操作文件的,此方法也是唯一可靠的资源预览方法。但确实有很多弊端:预览前必须先将资源上传至服务端,如果资源过大,导致上传时间过长,资源预览加载时间也过长,影响用户体验。如果用户只是想预览,并不上传,然而资源已经上传,这就造成内存空间以及网络资源的浪费。原创 2020-08-05 14:38:23 · 13184 阅读 · 0 评论 -
你真的会用console吗—前端开发
你真的会使用console吗1. console.table表格形式打印console.log是我们最常用的打印方法,但是在打印一些比较复杂的数据时候,我们浏览起来就会显得很费力。比如:而使用console.table打印就会自动生成表格,使打印结果看起来更加清晰易懂:2. console.dir打印对象console.dir与console.log不同之处在于,前者可以递归打印对象的所有属性,而后者侧重于字符串化的打印。比如要打印一个DOM节点。console.log只是把html节点打原创 2020-06-22 17:40:48 · 549 阅读 · 0 评论 -
原生js实现简单的svg编辑器
原生js实现简单的svg编辑器简单的实现了rect、circle、ellipse、line四个简单的基础图形的创建和编辑,这篇文章对于JavaScript中Dom操作和svg基础学习有很大帮助。项目在线预览:http://coolxiang.top/svgeditor编辑器预览图(做了只丑兔子花了我好长时间):接下来说一下实现原理和代码讲解。页面样式和布局HTML和CSS相对来说比较简单,这里我不多介绍了。只是说一下这个页面使用rem和flexible自适应布局。另外通过flex实现左边工原创 2020-06-03 18:15:53 · 2643 阅读 · 0 评论 -
JavaScript手写call、apply、bind方法
JavaScript手写call、apply、bind方法实现call()方法将函数设为对象的属性执行并删除这个函数指定this到函数并传入给定参数执行函数如果不传⼊参数,默认指向为 window// 在Function原型中定义myCall()方法Function.prototype.myCall = function(target){ // 判断target是否为obje...原创 2020-03-15 22:12:32 · 378 阅读 · 0 评论 -
手写Promise——自己封装Promise对象
自己封装一个Promise代码:https://github.com/fu-x/promise首先我们需要对Promise进行分析声明一个MyPromise类class MyPromise {} // 声明MyPromise类Promise的三种状态:pending、fulfilled、rejected我们要在类里定义三个静态常量static PENDING = 'pendin...原创 2020-03-08 18:00:45 · 4416 阅读 · 4 评论 -
你不知道的JavaScript数组扁平化五种方法
JavaScript数组扁平化对于下边这个深层嵌套数组,我们在某些环境可能需要将它进行扁平化(转换为一维数组),比如评论系统种,评论数据可能就会深层嵌套。所以我给大家带来了下边几种方法。let arr = [1, [2, 3, 4], [3, 5, [1, [4]]]];1. ES6中Array.prototype.flat()函数对兼容性要求较高,不兼容ie,且要求node版本11以...原创 2020-03-05 03:51:54 · 1854 阅读 · 0 评论 -
JavaScript——Symbol类型
SymbolSymbol是ES2015中新增的一种类型, 其含义是符号、标志,它的作用是每调用一次都会返回一个独一无二的返回值。我们可以将此返回值作为对象的属性,这样就不会与原有的属性重名了。即使传人相同的参数,Symbol 方法也会返回不同的值。先看一个例子:var obj = {};var abc1 = Symbol ("abc");var abc2 = Symbol ("ab...原创 2020-03-03 03:19:30 · 1839 阅读 · 0 评论 -
JavaScript中tostring()和valueof()的用法及两者的区别
转载:https://www.jb51.net/article/74888.htm本文给大家介绍javascript中tostring()和valueof()的用法及两者的区别,对js tostring valueof相关知识感兴趣的朋友一起学习吧基本上,所有JS数据类型都拥有valueOf和toString这两个方法,null除外。它们俩解决JavaScript值运算与显示的问题。1....转载 2020-03-03 02:37:39 · 1991 阅读 · 0 评论 -
JavaScript中的进制转换的两种方法
JavaScript中的进制转换—toString()和parseInt()很多时候,在我们写代码中需要用到二进制、八进制或者十六进制。所以我们要对十进制数字进行转换,可能我们会花一些时间写一个进制转换函数,但却很少有人知道,JavaScript已经给我们提供了进制转换的方法。toString()和parseInt()首先我们先介绍以下toString()方法。toString()方法是...原创 2020-03-01 03:43:53 · 4765 阅读 · 0 评论 -
localStorage、sessionStorage和cookie的区别
localStorage、sessionStorage和cookie的区别Web Storage和cookie作为web开发最常用和最常见的两种数据存储方式,我们有必要去详细的了解它。localStoragelocalStorage是HTML5的一种本地缓存方案,目前主要用于浏览器端保存体积较大的数据(如AJAX返回结果等)。我们可以在浏览器开发者模式下Application中查看loca...原创 2020-02-29 02:44:25 · 1616 阅读 · 0 评论 -
JS对象方法——Object.defineProperty()
JS对象方法——Object.defineProperty()我们都知道Vue内部通过Object.defineProperty方法属性拦截的方式,把data对象里每个数据的读写转化成getter/setter,当数据变化时通知视图更新实现双向数据绑定。可我们真的了解Object.defineProperty()吗。Object.defineProperty() 方法会直接在一个对象上定义一个...原创 2020-02-27 02:16:41 · 3757 阅读 · 1 评论 -
详解JavaScript中的类
详解JavaScript类类和对象认识类前,首先我们先了解一下对象。所谓对象,实质上就是一个具体的事物在Javascript语言中的表现形式。比如对象可以是一只猫,猫具有它的特征:颜色、种类、体重等,也能做一些事情:奔跑、喵喵叫、爬树等。它的这些特征就叫做猫对象的属性,行为就是猫对象的方法。对象往往用名词来表示,如:Bood, Person属性一般用形容词表示方法一般用动词表示,如...原创 2020-02-21 21:15:30 · 2678 阅读 · 0 评论 -
JavaScript中的对象和原型链
JavaScript中的对象和原型链原型对象概念:无论什么时候,只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个 prototype属性,这个属性指向函数的原型对象。在默认情况下,所有原型对象都会自动获得一个 constructor(构造函数)属性,这个属性包含一个指向prototype 属性所在函数的指针。创建对象的几种方法通过字面量方式创建var person={...原创 2020-02-20 18:18:55 · 2463 阅读 · 0 评论 -
input限制只能输入数字的三种方法
input限制只能输入数字在前端开发过程中,我们经常需要对input输入内容进行限制,比如验证码,购物车数量等等。下面我总结一下限制input只能输入数字的几种方法。H5 number类型```html<form action=""> 请输入数字:<input type="number"><br> <input type="submit" ...原创 2020-02-18 11:26:59 · 37064 阅读 · 0 评论 -
学习JavaScript的面向对象编程——JavaScript贪吃蛇小游戏
JavaScript贪吃蛇小游戏——学习JavaScript的面向对象编程预览支持移动端和pc端哦。Github源码地址:https://github.com/fu-x/snake游戏预览:http://coolxiang.top/snake编程思想:面向对象分析首先对贪吃蛇游戏进行逻辑分析。1. 小蛇需要移动,需要一个参数表示移动方向。2. 小蛇可以吃食物,蛇头和食物坐标相等让...原创 2020-02-14 22:08:42 · 1475 阅读 · 0 评论