javascript
文章平均质量分 52
Eighteen Z
此人不懒,但还是什么都没写。
展开
-
小程序基础原理
本文会围绕小程序的基础原理进行介绍。主要包括小程序的基础结构、编译、加载、通讯等几个方面。旨在阅读完毕后可以对小程序有一个基本的印象。原创 2022-11-18 15:23:33 · 1829 阅读 · 1 评论 -
Html2Canvas 常见问题
1. 文字样式丢失且都变成为最小号字体。解决方案: 需要截图的节点根样式添加font-variant: normal;2. 文字向下偏移。解决方案: 指定html2canvas的版本号为1.0.0-alpha.123. 不完整,缺失,留白。出现情况: 当截图区域超过视图高度,且滚动条未处在顶部时,会出现。解决方案: 截图之前控制滚动条至顶部。4. 模糊,不清晰。出现情况: 通常是图片设置为背景的情况下,截图会比较模糊。解决方案: 将背景图通过img标签加定位的方式实现。...原创 2021-07-28 14:41:18 · 6066 阅读 · 2 评论 -
JavaScript:leetcode_1028. 从先序遍历还原二叉树
题目说明我们从二叉树的根节点 root 开始进行深度优先搜索。在遍历中的每个节点处,我们输出 D 条短划线(其中 D 是该节点的深度),然后输出该节点的值。(如果节点的深度为 D,则其直接子节点的深度为 D + 1。根节点的深度为 0)。如果节点只有一个子节点,那么保证该子节点为左子节点。给出遍历输出 S,还原树并返回其根节点 root。 示例 1:输入:"1-2--3--4-5--6--7"输出:[1,2,5,3,4,6,7]示例 2:输入:"1-2--3---4原创 2020-06-18 15:48:53 · 596 阅读 · 0 评论 -
《you dont konw js》一起来明明白白的了解作用域和闭包吧
本文来源于《你不知道的JavaScript》上卷,第一部分:作用域和闭包。有兴趣,有时间的同学,强烈建议直接去看书,书里的知识才是最全面最系统的,本文仅为个人书后总结。一 作用域是什么?变量的存储和查找的这一套规则被称为作用域1.1 编译原理js通常被认为是动态(解释执行)语言,但事实上它也是一门编译语言,但并不是提前编译的。传统语言的编译分为三部分:分词/词法分析(Tokenizing/Lexing): 将 var a = 2;分解成为、词法单元: var、 a、 =、 2解析/语法分.原创 2020-06-02 18:28:06 · 400 阅读 · 0 评论 -
字符串分割和数组组合(spilt,join)
字符串分割:<script language="javascript"> str="2,2,3,5,6,6"; //这是一字符串 var strs= new Array(); //定义一数组 strs=str.split(","); //字符分割 for (i=0;i<strs.length ;i++ ) { document.write(strs[i]+"<br/>"); //原创 2017-03-10 11:03:28 · 746 阅读 · 0 评论 -
Vue 2.x 和 3.0 实现双向绑定的原理(Object.defineProperty 以及 Proxy)
说明vue实现双向绑定原理,主要是利用Object.defineProperty 来给实例data的属性添加 setter和getter.并通过发布订阅模式(一对多的依赖关系,当状态发生改变,它的所有依赖都将被通知)来实现响应。这个环节中包含了三个部分Observer 用来监听拦截data的属性为监察者。Dep用来添加订阅者,为订阅器Watcher 就是订阅者监察者通...原创 2020-05-07 09:36:02 · 306 阅读 · 0 评论 -
块级作用域内的函数声明到底是什么???
说明在一篇文章里看到这样一个问题。文章地址文章中会扩展一些其他的内容, 大家可以看过之后再来看我这篇个人的总结函数声明写在块级作用域中(ES6) var a = 0; if(true){ a = 1; function a(){} a = 21; console.log("里面",a); } console.log("外部",a); ...原创 2020-04-16 20:53:18 · 1122 阅读 · 3 评论 -
轮询造成了操作堆积怎么办?
说明有时候我们需要用setinterval来执行一些异步操作来刷新页面的信息。但是如果一旦异步函数的请求时间过长,就会造成事件操作堆积。如:this.interval = setInterval(async () =# { const resp = await ajax(); this.rows = resp.rows; }, 5000);这样假如上次...原创 2020-03-14 15:30:46 · 392 阅读 · 0 评论 -
前端面试知识必备
面试模拟与技巧如何看待面试什么是面试?答:面试时测查和评价人员能力素质的一种考试活动。具体地说,面试时一种经过组织者精心设计,在特定场景下,以考官对考生的面对面交谈与观察为主要手段,又表及里测评考生的知识、能力、经验等有关素质的一种考试活动。面试准备职位描述分析看公司的要求业务分析与实战模拟看官方网站分析所用的技术栈 艺龙:jQuery+requir原创 2017-12-04 18:18:37 · 490 阅读 · 0 评论 -
IOS移动端1px解决方案
.item { position: relative; } .item:after { content: ”; display: block; position: absolute; width: 100%; left: 0; bottom: 0; height: 1px; background-color原创 2017-09-25 21:48:32 · 400 阅读 · 0 评论 -
清除Adnroid (安卓)手机微信浏览器的缓存
微信调试中,手机微信的浏览器缓存问题一直很头疼,总是无法清除,总要找没有缓存的手机进行测试,但是肯定不可能每个人的手机都要借来试一遍,那么我们可以在页面的头部加入meta头信息进行线上拉取。 代码如下:&lt;meta http-equiv=&quot;Cache-Control&quot; content=&quot;no-cache, no-store, must-revalidate&quot; /&g原创 2017-07-07 11:15:49 · 3873 阅读 · 0 评论 -
移动端动态节点绑定事件ios点击失效
当你的DOM节点是动态生成在页面上的时候。 普通的点击$(‘xx’).click()会因为获取不到dom元素而致使点击失效。 一 这种情况下一般使用时间托管例如jq的:$(document).on('xx','click',fn)这个通过事件托管可以让jq获取到动态生成的dom节点,以此解决点击失效的问题。 二 然而在ios上这样的方法解决不了这个问题,原因是:在ios系统中,例如原创 2017-06-27 16:35:52 · 4362 阅读 · 0 评论 -
移动web开发之移动端真机测试
chrome的开发者工具可以很好地做好模拟工作,但毕竟模拟和实际还是有差别的。所以,真机测试是一定要做的,如何高效地进行真机测试呢。个人感觉,还是BrowserSync用得比较称手。本文将详细介绍如何应用BrowserSync进行移动端真机测试特性 BrowserSync能让PC、各移动设备上的页面同时实时地响应文件的更改,而不用刷新操作。而且,当在其他一个设备上进行点击等行为时,该行为也会同原创 2017-04-06 13:54:30 · 4892 阅读 · 0 评论 -
HTML5 video 进入全屏和退出全屏 兼容iframe
当我们使用video标签的时候,有时候因为更多的需要,我们要自己自定义控制栏,而进入和退出全屏也是其中的一部分不同的浏览器有不同的实现方法// Webkitelement.webkitRequestFullScreen();//进入全屏document.webkitCancelFullScreen();//退出全屏// Firefoxelement.mozReques...原创 2018-04-13 10:32:52 · 70730 阅读 · 0 评论 -
Typescript 安装运行
简介TypeScript 是 JavaScript 的一个超集,主要提供了类型系统和对 ES6 的支持。安装node.jsnodejs 安装地址 typescript需要node.js提供编译环境。进入下载页面根据自己的电脑系统下载相应的版本进行安装。安装typescriptnpm install -g typescript安装编辑器 visual studio 这...原创 2019-05-13 10:32:05 · 286 阅读 · 0 评论 -
srs.player 基础调用
/** * srsplayer * @param: id player box * @param: url player url * @param: volume sound volume * @param: width player box width * @param: height player box height */function play...原创 2019-04-11 16:07:42 · 1795 阅读 · 0 评论 -
异步处理的终极方案:async,await
异步函数我们经常会用到,最为常见的就是ajax,利用ajax请求我们的服务端获取数据,然后执行回调函数。一,普通的ajaxajax(url,(res)=&amp;amp;amp;gt;{ console.log(res); })最普通的异步请求函数,那么当我们有两个异步请求,且请求B需要依赖请求A的时候,该怎么处理?//ajaxAajax(url1, (resA)=&amp;amp;amp;gt;{ ajax(url2, ...原创 2019-01-22 15:36:08 · 712 阅读 · 0 评论 -
call,apply,bind的区别及实现
call,apply,bind的区别这三个函数的左右都是为了指定当前的this。不同点:call,apply 两者都是对函数的直接调用,bind的返回值仍然是一个函数。举例:a.call(b) 或者 a.apply(b) 而bind需要 a.bind(b)()这样才能执行call和apply的传参方式不同,第一个值都是this的指向,第二个举例a.call(b, 参数1,参数2...原创 2019-01-11 16:26:55 · 697 阅读 · 0 评论 -
js下载文件
通常对于网络上的资源,在web上我们一般通过window.open(‘资源地址’)就可以下载我们需要的内容了,但是有时候浏览器也会直接打开该资源。比如文件是个可读的txt文件。查到一个解决办法来避免直接打开需要下载的资源:function downloadFile(url, filename) { // 创建隐藏的可下载链接 var down = document.crea...原创 2018-12-05 18:53:41 · 1730 阅读 · 0 评论 -
JS上传文件file(formdata)
最近有项目要开发一个数据库模块,需要实现可以在外部导入数据库文件,也可以从本地导入数据库文件。其实就是本地文件的一个上传功能,在这里总结一下:首先我使用的方法是通过创建formData对象,使用XMLHttpRequest来发送数据。代码如下:var fileObj = document.getElementById('sql_input').files[0];var form =...原创 2018-12-05 18:44:28 · 18177 阅读 · 0 评论 -
ES6 对象数组查找某一个对象
查找数组特定元素需要用到的方法就是findIndex()。用法与定义findIndex() 方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。findIndex() 方法为数组中的每个元素都调用一次函数执行:当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用 执行函数。如果没有符合条件的元素返回 -1...原创 2018-11-29 11:13:51 · 25773 阅读 · 0 评论 -
取消表单聚焦的样式和富文本的可调节
取消表单项聚焦时产生的黄色边框:input,button,select,textarea{outline:none}取消textarea的拖动改变大小的功能:textarea{resize:none}最后把以上两个CSS合并后如下input,button,select,textarea{ outline:none;} textarea{resize:none;}原创 2017-01-11 16:16:41 · 418 阅读 · 0 评论 -
for循环的闭包
当我们用for循环为节点绑定数据或者做其他类似的事情的时候,会发现for循环出来的变量都是最后一个。如下:function init() { var a = document.getElementsByTagName("p"); for( var i=0; i<a.length; i++ ) { a[i].onclick = funct原创 2017-06-28 14:17:53 · 354 阅读 · 0 评论 -
js控制页面跳转
一般最常用的就是window.location.href 但是有时候会出现问题,会失效,页面并没有跳转,在页面里调试的时候也会发现,执行过这一句js之后,页面并没有刷新到新的页面或者,window.location的属性并没有修改,这时候你再window.location.reload(),页面也只是刷新了一遍。解决办法:在window.location.href后面添加上return false原创 2017-08-08 16:12:44 · 742 阅读 · 0 评论 -
ie78里使用html5新标签
首先我们知道html5的新标签再老版本的ie中并不被支持和识别,所以如果你的代码使用的是html5新标签例如header footer等那么就需要做一些工作了。 首先加在表头加入以下代码:<!--[if lte IE 8]> <script type="text/javascript"> (function(){if(!/*@cc_on!@*/0)return;var原创 2017-10-17 17:36:44 · 574 阅读 · 0 评论 -
定义函数的两种方法:函数表达式和函数声明
函数表达式 函数表达式的常见声明方式如下fun1();//在函数声明前调用会出错var fun1 = function () {};fun1();//必须在函数声明之后调用这里其实是给变量fun1赋值了一个匿名函数,变量提升后,如果在赋值之前调用会是undifined。所以要在声明之后调用。函数声明fun2()//函数声明可以在函数声明之前调用没问题function fun2() {}原创 2017-12-14 12:45:04 · 598 阅读 · 0 评论 -
h5中的画布----Canvas
Html5中新增标签有canvas canvas是一个用来展示绘图效果的标签,它和img类似,都是行内块元素。 同一个页面可以拥有多个canvas标签。 画布默认300*150,要设置画布的宽高,需要借助canvas元素的属性。var cvs=document.getElementById(‘cvs’); var ctx=cvs.getContext(‘2d’);canvas中有很多的方法和原创 2017-12-07 17:55:49 · 799 阅读 · 0 评论 -
angular表单验证之表单嵌套
正常情况下我们的浏览器不支持两层的表单嵌套,所以,angular提供了ng-form来让我们达到这样的目的,主要用于部分表单提交,同时进行表单验证。from> ng-from> ng-from>form>这样就可以。 同时当我们使用input的number类型的时候,min和max属性限制之外的数值用js是获取不到的只能是undifined。 如input原创 2018-01-30 18:18:46 · 1120 阅读 · 1 评论 -
setTimeOut 运行机制 js(单线程)
最近又遇到关于setTimeOut 的问题,再次对js运行机制做一个复习众所周知js是单线程的,这也是js的一大特点之一,它的这一特性是由它的用途所决定的,主要执行页面逻辑与用户交互,单线程就是同一时间只能做一件事情,虽然js有同步任务和异步任务(ajax,timer等)之分,但是他们其实都是按顺序加载的,而不可能同步任务执行的时候异步任务也在执行。单线程的js保证了运行简化,不会由于...原创 2018-02-11 18:33:02 · 683 阅读 · 0 评论 -
angular中使用echarts (echarts 小入门)
angular + echarts 使用首先在你的index页面通过script标签把echarts引入到你的项目。(下载和引入方式不限官方包括了官网下载,github,npm下载npm install echarts --save,我这里用的最简单的script标签)。如下代码: <script type="text/javascript"src="vendor/echarts3....原创 2018-03-07 16:12:01 · 5987 阅读 · 5 评论 -
判断两个对象是否相同,判断对象数组中是否含有某个对象。
var json1 = { addroleData: [{ key:1, label:'一' },{ label:'二', key:2 },{ key:3, label:'三' },{...原创 2018-03-09 17:50:44 · 9945 阅读 · 0 评论 -
时间戳和日期格式相互转换
时间戳和日期格式相互转换日期转换时间戳 //var data = new Date(); var date = new Date("2018-03-14 11:11:11"); //时间对象 var str = date.getTime(); //转换成时间戳 str = str / 1000; 时间戳转换时间filter('timeToDat...原创 2018-03-16 12:44:00 · 8954 阅读 · 0 评论 -
JS去除数组中的空字符串(空格也清除)
$scope.gop.pictTypeArr = $.grep($scope.gop.pictTypeArr, function (x) { return $.trim(x).length > 0; });在这里我是在angular中使用的。平时我们可以这样Arr = $.grep(Arr, function (x) { return $.trim(x).len...原创 2018-03-21 10:51:31 · 20289 阅读 · 1 评论 -
监听$destroy来清除定时器
程序中我们常用到定时器来实现某些效果,比如倒计时等。但是我们使用定时器的同时,千万不要忘了当你不需要某个定时器的时候,一定要对其进行清除。否则不仅会拉低性能,而且会造成一些怪异的问题。通常情况就是闪动,数字或者某个节点的闪动。而通常我们在关闭某个功能点的时候,也会对定时器进行清除,但是有的时候会因为一些原因,某个$scope确实被销毁了,但是我们监听的情况中并没有包含这一点。这样就会造成定时器...原创 2018-04-16 10:23:00 · 1144 阅读 · 0 评论 -
定时器调用含参数的函数(参函数)
通常我们使用定时器来实现某种功能的时候,如下。function numAdd(num){ num++; console.log(num);}setInterval(numAdd,1000);由于无法传入参数num为undefined,之后进行++运算,变成NaN。而有时候我们会这么做function numAdd(num){ num+...原创 2018-04-17 10:45:47 · 4513 阅读 · 0 评论 -
css3+js:图片的局部模糊
css3+js: 局部高斯模糊的实现 前两篇文介绍了css3的过滤器filter用来实现图片的高斯模糊效果,还有js拖拽的功能。 要实现局部模糊就要把两者结合起来,计算位移就可以了。实现原理 原理其实很简单,就是两张图的叠加。底部一张清晰的图,上面一个高斯模糊过的图,局部显示与下面的图片无缝重合,这样看起来就行下面的图片部分模糊了一样。代码<style...原创 2018-05-21 17:34:32 · 2885 阅读 · 0 评论 -
video标签截取当前帧图
也是工作中的一个需求,需要在视频播放中截取当前帧的图片用来当做海报图或者封面图。代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>&原创 2018-07-24 19:02:33 · 14097 阅读 · 0 评论 -
HTML5 drag & drop 拖拽与拖放
拖拽与拖放drop & drag 是html5自带的拖拽与拖放的api语法:所有需要被拖动的元素都要加上draggable属性,默认除了a,img等标签外不可拖动。// html 行内绑定<element ondrag="myScript">// js 绑定元素object.ondrag=function(){};// 全局监听object.addEven...原创 2018-10-12 17:01:55 · 686 阅读 · 0 评论 -
JavaScript内置对象与方法(Array篇)
JavaScript内置对象与方法—Arrayconcat() shift() slice() sort() splice() join() unshift() pop() push() reverse()原创 2016-10-22 22:10:08 · 328 阅读 · 0 评论