前端技术-js
关注
分享
扫一扫
aliveAmy
从一件小事开始，坚持到永恒。
github主页:
https://github.com/AmyShieh
展开
-
前端图片加载优化，懒加载，按需加载，webp格式兼容性处理
背景网页中存在很多存储于腾讯云的CDN形式的高清图，大多为PNG格式，大小从几百kb到几十M不等，张数由1张到上百张不等。由此导致页面的图片加载缓慢。前端解决方案:png格式转为webp格式（无损压缩）图片按需加载。针对以上两个方案需要注意的点如下：webp格式的兼容性图片按需加载的更优方案...原创 2022-03-04 14:08:30 · 4223 阅读 · 0 评论 -
js文件上传相关知识点：如何直接上传文件夹，如果获取上传文件的文件夹信息
最近在做项目的过程中遇到一个需求： 要求直接上传文件夹及其文件夹下的所有内容， 并且保留文件夹中相关的嵌套信息。做了一些调研，总结如下：如何直接上传文件夹？ 使用webkitdirectory属性，类似mutiple属性一样的。但这个属性没有官方规范，所以使用时需要注意一下。如何获取上传文件的文件夹信息？<body> <input type="file" id="file" webkitdirectory> <script>原创 2021-10-14 16:29:09 · 1784 阅读 · 0 评论 -
如何将Blob类型转换为File类型
在复制粘贴图片自动上传时，发现企业微信浏览器会把file类型的文件识别为Blob类型，导致后端无法识别文件类型。查询以后发现将Blob文件转为File文件就能解决该问题。这是MDN中对Blob定义的截图：这是MDN中，构造一个File类型要的参数：这是我的实现方法：const Blob2ImageFileForWXBrowser = (obj: Blob) => new window.File([obj], `${(new Date).getTime()}.png` );...原创 2020-12-09 11:30:41 · 13559 阅读 · 0 评论 -
image请求资源403
网页中获取图片链接，得到403，但是单独打开图片链接显示却是正常的，这是因为有的图片服务器它会去检测请求的来源是不是本站，如果不是本站就返回403，而检测的来源在于发送请求时的自带的referrer~该referrer是可以通过设置<meta name="referrer" content="no-referrer" />这样请求的时候就可以不带上referrer的值啦~...原创 2020-11-18 14:40:30 · 335 阅读 · 0 评论 -
js控制video的播放器大小，以及poster兼容问题
前置条件：video标签承载视频。状态：在微信中点击播放按钮后，自动全屏播放。ios下video的封面并没有取到第一帧。pc端和android正常。期望：在微信中点击播放后，依然在当前页面，不要全屏。.所有设备下，取第一帧作为poster。解决方案：对于第一个问题，很简单，设置webkit-playsinline和playsinline属性就能实现。标签写法：<video src="https://vjs.zencdn.net/v/oceans.mp4" playsi原创 2020-11-17 15:10:27 · 3649 阅读 · 0 评论 -
Keyup与ESC使用时候的注意点
ESC有时候在某些浏览器的时候会关闭弹出的弹框。当弹框中存在input框之类的东西时，尽量不要用onKeyup之类的事件~因为esc会触发keyup,所以在监听了keyup事件，同时按了esc的时候，可能发生的事情与预期不符。所以可以使用keydown，keypress等行为来代替。...原创 2020-11-16 10:55:39 · 944 阅读 · 0 评论 -
浅谈react hooks
浅谈react hooksReact hooks使用hook的动机使用hook的规则使用hook时需要注意的点自定义hookuseStateuseEffect最近在项目中使用了react hooks, 总结了一些相关的知识点可以有助于我们更好地了解和使用react hooks。React hooks首先，我们来看看react hooks是什么？其实很简单， 它就是`可以在函数中勾入React的state和生命周期等特性的函数``。拆解一下就是，它是个函数，只是在这个函数中可以勾入react的相关特性原创 2020-05-22 15:43:27 · 611 阅读 · 0 评论 -
ES6学习笔记
该博文参考ECMAScript6 入门，总结为自己的笔记以便查阅。let 和 const 命令1. let命令基本用法：let的用法类似与var, 但是let声明的变量只在它所在的代码块有效。例如for循环中的自增变量，如果使用var来声明，那它就是全局的, 全局只有一个变量i，每一次循环， 变量i的值都会发生改变。但如果是使用let声明， 则i只在本轮循环有效，所以每一次循环的i其实都...原创 2019-10-15 22:30:47 · 169 阅读 · 0 评论 -
javascript语言精萃-精读
编程是很困难的事情。绝不应该在懵懵懂懂的状态下开始你的工作。附加知识点：xey: 表示10的y次方x的值例如： 1e2 = 10的平方1 = 100检测一个属性是来自于该对象的成员还是来自原型链，可以使用obj.hasOwnProperty(attr)如果没有指定返回表达式，那么返回值是undefined。需要弄懂的点：函数式编程this指针...原创 2019-09-02 22:51:54 · 182 阅读 · 0 评论 -
js中的变量和类型
js中的变量和类型1. javascript规定了几种语言类型7种基本数据类型，分别是：1. String2. Number3. Boolean4. Null5. Undefine6. NAN7. Symbol2中引用类型，分别是：1. Object2. Function 2. Symbol类型在实际开发中的应用、可手动实现一个简单的Symbol首先来说说symbo...原创 2019-05-06 21:52:25 · 872 阅读 · 0 评论 -
apply和call的应用
apply和call的存在，就是为了动态改变this而出现的。当一个Object没有某个方法，但是其他的object有，这个时候就可以借助apply和call用其他对象的方法来操作。举个栗子： var Amy = function(){ ame = 'amy'; age = 23; console.log("name:"+thi...原创 2018-04-18 18:31:29 · 666 阅读 · 0 评论 -
JavaScript内存机制
JavaScript内存机制http://www.cnblogs.com/ys-ys/p/5300189.html 晚上补充……原创 2018-03-22 10:00:10 · 204 阅读 · 0 评论 -
手机号验证——正则
var phone = "157000000000"var rep = /1[0-9]{10}$/.test;rep.test(phone)原创 2017-12-29 17:10:07 · 324 阅读 · 0 评论 -
设置iframe的高度为嵌入网页内容的高度
设置iframe的高度为嵌入网页内容的高度一直很纠结iframe的高度，之前的几个项目，每一次用的方式也不用，这次统一一下。设置iframe的高度为嵌入网页内容的高度：代码块代码块语法遵循标准markdown代码，例如：<iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0" onload="this.原创 2017-03-23 14:08:59 · 10302 阅读 · 4 评论 -
jq获取一串字符串中的数字
replace(/[^0-9]/ig,”“) 我的id是chart1,chart2,chart3….这样子的， 我现在只有最后的那个数字$(".chart").click(function () { alert($(this).attr('id').replace(/[^0-9]/ig,""))});原创 2017-04-13 16:47:49 · 2018 阅读 · 0 评论 -
iframe获取父页面的元素
iframe获取父页面的元素方法一： jq:$(“#父窗口元素ID”,window.parent.document); js:window.parent.document.getElementById(“父窗口元素ID”)；取父窗口的父窗口的元素就可以用：$(selector, window.parent.parent.document);方法二： $(window.parent.docume原创 2017-04-20 11:21:25 · 1710 阅读 · 0 评论 -
javaScript模块化编程
模块化编程的规范分为commonjs,AMD,CMD AMD–requirejs CMD–seajs原创 2017-05-12 09:23:23 · 245 阅读 · 0 评论 -
禁止鼠标右键
if (window.Event) document.captureEvents(Event.MOUSEUP);function nocontextmenu(){ event.cancelBubble = true event.returnValue = false; return false;}function norightclick(e){ if原创 2017-04-24 11:12:46 · 301 阅读 · 0 评论 -
seajs
1.sea.config: 配置路径等。 2.sea.use sea.use("./a",function(a){ a.dosomething(); })3.require 4.export 5.module.export 6.define define(function(require,export,modual){ //模块代码原创 2017-05-15 22:22:46 · 208 阅读 · 0 评论 -
jq中自定义属性取值 data-info
记录一个问题： 使用$(“.xxx”).data(“info”); 这样是可以取到值的，但是有个要求 ，必须为小写，不能存在大写，否则取不到值原创 2017-08-08 10:49:11 · 4574 阅读 · 0 评论 -
jq判断scroll是否到底部
首先，我们要获取三个高度： 1. 整体div的高度. 2. 超出盒子部分就添加overflow:scroll的盒子高度 3. 超出盒子部分就添加overflow:scroll的盒子距离滚动条顶部的高度原创 2017-08-11 11:51:49 · 1746 阅读 · 0 评论 -
base64 web前端js解码与转码
解码，就是把base64的转换成常规字符串 function b64EncodeUnicode(str) { return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) { return String.fromCharCode('0x' + p1); }))原创 2017-12-19 20:06:26 · 24863 阅读 · 6 评论 -
jq判断是否选中[radio,checbox]，以及 checkbox全选与取消问题
获取radio的选种值：$("input[name='name']:checked").val()错误写法： 这种写法只有在IE下才有效，chrome和firefox下面是获取不到的。 $("input[name='radio_name'][checked]").val();原创 2017-12-19 20:03:48 · 690 阅读 · 0 评论 -
闭包
闭包闭包是说，内部函数可以访问它函数体之外声明的变量。今天遇到一个问题：获取一个表单标签，里面有多个input标签，该标签相当于是一个数组，我考虑的是，每个input在onblur的时候作出相应的事件，但是在for循环体内发现 onblur函数获取到的i变量始终都是i循环最后的值，最后查阅了一些资料得知，是由于匿名函数造成的，在这个时候就必须写在括号体内，函数写完以后立马调用，而匿名函数其实是没有取原创 2017-02-28 21:32:01 · 225 阅读 · 1 评论