JS
文章平均质量分 62
安静的对折
这个作者很懒,什么都没留下…
展开
-
JS中短路运算符&&和||
在JS函数中我们经常会使用到短路运算符,主要是逻辑与(&&) 和 逻辑或(||)1、逻辑与 && 的运算方式var a = 5 && 6;console.log(a); //返回的结果为 6如果逻辑与运算符左边的值布尔转换后为true,那么返回右边的值(不管右边的值是真还是假)。var a = false && 6;console.log(a); //返原创 2016-09-01 23:09:40 · 21601 阅读 · 2 评论 -
js解决微信屏蔽内置浏览器的下载功能以及判断手机系统
今天一后台同事问我:为什么从App里面分享到微信好友时,在微信里没有发下载分享里的软件,而在浏览器中却可以?于是我在微信公众号中试了一下,发现果然不可以下载。通过google 发现,原来是微信屏蔽了内置浏览器的下载功能。那么有没有解决办法呢? 肯定是有的。1:判断发现是在微信中打开,给提示让其从右上角选择在浏览器中打开,这样的效果对于用户体验来说肯定是差的。2:将要下载的app上传到腾原创 2017-04-26 14:55:16 · 10171 阅读 · 0 评论 -
移动端滚动穿透的问题解决
在移动端页面上,当有 fixed 遮罩背景和弹出层时,在屏幕上滑动能够滑动背景下面的内容,这就是臭名昭著的滚动穿透问题解决方法一:css之overflow:hiddenhtml, body { overflow: auto; height: 100%;}使用这种方法时,在与饿了么前端 mint-ui 组件库中的 Infinite scroll 存在冲突,导致在原创 2017-07-24 15:26:05 · 2535 阅读 · 1 评论 -
微信公众号开发,ios系统自带返回按钮,不刷新页面
微信公众号开发时,在IOS系统下点击返回按钮,发现返回后的页面是没有经过刷新的,虽然这样是有好处,不用再重新请求页面数据,但是很多时候我们是需要重新去请求页面数据的。首先我们需要监听手机的系统,然后在监听返回事件,当用户点击返回按钮后,将页面进行强制刷新,代码如下var ua = navigator.userAgent; if (ua.indexOf('iPhone') > -原创 2017-08-02 14:23:10 · 13077 阅读 · 0 评论 -
高逼格的console.log(),要不来看下
我们编写前端代码的过程中,经常会用到控制台找一下dom元素,看看css样式是怎么样的,或者打印一些东西,了解一下代码执行的过程以及输出了什么。。。现在我们来换一个姿势看看1、带样式的console.log()这里%c为打印内容定义的样式2、格式打印当然除了%c还有其它%d:打印整数%s:打印字符串%f:打印浮点数%o:打印javascript对象,可以是整数,字符串,JSON对象3、控制台输出树状...原创 2018-05-01 21:23:13 · 7388 阅读 · 0 评论 -
DocumentFragment一个轻量级的document
DocumentFragment 接口表示一个没有父级文件的最小文档对象。它被当做一个轻量版的 Document 使用,用于存储已排好版的或尚未打理好格式的XML片段DocumentFragment 节点不属于文档树,但是有一个很使用的特点,当把一个DocumentFragment 节点插入到文档树中时,插入的不是DocumentFragment 自身,而是它所有的子孙节点,这个特性是的Docum...原创 2018-05-01 22:12:31 · 836 阅读 · 0 评论 -
visibilitystate检测页面是否处于焦点状态
visibilityState主要作用是用于判断当前页面是否处于激活状态,即浏览器标签页是被隐藏还是显示。属性:document.visibilityState取值:visible:页面可见处于显示状态,没有最小化hidden:页面不可见处于隐藏状态或者页面处于最小化事件:document.addEventListener( "visibilitychange" , function(...原创 2018-10-13 15:13:10 · 2148 阅读 · 0 评论 -
js多线程Web Worker
我们知道javascript时单线程模型,即所有任务都在一个线程上完成,前面一个任务如果没有执行完成,后面的任务就只能等待。原创 2018-10-07 17:10:27 · 2536 阅读 · 0 评论 -
原型链
在说原型链之前,我们需要先来讲讲构造函数1、构造函数当任意一个普通函数用于创建一类对象时,它就被称作构造函数。function Person(name, age) { this.name = name; this.age = age}var person1 = new Person('marco', '18');上面的例子中 person1 是 Person 的实例。...原创 2018-10-21 20:01:14 · 339 阅读 · 0 评论 -
javascript中通俗易懂的this指向
JavaScript 的 this 总是指向一个对象,而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的,在具体的实际应用中,this的指向大致可以分为以下4种。1、作为对象的方法调用当函数作为对象的方法被调用时,this指向该对象var obj = { name: 'kk', fn: function(){ console.log ( this.na...原创 2019-02-27 10:09:40 · 252 阅读 · 0 评论 -
javascript设计模式之单例模式
单例模式的定义是:保证一个类仅有一个实例,并提供一个访问它的全局访问点。单例模式实现起来也非常简单,无非就是用一个变量来标志当前是否已经为某个类创建过对象,如果创建过,则在下一次获取该类的实例时,则返回之前创建的对象。我们以一个例子为例,来一步一步的实现单例模式,比如:我们在页面上点击按钮的时候,就在页面上插入一个divvar createDiv = function () { var ...原创 2019-03-04 14:03:27 · 161 阅读 · 0 评论 -
javascript设计模式之工厂模式
工厂模式是指不暴露创建对象的具体逻辑,而是将逻辑封装在一个函数中,这个函数就被称为工厂。工厂模式又可以分为:简单工厂、工厂方法、抽象工厂。1、 简单工厂模式简单工厂模式又叫静态工厂方法,由一个工厂对象决定创建某一种产品对象类的实例。主要用来创建同一类对象。比如我们玩游戏的时候,通常会有多种角色,每个角色又有自己的技能。var Warrior = function () { this.n...原创 2019-03-11 10:51:16 · 215 阅读 · 0 评论 -
javascript设计模式之策略模式
策略模式是指定义一系列算法并把它们封装起来。比如我们在写一个注册页面,有以下几条校验逻辑1.用户名不能为空2.密码长度不能少于6位通常我们会写成下面这个样子function strategy(value) { if(value === '') { alert('用户名不能为空') return false; } if(value.length < 6) ...原创 2019-03-19 09:48:54 · 185 阅读 · 0 评论 -
javascript设计模式之建造者模式
建造者是指将一个复杂的构建与其表示相分离,使得同样的构建过程可以创建不同的表示。比如我们以简历模板为例,有求职者、技能、职位、描述的等等一些功能。// 创建一个人类 var Human = function(phone, skill) { this.phone = phone || '保密' this.skill = skill || '保密' } Human.pr...原创 2019-03-26 11:14:12 · 246 阅读 · 0 评论 -
javascript设计模式之原型模式
原型模式(prototype):用原型实例指向创建对象的类,使用于创建新的对象的类共享原型对象的属性以及方法。其实原型模式也是一种继承,所以原型模式也是javascript语言的灵魂。先写一个士兵基类var Soldier = function () { this.blood = 100; this.level = 1; this.job = '大兵' this.skill =...原创 2019-04-02 09:56:51 · 328 阅读 · 0 评论 -
javascript设计模式之适配器模式
适配器模式:将一个类(对象)的接口(方法或者属性)转化成另外一个接口,以满足用户需求,使类(对象)之间接口的不兼容问题通过适配器得以解决数据的适配数据的适配在前端中是非常常见的场景,它解决了前后端的数据依赖。有的时候服务器传递过来的数据格式和前端需要使用的格式不一致,这种情况在使用UI框架时比较常见,因为框架有自己固定的格式,所以这个时候我们就需要对服务器传递过来的数据格式进行适配。例如我们...原创 2019-04-09 10:21:05 · 265 阅读 · 0 评论 -
js中in操作符
in 操作符用来判断属性是否存在与对象中。使用 in 操作符分单独使用和在 for-in 循环中使用。在单独使用时, in 操作符会在通过对象能够访问给定属性时返回 true ,无论该属性存在于实例中还是原型中 function FF() { this.age = 11; } FF.prototype.name =原创 2017-01-16 22:41:55 · 7205 阅读 · 0 评论 -
js中object类型中的三个方法
hasOwnProperty() :用于检查给定的属性在当前对象实例中是否存在isPrototypeOf() :用于检查传入的对象是否是传入对象的原型propertyIsEnumerable(propertyName) :用于检查给定的属性是否能够被枚举 function F1(name){ this.name = name原创 2017-01-16 22:36:18 · 878 阅读 · 0 评论 -
innerText 与 innerHtml的区别 (一)
innerText 与 innerHtml 都是打印标签之间的文本信息1、innerText打印标签之间的纯文本信息,会将标签过滤掉,低版本的火狐浏览器不支持,而是支持textContent Document 这是P标签 这是P标签 这是P标签 var box = docu原创 2016-09-16 23:33:33 · 42665 阅读 · 1 评论 -
demo1-排它思想-tab栏切换
在js中排它思想非常重要,因为在网面中会经常用到这一思想,例如购物网站上的tab栏切换,以及轮播图……因此写一个小demo来看一看排它思想,如下图所示,点击某一个按钮时,当前按钮改变背景颜色,并且其它按钮的背景颜色变成默认颜色,同时下面的div也跟着显示相应的内容。代码: .box { width: 350p原创 2016-09-17 23:25:55 · 330 阅读 · 0 评论 -
js中DOM的自定义属性
js中DOM的自定义属性方法有:1、设置自定义属性:setAttribute2、获取自定义属性:getAttribute3、移出自定义属性:removeAttribute下面就来看一下它们的具体使用方法 Document //获取对象 var txt = document.getElementById("inp");// c原创 2016-09-17 23:44:29 · 7685 阅读 · 0 评论 -
DOM中的节点类型
因为文档对象是由节点组成,而节点又包括:标签节点,属性节点,文本节点,注释节点如何来区别这些节点的类型呢?需要使用nodeType,节点除了有nodeType,还有nodeName,nodeValue先来看下父节点和子节点 parentNode 获取父节点(或者是父元素),节点与元素是等价的 childNodes 是DOM的标准属性,不但可以获取标签原创 2016-09-18 22:36:16 · 354 阅读 · 0 评论 -
DOM中的兄弟节点
nextSibling、previousSibling 获取下一个、上一个兄弟节点,谷歌火狐浏览器获取的文本节点,而IE8及之前的浏览器会忽略文本节点,获取的是下一个、上一个标签节点 nextElementSibling、previousSibling 获取下一个、上一个兄弟节点,谷歌火狐浏览器获取的是下一个、上一个标签节点,忽略文本节点,但是IE8及之前的浏览器不支持使用原创 2016-09-18 22:43:45 · 1797 阅读 · 1 评论 -
DOM中的第一个和最后一个子节点
firstChild、lastChild 获取第一个、最后一个子节点,谷歌和火狐浏览器获取的是文本节点,而IE8及之前的浏览器会忽略文本节点,获取的是第一个、最后一个子节点firstElementChild、lastElementChild 获取第一个、最后一个子节点,谷歌和火狐浏览器获取的是第一个、最后一个子节点,但是IE8及之前的浏览器不支持使用原创 2016-09-18 22:49:24 · 2566 阅读 · 0 评论 -
DOM中的克隆节点
克隆节点cloneNode()克隆节点cloneNode(false)浅拷贝,只拷贝当前标签节点,而不拷贝标签节点中的内容以及子节点,cloneNode(true)深拷贝,标签中的所有内容全部都拷贝 Document 1111 2222 3333 4444 var ul = document.get原创 2016-09-18 23:23:58 · 2010 阅读 · 0 评论 -
offset、scroll、client三大家族
1、offset 偏移1、offsetWidth 和 offsetHeight 是用来得到对象的大小,由自身宽高内边距边框构成但是不包括外边距offsetHeight和style.height的区别1>style.height只能获取行内样式,offsetHeight可以获取行内样式和内嵌样式2>style.height是字符串(而且带单位),offs原创 2016-09-23 00:26:14 · 8402 阅读 · 0 评论 -
JS中动态创建元素的三种方法
1、动态创建元素一 document.write() 例如向页面中输出一个 li 标签 document.write("123");body标签中就会插入但是这种方法几乎不用,因为这回影响页面的布局,甚至会将页面原来的内容冲刷掉,从而只显示输出内容2、动态创建元素二 innerHTML var box = document.getElement原创 2016-09-19 23:00:00 · 8552 阅读 · 0 评论 -
innerText 与 innerHtml的区别 (二)
innerText 与 innerHtml不仅在获取元素文本上有区别,而且在设置上同样有区别。1、innerText 在设置HTML标签时,会将 Document var box = document.getElementById("box"); box.innerText = "这是P标签这是P标签这是P标签";原创 2016-09-17 23:16:00 · 449 阅读 · 0 评论 -
js数组的方法
数组就是一个有序的数据集合,可以存放任意类型的数据。创建数组的两种方式:1、通过构造函数创建var arr = new Array();2、通过字面量创建var arr = [];数组的方法// concat 连接多个数组,并返回结果 var a = [1, 2, 3]; var b = [4, 5, 6];原创 2016-09-13 21:51:03 · 313 阅读 · 0 评论 -
JS中String()与 .toString()的区别
我们知道String()与 .toString()都是可以转换为字符串类型,但是String()与 .toString()的还是有区别的1、.toString()可以将所有的的数据都转换为字符串,但是要排除null和 undefined例如将false转为字符串类型 var str = false.toString(); console.log(str,原创 2016-09-02 00:00:11 · 3323 阅读 · 0 评论 -
JavaScript中的apply()方法和call()方法
相同点:apply和call方法都是Function.prototype原型中,他们可以改变this的指向,而且都是直接调用函数不同点: apply:参数传入的是数组call:参数传入的是一个一个的 //call和apply通过对象调用的时候,如果传入的是null,那么函数中的this就是window对象 //cal原创 2017-01-15 20:20:53 · 378 阅读 · 0 评论 -
js页面跳转并传值的常用方法
在前端开发中我们常常需要从一个跳到另一个页面,并且将当前页面的数据传递过去,我常用下面两种方法1、在url路径后面带参数,参数与url之间用?隔开,参数与参数之间用&符隔开 window.location.href = "a.html?name='kevin'&age='20'";2、通过localStorage 和 sessionStorage 先存本地在取出数据用setI原创 2017-01-15 20:55:36 · 13935 阅读 · 0 评论 -
js中函数可以作为参数和返回值
js中函数可以作为参数和返回值,来看看下面的排序 function Student(name, height, weight) { this.name = name; this.height = height; this.weight = weight; } //创建对象 var st原创 2017-01-15 22:50:02 · 4208 阅读 · 1 评论 -
js中的闭包
定义:只有函数内部的子函数才能读取函数的局部变量,因此可以把闭包简单理解成“定义在一个函数内部的函数,并且返回了该内部函数” // 只有函数内部的子函数才能读取函数的局部变量,因此可以把闭包简单理解成“定义在一个函数内部的函数,并且返回了该内部函数”// 为了读取f1函数中的局部变量,在f1中定义了一个子函数f2,函数f2就可以访问f1函数中的局部变原创 2017-01-16 22:29:00 · 304 阅读 · 0 评论 -
javascript设计模式之代理模式
代理模式:为其他对象提供一种代理以便控制对这个对象的访问。由于一个对象不能直接引用另一个对象,所以需要通过代理对象在这两个对象之间起到中介的作用。虚拟代理虚拟代理在web开发中是比较常用的代理模式,例如图片的预加载,当图片过大或者网络不好的时候,img标签显示图片的位置通常会有一段空白的时间,而我们常用的做法就是先用一张占位图来显示,等图片加载好了后再显示图片。var myImage = (...原创 2019-04-18 13:39:25 · 281 阅读 · 0 评论