![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
文章平均质量分 55
BenjaminShih
talk is cheap, show me the code
展开
-
代码覆盖率工具 Istanbul 入门教程
作者: 阮一峰测试的时候,我们常常关心,是否所有代码都测试到了。 这个指标就叫做”代码覆盖率”(code coverage)。它有四个测量维度。行覆盖率(line coverage):是否每一行都执行了?函数覆盖率(function coverage):是否每个函数都调用了?分支覆盖率(branch coverage):是否每个if代码块都执行了?语句覆盖率(statement cover转载 2017-10-19 14:54:01 · 1704 阅读 · 1 评论 -
lazyman js流程控制
主要的难点在于理解 1. 如何判断Lazyman对象的方法被调用结束(也就是简单的setTimeout()函数所实现的功能) 2. 如何实现next()函数function _lazyMan (name) { this.tasks = []; var self = this; var fn = (function(name){ return function () {原创 2017-08-03 18:15:53 · 471 阅读 · 0 评论 -
event loop js事件循环 microtask macrotask
首先知晓: js是单线程语言也就是说一次就只能做一件事情。多数的网站不需要大量计算,程序花费的时间主要集中在磁盘 I/O 和网络 I/O 上面虽然SSD读取很快,但和CPU处理指令的速度比起来也不在一个数量级上,而且网络上一个数据包来回的时间更慢(注意过游戏的延迟吗)so: 一些cpu直接执行的任务就成了优先执行主线任务,然后需要io返回数据的任务就成了等待被执行的任务原创 2017-07-26 10:46:11 · 6611 阅读 · 1 评论 -
js replace进阶之正则和回调函数
常用用法:字符串替换为字符串 str.replace(String, String); 正则替换为字符串 str.replace(Reg, String);基本上这两种用法是最常见的,没什么疑问,只需要注意只能替换一次就好了。'sss'.replace('s', 'r') // 'rss'进阶用法:如果使用了正则表达式,那么用法就可以稍加复杂(bian li)先看一张表: 字符 替换文原创 2017-08-09 19:35:27 · 3777 阅读 · 0 评论 -
图片懒加载与预加载
图片懒加载暂时不设置图片的src属性,而是将图片的url隐藏起来,比如先写在data-src里面,等某些事件触发的时候(比如滚动到底部,点击加载图片)再将图片真实的url放进src属性里面,从而实现图片的延迟加载图片预加载在一些需要展示大量图片的网站,实现图片的提前加载。从而提升用户体验。常用的方式有两种,一种是隐藏在css的background的url属性里面,一种是通过javascript的Im原创 2017-08-02 16:26:43 · 374 阅读 · 0 评论 -
判断元素是否在可视区域内
getBoundingClientRect() function isElementInViewport (el, offset = 0) { const box = el.getBoundingClientRect(), top = (box.top >= 0), left = (box.left >= 0),原创 2017-08-01 13:36:08 · 9209 阅读 · 0 评论 -
js为什么会用原型模式
作者:阮一峰原文:Javascript 面向对象编程(一):封装Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类)。那么,如果我们要把”属性”(property)和”方法”(method),封装成一个对象,甚至要从原型对象生成一个实例对象,我们应该怎么做呢?一、 生转载 2017-08-01 10:59:01 · 1968 阅读 · 2 评论 -
文本截断省略号
纯CSS实现省略号只要支持-webkit-line-clamp和float即可原理是根据浮动文档流和line-clamp属性的特点进行溢出隐藏和视图内显示(参考原文)<!DOCTYPE html><html><body><style>/* * 行高 h * 最大行数 n * ...更多容器的宽 w * 字号 f */@-webkit-keyframes width-change {0%原创 2017-08-07 16:05:32 · 455 阅读 · 0 评论 -
es6 promise的使用
由于项目很早就启用了es6,所以开发中经常会用到promise,优雅好用以前我们经常这么写异步回调:step1(function(val1) { step2(function(val2) { step3(function(val3){ // ...嵌套再嵌套 }) })})这种三角形代码缺钱显而易见:代码不优雅,阅读费劲难原创 2017-07-18 11:00:51 · 1618 阅读 · 0 评论 -
js 事件委托(事件代理)
事件委托,又名事件代理,就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。举例来讲,如果我们准备为一个dom绑定一个click事件,那么我们在dom上直接添加事件监听就可以了:<ul class="ul"> <li>1</li> <li>2</li></ul>window.onload = function() { var ul = document原创 2017-07-26 17:43:32 · 825 阅读 · 0 评论 -
css requestAnimationFrame
绘制动画,一般有两个选择:js脚本 setTimeout和setIntervalcss3 transition和animation属性这两个方法有各自的局限性:js脚本实现动画的局限性: 即使向 setTimeout和setInterval 传递ms级的参数,由于js单线程的关系,可能会引发堵塞,不能达到高精度的准确性 没有对动画的循环机制进行优化,只是以一个大致的时间间隔循环,原创 2017-07-27 14:16:42 · 658 阅读 · 0 评论 -
移动端列表表头fix布局的改进
以前在做PC端开发的时候,经常会使用position: fix来做一些固定于窗口位置的一些页面功能,比如全局居中的提示框和模态框,或者是页头页脚等等~但是在移动端做的时候长了就会发现,我们要在一些场合避免使用fix布局,就目前来看,主要有以下两个原因: 1. 公司项目曾经使用h5套壳app,在ios上发现,如果列表页中使用fix固表头,那么有有一定几率会造成页面元素 无法点击甚至卡死的现象原创 2017-10-18 09:46:45 · 1305 阅读 · 0 评论 -
js模块化编程总结
经常会听到关于js模块化的各种规范和类库,觉得还是有必要搞懂前端的一些知识生态,温故知新,特此整理。 CommonJSnodejs采用的规范,其主要面向服务端。require命令第一次加载会执行整个脚本,在内存中生成一个对象。// 主要属性{ id: '...', // 模块名 exports: {...}, // 该模块导出的接口 loaded: true, // 模块转载 2017-10-18 09:44:38 · 1595 阅读 · 1 评论 -
js语言精粹读书笔记
全书贯穿一个method方法定义新方法:Function.prototype.method = function(name, func) { if (!this.prototype[name]) { this.prototype[name] = func; } return this;};js只有一种数字类型,表示为64位浮点数,没有分离出整数类型,1和原创 2017-08-07 18:33:32 · 602 阅读 · 0 评论 -
js查询URL参数 query对应的键值
/** * 查询 url 字符串对应的键值 * @param {[String]} name [键值名] * @param {[String]} url [url字符串] * @return {[String]} [对应的值] */export function getUrlQuery(name, url) { const pattern = new RegExp(`原创 2017-09-08 10:58:24 · 2881 阅读 · 0 评论 -
ios 内层滚动到顶部或者底部无法滑动问题
/** * 处理一像素 */ scrollFix() { // 滚动容器dom const elem = this._container if (!elem) { return } // 兼容第一次滑动 elem.scrollTop += 1 // 绑定事件 elem.addEventListener('sc原创 2017-09-06 14:07:42 · 2711 阅读 · 0 评论 -
微信jssdk封装
/** * @file 微信JS-SDK封装 */import apis from '../common/apis'import query from '../common/query'import axios from '../plugins/axios'import loadScript from '../utils/load-script'import { isWeChat, is原创 2017-09-05 17:00:05 · 3147 阅读 · 3 评论 -
h5 监听 横竖屏 旋转
h5监听横竖屏旋转:function orientate() { if (global.orientation === 90 || global.orientation === -90) { alert('cross') } else { alert('vertical') }}global.addEventListener('onorientationchange'原创 2017-08-14 17:38:50 · 4198 阅读 · 0 评论 -
IOS微信无法更改标题解决方法
截止到ios10.3.3版本,微信单页应用仍有这个问题,项目中我将其封装成一个util工具模块,方便调用~// 这个在我的博客中有写到过[如何判定浏览器环境](http://blog.csdn.net/sjn0503/article/details/74745608)import { isIOSWeChat } from 'utils'// 任意线上iconconst faviconSrc =原创 2017-08-14 16:01:30 · 600 阅读 · 0 评论 -
typeof的缺点以及解决方式
首先要给出的当然是这张值表: 表达式 返回值 typeof true ‘boolean’ typeof 123 ‘number’ typeof “abc” ‘string’ typeof function(){} ‘function’ typeof [] ‘object’ typeof {} ‘object’ typeof null ‘o原创 2017-07-05 21:41:54 · 4018 阅读 · 0 评论 -
csrf
一.CSRF攻击是什么CSRF(Cross-site request forgery),中文名称:跨站请求伪造,也被称为:one click attack/session riding,缩写为:CSRF/XSRF。是一种对网站的恶意利用。二.危害黑客盗用用户的身份,以用户的名义发送恶意请求。CSRF攻击后果包括且不局限于发送恶意邮件、消息,盗取账号,甚至虚拟货币转账,透支账户……威胁个人隐私泄露以及原创 2017-06-13 20:59:26 · 382 阅读 · 0 评论 -
浏览器历史记录
前言项目开发时候,经常会涉及到关于浏览器历史记录的一些操作,比如当前页面点击微信返回按钮后跳转到某一特定页面等等。吃过这个苦,方之水之深,水深不可怕,关键在于勤。如何生成一条历史记录简单粗暴的方法,直接在当前页面的地址栏中输入地址点击页面中有a标签的href执行location.href = ‘xxx’(location.replace(‘xxx’)生成一条记录取代当前指针所指向的记录)表单原创 2017-06-12 11:25:14 · 11006 阅读 · 0 评论 -
js实现拖拽效果
写在前面鼠标拖拽效果常见于用户自定义展示页面,比如qq空间,x宝店铺装修等,操作灵动,所见即所得;或者是一个简单modal移动效果,方便用户查看原网页的内容。正好周末抽时间可以实现下,动手做做笔记,方便日后翻阅。简单拖动星星之火可以燎原,我们先从最简单的需求最起。主要分为三个步骤:鼠标按下,获取鼠标点击时在div中的相对位置。鼠标移动,元素的位置 = 就是鼠标的位置 - 刚才的差值。鼠标放开原创 2017-02-28 16:13:26 · 7901 阅读 · 0 评论 -
Javascript继承机制的设计思想(转自阮一峰老师)
作者: 阮一峰 日期: 2011年6月 5日 我一直很难理解Javascript语言的继承机制。它没有”子类”和”父类”的概念,也没有”类”(class)和”实例”(instance)的区分,全靠一种很奇特的”原型链”(prototype chain)模式,来实现继承。我花了很多时间,学习这个部分,还做了很多笔记。但是都属于强行记忆,无法从根本上理解。直到昨天,我读到法国程序员Vjeux的解释,转载 2017-02-17 11:53:50 · 574 阅读 · 0 评论 -
js数组去重的4种方法
1.排序去除相邻法var arr = [1,2,3,2,2,1,4,5,4] //先排序,确保相同的item在相邻位置,减少循环次数 arr.sort(); for(var j = 0;j < arr.length;j++){ if(arr[j] == arr[j+1]){ arr.splice(j,1); j–; // 请注意这边的j–,因为比较原创 2017-02-16 17:26:43 · 395 阅读 · 0 评论 -
js 深复制(深拷贝)和浅复制(浅拷贝)的区别
最近在做项目的时候,发现deepCopy()这个函数,顾名思义是深复制的意思,有了深复制反向思考肯定有浅复制,查阅资料之后便做下整理~ 个人理解,深复制和浅复制最根本的区别在于**是否是真正获取了一个对象的复制实体而不是一个引用**,从深层次上讲深复制在计算机中开辟了一块内存地址用于存放复制的对象,而浅复制仅仅是指向被复制的内存地址,如果原地址中对象被改变了,那么浅复制出来的对象也会相应改变原创 2016-08-21 15:06:55 · 5978 阅读 · 0 评论 -
js中this指向的四大规则和示例
当一个函数被调用的时候,会创建一个活动记录(这个也是前面提到的执行上下文),这个记录会包含函数在哪里被调用,函数的调用方式,传入参数等各种信息,this就是这个记录的一个属性。 this指向的的四大规则: 1.由new调用?绑定到新创建的对象 并没有取到全局变量a的值1,输出对象b内部的的属性值2,此处this绑定到新对象b 2.由call或者apply(或者bind)调用?绑定到原创 2016-08-20 13:15:53 · 1030 阅读 · 0 评论 -
js遍历函数forEach()、map()、every()和some()的区别实例
forEach()、map()、every()、some()原创 2016-08-04 14:44:58 · 1604 阅读 · 0 评论 -
浅析回调函数
今天突然被领导问到什么是**回调函数**,没想到平常写js经常用到的东西,突然之前让说出个确切,有点手足无措,趁着夜深人静,好好整理下思路。 根据百度百科,回调函数的定义如下: ⑴定义一个回调函数; ⑵提供函数实现的一方在初始化的时候,将回调函数的函数指针注册给调用者; ⑶当特定的事件或条件发生的时候,调用者使用函数指针调用回调函数对事件进行处原创 2016-06-22 23:39:49 · 410 阅读 · 0 评论 -
前后台url传参
我们常用url作为传递参数的媒介,也是开发中较为常用的传递参数的方法~前台书写: window.location.href = "/controller/pagename?key=value&key2=value2&key3=value3";其中,value可以替换为需要传递的变量后台接收(C#):string varable= Request.QueryString["key"];原创 2016-06-18 23:57:13 · 1473 阅读 · 0 评论 -
加入购物车抛物线效果的基本实现(一)
写在前面最近天气刚刚转热,心想应该淘点春装卖卖骚了,然后某宝逛的时候发现其加入购物车的动画效果不错,既完善了交互,又有功能导向作用,用户体验杠杠滴~作为一名前端汪,也想自己动手实现下此类酷炫的效果。原创 2017-02-21 13:02:49 · 3714 阅读 · 0 评论 -
对js操作符new的理解
“new”是在项目开发或者自己写JS DEMO的时候经常会用到的一个操作符,我们知道这可以利用js内置对象函数或者自定义的“构造函数”生成一个对象原创 2017-02-23 20:33:02 · 378 阅读 · 0 评论 -
跨域之CORS
前言本文会涉及到上一篇文章《跨域之jsonp》中的相关示例流程,先阅读再来食用本文更加美味~什么是CORSCORS是一个W3C标准,全称是”跨域资源共享”(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。在jsonp中,我们使用了script标签的src属性不受同源策略影响的特性来跨域原创 2017-07-03 20:28:26 · 377 阅读 · 0 评论 -
js拼接URL字符串
实际开发中,经常会遇到http请求(特别是get请求)或者跳转页面需要拼接URL请求字符串,而经常性的思维就是利用“+”进行字符串拼接:var baseUrl = 'www.google.com'var a = 1, b = 'request', c = truevar finalUrl = baseUrl + '?a=' + a + '&b=' + b + '&c=' + c这种方法看起来丑陋原创 2017-07-10 21:00:33 · 43918 阅读 · 3 评论 -
浏览器重排和重绘
重排浏览器下载完页面中的所有组件(HTML、JavaScript、CSS、图片)之后会解析生成两个内部数据结构(DOM树和渲染树),DOM树表示页面结构,渲染树表示DOM节点如何显示。重排是DOM元素的几何属性变化,DOM树的结构变化,渲染树需要重新计算。重绘重绘是一个元素外观的改变所触发的浏览器行为,例如改变visibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制,使元原创 2017-06-08 11:16:18 · 2919 阅读 · 0 评论 -
实战gulp
gulp的核心概念是流(stream),node中类似概念更多,此处不展开。首先安装npm包,并且引入gulpconst gulp = require('gulp')我们可以使用gulp.task()来定义一个任务:gulp.task('blue:images', () => { return gulp.src('client/assets/images/**') .pipe(gulp.原创 2017-06-07 13:56:37 · 400 阅读 · 0 评论 -
ajax
ajax是什么AJAX(asynchronous javascript and XML),翻译过来名称为:异步的Javascripth和XML,可以看出其并不是一种编程语言,而是一种在无需加载整个网页下更新部分数据的技术。ajax包含的技术使用CSS和XHTML来构成网页。使用DOM模型来交互和动态显示。使用XMLHttpRequest对象来和服务器进行异步通信。使用javascript来调原创 2017-06-18 15:47:10 · 392 阅读 · 0 评论 -
白话--阻塞非阻塞与同步异步
老张爱喝茶,废话不说,煮开水。 出场人物:老张,水壶两把(普通水壶,简称水壶;会响的水壶,简称响水壶)。 1 老张把水壶放到火上,立等水开。(同步阻塞) 老张觉得自己有点傻 2 老张把水壶放到火上,去客厅看电视,时不时去厨房看看水开没有。(同步非阻塞) 老张还是觉得自己有点傻,于是变高端了,买了把会响笛的那种水壶。水开之后,能大声发出嘀~~~~的噪音。 3 老张把响水壶放到火上,立等水开转载 2017-03-10 14:40:51 · 191 阅读 · 0 评论 -
关于setTimeout 第一个参数的问题解析
题目为什么叫setTimeout的第一个参数而不是回调函数?如果你心中有稍有疑惑,或许应该看看下面的文章我们日常使用setTimeout(),一般是将函数作为第一个参数,但是也有例外情况,先看以下代码:function test() { var cl = function() { console.log(666) } setTimeout('cl()', 1500)}test()将以上原创 2017-03-10 12:58:33 · 4550 阅读 · 1 评论 -
js中的原型链
原型链作为js的核心知识点,必须要讲讲。其实语言的学习,个人认为,最重要的还是知识点的串联带来的线性思维,可以更好地理解语言本身的设计意义。原创 2017-02-23 21:14:43 · 485 阅读 · 0 评论