- 博客(44)
- 收藏
- 关注
RSS订阅原创 关于距离的那些个值
获取元素的位置 offsetLeft 、offsetTop跟父元素的position属性（relative、absolute、fixed）有关；如果父级没有设置以上的值，则是相对于容器的距离；看下面的这个例子：<style>body { margin: 0px; height: 1300px;}.container { /* position: relative; */ /* left: 200px; */ margin-left: 200px; top: .
2021-02-26 20:45:18
219
原创 Blob
最近看了关于JS的二进制家族 （很???? 的一篇文章）更清楚的了解了Blob；Blob是前端专门用于支持文件操作的二进制对象。File继承了所有Blob的属性，所以File自然就可以直接调用Blob对象的方法。 使用 Blob可以进行以下几种操作：文件下载（URL.createObjectURL(blob)生成Blob URL；然后赋值给 a.download）图片显示 （URL.createObjectURL(blob)生成Blob URL；然后赋值给 img.src，或者使用FileRead
2021-02-26 16:13:09
574
原创 webpack4(一)
webpack问题:webpack是什么如何安装webpack如何使用webpackwebpack是一个模块化打包工具webpack是一个模块化打包工具，支持commonjs、es6、amd、cmd模块化规范；可以打包js、css、图片等文件webpack的安装安装nodejs; 通过 node -v npm -v分别查看安装的node和npm版本npm install w...
2020-03-15 20:10:50
184
原创 三栏布局
三栏布局一般是两边固定中间自适应，方法与两栏布局相似。1. 浮动布局html: <div class="container"> <div class="left">左侧固定</div> <div class="right">右侧固定</div> <div class="content">自适应区...
2019-04-01 23:08:51
454
原创 两栏布局
1、浮动 + margin（正）左侧固定，右侧自适应将固定块左浮动，自适应块设置margin-lefthtml: <div class="container"> <div class="fix">左侧固定</div> <div class="content">右侧自适应</div> </div>...
2019-04-01 22:07:41
267
原创 清除浮动
当一个元素设置了浮动后，它会被移出文档流，向左或向右移动，一直平移到所处容器的边框或另一个浮动元素。使用浮动可以实现一些布局效果，但是在使用时需要注意，如果父级高度未设置会出现父级容器高度塌陷的问题。比如下面这个例子: .box { width: 600px; background-color: rgb(224, 206, 247); border: 5...
2019-03-31 22:28:55
167
转载 函数式编程
转载地址: 函数式编程 应该很多童鞋都听过函数式编程（Functional programming）的概念吧，可能有的童鞋有听说过函数式编程但并不是特别了解，但其实在我们的开发过程中，或多或少都已经应用了函数式编程的思想。相对于面向对象编程（Object-oriented programming）关注的是数...
2019-03-28 21:26:10
183
原创 js加载时间线
创建Document对象，开始解析web页面，此时 document.readyState = ‘loading’遇到 link 外部引入的 css ，会开启一个新的线程进行异步加载遇到 script 外部 js ，并没有设置 defer 或 async ，会同步加载 js 文件并阻塞页面，等js加载完并执行完才继续解析页面遇到有 async或 defer 的 script，会异步加载js...
2019-03-26 23:29:59
407
原创 事件操作的兼容性写法
var commonEvent = { addEvent: function (ele, type, handler) { if (ele.addEventListener) { ele.addEventListener(type, handler, false); } else if (ele.attachEvent) {...
2019-03-26 22:38:55
169
原创 dom 一些兼容性方法
1、查看滚动条的滚动距离/** * 查看滚动条位置: * 1) window.pageXOffset | pageYOffset (IE8以下不支持) * 2) document.body.scrollLeft | scrollTop * document.documentElement.scrollLeft | scrollTop */function getScr...
2019-03-26 22:26:56
325
原创 链表
链表存储有序的元素集合,链表中的元素在内存中并不是连续放置的。每个元素由一个存储元素本身的节点和一个指向下一个元素额引用组成。相对于传统的数组,链表的一个好处在于,添加或移除元素的时候不需要移动其他元素。 数组的另一个细节是可以直接访问任何位置的任何元素，而想要访问链表中间的元素需要从表头开始迭代列表直到找到所需元素。/** 创建一个包含以下方法的链表类 append(element) ...
2019-02-24 11:04:48
186
原创 栈和队列
栈是一种遵循 先进后出(LIFO) 原则的有序集合。新添加的或待删除的元素都保存在站的同一端，称作栈顶，另一端叫栈底。比如羽毛球球桶,最下面的球需要等上面的都拿出去后才能拿到，再比如桌子上堆放的一摞书。 /** 创建一个类Stack来表示栈。为栈声明一些方法: 1)push(element(s)) : 添加一个或几个新元素到栈顶 2)pop() : 移除栈顶元素,同时返回被移除的元素 ...
2019-02-24 09:16:07
229
原创 数组排序方法
var arr = [6, 3, 5, 1, 9, 4, 7, 8, 2];1、冒泡排序：比较相邻的两项，如果第一项比第二项大，则交换他们。 //冒泡排序 Array.prototype.bubbleSort = function () { var len = this.length; for (...
2018-10-05 17:58:37
1328
原创 数组去重方法
要将数组arr去重可用如下四种方法： var arr = [3, 6, 'a', 3, 2, 6, 3, 'a', 'b'];1、利用数组中的indexOf方法： function unique1(originArr) { var newArr = [], len = originArr.length; ...
2018-10-05 15:55:15
266
原创 惰性函数
先举一个例子：写一个函数，这个函数的返回值为第一次调用时的new Date().getTime()值。首先想到的是定义一个全局变量，然后在函数中判断该变量是否有值，如果有值则直接返回；否则进行赋值。 var t = null; function getTime() { if (t) { return t; ...
2018-09-28 23:36:18
328
原创 数组的扁平化处理
数组的扁平化处理是将多维数组转换成一维数组的形式。比如数组[1, 2, 3, [4, 5], {}, null, [[6, 7], [[[[8]]], 9]]]扁平化处理后——&amp;amp;gt;[1, 2, 3, 4, 5, {}, null, 6, 7, 8, 9]下面这些方法可以实现数组的扁平化。 var originArr = [1, 2, 3, [4, 5], {}, null, [[6, 7...
2018-09-27 20:16:36
473
原创 cookie和sessionStorage以及localStorage的区别
sessionStorage和localStorage具有封装好的API:1、setItem(name,value)：设置属性值2、getItem(name)：获取属性值3、removeItem(name)：移除属性4、clear()：清除属性使用cookie需自己封装接口：const cookieManger = { setCookie(name, value, time,...
2018-09-25 22:25:27
209
原创 ES6-----解构赋值
在编码中，我们经常定义数组和对象，然后有组织的从中提取相关信息。ES6中添加的新特性解构可以简化这类任务。文章目录对象解构数组解构对象解构在es5及早期版本中，为了从对象中获取特定的数据并赋值给变量，编写了许多看起来类似的代码： let origin = { type: 'origin', name: 'opt' ...
2018-09-18 21:12:09
286
原创 ES6-----对象的扩展
ES6-----对象的扩展属性的简洁表示属性名表达式新增方法Object.is()Object.assign()Object.keys()Object.values()Object.entries()对象的原型Object.getPrototypeOf()Object.setPrototypeOf()super属性的简洁表示ES6中允许对象采用简写的方式。当一个对象的属性与本地变量同名时，不必...
2018-09-17 22:27:24
426
原创 ES6-----Promise
Promise异步编程的一种解决方案，可以解决v型代码、回调地狱的问题。Promise对象代表一个异步操作，有三种状态：pending（进行中）、resolved（已成功）和rejected（已失败），状态变换只能是pending——>resolved或者pending——>rejected。 Promise 的状态一旦改变，就永久保持该状态，不会再变了。1、创建一个Promise...
2018-09-16 18:46:23
173
原创 ES6-----迭代器和生成器
一、迭代器 迭代器是一个对象,具有一些专门为迭代过程设计的专有接口。所有的迭代器对象都有一个next()方法，每次调用都会返回一个结果对象。结果对象中包含两个属性：value和done；其中value是每次迭代的返回的数据，done表示迭代是否结束(Boolean) 根据上面关于迭代器的描述，我们来模拟一下：function createIterator(items) { var ...
2018-09-13 20:30:40
227
原创 ES6-----字符串和数组扩展
一、字符串的扩展目前常用的字符串方法有: 1）charAt(index)：返回当前位的字符 2）charCodeAt()：返回当前位的Unicode编码 3）slice(start=0,end=this.length)：截取从start到end位（不包含end位[start,end) ）的字符串 4）substr(from,length)：从from位开始截取长度为length的字符串...
2018-09-11 21:12:34
617
原创 ES6-----函数
一、 函数默认值在es5时如果我们想要给函数参数一个默认值，一般是通过 || 运算符进行判断，那么假如希望有这样的函数，只有当不传值或者传undefined 时，才会取默认值，此时可以用以下这种方式：function fruit(name) { name = name === undefined ? 'none' : name; return name;}cons...
2018-09-07 21:01:24
224
原创 ES6-----class
传统方法中，我们想要实例一个对象都是通过构造函数：function Person(name, age) { this.name = name; this.age = age;}Person.prototype.showName = function () { console.log(this.name);}var p = new Person('lily', 1...
2018-09-05 20:26:35
198
原创 ES6-----let和const
ES6 新增了let命令和const命令用于声明变量，用法类似于var，但是又有所不同，下面来具体介绍一下他们的用法和规则。一、let 1、不允许重复声明//1.不允许重复声明var tt = 345;var tt = 456;//tt 456let rr = 234;let rr = 'df';//Identifier 'rr' has already been declar...
2018-09-03 23:20:15
237
原创 解决跨域的几种方式
由于浏览器具有同源策略的限制，当我们想要访问不同源的资源或者数据的时候就会受到限制。比如 ee.bb.com想要访问cc.nihao.com里面的数据就会被拒绝访问。此时就需要解决跨域的问题，一般解决跨域有以下几种方式： 1、服务器代理中转 同源策略只是浏览器的一个限制，但是对后台没有影响，所以可以通过与ee.bb.com同源的服务器去访问cc.nihao.com里的数据.2、doc...
2018-09-03 00:21:04
1187
原创 HTTP必会知识点
HTTP(HyperText Transfer Protocol)是一套计算机通过网络进行通信的规则。 HTTPS是在HTTP基础上加了SSL，以安全为目标的HTTP通道，简单讲是HTTP的安全版。 HTTP报文分为请求报文和响应报文，都由请求（响应）行、请求（响应）头和请求（响应）请求正文组成。 HTTP请求报文 当浏览器向Web服务器发出请求时，它向服务器传递了一个数据块，也就是请求信...
2018-08-29 22:40:54
217
原创 同源策略
一、同源策略 浏览器有一个重要的概念——同源策略（Same-Origin Policy）。所谓同源是指协议、域名、端口号都相同。不同源的客户端脚本(javascript、ActionScript)在没明确授权的情况下，不能读写对方的资源。1、Url的构成：协议://域名（端口号、参数、查询等） 比如：https://zhidao.baidu.com ...
2018-08-28 19:53:16
254
原创 Javascript中的圣杯模式继承
实现继承的方式有很多种，比如：通过原型链方式、call/apply方式、共享原型、圣杯模式实现继承。这里主要介绍圣杯模式。其主要思想是利用一个临时函数作为中间层以及原型链的方式实现继承。 Origin.prototype.value = 'origin'; function Origin() { } function Target(...
2018-08-24 08:28:44
1479
2
原创 Javascript请求性能——防抖和节流
在前端开发中，会有一部分用户的行为会频繁的触发事件执行，而对于DOM操作、资源加载等耗费性能的处理，很有可能造成页面卡顿，甚至浏览器崩溃。函数节流（throttle）和函数防抖（debounce）就是为了处理类似需求应运而生的。一、防抖 函数防抖就是函数在频繁需要触发情况时，只有等足够空闲的时间才去执行一次。好像公交车司机等人都上车以后才出站一样。 比如我们在做搜索框的时候...
2018-08-23 23:40:11
2152
原创 Javascript中call、apply和bind的区别以及源码解析
我们知道在javascript中call和apply以及bind都可以改变this指向，那么它们是怎么实现的呢？彼此之间有什么区别呢？首先我们先来分别解析一下它们： （一）call 首先我们先来看一下如何使用call: var value = 'window'; var obj = { value: 'obj' }...
2018-08-21 00:02:25
2760
原创 BOM常用知识点
一、BOMBOM是browser object model的缩写，简称浏览器对象模型。主要处理浏览器窗口和框架，描述了与浏览器进行交互的方法和接口，可以对浏览器进行访问和操作，譬如可以弹出新窗口、回退历史记录、获取URL等……..二、BOM与DOM 的关系javascript是通过访问BOM 对象来访问、控制、修改浏览器BOM对象的核心是window，而window中包含了docu...
2018-08-20 19:50:52
615
原创 Javascript封装Ajax方法
function ajaxFuc(method, url, param, callback, flag) { var ajax = null; if (window.XMLHttpRequest) { ajax = new XMLHttpRequest(); } else { ajax = new ActiveXObject('Microso...
2018-08-16 00:03:34
188
原创 Javascript中的运动
一、匀速运动 可以通过offsetLeft/top获取自身的实时位置，在自身的位置的基础上，通过定时器不断执行，每次在自身位置的基础上再加上一个恒定的速度值，即可形成一个简单的匀速运动。function move1(dom, target) { clearInterval(dom.timer); dom.timer = setInterval(...
2018-08-13 19:52:39
533
原创 Js中的数据类型及数据类型转换
1、数据类型： 原始值：数字、字符串、布尔值、undefined 、null 原始值存在于栈中，赋值相当于拷贝 引用值：数组、对象（自定义对象、内置对象）、函数、日期、RegExp等 ， 赋值相当于拷贝地址var b = [1, 2]; a = b; --> a : [1, 2] 1） b = [...
2018-07-08 10:27:01
290
原创 Javascript预编译
Javascript中使用函数作用域： 变量在声明它们的函数体内以及这个函数体嵌套的任意函数体都是有定义的。也就是说在函数内声明的所有变量在函数体内都是可见的，这意味着变量在声明之前已经可用。这个特性称为声明提前，即Javascript函数里声明的所有变量（不涉及赋值）都被提前至函数体的顶部。而声明提前是在Javascript引擎的“预编译”的时候进行的。 预编译发生的时期：在函数执行...
2018-07-06 20:43:35
223
原创 JavaScript中的包装对象
包装对象：在存取字符串、数字或布尔值的属性时创建的临时对象称为包装对象。偶尔用来区分字符串值和字符串对象、数字和数值对象以及布尔值和布尔对象。例1： var num=4; num.len=2; //隐式 var num =new Number(4) ; num.len=2 执行完后就销毁 console.log(num.len);//此处会打印undefined 再次...
2018-07-06 13:24:21
239
原创 从浏览器地址栏输入URL到页面展示发生的过程
1、浏览器通过DNS域名解析到ip地址2、浏览器通过TCP协议建立到服务器的TCP连接（TCP三次握手） TCP三次握手： 1）客户端发送请求连接、请求报文 2）服务端接受连接后回复ACK报文，并为此次连接分配资源 3）客户端接收到ACK报文后也向服务端发送一个ACK报文，并分配资源，由此TCP连接就建成了 ...
2018-07-05 22:43:02
2012
2
原创 CSS中的position
position有static、relative、absolute、fixed、inherit几个属性.1、static 默认值，元素正常出现在文档流中。2、relative 相对元素原始的位置进行定位，可以通过top、left、bottom、right指定偏移位置。元素原本所占的空间仍然被保留。3、absolute 绝对定位。将元素从文档流中移出，使用top、left、bott...
2018-06-09 22:00:46
1172
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人