笔记
lucky_girl_girl
这个作者很懒,什么都没留下…
展开
-
移动页面元素,先从原点出发,向左移动20px,再向上移动50,最后再向左移30px,请把运动路径画下来
一.用callback形式回调const walk=(target,direction,distance,callback)=>{ setTimeout(()=>{ //parseInt() 10代表只能是10的倍数 let currentLeft=parseInt(target.style.left,10) let currentTop=parseInt(target.style.top,10) console.info('currentLeft',currentLef原创 2022-03-17 11:24:43 · 367 阅读 · 0 评论 -
js判断数据类型的几种方法的总结
一.js数据类型及其判断1.typeof 数组和null,date属于object类型console.info(typeof 5) //numberconsole.info(typeof 'a')//stringconsole.info(typeof true)//booleanconsole.info(typeof undefined)//undefinedconsole.info(typeof null)//objectfunction fn(){ }console.info(t原创 2022-03-15 21:58:09 · 581 阅读 · 0 评论 -
两种用原生js如何获取文档中任意一个元素与文档顶部的距离
一.用原生js如何获取文档中任意一个元素与文档顶部的距离//方式一const offset=ele =>{ let result={ left:0,top:0 } const getOffset=(node,init)=>{ //如何不是一个元素节点 if(node.nodeType!=1){ return } //获取定位类型 let position=window.getComputedStyle(node)['position'] //如果定位类原创 2022-03-15 10:27:51 · 2181 阅读 · 0 评论 -
js调用栈,js闭包,js数据类型的堆栈空间,常见内存泄漏场景及解决办法
1.调用栈 先入栈先出栈function foo1(){ foo2()}function foo2(){ foo3()}function foo3(){ console.info('foo4')}foo1()2.闭包 内层函数可以引用外层作用域下的变量function numGenerator(){ let num=1 num++ return ()=>{ console.info(num) }}var getNum=numGenerator()getNu原创 2022-03-14 16:57:10 · 270 阅读 · 0 评论 -
js中this指向问题
一.全局环境下的this,在严格模式下,this会绑定到undified,在非严格模式下绑定到window上function f1(){ console.info(this)}function f2(){ 'use strict' console.info(this)}f1() //输出windowf2() //输出undified二.上下文中调用的this,指向最后调用它的对象const person={ name:'Lucas', brother:{ name:'原创 2022-03-14 10:52:34 · 391 阅读 · 0 评论 -
vue 中NonProp的使用
一.子组件代码<template> <div> <p>通过prop接收:{{content}}</p> <p>通过NonProp接收:{{$attrs.nonPropContent}}</p> </div></template><script>export default { name:'NonProp', props:['co原创 2022-03-04 09:15:14 · 245 阅读 · 0 评论 -
vue中computed和watch的区别
一.computed计算后的值不需要再data中定义。watch中监听后的值需要在data中定义。二.computed有缓存,watcher不存在缓存三.computed代码更加简洁<template> <div> <p>我所在的城市:<input v-model="city"/>(这个是watched property)</p> <p>我所在的街道:<input v-model='d原创 2022-03-03 21:51:47 · 666 阅读 · 0 评论 -
vue中computed,methods区别
一.computed和methods主要区别在于是否有缓存。computed每次都会把结果缓存起来,如果依赖的数据没变都不会重新计算。methods每次都会重新计算相应的值。<template> <div> <p>原始字符串:{{text}}</p> <p>通过computed运算后得到的字符串:{{computedText}}</p> <p>通过method运算后原创 2022-03-03 21:28:34 · 301 阅读 · 0 评论 -
函数作用域(普通函数,元编程定义函数)
一.普通函数可以对全局变量做赋值var a=2function four(){ console.info('in four,before a=4:'+a) //输出2 if(true){ a=4; } console.info('in four,before a=4:'+a) //输出4}二,通过元编程定义函数中的变量,不会污染全局变量var foo=1var six=(function(){ var foo=6 return function(){ cons原创 2022-03-03 20:15:42 · 91 阅读 · 0 评论 -
vue中v-model的后缀词
1.v-model.lazy在用户对文本输入的时候,文本框的字不会随着用户按下的每个键立刻发生变化,而是等焦点彻底离开文本框才会显示。input:<input v-model.lazy="inputValue" type="number"/>输入的值:{{inputValue}}2.v-model.number强制输入数字input:<input v-model.number="inputValue" type="text"/>输入的值:{{inputValue}3.原创 2022-03-02 17:51:09 · 461 阅读 · 0 评论 -
vue执行原理流程
1.用户在浏览器中输入网址,按回车键2.浏览器加载所有的资源(js,html内容),此时尚未解析。3.浏览器加载vue.js4.vue.js程序被执行,发现页面中的指令进行相关的解析5.HTML的内容被替换,展现给用户这一过程符合单页面局部加载的问题...原创 2022-03-01 10:03:40 · 375 阅读 · 0 评论 -
ES6常见新增特性
一.let varvar 可能会引起变量提升和块级作用域问题let 为了解决上面的问题二.导入代码 用import三.方便其他代码使用自己,export default{}四.函数简写data(){}等同于data:function(){}五.箭头函数六.分号可以省略七.解构赋值person:{name:‘tom’,age:18}解构赋值可以写成:let {name,age}=person等同于:let name=person.namelet age=perso原创 2022-03-01 09:17:18 · 65 阅读 · 0 评论 -
前端SPA三大框架的对比
单页面应用主要是局部刷新的优势,速度快,带宽小。客户端服务器端压力小。一.angular1.SPA老大哥,起源于google。2.第一个SPA框架3.双向绑定,MVC的解耦。二.react1.facebook推出2.使用js就可以写前后端代码。3.reactnative应用手机端很流行三.vueJS1.简单易学2.其他两大框架有的功能vue都有。3.中国人开发,文档有中英文版。4.github上stars数增长趋势最高。...原创 2022-02-27 14:41:15 · 1024 阅读 · 0 评论 -
左边div固定宽度,右侧div固定的方式
1.父级div定位relative,子级右侧div position left:左边宽度,right:0<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <style> .container{ position:relative; width:500px; height:5原创 2021-03-19 16:08:51 · 223 阅读 · 0 评论 -
js 数组的every和some方法的区别
1.js的every只要数组中有一个值为false,这个返回就是false,全部为true才会返回true。类似||或操作2.js的some只要数组中有一个值为true,返回就是true,全部为false返回的才是false。类似&&与操作...原创 2021-01-07 11:33:01 · 324 阅读 · 1 评论 -
js用sort存在排序不正确漏洞
解决办法:computed:{sortItems:function(){return this.items.sort(sortNumber)}}function sortNumber(a,b){return a-b}<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn原创 2020-08-01 18:04:58 · 276 阅读 · 0 评论 -
微信小程序 swiper
一.wxml<view class="section"> <swiper indicator-dots="{{inditoeDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imgUrls}}"> ...原创 2020-04-12 11:02:21 · 126 阅读 · 0 评论 -
wx.showActionSheet不能超过6个解决方案
一.选择用picker参考地址:https://developers.weixin.qq.com/miniprogram/dev/component/picker.html二:代码wxml <picker bindchange="bindFromPickerChange" value="{{fromIndex}}" range="{{orderData.station}}"> ...原创 2020-04-10 10:27:17 · 2433 阅读 · 0 评论 -
小程序快捷键
Ctrl+end 移到文件结尾Ctrl+home 移到文件开头Ctrl+i 选中当前行shift+end 选择从光标到行尾shift+home 选择从行首到光标处ctrl+d 选中匹配ctrl+u 光标回退ctrl+s 保存ctrl+shift+[ 折叠代码块ctrl+shift+] 打开折叠块ctrl+c ,ctrl+v 复制,粘贴shi...原创 2020-04-09 09:31:25 · 311 阅读 · 0 评论 -
微信小程序根据起点和终点进行路线规划(driving)
一:wxml部分<view class="panel-map"> <map longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" polyline="{{polyline}}" scale="12"></map></view>二.js 在js顶部声...原创 2020-03-31 10:37:37 · 1592 阅读 · 0 评论 -
微信小程序(模糊查询)qqmap-wx-jssdk.js使用
1.下载qqmap-wx-jssdk.jshttps://lbs.qq.com/qqmap_wx_jssdk/index.html2.将下载后的文件下载到项目3.调用var qqMapWx = new QQMapWX({ key: ' key值' }) qqMapWx.getSuggestion({ keyword:value, region:_this...原创 2020-03-27 14:06:39 · 7179 阅读 · 0 评论 -
微信小程序 搜索框(searchbar组件的使用)
1.下载searchbar及相关联cell和cells组件https://developers.weixin.qq.com/miniprogram/dev/extended/weui/download.html2.将组件放到代码模块下3.修改json文件中组件路径引用4.引用json部分 "usingComponents": { "mp-searchbar": "../...原创 2020-03-27 11:58:26 · 15090 阅读 · 5 评论 -
小程序 输入框禁止输入和显示可输入切换
根据isApply来设置禁止框和输入框可输入切换<button wx:if="{{!isApply}}" class="submit_btn" form-type="submit" readonly="{{isApply}}">提交</button><button wx:if="{{isApply}}" class="submit_btn" form-type="...原创 2020-03-25 11:24:14 · 1798 阅读 · 1 评论 -
小程序提交按钮
两处需要设置:1.button。通过form-type=“绑定事件”。此处submit是绑定事件确认提交2.form 。通过bindsubmit=“绑定事件”。此处submit是绑定事件原创 2020-03-17 17:52:15 · 2501 阅读 · 1 评论 -
小程序vue与实际vue差别两点
在data里声明isShow:false;data: {isShow:false,},改变data的值:this.setData({isShow:!this.data.isShow})改变data的值需注意两点和vue的不同1.改变值需用this.setData而不是this.isShow=!this.isShow2.访问data是this.data.isShow,而不是this....原创 2020-03-17 17:26:58 · 262 阅读 · 0 评论 -
js的继承,多态
js通过对象冒充的方式达到继承。此处主人类还是会去判断动物类型和食物类型,体现多态。多态:同一操作作用于不同的对象,可以有不同的解释,产生不同的结果。基类的引用指向指向子类的对象。<html><head><script language="javascript"> function Master(){ this.feed=function(a...原创 2020-03-14 20:14:37 · 140 阅读 · 0 评论 -
js中修改css样式两种方法
在这里插入代码片<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <met...原创 2020-03-13 20:09:30 · 655 阅读 · 0 评论 -
$emit和$on vue组件之间的通信
通过创建一个空的vue实例Event,通过Event.emit和Event.emit和Event.emit和Event.on配合使用达到vue之间的通信。在这里插入代码片<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><title>Vue 测试实例 -...原创 2020-03-11 19:42:35 · 224 阅读 · 0 评论 -
js实现冒泡排序
在这里插入代码片 var flag=false; var arr=[79,56,90,4,32,27,54] for(var i=0;i<arr.length-1;i++){ for(var j=0;j<arr.length-1-i;j++){ if(arr[j]>arr[j+1]){ var temp=arr[j]; arr[j]=...原创 2020-03-08 18:27:35 · 80 阅读 · 0 评论 -
js中arguments可访问传入的所有参数值
在这里插入代码片 function test(){ for(var i=0;i<arguments.length;i++){ document.write(arguments[i]) } } test(3,4,5) //输出3,4,5原创 2020-03-07 21:27:03 · 208 阅读 · 0 评论 -
浏览器标签中显示京东logo
1.截图制作京东小图标2.通过link标签引入。![在这里插入图片描述](https://img-blog.csdnimg.cn/20200303161525585.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1Y2t5X2dp...原创 2020-03-03 16:16:40 · 366 阅读 · 0 评论 -
京东首页案例
<!DOCTYPE html><html><head> <meta charset="UTF-8"></head><style> ul,li{margin:0;padding:0} li{ list-style:none; } a{ text-decoration:none; } .header...原创 2020-03-03 11:49:21 · 879 阅读 · 0 评论 -
常见前端笔试题:setTimeout为0
一.js是单线程, js是单线程的,单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就不得不一直等着。二.var是全局变量,let 是局部变量。当前的 j 只在本轮循环中有效,每次循环的 j 其实都是一个新的变量for (var i = 0; i < 10; i++) { setTimeout(function(){ ...原创 2020-03-02 21:12:04 · 252 阅读 · 0 评论 -
css组合选择器
div p{}选择div下的所有后代元素pdiv>p{}选择div下的子元素pdiv+p{}选择div下面的唯一比邻元素pdiv~p{}选择div下面所有兄弟元素pdiv,p,a{}选择所有div,和所有p,和所有a元素...原创 2020-02-26 21:00:52 · 97 阅读 · 0 评论 -
前端常见面试题:display:none和visibility:hidden区别
display:none;隐藏相应的元素。元素在文档布局中不再给它分配空间,它的各边会合拢,就当它不存在。visibility:hidden;隐藏相应元素。元素在文档布局中仍保留原来的空间。...原创 2020-02-24 21:26:58 · 374 阅读 · 0 评论 -
前端常见面试题:用css隐藏一个元素的五种方法
1.opacity:0; 占位2.visibility:hidden;占位3.display:none;不占位4.height:0;overflow:hidden; 不占位5.position:absolute;left:-9999px;top:-9999px.;原创 2020-02-23 21:03:41 · 274 阅读 · 0 评论 -
前段常见面试题:同步和异步
同步和异步区别:1.同步是阻塞模式,异步是非阻塞模式。2.是指发送一个请求,需要等待返回,然后才能发送下一个请求。有个等待过程。3.异步发送一个请求,不需要等待返回,直接就可以发送下一个请求。console.log(1);setTimeout(function(){ console.log(2);},1000);console.log(3); /*结果如下: ...原创 2020-02-23 20:50:32 · 1111 阅读 · 0 评论 -
前端常见面试题:响应式布局
1.pc端响应式布局:是指屏幕大小缩放时样式发生相应改变。运用媒体查询@media来设置。2.移动端响应式布局:是指根据移动端不同设备实现页面正常显示的方案。运用以下三种方案布局:a. 百分比布局。b. flex布局。c. rem布局...原创 2020-02-22 22:19:22 · 3898 阅读 · 0 评论 -
前端常见面试题:一个页面有大量图片,怎么优化:
1.图片懒加载,滚动到某个位置再加载图片2.图片预加载,预先加载图片的前一张和后一张3.css sprite 精灵图加载原创 2020-02-22 19:26:08 · 1331 阅读 · 0 评论 -
媒体查询
一.屏幕大于500小于800div颜色为粉色@media screen and (max-width:800) and (min-width:500){div{background:pink}}二.横屏:orientation:landscape竖屏:orientation:portrait@media screen and (orientation:landscape){div{b...原创 2020-02-21 21:08:29 · 124 阅读 · 0 评论