普通切换效果html代码： <div class="box"> <ul> <li><a href="#">佳能<i>(30440)</i></a></li> <li><a href="#">索尼<i>(30440)</i></a></li> <li><a href="...
使用Obejct.create()方法继承的原型和传统的new方法是一样的，但是又有些不同，因为create()支持第二个参数，第一个参数往往是父类的prototype，比如Obejct.create(Box.prototype);这是正常的对一个Box构造函数的原型继承。Obejct.create本身会创建一个新的对象并继承Box.prototype原型然后返回该新建的对象，但是还有一种情况是这样的：var Box = { name : '666'; } var o = Obejct.create(Box.prototype);如果这样写，就会报错，Box实际...
避免双重求值其实就是字符类型的js代码被运行时所产生的第二次运行求值我们都知道eval()方法是可以将字符类型的js代码运行的，但是除了它还有其他三种方法也支持。new Function()setTimeout()setInterval()这三个方法也都支持传入一个字符串类型的js代码，然后当这个函数运行后会识别这个字符并运行传入的js。这样就会产生两次求值，其中eval和Function这两种方法用的很少，甚至不使用了，而定时器确是比较常用的手段，所以为了规避这个问题，定时器里面第一个参数不要传字符，而是用函数封装。避免重复的工作在事件函数上，我们要做两个判断，要判断这个浏览器是支持d...
异步监听readyState == 3当readyState的值等于3时，此时服务器正在与浏览器传输数据，这个时候其实是可以进行获取到responseText值得，但是这个值并不完整，只有当readyState == 4时，值才是完整的。但是如果我们需要获取的内容是极其长的字符，那么就可以通过监听这个状态，然后轮询的方式，可以在内容没有全部下载来之前就可以提前更新内容了，这样就可以避免在下载的过程中产生的等待时间。var req = new XMLHttpRequest(); var getLastInterval =null, lastLength = 0; req.open(...
循环for循环是常见的编程模式之一，也是提升性能必须要关注的要点之一。js的循环有四种：for循环while循环do--while循环for--in循环其中在浏览器中，while的循环会快于for循环，而for--in循环是最慢的，因为他会先从对象实例属性开始到从原型链继承而来的属性一一枚举。如何提高循环的性能？首先我们要知道，除了for--in，其他的循环性能都差不多，深究那种循环最快其实没有什么意义，循环的方式要看你环境的需求，那么抛开最快来讲，我们怎么才能提高循环的性能？无非就两点：每次循环处理的事物循环的次数通过减少两者中的一个，或者全部的时间开销，就可以提升整体的性能。减少循环...
JavaScript中，不同存储位置，他的读取速度是不一样的，就好像一个距离你只有一米的饮料和一个距离你十米的饮料，当然是一米的你拿起来喝的速度最快。js中有四种基本的数据存取位置：1.字面量字面量只代表自身，不存储在特定的位置，js的字面量有：字符串、数字、布尔值、对象、数组、函数、正则表达式、及特殊的null和undefined值。你可以这么理解，if(true)语句中的true布尔值就是字面量，他就是一个值，不需要命名什么的就可以用的那种。2.本地变量使用var定义的数据存储单元，被作用域影响读取快慢。3.数组元素存储在JavaScript数组中的，以数字作为索引。4.对象成员存储...
js的加载会阻塞页面的加载和渲染，那么常用的方式就是将script元素放置在body元素里面最底下的位置，但是这样还是会有阻塞，但是不会阻塞下载，阻塞的是渲染，也就是说，js运行长时间的话，页面也会长时间显示空白，哪怕所有的资源都已经下载完毕了。延迟脚本为此便有了无阻塞的模式，那么最简单的就是给script添加defer和async属性了，但是这两个属性当初也只有ie支持，其他的浏览器并不支持，但是目前为止，如果都是新版本的浏览器，这两个属性已经全面支持了。defer表示当前的js文件不需要修改dom，所以他会在dom加载完运行，async则是异步加载，谁先加载谁先运行，但是如果js文件...
深度克隆主要用于引用类型，因为大部分的引用类型如果某一个实例进行了修改，那么其他同一个引用的实例对象也会发生改变。经过我小段时间的研究，以我目前的了解的来说，方法是没办法完全克隆的，你最多拿到独立属性，原型是共享的，这个没办法克隆，所以有点无解的样子，感觉这个深度克隆也只是表面意义上的克隆。因为不是很懂啊，所以暂时先丢出写的方法吧，等待以后有机会更深入了解再详细说明，主要是我百度到的都是es6标准的一个方法，有些属性我并不了解，不知道他们的实际意义是什么。所以，很无奈啊！function say() { console.log('hi'); } functio...
js阻塞js阻塞其实浏览器的一个很好的机制，浏览器必须在js文件或者代码运行完毕后才会继续其他的工作，比如一个js文件被script元素引用，该元素在head标签中。那么当浏览器加载到head时，会先加载并运行这个js文件，此时，这个script后面的内容都不会做任何处理，只有加载运行完浏览器才会接着加载后面的内容并解析渲染。为什么会这样？原因是因为浏览他并不知道你的js文件做什么，如果他对dom里面的内容做了操作，改变了dom树，那么如果dom树已经完成加载了，js改变后那不是又要重绘一次，那么用户打开网页，页面会先加载完然后闪烁或者发生其他的改变，这对于浏览器来说并不是一个好的方式，...
JavaScript里面继承是怎样实现的？最简单的就是通过原型链继承，然后衍生出几种方法：构造函数继承、组合继承、原型式继承、寄生继承、寄生组合式继承。function Box() { this.name = "鱼儿", this.age = 666 } Box.prototype.run = function(){ return this.name; } function Pox() { this.run = function() { alert(this.name + this.age); } } Pox.prototype = ne...
网页加载动画的原理其实就是当页面加载时他显示的就是加载动画，这个动画浮动于最上层将下面的内容全部遮盖住，而当dom已经加载完毕，触发onload事件，此时再将动画层进行移除处理。那么这样写会导致一个问题，就是你打开任何页面，都会先触发动画层，然后再显示内容，这样就会影响体验，我们之所以加一个动画层，就是为了在用户第一次打开页面的时候，不会卡在空白啊，或者加载资源中而导致页面布局不完整，但是当第一次onload事件完成后，其实浏览器本地已经将大部分的资源进行了缓存，包括css、font文件、img文件，所以，我们只需要第一次加载的时候显示动画层即可。如何判断是第一次加载常用的方法有创建co...
现在给网站做了一个load的加载效果，但是目前流行的应该是Skeleton Screen 骨架屏，这个原本是在苹果端app里制作的，然后有人自己移植到web端，常见h5架构页面，如饿了么、知乎、facebook、酷安，都有应用，那么我就很好奇了，到底是怎么做的，于是百度了一下。了解Skeleton Screen 骨架屏解释有下：简单来说，骨架屏就是在页面内容未加载完成的时候，先使用一些图形进行占位，待内容加载完成之后再把它替换掉。通过 puppeteer 在服务端操控 headless Chrome 打开开发中的需要生成骨架屏的页面，在等待页面加载,渲染完成之后，在保留页面布局样式的前提...
new操作符一般肯定会说创建一个对象，但是实际上其实可以细分为四个步骤。创建一个空对象链接原型改变this指向将这个对象隐式return出来就已new一个构造函数来举例子：你new出来的这个构造函数他本身有对应的属性，也有prototype，你var me = new 构造函数，那么me自然会拥有构造函数的所有。那么这个如何拥有，就是new操作符所做的事情。 var me = new 构造函数(); //等同于如下 var me = function() { var obj = {}; obj._proto_ = 构造函数.prototype; ...
IE浏览器旧版本并不支持html5的语义标签，当我们使用html5架构的时候，旧版本的ie兼容就是一大痛点，好在我们有js，js里面的创建元素，可以创建自定义的元素，也就是说，ie不支持原生的语义标签的问题。目前常用的就是html5shiv框架，这个框架在github上开源，目前我们就只讲 如何调用这个脚本。下载脚本官网地址：github下载完解压，我们找到dist目录下，里面提供了四个脚本文件，一般来说只要使用名为html5shiv.js的文件即可，我们将这个文件提取出来，然后丢入自己博客的js文件夹中，如果是主题，就丢入主题对应的js文件。js脚本调用为了防止冲突我们需要针对性的调用...
昨天看到群里一个人的主题，首页的轮播很有意思，然后他的轮播底色是根据文章图片颜色来自动变动的，我当时就觉得蛮有意思的，但是我没怎么接触过canvas这个东西，html5的时候匆匆带过，然后js的时候也没有讲，索性就自己百度看看教程了，找了好久，大部分都是转载的同一篇文章，然后大佬的那个js算法我实在看不懂，搞不懂为什么要for循环的时候i要乘以图片的宽度，然后再乘以4，在加123这些，后面慢慢搞懂了*4和+123这些意思，但是还是不太懂为啥要乘以图片宽度，嘛，这些暂时不管了，先看看我的想法吧！获取颜色平均值理论阶段首先通过canvas获取到图片的每个像素点的rgba值，然后for循环的时...
什么是表单序列化呢？将所有表单的提交通过一个标准化的方法去获取并且提交出去，那就是序列化，也就是说不同的表单，如注册啊，登录啊，修改资料啊，这些东西可以通过一个通用的方法去处理它。那么表单序列化有几个要求：不能发送禁用的表单字段；只发送勾选的复选框和单选按钮；不发送type是reset、submit、file、button以及字段集；多选选择框中的每个选中的值单独一个条目；对于select元素，如果有value值，就指定value作为发送的字段，如果没有，就指定text值；已经将ajax的代码作为单独的一个文件保存，而调用则使用ajax()的方法，之前也做了一个表单提交的方法，在所有条件...
单独的图片预加载已经完成，这里我们为上一张和下一张图片预加载做个准备。主要就是先将上一张和下一张的大图同时加载，在同一个图片点击事件中（当某个图片被click后）。首先就是我们要获取到上一张和下一张的图片索引位置，再通过这个值计算后来锁定对应的图片。首先我们先获取当前图片父元素的父元素的索引位置，这里要先说名一下关系链：div----dl----dt----img//这里获取到的是dl元素，每个dl元素里面都有一个img，所以索引值是一样的 var children = this.parentNode.parentNode;获取到dl后我们要再得到这个元素在dl元素数组中的索引值，之前我...
最近评论