2018年03月_QPQ_

原创跟轮播杠上了，这次很轻便

之前写过两个懒人轮播，为啥叫懒人轮播呢？因为从轮播图的创建到开始轮播然后切换都是自动完成的，需要做的只是给它指定个位置，向对象init函数中传入些参数（图片长度，宽度，图片数量）即可。有点全自动洗衣机的即视感，不过这样做有一个缺点，就是dom操作太多，影响了性能。这次不一样了，用animation动画简单实现了个自动轮播，超级轻便呢（前提条件是已知图片张数，但图片路径未知，就是说可以通过更改...

2018-03-30 19:13:57 175

原创从浏览器输入网址到显示页面之间发生了什么

好久没有更博了，最近一直忙于春招实习应聘，似乎有些打乱了我的节奏，我觉得还是应该把重心放在学习和记录上，不管有没有实习或者有没有拿到offer，我都一直stand by!言归正传，当你输入一个网址到页面显示在你眼前到底发生了什么，这其实是个比较常见的问题，尤其在前端中，之前看到类似文章时感觉并不能完全看懂，最近学习了计算机网络，也算是融会贯通了吧，在这里写下自己的总结：首先，从全局来讲，当键入一个...

2018-03-29 13:33:49 2118

原创原生js封装的渐入式轮播插件

之前写了一篇关于“原生js封装的滑动式轮播插件”，一直想着把滑动式改为渐入式，今天终于动手了。虽然很简单，只是把定位改变为透明度为变换目标，但是实现过程中还是有很多细节需要注意。比如：（1）确定下一个将要出现的目标。（2）鼠标移入小点和鼠标进入左右两个btn时需要取消自动轮播，鼠标移出时又开始从此处继续轮播，而不是从上一次轮播被取消时停止的位置开始（因为这样可能会导致回退或超前，很不舒服）。（3）...

2018-03-18 14:54:23 268

原创 grid布局简单记录

grid布局不要太好用！用grid方式写了个简单的布局，代码很简单，记录一下。html代码：<div class="parent"> <div class="child header"></div> <div class="child sideBar"></div>

2018-03-18 10:26:05 232

原创原生js封装的滑动式轮播插件

最近用单体单例模式写了一个可复用型轮播小插件。功能为——根据可自行设置：轮播图所在区域、图片宽度、图片高度、轮播图片数.自动创建轮播图。实现效果大概如下：github代码地址为：https://github.com/COMINGLIU/-/tree/master/lunbo1实现效果图中由于没有传入图片参数路径，所以将看到每张图都是以随机色进行填充的。写完总结了一下，用到了下列知识点： 1....

2018-03-15 16:59:50 812

原创在html中使用语义化标签的好处

语义化标签，按照字面意思理解就是“具有特定意义的标签”。好处：1、有意义的标签使得页面结构化，即使去掉css样式页面也能以一种清晰的结构展现。2、根据文档显示结构更易于后期的维护。3、除了人容易理解外，程序和其他设备也可以理解有意义的标签。例如，搜索引擎可以识别出标题行，（因为它被包围在h1中）并给它分配更高的重要度。同时，屏幕阅读器的用户可以依靠标题作为辅助的页面导航。（X）HTML中包含的一些...

2018-03-13 18:09:37 5904

原创 js中跨浏览器的一些事件和兼容处理

以下是针对标准浏览器和IE一些低版本浏览器的一部分事件处理，所有处理方法均保存为一个函数存放在一个对象字面量中。用时调用即可。var EventUtil = { // 给对象绑定事件 addHandle: function(element,type,fn) { if(element.addEventListener) { element.addEventListener(type,fn); ...

2018-03-03 17:53:55 419

原创 js中一个函数处理多个事件的方式

通常可能需要给某个元素绑定多个事件处理程序，此时普通法办法是一个一个绑，但下边有一个更高大上的方法，就是利用event.type属性。将所有事件的实现全部放在一个函数中，然后用event.type判断对象绑定的事件类型。var oBox = document.getElementById("box");var handle = function(e) { e = e||window.e; swit...

2018-03-03 17:32:19 2592

原创 js中事件绑定的几种方式

事件处理程序即给元素绑定事件的方式有下列几种：HTML事件处理程序、DOM0级事件处理程序、DOM2级事件处理程序、IE事件处理程序、跨浏览器事件处理程序。其实这些方式就是一个逐步优化和实现跨浏览器的过程。1、HTML事件处理程序：直接在html的标签中添加事件属性，例如：<div onclick="fun()"></div>这样做很是不好，有下列两大缺点，这也是如今在开发...

2018-03-03 15:12:01 5559

原创 DOM事件操作优化2——移除事件处理程序

上一篇博客中谈到使用事件委托技术操作DOM事件，减少事件处理程序对内存的占用，并且减少了DOM访问时间。极大的优化了性能。然而除了这种技术外，还可以通过“移除事件处理程序”来移除无用事件处理程序与元素的绑定从而释放内存达到内存重用的目的。注意：事件就是用户或浏览器自身执行的某种动作，诸如click mouseover mouseenter……,都是事件的名字。而事件处理程序就是相应某个事件的函...

2018-03-03 13:49:04 474

原创 DOM事件操作优化1——事件委托

1、事件处理程序的内存和性能影响：在js中DOM事件绑定可以与用户进行各种各样的交互，处理很多事情。但在页面中添加过多的时间处理程序将直接影响到页面整体的运行性能。原因：首先每个函数都是一个对象，都会占用内存（对象存储在堆内存中）；内存中的对象越多，性能越差。其次，必须事先指定所有事件处理程序而导致的DOM访问次数会延迟整个页面的交互就绪时间。 ...

2018-03-03 13:19:54 228

原创简单实现跨域js通信

当一个页面中包含来自其他子域的框架或内嵌框架时，由于跨域安全限制，来自不同子域的页面无法通过js通信。解决：通过将每个页面的document.domain设置为相同值，这些页面就可以相互访问对方包含的js对象了。例如：有一个页面加载自www.jd.com。其中包含一个加载自www.tmall.com的内嵌框架。由于两个页面的document.domain的字符串不一样，内外两个页面之间无法相互访问...

2018-03-02 14:13:11 252

原创简单理解闭包的原理

首先闭包表示有权访问另一个函数作用域中的变量的函数，常见的创建闭包的方式是在一个函数中创建另一个函数。要了解闭包的原理首先要了解函数作用域，接下来从函数作用域推广到闭包的原理。1、当某个函数被调用时，会创建一个执行环境及相应的作用域链。然后使用arguments和其他参数的值来初始化函数的活动对象。但在作用域链中，外部函数的活动对象始终处于第二位，外部函数的外部函数的活动对象处于第三位，……以此...

2018-03-01 16:52:05 4899

qq_36060786的博客