JS
文章平均质量分 78
_Nana_
这个作者很懒,什么都没留下…
展开
-
初步理解JS事件循环机制 Event Loop
JS是单线程引擎,在线程中拥有唯一一个事件循环(web workder涉及到了多线程,再做补充)JS代码执行过程中,除了依靠函数调用栈顺序执行JS代码,还依靠任务队列(task queue)执行一些代码。一个线程中,事件循环是唯一的,但是任务队列可以有多个。任务队列分为macro-task(宏任务)和micro-task(微任务),新标准中称为task和jobs。macro-task包括s...原创 2018-10-11 10:46:25 · 444 阅读 · 0 评论 -
阻止苹果xs max浏览器页面整体滚动
今天发现一个神奇的现象,在苹果xs max型号手机上滑动一个列表页面,整个页面(包括顶部fix的头组件)都在滑动,网上称之为橡皮筋效果。页面的滚动看起来比较乱,其实知道原理可以分析出:外层的滚动(上下会出白色无内容空间)是由于body在touchmove时发生了滚动,内层的滚动(如列表内容在页面空间内滑动)是由于页面组件在touchmove时发生了滚动。其实际上是个冒泡问题,解决办法是阻止...原创 2019-04-26 17:44:07 · 1248 阅读 · 1 评论 -
JS 今天/明天的日期
//今天的日期var today = new Date();today.setTime(today.getTime());var todayStr = today.getFullYear()+"-" + (today.getMonth()+1) + "-" + today.getDate();//明天的日期var tomorrow = new Date();tomorrow.setTi...原创 2019-03-19 19:01:19 · 5018 阅读 · 0 评论 -
最简单快速理解Promise与setTimeout
PromiseMDN上的例子稍稍变化:var p = new Promise(function(resolve, reject){ setTimeout(function(){ resolve("foo"); console.log("first"); }, 1000);});p.then(function(value){ console.log(v原创 2019-03-06 11:09:12 · 1993 阅读 · 0 评论 -
数组的奥妙(更新中)
一、数组新建方法一:var a = [1,2,3]; 这种方法最好,但是针对很长的数组不好实现;方法二:new Array(LENTH) 这种方法会产生数组中的holes,可以通过fill()填充优化var a = new Array(3); // [,,]var a = new Array(3).fill(0); // [0,0,0]方法三:Array.from()从array-li...原创 2019-01-15 10:31:32 · 197 阅读 · 0 评论 -
React操作DOM —— 添加查看原图按钮的图片点击事件
时刻提醒自己React的生命周期,镇楼图:需求:点击页面中的图片获取到全部图片的src以及当前图片的index。麻烦点:页面是react编写;页面显示的数据均是由后端以拼接html形式传过来的,img也在html拼接结果中。踩坑过程:首先,不能在componentDidMount中获取到imglist,因为componentDidMount最后才异步获取后端接口数据,所以想在co...原创 2018-12-11 20:06:47 · 3098 阅读 · 0 评论 -
JS原生操作DOM(更新中)
在React项目中有时需要原生的JS操作DOM(项目没有引用jquery库),这里持续更新一些方法:一、父子节点中插入中间层(div等)最近在做一个需求,一个后端返回的html代码中给图片加“查看原图”按钮,由于需要基于父元素定位,所以要用div将原有的img包起来,并且在img后加入input标签,需要用到插入中间层的功能。思路:通过img获取到父元素,在父元素中添加新的div子元素,然后...原创 2018-12-21 14:43:06 · 548 阅读 · 0 评论 -
原型与原型链继承
梳理概念关于这部分内容有几个概念,首先看一段最简单的代码:function Person(){}var person = new Person();注:Person中可以有this.属性 = 传入参数,但这里不加任何内容,Person也是构造函数,即构造函数看起来可以是一个普通函数。在这段代码中就包含着三个概念构造函数(Person)、实例(person)、以及原型/原型对象。三...原创 2018-12-07 15:55:35 · 194 阅读 · 0 评论 -
楼层跳跃思路——页面导航实现锚点
楼层跳跃是移动端App常见的模块,实现功能是页面模块引导、快速定位到用户选择模块。以大众点评 - 餐厅详情页面为例:楼层跳跃有几个点需要考虑:1、何时出现以及在页面滑动中置顶;2、计算各模块offset和height;⚠️如果页面有异步加载数据(模块动态加载),需要等数据异步返回后再计算各模块offset和height(全部返回判断采用count计数);3、导航点击时,已经选中的条目...原创 2018-12-13 19:45:59 · 784 阅读 · 0 评论 -
观察者模式与发布订阅模式对比
直接上代码,很简单的两个例子:// subscribe_publish: 发布订阅模式// 有一个中间的事件通信通道,订阅者A和发布者B是通过pubsub这个对象关联起来的,他们没有直接的交流。console.log("pubsub:")var pubsub = (()=>{ var topics = {}; function subscrbe(topic, fn){...原创 2018-12-05 17:01:41 · 308 阅读 · 0 评论 -
slice/splice
鉴于本人总是把slice和splice弄混,此处写一遍加深记忆。首先注意两者的共同点:针对数组不同点在于:功能完全不同;返回值的用法不同;是否改变原数组sliceslice的作用是从已有数组中返回选定的元素。参数说明:arrayObject.slice(start, end)start —— 必需,规定从何处开始选取。如果是负数,则规定的是从数组尾部开始算起的位置(-1...原创 2018-12-04 17:40:45 · 172 阅读 · 0 评论 -
前端面试题集锦——JS篇(更新中)
1、原题:链接:https://www.nowcoder.com/questionTerminal/8e3f169e6199429cb730fe3cd40957b0来源:牛客网请给出这段代码的运行结果( )var bb = 1;function aa(bb) { bb = 2; alert(bb);};aa(bb);alert(bb);a. 1 1b. 1 2...原创 2018-11-16 14:58:35 · 240 阅读 · 0 评论 -
辨析undefined与null与void(0);
NullMDN对null的定义是:The value null represents the intentional absence of any object value. It is one of JavaScript’s primitive values.(备注:JS的六个数据类型Number、String、Boolean、Undefined、Null、Object)In APIs...原创 2018-11-15 18:23:04 · 588 阅读 · 0 评论 -
最简单快速理解jsonp
我比较喜欢想明白原理再做代码实现,在研究了一些博客后发现jsonp的原理非常简单:本地(需要调用数据的一方)写好一个函数比如叫ineed,函数里包含需要的远程数据data;远程(存有数据的一方)文件中调用ineed,传参为json格式,里面包含data;以上。代码实现:本地 <script> var ineed = function(result){ co...原创 2018-11-09 11:04:49 · 222 阅读 · 0 评论 -
前后端交互方式(同一页面并行开发、变量传递)
刚做完一个项目的改进需求,总结一些项目心得,主要有两方面:同一个页面,前后端各负责几个模块开发,如何页面整合?前端如何从后端获取数据?1 前后端按模块开发同一页面首先,在这个项目中没有用到vue、react这些框架,实现页面的一种做法是前端通过html/css/js把页面搭建出来,再交由后端改造成ftl/jsp等模版页面,但是这个过程造成前后端开发的不同步;另一种做法是前端负责开发一...原创 2018-10-30 17:52:04 · 795 阅读 · 0 评论 -
立即执行函数 —— 隐藏私有成员
const module = (function() { let a = 25; const m1 = () => { console.log(a); } return { foo1: m1, }})()Chrome测试:module.foo1()// 25原创 2018-09-28 14:15:13 · 350 阅读 · 0 评论 -
使用js添加script标签
在开发中可能遇到需要使用到某个js里的方法,但是页面是后端返回的,不方便让后端添加js的时候(同一个页面的模版可能多个页面使用,只有一个页面需要引入js时,最好不要修改模版),可以通过js代码进行添加:var secScript = document.createElement("script");secScript.setAttribute("type", "text/javascript"...原创 2019-04-25 18:07:22 · 9937 阅读 · 0 评论