前端开发
xiaoTuiMao
这个作者很懒,什么都没留下…
展开
-
JS中的盒子模型
//js盒子模型-->浏览器提供一些获取盒子位置信息的属性和方法 //1、clientWidth/clientHeight //clientWidth:width+左右padding //clientHeight:height+上下padding //2、clientTop/clientLeft //clientTop:上边框的高度 //clientLe原创 2015-08-24 14:00:12 · 2022 阅读 · 0 评论 -
惰性函数与柯里化函数
首先先说下 什么是惰性函数,顾名思义懒惰的函数,常用于在解决浏览器兼容性方面,举个例子 在一个方法里面可能会涉及到一些兼容性的问题,不同的浏览器对应不同的方法,第一次我们遍历这些方法找到最合适的那个, 并将这个方法覆盖于遍历它的函数,这就是惰性函数即只遍历一次就找到最佳方案,下次再要找那个方法的时候就不用遍历了,提高了性能。getXHR: (function () { va原创 2015-09-24 15:50:55 · 1048 阅读 · 0 评论 -
犀牛书随手记-04
在JS的继承中,属性的赋值操作首先是检查原型链,以此来判断是否允许赋值操作。如果o继承自一个只读属性x,那么赋值操作是不允许的。如果允许赋值操作,他也是总在原始对象上创建属性,或者对已有的属性赋值,而不会去修改原型链。即在JS中石油在查询属性时才会体会到继承的存在,而设置属性则和继承无关,借用随手记03中的createObjetc函数 举个栗子var a ={r:1}var b = Object原创 2016-01-10 22:23:58 · 657 阅读 · 0 评论 -
犀牛书随手记-01
eval()函数的理解 其使用过方法:接受一个字符串作为参数,并将这个字符串,转换为可执行的js代码执行; 值得注意的是,在这个函数中他调用变量的作用域是查找变量和定义新变量和函数的操作和局部作用域中的代码完全一样 例子: var a = 1; eval("console.log(a)"); function fn(){ var a = 3;原创 2016-01-03 17:00:29 · 597 阅读 · 0 评论 -
犀牛书随手记 -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 · 693 阅读 · 0 评论 -
犀牛书随手记-03
关于Js中的对象,除了值和名字以外,每个属性还有一些与之相关的值,称为“属性特性” · 可写 · 可枚举 · 可配置 在ECM5之前代码所创建的对象的属性都是可写,可枚举,可配置的,但是在之后,是可以对这些属性进行配置的JS中对象原型的概念(可参考粗浅的原型链看法) 在ECMAscript 5中提供了Object.create(‘第一个参数就是要创建的这个对象的原型’,’可选参数’) 举原创 2016-01-07 22:00:18 · 548 阅读 · 0 评论 -
犀牛书随手记-06
在JS中一个对象的数据属性一般有4个特性,分别为值(value)可写性(writable)可枚举性(enumerable)可配置性(configurable) 后三者的值都是布尔型 Object.getOwnPropertyDescriptor() 可以获得某个对象特定属性的属性描述符 想要批量修改或者创建这四个特性需调用 Object.defineProperties()第一原创 2016-03-06 17:05:08 · 1751 阅读 · 3 评论 -
函数闭包问题的学习
函数闭包的应用是用来解决异步问题的<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 · 479 阅读 · 0 评论 -
LeetCode 算法
本文参照 LeetCode题解 里面的例子都是用c/c++实现的,为了学习算法,将里面的实现方式改为JavaScript【如果有侵权请联系我】数组类的算法Remove Element作为开胃菜,我当然选取了最容易的一道题目,在一个数组里面移除指定value,并且返回新的数组长度。这题唯一需要注意的地方在于in place,不能新建另一个数组。方法很简单,使用两个游标i,j,遍历数原创 2017-08-18 18:58:33 · 350 阅读 · 0 评论 -
DOM回流跟重绘问题
什么是DOM的回流 DOM回流(reflows)和DOM重绘(repaints) 回流:当页面上的结构发生改变,浏览器会从新的渲染我们的页面,回流是比较消耗性能的 回流产生的情况 1、添加或者删除可见的DOM元素; 2、元素位置改变; 3、元素尺寸改变——边距、填充、边框、宽度和高度 4、内容改变——比如文本改变或者图片大小改变而引起的计原创 2015-08-17 15:14:39 · 1710 阅读 · 0 评论 -
JavaScript 数组方法梳理
1. 会改变自身的方法array.copyWithin(target, start [, end = this.length])target(必需):从该位置开始替换数据。如果为负值,表示倒数。start(可选):从该位置开始读取数据,默认为 0。如果为负值,表示倒数。end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数。就是从target开始替换,替换的数...原创 2019-05-19 13:49:20 · 189 阅读 · 0 评论 -
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 · 545 阅读 · 0 评论 -
手动实现数组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 · 714 阅读 · 0 评论 -
图片延时 加载原理 及应用
关于 图片延时加载的基本理论: 当我们浏览一个页面时,我们有时候并不会看完一个网页的所有内容,那么我们在客户不浏览完所有内容的情况下,加载完所有的图片就会浪费流量,而且也会影响到网页的加载时间。为了解决这个问题,我们就设计了一种图片延时加载的机制,即当用户将页面快滑到图片的时候,我们开始加载图片,这样既省了流量,而且也不影响用户的体验下面 我就多篇延时加载举一个例子 首先,我们创建所需的HTML原创 2015-08-28 10:16:13 · 1369 阅读 · 2 评论 -
基于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 · 865 阅读 · 1 评论 -
我的DOM库 (持续更新)
在我的DOM库里目前有(目前的方法 都是兼容所有浏览器的) DOM.children //获取所有的子元素 children 在IE9以下 会把空白也获取成节点 //一个参数 获得指定元素下的所有子类元素 //两个参数 获得指定元素下的 指定的标签的所有子类元素DOM.next //获得指定元素的下一个兄弟元素节点DOM.prev //获得指定元素的上一个兄弟元素节点DOM.nextA原创 2015-08-28 17:36:32 · 803 阅读 · 0 评论 -
单例模式跟构造函数模式书写表格排序
首先简单说下表格排序的思路: 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 · 509 阅读 · 0 评论 -
关于正则的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 · 692 阅读 · 0 评论 -
百叶窗动画思路
相信大家都见过百叶窗动画效果,那么我就简单的给大家介绍一下这个百叶窗的动画效果是怎么 实现的 首先 我们要创建一个大的div来承载我们切图后的小div 我觉得 百叶窗的难点就难在 如何将一张大于切割成若干的小图 在切割图片之前 我们要先确认好切割多少张 var col = 10;//定义切割的列数 var rows = 4;//定义切割的行数然后再进行循环 创建DIV 最好是先创原创 2015-09-02 12:08:06 · 731 阅读 · 0 评论 -
JS中事件处理机制
在js中事件的处理分三个阶段 目标阶段 捕获阶段 冒泡阶段(以下未申明均为标准浏览器下) 在DOM2级事件中 ele.addEventListener("click",fn1,true);//第三个参数:是否在捕获阶段处理这个事件 同一个方法先捕获再冒泡 ele.addEventListener("click",fn1,false);这样的写法 当点击的时候回执行两次fn1,而且执行原创 2015-09-06 11:13:39 · 696 阅读 · 0 评论 -
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 · 810 阅读 · 0 评论 -
JS中面对对象的程序设计
在JS中,我们常说的面向对象,大多数情况下 指的就是原型链模式的编程,面向对象的编程方式 可扩展性 特别强,结构的可扩展性:只要是在类上实现个某个功能,则所有的实例都会具备这个功能。如果我们写好一个方法了 我们可以再不改变原来代码的情况下,给其增加新的功能。只需要保证在之前的代码中预留的接口与现在写的一致就ok。其实接口这个东西我觉得在JS 中就是一种标识,如下面的代码function on(ele原创 2015-09-14 17:43:08 · 414 阅读 · 0 评论 -
E2E 测试框架 cypress 实践
什么是 Cypress?Cypress 是非常年轻但很受开发者欢迎的测试框架,mac本地开发的话不需要安装别的依赖,npm install Cypress 即可,开箱即用,对于ES6 ES7的语法天然支持,不仅支持本地浏览器直接模拟测试,也支持终端测试。还有测试录屏功能,方便在测试失败的时候,查看当时的失败的场景,方便修改。整体来说上手快,学习成本较低。对于一下 Casperjs,感觉是全方面...原创 2019-05-19 13:51:44 · 764 阅读 · 0 评论