javaScript
毅江
这个作者很懒,什么都没留下…
展开
-
js new命令原理
使用new命令时,它后面的函数依次执行下面的步骤。创建一个空对象,作为将要返回的对象实例。 将这个空对象的原型,指向构造函数的prototype属性。 将这个空对象赋值给函数内部的this关键字。 开始执行构造函数内部的代码。也就是说,构造函数内部,this指的是一个新生成的空对象,所有针对this的操作,都会发生在这个空对象上。构造函数之所以叫“构造函数”,就是说这个函数的目的,就是...转载 2019-01-22 19:38:21 · 1260 阅读 · 1 评论 -
js 通用事件绑定
function bindEvent(elem, type, selector, fn) { if (fn == null) { fn = selector; selector = null; } elem.addEventListener(type, function(e) { var target = e.target; if (selector) { //代理...原创 2019-02-12 21:10:40 · 260 阅读 · 0 评论 -
alibaba 阿里面试题
使用css实现一个持续的动画效果 12345 animation:mymove 5s infinite;@keyframes mymove {from {top:0px;}to {top:200px;}} 主要考:animation 用法值 描述 animation-name 规定需要绑定到选择器的 keyfr...转载 2019-03-04 22:30:54 · 191 阅读 · 0 评论 -
阿里\网易和滴滴2017面试转
阿里面试了三个部门,都是在二面挂的,网易和滴滴也是各两轮技术面试,加一起就是十次面试经历。在此回忆总结一下,既是给社区朋友的一个参考,反馈社区,更是给自己一个好好的总结。HTML HTML5新增了哪些内容或API,使用过哪些 input和textarea的区别 用一个div模拟textarea的实现 移动设备忽略将页面中的数字识别为电话号码的方法 --- 2...转载 2019-03-05 11:43:22 · 137 阅读 · 0 评论 -
http的协商缓存 、强缓存
本文主要讲解浏览器端的缓存,缓存的作用是不言而喻的,能够极大的改善网页性能,提高用户体验。1、浏览器缓存缓存这东西,第一次必须获取到资源后,然后根据返回的信息来告诉如何缓存资源,可能采用的是强缓存,也可能告诉客户端浏览器是协商缓存,这都需要根据响应的header内容来决定的。下面用两幅图来描述浏览器的缓存是怎么玩的,让大家有个大概的认知。浏览器第一次请求时:浏览器后续在进行请求...转载 2019-03-09 21:50:49 · 185 阅读 · 0 评论 -
tcp 三次握手
三次握手建立连接:第一次握手:客户端发送syn包(seq=x)到服务器,并进入SYN_SEND状态,等待服务器确认;第二次握手:服务器收到syn包,必须确认客户的SYN(ack=x+1),同时自己也发送一个SYN包(seq=y),即SYN+ACK包,此时服务器进入SYN_RECV状态;第三次握手:客户端收到服务器的SYN+ACK包,向服务器发送确认包ACK(ack=y+1),此包发送完毕,客户...转载 2019-03-09 21:54:19 · 182 阅读 · 0 评论 -
从输入URL到页面加载的全过程-- 前端理解
1、浏览器的地址栏输入URL并按下回车。 2、浏览器查找当前URL是否存在缓存,并比较缓存是否过期。 3、DNS解析URL对应的IP。 4、根据IP建立TCP连接(三次握手)。 5、HTTP发起请求。 6、服务器处理请求,浏览器接收HTTP响应。 7、渲染页面,构建DOM树。 8、关闭TCP连接(四次挥手)。 说完整个过程的几个关键点后我们再来展开的...转载 2019-03-09 22:18:22 · 3516 阅读 · 0 评论 -
函数式编程和响应式编程
到底什么是函数式,他和命令式编程和面向对象有什么区别。(知乎上已经有很多讨论了,感兴趣的话,我在结尾的地方贴了一些链接。)总的来说,在函数式中,函数是一等公民,函数能作为变量的值,函数可以是另一个函数的参数,函数可以返回另一个函数等等。函数式编程函数式编程是一系列被不公平对待的编程思想的保护伞,它的核心思想是,它是一种将程序看成是数学方法的求值、不会改变状态、不会产生副作用(后面我们...转载 2019-03-10 13:12:28 · 1766 阅读 · 0 评论 -
Attribute和Property的区别
一:Attribute和Property的区别1.含义区别首先在定义上更准确的来说,Attribute和Property分别为特性和属性,作为区别。其次,这样理解下来,我们知道Attribute就是DOM节点自带属性,例如我们在HTML中常用的id,class,src,title,alt等。而Property则是这个DOM元素作为对象,其附加的属性或者内容,例如childNodes,fir...原创 2019-03-11 21:31:27 · 18076 阅读 · 2 评论 -
js onclick addeventlistener 区别
onclick()这种写法是DOM0级规范的写法,是所有的浏览器支持的,但是这种写法有不能同时绑定多个事件、使代码耦合在了一起的弊端。但是addEventListener() 是DOM2标准中定义的方法,它可以控制是在事件捕获阶段或者是在冒泡阶段调用事件处理程序。既然这个是DOM2标准中定义的,那么只有支持DOM2级事件处理程序的浏览器才支持这个方法(IE9,Firefox,Safari,Chro...原创 2019-03-11 21:37:09 · 300 阅读 · 0 评论 -
js中的异步以及事件轮询 (event loop) 机制
一、JS为何是单线程的? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊。(在JAVA和c#中的异步均是通过多线程实现的,没有循环队列一说,直接在子线程中完成相关的操作) JavaScript的单线程,与它的用途有关。作为浏览器脚本语言,JavaScript的主要用途是与用户...原创 2019-04-30 18:30:54 · 1917 阅读 · 0 评论 -
ios 微信浏览器下 input失去焦点后 软键盘收起后 被撑起上移动的页面 没有归位
在iOS微信浏览器下 input 获取焦点软键盘弹起把页面整体往上撑起了移动了一定距离, 失去焦点后 软键盘收起后 被撑起往上移动的页面没有归位,导致页面上的元素错位,点击按钮,input输入框等的位置发生错位。解决办法两种:1、当input失去焦点后,使用js将页面滚动到顶部。//滚动到顶部 scrollToTop:function(){ ...原创 2019-05-07 14:31:53 · 2080 阅读 · 0 评论 -
webpack 的项目使用script动态导入第三方库
最近有个项目需要导入腾讯云的图片验证js库官方文档https://007.qq.com/quick-start.html?ADTAG=acces.cfghttps://ssl.captcha.qq.com/TCaptcha.js像这种只提供script方式引入的第三方库,在webpack项目中使用,1、可以使用webpack.ProvidePlugin 【提供了npm安装方式的库没...原创 2019-05-23 16:44:41 · 3697 阅读 · 0 评论 -
Vue 服务端渲染(SSR)
一、什么是服务端渲染(SSR)Server Side Render简称SSR,服务端渲染。在ajax兴起之前,特别是在SPA(单页面应用(Single-Page Application))技术流行之前,大部分的web应用都采用的是服务端渲染。即服务器端在接收到用户请求网页的时候,由服务端先调用数据库,获得数据之后,将数据和页面元素进行拼装,组合成完整的 html 页面,再直接返回给浏览器,以便...原创 2019-06-28 14:44:11 · 1912 阅读 · 1 评论 -
object对象复制 / array复制
00、深度拷贝这里有三点需要注意:1、用new obj.constructor ()构造函数新建一个空的对象,而不是使用{}或者[],这样可以保持原形链的继承;2、用obj.hasOwnProperty(key)来判断属性是否来自原型链上,因为for..in..也会遍历其原型链上的可枚举属性。3、上面的函数用到递归算法,在函数有名字,而且名字以后也不会变的情况下,这样定义没有问题。但问题...原创 2019-01-15 16:10:47 · 1576 阅读 · 1 评论 -
排序
1、冒泡(从小到大排序)function maopao(arr){ let len = arr.length-1; for (let i = 0; i < len; i++) { for (let j = 0; j < len-i; j++) { if(arr[j]>arr[j+1]){ let tmp = arr[j...原创 2019-01-15 10:46:59 · 92 阅读 · 0 评论 -
js 获取cookie值
var allcookies = document.cookie;function getCookie(cookie_name){ var allcookies = document.cookie; var cookie_pos = allcookies.indexOf(cookie_name); //索引的长度 // 如果找到了索引,就代表cookie存在, // 反之转载 2016-11-18 16:53:05 · 363 阅读 · 0 评论 -
Js实现上下左右无缝隙滚动代码 一
向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)var speed=30;var colee2=document.getElementById("colee2");var colee1=document.getElementById("colee1");var colee=document.getElementBy转载 2017-05-15 14:32:05 · 1184 阅读 · 0 评论 -
Js实现上下左右无缝隙滚动代码 二
利用js 实现无缝滚动效果。有往上滚动,往下滚动,往左滚动,往右滚动。 innerHTML: 设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度。 scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop: 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的转载 2017-05-15 14:34:45 · 425 阅读 · 0 评论 -
javascript 刷新和跳转页面的集中方法
Javascript刷新页面的几种方法:1 history.go(0)2 location.reload()3 location=location4 location.assign(location)5 document.execCommand('Refresh')6 window.navigate(location)7 location.replace(locatio原创 2017-06-13 10:05:18 · 401 阅读 · 0 评论 -
div 高度随窗口动态变化
var resizeDiv = function(){ heightWin = $(window).height(); heightWin2 = document.body.clientHeight; console.log("h1----"+heightWin+'h2---'+ heightWin2); document.getEl原创 2017-08-01 18:07:51 · 713 阅读 · 0 评论 -
js判断json对象是否为空
1.最简单的方法,判断是否有对应的属性, 当然这里并不能判断是否为空[javascript] view plain copy print?var dd={yy:""}; if(dd&&dd.yy!=""){ alert("dd不为空") } else{ alert("转载 2017-09-08 11:39:44 · 36001 阅读 · 0 评论 -
js对用户输入非法字符进行编解码预防xss
1 var HtmlUtil = { 2 /*1.用浏览器内部转换器实现html转码*/ 3 htmlEncode:function (html){ 4 //1.首先动态创建一个容器标签元素,如DIV 5 var temp = document.createElement ("div"); 6 //2.然后将要转换的字符串设转载 2017-09-16 17:22:03 · 2277 阅读 · 3 评论 -
js typeof 和 判断array 以及是Array还是Object或者null
typeof 返回值有六种可能: "number," "string," "boolean," "object," "function," 和 "undefined."以及'symbol' // Symbols typeof Symbol() === 'symbol' typeof Symbol('foo') === 'symbol' typeof Sy原创 2018-07-21 10:51:04 · 30163 阅读 · 0 评论 -
数组去重--数组的每一项是json对象object
function obj2key(obj, keys){ let n = keys.length let key = [] while(n-=1){ key.push(obj[keys[n]]); } return key.join('|'); } //去重操作 export function uniqeByKeys(array,...原创 2018-08-22 16:57:11 · 900 阅读 · 0 评论 -
判断对象( "number," "string," "boolean," "object," "function," 和 "undefined."以及'symbol')是否相等
export function isEqual(obj1, obj2) { if(typeof obj1 !== typeof obj2){ console.log('not one type') return false } if(obj1 instanceof Object && obj2 instanceof Object){ if (O...原创 2018-08-28 10:50:21 · 543 阅读 · 0 评论 -
js 斐波那契数列
指的是这样一个数列:1、1、2、3、5、8、13、21、34、……在数学上,斐波纳契数列以如下被以递归的方法定义:F(0)=1,F(1)=1, F(n)=F(n-1)+F(n-2)(n>2,n∈N*)1、递归function fb1(n){ if(n <= 1){ return 1; }else{ return fb1(...原创 2019-01-17 11:03:18 · 1356 阅读 · 0 评论 -
js 继承
1、function Shape() { this.x = 0; this.y = 0;}Shape.prototype.move = function (x, y) { this.x += x; this.y += y; console.info('Shape moved.');};//我们需要让Rectangle构造函数继承Shape。// 第一步,子...原创 2019-01-23 19:50:13 · 151 阅读 · 0 评论 -
js 模块化
基本的实现方法模块是实现特定功能的一组属性和方法的封装。简单的做法是把模块写成一个对象,所有的模块成员都放到这个对象里面。var module1 = new Object({ _count : 0, m1 : function (){ //... }, m2 : function (){ //... }});上面的函数m1和m2,都封装在module1对象...转载 2019-01-23 19:52:20 · 237 阅读 · 0 评论 -
js 大数相加
1、function add (str1, str2) { let len1 = str1.length; let len2 = str2.length; // let len = len1<len2 ? len1 : len2; let len = Math.max(len1, len2); let res = ''; let jin ...原创 2019-01-18 18:39:00 · 2373 阅读 · 1 评论 -
debounce 防抖、 节流(throttle)
在处理诸如 resize、scroll、mousemove 和 keydown/keyup/keypress 等事件的时候,通常我们不希望这些事件太过频繁地触发,尤其是监听程序中涉及到大量的计算或者有非常耗费资源的操作。有多频繁呢?以 mousemove 为例,根据 DOM Level 3 的规定,「如果鼠标连续移动,那么浏览器就应该触发多个连续的 mousemove 事件」,这意味着浏览器会...转载 2019-01-24 16:55:18 · 388 阅读 · 0 评论 -
javascript filter
div id="filterBox" class="popover fade bottom in" style="display: none; top: 36px; left: 0px;">div class="arrow" style="left: 15.1238%;">div>h3 class="popover-title" style="display: none;">h3>div clas原创 2016-11-16 10:23:22 · 357 阅读 · 0 评论