- 博客(33)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 javaScript 数据类型
数据类型分类基础数据类型undefinedUndefined 类型只有一个值，即特殊的 undefined。在使用 var 声明变量但未对其加以初始化时，这个变量的值就是 undefined/* 在未申明的请求下直接使用会报错, 在使用未声明的变量时，可以使用typeof，这样操作是安全的 */console.log(a); // undefined 因为var 声明会出现...
2019-05-26 15:35:27
151
原创 E2E 测试框架 cypress 实践
什么是 Cypress？Cypress 是非常年轻但很受开发者欢迎的测试框架，mac本地开发的话不需要安装别的依赖，npm install Cypress 即可，开箱即用，对于ES6 ES7的语法天然支持，不仅支持本地浏览器直接模拟测试，也支持终端测试。还有测试录屏功能，方便在测试失败的时候，查看当时的失败的场景，方便修改。整体来说上手快，学习成本较低。对于一下 Casperjs，感觉是全方面...
2019-05-19 13:51:44
755
原创 JavaScript 数组方法梳理
1. 会改变自身的方法array.copyWithin（target, start [, end = this.length]）target（必需）：从该位置开始替换数据。如果为负值，表示倒数。start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示倒数。end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。就是从target开始替换，替换的数...
2019-05-19 13:49:20
185
原创 LeetCode 算法
本文参照 LeetCode题解 里面的例子都是用c/c++实现的，为了学习算法，将里面的实现方式改为JavaScript【如果有侵权请联系我】数组类的算法Remove Element作为开胃菜，我当然选取了最容易的一道题目，在一个数组里面移除指定value，并且返回新的数组长度。这题唯一需要注意的地方在于in place，不能新建另一个数组。方法很简单，使用两个游标i，j，遍历数
2017-08-18 18:58:33
345
原创 犀牛书随手记-06
在JS中一个对象的数据属性一般有4个特性，分别为值（value）可写性（writable）可枚举性（enumerable）可配置性（configurable） 后三者的值都是布尔型 Object.getOwnPropertyDescriptor() 可以获得某个对象特定属性的属性描述符 想要批量修改或者创建这四个特性需调用 Object.defineProperties()第一
2016-03-06 17:05:08
1744
3
原创 犀牛书随手记-05
关于对象的读写性 我们知道对象属性是由键值对构成的，在ECMAScript5中，属性值可以用一个或者两个方法替代当程序查询存储器属性时会调用getter方法，其返回值就是属性存取表达式 当程序设置一个存储器的属性的值时，会调用setter方法 和数据属性不同，存储器属性不具有可写性。如果属性同时具有二者，则该属性是可读写的。如果只有getter方法，则该属性是一个只读的 ，反之亦然。 举个
2016-01-17 21:59:05
603
原创 犀牛书随手记-04
在JS的继承中，属性的赋值操作首先是检查原型链，以此来判断是否允许赋值操作。如果o继承自一个只读属性x，那么赋值操作是不允许的。如果允许赋值操作，他也是总在原始对象上创建属性，或者对已有的属性赋值，而不会去修改原型链。即在JS中石油在查询属性时才会体会到继承的存在，而设置属性则和继承无关，借用随手记03中的createObjetc函数 举个栗子var a ={r:1}var b = Object
2016-01-10 22:23:58
646
原创 犀牛书随手记-03
关于Js中的对象，除了值和名字以外，每个属性还有一些与之相关的值，称为“属性特性” · 可写 · 可枚举 · 可配置 在ECM5之前代码所创建的对象的属性都是可写，可枚举，可配置的，但是在之后，是可以对这些属性进行配置的JS中对象原型的概念（可参考粗浅的原型链看法） 在ECMAscript 5中提供了Object.create(‘第一个参数就是要创建的这个对象的原型’，’可选参数’) 举
2016-01-07 22:00:18
544
原创 犀牛书随手记 -02
关于空语句的问题； 在js中，希望多条语句当做一条语句使用时，使用复合语句（常见的循环就是），而空语句恰恰相反。 空语句在日常开发中并不是很常见，但有时候缺少有用的 举个例子var ary = [];ary.length = 10;for(var i = 0;i<ary.length;ary[i] = i++);//空语句//执行结果 ary 初始化了10个值但是在循环中{}虽不起眼但是
2016-01-04 20:58:41
692
原创 犀牛书随手记-01
eval()函数的理解 其使用过方法：接受一个字符串作为参数，并将这个字符串，转换为可执行的js代码执行； 值得注意的是，在这个函数中他调用变量的作用域是查找变量和定义新变量和函数的操作和局部作用域中的代码完全一样 例子： var a = 1; eval("console.log(a)"); function fn(){ var a = 3;
2016-01-03 17:00:29
589
转载 js中的几种继承方式
js继承有5种实现方式： 1、继承第一种方式：对象冒充 function Parent(username){ this.username = username; this.hello = function(){ alert(this.username); } } function Child(username,passw
2015-10-06 16:13:55
536
原创 惰性函数与柯里化函数
首先先说下 什么是惰性函数，顾名思义懒惰的函数，常用于在解决浏览器兼容性方面，举个例子 在一个方法里面可能会涉及到一些兼容性的问题，不同的浏览器对应不同的方法，第一次我们遍历这些方法找到最合适的那个， 并将这个方法覆盖于遍历它的函数，这就是惰性函数即只遍历一次就找到最佳方案，下次再要找那个方法的时候就不用遍历了，提高了性能。getXHR: (function () { va
2015-09-24 15:50:55
1045
原创 含简单链式调用的ajax类库思路及写法
在写类库前 我们一定要理清楚我们写的类库，传递的参数代表什么意思 然后在封装的时候，首先考虑的就是兼容性的问题，整体的构思 我的整体的代码分3个模块， 1：ajax核心模块； 2：util帮助库（用来解决兼容性问题） 3：链式写法Promise(由于本人对链式写法研究有限，故只能链式调用两个) 在ajax核心模块方面，主要是对ajax里面传递进来的参数进行了统一处理 如是否走缓存，是否
2015-09-23 10:10:42
1513
原创 JS中面对对象的程序设计
在JS中，我们常说的面向对象，大多数情况下 指的就是原型链模式的编程，面向对象的编程方式 可扩展性 特别强，结构的可扩展性:只要是在类上实现个某个功能，则所有的实例都会具备这个功能。如果我们写好一个方法了 我们可以再不改变原来代码的情况下，给其增加新的功能。只需要保证在之前的代码中预留的接口与现在写的一致就ok。其实接口这个东西我觉得在JS 中就是一种标识，如下面的代码function on(ele
2015-09-14 17:43:08
412
原创 DOM2级事件在IE6 7 8下的兼容性问题及解决方案
对于万恶的IE6 7 8 对于DOM2级事件的处理存在很多兼容性问题（以下所说的IE均为 IE6 7 8） 1.在IE下的2级事件绑定使用的是attachEvent()这个方法 2.在IE下给一个事件重复绑定相同的方法，在触发的时候回重复的执行多次 3.在IE下同一个事件绑定的方法超过10个，在触发时 执行的顺序就会变成乱序 4.在IE下给事件绑定的方法里面的this指向的不是要绑定事
2015-09-07 16:03:31
803
原创 JS中事件处理机制
在js中事件的处理分三个阶段 目标阶段 捕获阶段 冒泡阶段（以下未申明均为标准浏览器下） 在DOM2级事件中 ele.addEventListener("click",fn1,true);//第三个参数：是否在捕获阶段处理这个事件 同一个方法先捕获再冒泡 ele.addEventListener("click",fn1,false);这样的写法 当点击的时候回执行两次fn1,而且执行
2015-09-06 11:13:39
694
原创 百叶窗动画思路
相信大家都见过百叶窗动画效果，那么我就简单的给大家介绍一下这个百叶窗的动画效果是怎么 实现的 首先 我们要创建一个大的div来承载我们切图后的小div 我觉得 百叶窗的难点就难在 如何将一张大于切割成若干的小图 在切割图片之前 我们要先确认好切割多少张 var col = 10;//定义切割的列数 var rows = 4;//定义切割的行数然后再进行循环 创建DIV 最好是先创
2015-09-02 12:08:06
720
原创 基于tween的个人动画库封装
在做动画之前我们需要搞清楚动画需要哪些变量 1：起步的位置（状态） begin 2：运动的终点 target 3：运动的距离 change=target-begin 4：运动所需的时总时间 duration 5：当前运动了多久 timer 当前所在的位置=timer/duration*change+begin 所以我们在写动画这个函数的时候，动画算法方面需要4这些参数 在tween算
2015-08-31 10:45:24
856
1
原创 我的DOM库 （持续更新）
在我的DOM库里目前有（目前的方法 都是兼容所有浏览器的） DOM.children //获取所有的子元素 children 在IE9以下 会把空白也获取成节点 //一个参数 获得指定元素下的所有子类元素 //两个参数 获得指定元素下的 指定的标签的所有子类元素DOM.next //获得指定元素的下一个兄弟元素节点DOM.prev //获得指定元素的上一个兄弟元素节点DOM.nextA
2015-08-28 17:36:32
799
原创 图片延时 加载原理 及应用
关于 图片延时加载的基本理论： 当我们浏览一个页面时，我们有时候并不会看完一个网页的所有内容，那么我们在客户不浏览完所有内容的情况下，加载完所有的图片就会浪费流量，而且也会影响到网页的加载时间。为了解决这个问题，我们就设计了一种图片延时加载的机制，即当用户将页面快滑到图片的时候，我们开始加载图片，这样既省了流量，而且也不影响用户的体验下面 我就多篇延时加载举一个例子 首先，我们创建所需的HTML
2015-08-28 10:16:13
1361
2
原创 JS中的盒子模型
//js盒子模型-->浏览器提供一些获取盒子位置信息的属性和方法 //1、clientWidth/clientHeight //clientWidth:width+左右padding //clientHeight:height+上下padding //2、clientTop/clientLeft //clientTop:上边框的高度 //clientLe
2015-08-24 14:00:12
2016
转载 DOM宽高及偏移
假设 obj 为某个 HTML 控件。obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置，整型，单位像素。obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置，整型，单位像素。obj.offsetWidth 指 obj 控件自身的绝对宽度，不包括因 o
2015-08-18 14:42:11
637
原创 关于正则的exec方法以及字符串的replace方法
首先我们书写一个字符串var str="2015-08-17"; var reg=/^(\d{4})(?:-|\\|\/)(\d{1,2})(?:-|\\|\/)(\d{1,2})$/; console.log(reg.exec(str));弹出的结果 分析下结果 得到的是一个数组 第一项 是正则匹配到内容， 第二项 为第一个分组匹配的内容 第三项 为第二个分组匹配的内
2015-08-18 09:34:50
688
原创 DOM回流跟重绘问题
什么是DOM的回流 DOM回流(reflows)和DOM重绘(repaints) 回流：当页面上的结构发生改变，浏览器会从新的渲染我们的页面，回流是比较消耗性能的 回流产生的情况 1、添加或者删除可见的DOM元素； 2、元素位置改变； 3、元素尺寸改变——边距、填充、边框、宽度和高度 4、内容改变——比如文本改变或者图片大小改变而引起的计
2015-08-17 15:14:39
1704
原创 call和apply的深入理解
fn.call(n,x)call里面传递的第一个参数是将fn这个函数里面的this换成n,换言之如果，fn这个函数里面没有this，那么这句话就相当于fn执行。 举个例子function fn1() { alert(1); }function fn2() { alert(2); } fn1.call(fn2);弹出的结果为1，因为这只是改变
2015-08-17 14:21:56
727
原创 单例模式跟构造函数模式书写表格排序
首先简单说下表格排序的思路： 1：首先我们要创建一个表格，然后 加上简单的样式 <table id="myTable" cellpadding="0" cellspacing="0"> <thead> <th><input type="checkbox"></th> <th class="active">姓名</th> <th class="active">年龄</
2015-08-17 12:00:22
508
原创 手动实现数组slice方法跟splice方法
var ary2 = [1, 2, 3, 5, 4, 53, 42]; Array.prototype.slice2 = function (n, m) { var ary = []; n<(-this.length)?n=0:null; m>this.length?m=this.length:null;
2015-08-12 08:53:14
709
原创 JS学习之this关键字
his关键字跟在哪定义没关系，跟在哪执行也没关，this的查找只遵循以下三点 1）自执行函数中的this永远是window 2）给元素的事件绑定方法，当触发事件执行对应方法的时候，方法中的this是当前元素 3）不管函数在哪里面执行，我们就看函数名之前是否有“·”，有的话，前面是谁就是谁，没有就是window// var obj={fn1:fn};//
2015-08-12 08:40:57
397
原创 JS原型链问题
先上代码function Person(name) { this.weight = 7; this.height = 14; this.skin = "yellow"; this.gender = ""; this.name = name; this.age = 0; } Person.p
2015-08-06 16:38:28
496
原创 JS学习-原型链的理解
首先我们先创建一个构造函数，并创建两个实例function shirt(){ this.name=""; this.age=""; this.height=""; this.weight=""; } var shirt1=new shirt(); var shirt2=new shirt();shirt.prot
2015-08-06 11:34:42
449
原创 JS学习之this关键字
his关键字跟在哪定义没关系，只跟在哪执行有关系这是在window下执行，这里弹出的this就是window // var obj={fn1:fn}; // obj.fn1();//这是在obj下执行，即弹出的是object // 函数在定义的时候 ,this指的是谁 是不知道的 // 变量属于哪个作用域,由他在哪儿(作用域)定义有关系
2015-08-05 16:43:30
423
原创 函数闭包问题的学习
函数闭包的应用是用来解决异步问题的<body><ul id="myUl"> <li>111</li> <li>222</li> <li>333</li></ul><script> var myUl=document.getElementById("myUl"); var myLi=myUl.getElementsByTagName("li");
2015-08-05 09:13:08
472
原创 JS学习2--关于预解释
var a=9;function a(){}; alert(a);关于这两种定义的解释：第一种 即 定义了一个变量并给其赋值为function，归根到底在于解释中声明的为变量；第二站 即定义了一个函数f；函数在预解释中是声明加定义；关于预解释即在代码顺序执行之前，会先将带var 提前声明跟带function的提前声明加定义，值得注意的是带var的只是声明了并
2015-08-04 10:22:09
376
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人