技术
文章平均质量分 89
晨晨快跑
个人知识总结便于回顾。
展开
-
高级前端面试题(react + 原生js + es6)
createRoot是基于fiber模式,通过createRoot会创建出来fiber的根节点,fiber会将每个组件作为一个节点记录到队列中,并且会记录每个组件的父节点、子节点、兄弟节点,以此可以实现不需要遍历整颗dom树,就可以进行局部更新,从局部渲染上会比ReactDOM的方式更快,但是整体效率上不好说,因为可能会碰到有高频更新的局部节点占用,导致其他的节点始终在排队。其次是实例化对象,通过new关键字创建,每个实例化对象都会有原型上的属性和方法,并且可以定义自己的属性和方法。原创 2023-04-23 16:05:03 · 747 阅读 · 0 评论 -
js两个数组取相同的值的几种方式,包含ES6
_resultSameValue(arr1, arr2) { let newArr = []; for (let i = 0; i < arr1.length; i++) { if (arr2.includes(arr1[i])) { newArr.push(arr1[i]) } } return newArr; } _resultSameValue2(arr1, arr2) { let newArr = ar.原创 2020-09-27 18:43:59 · 4292 阅读 · 0 评论 -
表单提交分离化判断条件
在写一些登录页面或者调查问卷等表单的时候,经常会在最后提交的方法中进行大量的判断逻辑,其实可以单独提取出来一个新的方法,来进行一些操作提示等,效果都一样,但是代码看起来会舒服很多。$(this._dom.login).click(function () { var email = $(_this._dom.email).val(); var pwd = $(_this._dom.pwd).val(); if (_this._validate(...原创 2020-08-04 19:02:03 · 185 阅读 · 0 评论 -
通过Web Audio Api展示音频整体波形(整体波形,而非实时)
在做这个功能时并未对音频过多了解,因为H5的audio标签已经很强大了,但是因为这次需要对音频的波形进行展示,于是开始查看文档及相关技术贴,发现无论是官网推荐还是大部分的帖子推荐的做法都是使用Audio Api的AnalyserNode,但是AnalyserNode的问题是他只能用来做实时波形展示,与需求不符,不过如果公司对插件没要求的话,强烈推荐wavesurfer.js库,相当简单,做...原创 2020-02-27 12:16:47 · 3244 阅读 · 0 评论 -
$.ajax中设置responseType
最近在为公司产品新增一个音频播放及整体波形预览的功能,首先需要的就是请求音频地址,将请求到的二进制原始数据转换为arrayBuffer类型,之后在通过Web Audio Api解码以此来生成波形展示所需数据,于是问题来了。 如果用原生xhr是可以直接设置responseType属性的,但是因为是公司产品,底层封装的是jquery的ajax方法,然而$.ajax没有respons...原创 2020-02-27 11:57:26 · 20811 阅读 · 9 评论 -
网页地址栏直接输入请求地址有返回值,前端本地项目访问请求报跨域的问题
在网页地址中访问可以正常看到数据,在postman中也正常。自己的react项目启动的服务器,访问同样的地址报跨域的问题,在package.json中添加proxy属性。...原创 2019-12-13 17:44:34 · 1788 阅读 · 0 评论 -
H5元素拖拽效果
需引入hammer.min.js库/*拖拽效果*/ //获取相关CSS属性 var getCss = function(o,key){ return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key]; }; ...原创 2018-03-16 10:16:25 · 1355 阅读 · 0 评论 -
h5 formData多张图片上传预览
代码实例://html:<div id="container"> <div class="shangchuan"> <input type="file" name="file" id="file_input" multiple/> </div> <di原创 2018-03-15 10:10:39 · 2006 阅读 · 3 评论 -
h5+调用系统通讯录
<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <title&原创 2018-03-15 10:09:52 · 14383 阅读 · 6 评论 -
H5+APP监听安卓物理返回键
//双击退出应用//调用h5+function plusReady() { // 监听“返回”按钮事件 plus.key.addEventListener("backbutton", function() {}); // 在这里调用plus api}if (window.plus) { plusReady();} else { document.addEventListener('plusread...原创 2018-03-15 10:08:59 · 7761 阅读 · 1 评论 -
h5 input时间框显示默认当前时间
/*h5 input时间框显示默认当前时间*//*var now = new Date(), year = now.getFullYear(), month = ((now.getMonth() + 1)>9)?(now.getMonth() + 1):("0"+(now.getMonth() + 1)), date = translate(now.getDate()), hour = tr...原创 2018-03-15 10:08:16 · 15101 阅读 · 0 评论 -
h5修改移动端date默认右侧图标
.date input[type=date] { background-color:transparent; color:#fff; FILTER: alpha(opacity=0); /*androd*/ appearance:none; /*下拉框去掉右侧图标*/ -moz-appearance:none; -webkit-appe...原创 2018-03-15 10:07:41 · 2392 阅读 · 0 评论 -
get请求获得传递参数
本方法适用于a页面 href="index.html?a=123&b=234" 这类的get请求方式。//在get请求地址中获取传递的参数-----开始--------var urlinfo = window.location.href;urlinfo = decodeURI(urlinfo)var len = urlinfo.length; //获取url的长度var offset =...原创 2018-03-15 10:06:52 · 8727 阅读 · 0 评论 -
echarts实例后台交互数据展示
// 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); //echarts等待框 myChart.showLoading({ text : '正在努力的读取数据中...' }); //向后台请求数据 $.ajax({ type:"post", ...原创 2018-03-15 10:05:23 · 3290 阅读 · 0 评论 -
五种比较常用的等待框
css部分:<style type="text/css"> .main-site{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0.4; } #mainContent{ position: absolute; ...原创 2018-03-15 10:03:00 · 861 阅读 · 0 评论 -
js预编译AO对象及GO对象
简单谈一下js的预编译过程。function test(a,b){ console.log(a) var a=123; function a(){} console.log(b) var b=234; console.log(b) function b(){} console.log(a) var b=function(){} cons...原创 2018-03-15 09:57:28 · 8218 阅读 · 4 评论 -
javaScript堆和栈及原始值于引用值的个人理解。
分享一下个人对堆和栈的粗浅理解。 了解堆和栈首先要清楚JS语言中分为两种值:原始值和引用值。 原始值包括: undefined、null、string、number、boolean 五种类型,为原值数据,有不理解的地方建议巩固一下基础知识。 引用值包括: Object、function、array、date、RegExp.... 等等。 怎么区分我就不细讲了,只要你能清楚js...原创 2018-03-15 09:43:53 · 322 阅读 · 0 评论 -
html2canvas截屏跨域图片解决办法
//html2canvas.js需要修改1215行代码如下更改function ImageContainer(src, cors) { this.src = src; this.image = new Image(); var self = this; this.tainted = null; this.promise = new Promise(function(r...原创 2018-03-16 10:21:12 · 2882 阅读 · 1 评论 -
ios安卓设置状态栏背景色
<script type="text/javascript"> // H5 plus事件处理 function plusReady() { // 设置系统状态栏背景为红色 //alert(plus.os.name) var type = plus.os.name; if(type == "iOS") { plus.navigator.setSta...原创 2018-03-16 10:22:04 · 412 阅读 · 0 评论 -
JS监听浏览器回退操作,包括手机浏览器
//监听浏览器返回$(document).ready(function(e) { var counter = 0; if (window.history && window.history.pushState) { $(window).on('popstate', function () { ...原创 2018-03-16 10:23:10 · 3128 阅读 · 0 评论 -
md5加密传输文件实例
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input id="ChooseFile" type=&q原创 2018-03-16 10:24:25 · 1193 阅读 · 0 评论 -
mui安卓无法下拉刷新解决方案
1 在引入mui前添加一个全局变量<script>var h5pullDown = true;</script>2 修改源码两处尾部添加h5pullDownif ($.os.plus && $.os.android &&!h5pullDown) { //android 5+if (!($.os.plus && $.os.and...原创 2018-03-16 10:25:08 · 1644 阅读 · 0 评论 -
mui父页面触发子页面事件方法实例
父页面JS代码//添加列表项的点击事件mui('#yetou').on('tap', 'span', function(e) { var id = this.getAttribute('id'); //获得详情页面 if(!detailPage){ detailPage = plus.webview.getWebviewById('zhuyeChild.html'); } //触发...原创 2018-03-16 10:25:56 · 4361 阅读 · 0 评论 -
mui子页面关闭刷新父页面数据实例
父页面代码window.addEventListener('refresh', function(e) { location.reload(); }) 子页面代码mui.init({ beforeback: function() { //获得列表界面的webview var list = plus.webview....原创 2018-03-16 10:27:00 · 2393 阅读 · 0 评论 -
本地预览pdf遇到的问题
在线预览pdf需引入1.7.225版本pdf.js及pdf.worker.js网络路径地址:http://10.192.42.142:8080/electronicContract/file/123.pdf#pdfjs.action=dpwnload'最主要需在网络路径后添加#pdfjs.action=dpwnload,否则ios预览不出来。当电子签名时,需将pdf.worker.js中的这句th...原创 2018-03-16 10:28:27 · 1184 阅读 · 0 评论 -
jquery动态为添加的元素绑定事件如果需要两种以上形参的话拼接方式
list+="<div class='list-h1' onclick=tongxun(\'"+contacts[i].displayName+","+contacts[i].phoneNumbers[0].value+"\')><p>"+str+"</p><h3>"+contacts[i].disp原创 2018-03-16 10:30:02 · 167 阅读 · 0 评论 -
js简单翻页效果逻辑实例
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> body,html{ width:原创 2018-03-19 09:54:10 · 1001 阅读 · 0 评论 -
浅谈闭包个人理解。
必包其实和堆和栈中的引用值是很相似的,栈里面存放的就是作用域链指向的地址,堆里面存放的就是ao和go对象,你不将栈里面的地址保存下来的话,那你下次调用和重新创建栈和堆就是一样的过程了。我把栈里面的地址保存下来,那我自然就能访问到堆里面的内容了。函数a里面声明函数b,在函数b里面能访问函数a的变量,但是在函数a里面访问不到函数b的变量,就是因为函数a中生成的ao和go对象中并没有函数b的变量,但是函...原创 2018-03-19 09:53:52 · 205 阅读 · 0 评论 -
解决动态添加input无法获取焦点事件
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>例子</title> <meta name="viewport" content="initial-scale=1.0, maximum-scal原创 2018-03-19 09:55:37 · 8700 阅读 · 2 评论 -
轮播图平稳左移
html部分:<!--轮播图--> <div class="hl_main5_content"> <div class="hl_scrool_leftbtn"></div> <div class="hl_scrool_rightbtn"></div原创 2018-03-19 09:56:16 · 718 阅读 · 0 评论 -
判断复选框及读取复选框的值
if ($('input[name=fuxuan]').is(':checked')) { var chk_value =[]; $('input[name="fuxuan"]:checked').each(function(){ chk_value.push($(this).val()); }); var list=""; f...原创 2018-03-19 09:56:42 · 796 阅读 · 0 评论 -
判断手机机型及用户访问方式
var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; return { trident: u.indexOf('Trident') > -1, //IE内核 presto: u.indexOf('Presto')...原创 2018-03-19 09:57:25 · 1060 阅读 · 0 评论 -
修改H5 placeholder默认颜色
/*修改placeholder默认颜色*/:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #999; opacity:1; }::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #999;opacity:1;}input:-ms-input-placeholder{...原创 2018-03-19 10:02:25 · 1374 阅读 · 0 评论 -
在android中键盘弹出和收起会改变window的高度,因此监听window的resize
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight; $(window).on('resize', function () { var nowClientHeight = document.documentElement.clientHeight || document....原创 2018-03-19 10:02:55 · 2640 阅读 · 0 评论 -
JS原型链
var obj={};obj.toString();执行之后会打印"[object object]",自己定义的obj中并没有toString()方法,所以会像他的上级也就是Object.prototype中寻找toString()方法,发现有这个方法,那就直接用了,这就是属于应用原型链去调用原型的方法,自身没有就去上级找,嵌套多层也是一样的。Preson.prototype.lastName="...原创 2018-03-21 11:29:45 · 123 阅读 · 0 评论 -
js 包装类
我们都知道js分为原始值和引用值、原始值可以有属性吗?答案当然是没有,但是为什么原始值却可以调用一些方法呢。var num = 123;num.toString() ; // "123";明明没有却可以调用toString的方法,就是因为包装类的原因,函数在执行的前一刻发现你写的代码其实是存在问题的,但是因为js是解释型语言,系统会为你进行包装类的操作。new String(num) -- &g...原创 2018-04-08 15:30:58 · 753 阅读 · 3 评论 -
纯原生JS实现移动端刮刮乐效果。
话不多数,先上效果图:当挂出超过百分比的时候显示整张图,都可以在构造对象中设置,有疑问可以留言,我看到的话会第一时间回复。好,接下来先上html代码,引用的地址图片你可以随便用,路径之类的有点基础都能修改,并没有加任何难度的代码。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&g...原创 2018-04-08 17:03:06 · 4019 阅读 · 1 评论 -
ajax实际请求数据展示echarts折线图
// 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); //echarts等待框 myChart.showLoading({ text : '正在努力的读取数据中...' }); //向后台请求数据 $.ajax({ type:"post", ...原创 2018-04-09 09:22:14 · 1097 阅读 · 0 评论 -
关于前端解决post跨域的问题
网上post跨域解决的问题方案一箩筐,但是真正能用得上的我还真是一个没看到,基本上都是基于jsonp的方案去解决跨域的问题,jsonp的原理我就不讲了,网上介绍的多了去了,既然是jsonp了,那还谈什么post跨域问题了,一群标题党,来自一个查了一天百度及论坛人的吐槽.... 好了,言归正传,在具体说解决办法之前我先说一下为什么会有跨域的问题,post跨域问题本身是因为请求...原创 2018-04-16 15:28:53 · 49055 阅读 · 1 评论 -
播放音乐动画暂停继续播放实例
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>播放音乐动画暂停继续</title> <meta name="viewport" content="initial-scale=1.0, maximu原创 2018-04-17 15:41:48 · 878 阅读 · 0 评论