![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
文章平均质量分 57
latency_cheng
这个作者很懒,什么都没留下…
展开
-
JavaScript 中的 undefined、null 和 NaN
一、UndefinedUndefined 是 JavaScript 的基本数据类型之一,这个类型只有一个值,就是 undefined。已经声明但未初始化的变量,其值就为undefined。(未声明的变量和已声明未初始化的变量,其 typeof 都返回 undefined)二、NullNull 是第二个只有一个值 null 的数据类型,从逻辑角度看,null 值表示一原创 2017-04-21 13:10:04 · 380 阅读 · 0 评论 -
JavaScript 函数参数按值传递
JavaScript 函数的参数按值传递 这句话基本上是耳熟能详的,这篇博客根据基本类型和引用类型,分别举例来加深对这句话的理解。1、基本类型var num = 10;function add10(n){ n += 10; console.log(n);}function add20(n){ n += 20; console.log(n);}add10(n...原创 2018-04-22 15:49:33 · 386 阅读 · 0 评论 -
JavaScript 中的 this 究竟指向谁,箭头函数的 this 有什么不同
1、普通函数先说说普通函数中的this,各式各样的情况下判断this的指向,可以说是非常刁钻了。判断的时候,只要记住【this 永远指向调用它的对象,new的时候,指向new出来的对象。】这句话就够了。看几个例子://例1var obj = { name: 'latency', sayName: function(){ console.log('n原创 2018-04-20 22:03:45 · 9505 阅读 · 5 评论 -
自定义引入 swiper 组件
Swiper是目前应用较广泛的移动端网页触摸内容滑动js插件,在项目中引入也很方便。但是有时候,我们只需要swiper的部分功能,这样也可以减少swiper文件的大小。 首先可以在gitbub拉下swiper项目。 \swiper-master\scripts\build-config.js文件中的components列举了所有swiper提供的...原创 2018-09-29 10:31:23 · 2719 阅读 · 0 评论 -
Vue滑动翻页组件swiper的实现---第一版
关于滑动翻页,有很多优秀的插件可以使用,但是多多少少都有点大,所以自己试着完成一个组件来实现。(以左右滑动翻页为例)1、主要思路 最主要的就是对三个触摸事件的处理:touchstart、touchmove、touchend 在touchstart事件处理程序中记录一些初始值,比如原始坐标;在touchmove事件处理程序中计算实时滑动的距离,让元素随之一起偏...原创 2018-09-29 11:47:56 · 3109 阅读 · 0 评论 -
Vue滑动翻页组件swiper的实现---第二版
优化的点:1、改变组件结构,滑动组件的宽度由100vw改为自定义SwiperPage.vue<template> <div class="ths_swiper-page"> <t-swiper-wrap> <t-swiper-item> <div class="swiper" style=&原创 2018-10-08 15:45:38 · 2620 阅读 · 0 评论 -
Vue左滑组件slider的实现
slider组件与swiper组件不同,slider滑动时并不翻页,实现的是左滑时,显示右侧内容的功能1、主要思路 思路和swiper组件类似,主要的也就是对三个触摸事件的处理:touchstart、touchmove、touchend 在touchstart事件处理程序中记录一些初始值,比如原始坐标,偏移距离;在touchmove事件处理程序中计算实时...原创 2018-10-09 15:53:56 · 9256 阅读 · 3 评论 -
Vue过渡transition实现轮播组件
轮播组件的使用非常广泛,与前写的swiper不同,这个组件实现的是自动轮播的功能。先上效果图: 纵向滚动的轮播一般适用于一些信息的滚动展示 横向滚动的轮播一般适用于banner图的变换 这种组件写起来也其实也不算复杂,但是用Vue的transition组件会更加简单。1、Vue过渡组件transition ...原创 2018-10-25 16:01:45 · 6525 阅读 · 3 评论 -
JavaScript 监听元素是否进入/移出可视区域
JavaScript 监听元素是否进入/移出可视区域常规操作防抖节流IntersectionObserver兼容的代码常规操作 通常的做法是,监听srcoll事件,根据元素的offset来判断。window.addEventListener('scroll', this.scrollHandle, true); 使用getBoundingClientRec()来获取元素的位置。sc...原创 2018-12-11 23:13:27 · 20198 阅读 · 0 评论 -
JavaScript 实现红绿灯
使用setTimeout、Promise、async await 三种方式实现红绿灯代码,红灯2秒,黄灯1秒,绿灯3秒,循环改变颜色。改变颜色的方法,就简单写成打印出颜色。setTimeout实现 使用setTimeout是最基本的实现方式,代码如下,使用递归来实现循环改变颜色。function changeColor(color) { console.log('traffic-li...原创 2019-03-19 13:55:43 · 9014 阅读 · 0 评论 -
JavaScript设计模式---构造器模式
构造器模式是最简单基础的设计模式,即使用构造器来创建一个对象。function Person(name, age) { this.name = name; this.age = age; this.toString = () => { return `this is ${this.name}, ${this.age} years old` }}let latency = ...原创 2019-04-13 15:28:04 · 323 阅读 · 0 评论 -
JavaScript设计模式---模块模式
关于单例及模块模式,之前写过一篇博客 。模块模式返回一个对象,这个对象有一些私有属性和方法,并且提供了api来访问这些私有数据。let singleton = function(){ //私有变量和函数 let privateVariable = 10; function privateFunction(){ return false; ...原创 2019-04-13 16:27:41 · 296 阅读 · 0 评论 -
JavaScript 的深拷贝和浅拷贝
关于浅拷贝,按照常理理解,以及参考其他语言,我认为浅拷贝指的是和目标对象(数组)和原始对象(数组)指向同一块内存空间。赋值操作就是这种浅拷贝。var src = {x: 1, y: 2, z: 3};var target = src;target.y = 4;console.log(src.y) //4,相互影响使用Object()创建对象的副本也是一样的var pers...原创 2017-06-30 14:29:14 · 222 阅读 · 0 评论 -
JavaScript 中数组的 splice() 方法
splice( 开始的位置,要删除的个数 [,插入的项1 ] [,插入的项2 ][...] )直接对原数组进行处理,返回一个数组,包含从原数组中删除的项。1、删除任意位置项 ------ 传入两个参数,第二个参数不为0;2、从任意位置添加新项 ----- 传入三个及以上参数,第二个参数为0;3、替换任意位置项 ----- 传入三个及以上参数,第二个参数不为0。var color原创 2017-04-23 12:45:36 · 718 阅读 · 0 评论 -
JavaScript 中的 .toString() 和 String()
共同点:均表示把一个变量转换为 String 类型。区别:1、.toString() 可以传递参数指定基数(即使用几进制表示)var num = 10;num.toString(); //"10"num.toString(2); //"1010"num.toString(8);原创 2017-04-21 16:26:57 · 350 阅读 · 0 评论 -
JavaScript 中的字符串分割 slice()、substr()、substring()
三个函数均可接受两个参数,其中第二个参数可选。第一个参数指定字符串的开始位置,第二个参数:1、slice() 及 substring() 的第二个参数指定字符串的结束位置(不包括该指定字符)。2、substr() 的第二个参数指定子字符串的长度。var string = "hello world";alert(string.slice(3));原创 2017-04-22 11:07:40 · 894 阅读 · 0 评论 -
JavaScript 对象数组,根据某个对象属性进行排序
每个函数都是 Function 对象的实例,函数名是一个指向函数对象的指针。所以可以从一个函数中返回另一个函数。sort() 方法的参数是一个比较函数,接收两个参数,即比较的值。function createComparisonFunction(propertyName) { //为什么要在内部添加一个函数,而不是直接进行操作? return fun原创 2017-04-24 15:13:55 · 741 阅读 · 0 评论 -
JavaScript 操作 iframe 中的Dom
使用 iframe.contentWindow.document 在父窗口中获取子窗口中的Domvar iframe = document.getElementById('iframe');iframe.contentWindow.document.getElementById("xx").style.backgroundColor="#f00";使用 parent.documen原创 2017-05-18 16:37:55 · 2661 阅读 · 0 评论 -
JavaScript GET请求向 URL 末尾添加查询字符串参数
GET 是最常见的请求类型,最常用于向服务器查询某些信息。必要时,可以将查询字符串参数追加到URL的末尾,以便将信息发送给服务器。对XHR而言,位于传人open()方法的URL末尾的査询字符串必须经过正确的编码才行。使用GET请求经常会发生的一个错误,就是查询字符串的格式冇问题。查询字符串中每个参数的名称和值都必须使用encodeURIComponent()进行编码,然后才能放到URL的末尾;原创 2017-06-20 15:53:10 · 3702 阅读 · 0 评论 -
JavaScript 对象与 JSON 对象的相互转换
一、JSON对象ES5定义了全局对象JSON,对解析JSON的行为制定了规范。JSON对象有两个方法:stringify() 和 parse()。二、JavaScript 对象序列化为 JSON对象JSON.stingify( js对象 [, 过滤器] [, 选项])二三参数可选,js对象中的函数和原型成员将被忽略,值为undefined的属性也被跳过。默认情况下,原创 2017-06-19 15:42:30 · 49365 阅读 · 0 评论 -
JavaScript 的函数柯里化
1、什么是柯里化概念:只传递给函数一部分参数来调用它,让它返回一个函数去处理剩下的参数。作用:js预处理,将预先传入的参数保存在闭包中。优点:不立即求值,而是等到需要的时候再求值。自己的理解:预先传入一部分参数,所以可以使得函数降阶(function(arg1,arg2) --> function(arg1)(arg2) )。但降阶并不是柯里化的目的,因为也可以预先传入所有参数原创 2017-07-25 15:48:19 · 236 阅读 · 0 评论 -
JavaScript 中的闭包
一、什么是闭包闭包是一个函数,它有权访问另一个函数作用域中的变量。JavaScript中,函数内部定义的变量,都可以看作私有变量,函数外部无法直接访问。闭包就是有权访问另一个函数作用域中的变量的函数。创建闭包的常用方式,就是在一个函数内部创建另一个函数,并作为返回值。function fun(){ var name = 'latency'; return f...原创 2017-08-02 15:26:06 · 235 阅读 · 0 评论 -
JavaScript 中的单例以及模块模式
一、单例单例指的是只有一个实例的对象,JavaScript以对象字面量的方式创建单例对象。var singleton = { name: value, method: function(){ //方法 }};二、私有变量和公有(特权)方法任何在函数中定义的变量,都可以认为是私有变量。私有变量包括函数的参数,局部变量和在函数内部定义的原创 2017-08-02 16:24:05 · 615 阅读 · 0 评论 -
JavaScript 中的 call()、apply() 和 bind() 方法
call()、apply() 和 bind() 都用于在特定的作用域中调用函数,实际上等于设置函数体内this 对象的值。其中,call() 和 apply() 由函数直接调用,bind() 则创建一个函数的实例。1、call() 和 apply() call() 和 apply() 的唯一区别在于接收参数的方式不同:call() 第一个参数为作用域,其余参数都直接传递给执原创 2017-08-29 16:33:53 · 358 阅读 · 0 评论 -
JavaScript中的 eval() 函数究竟有什么用
之前对eval()函数一直有一些疑问,觉得没什么用,很疑惑为什么设计这样一个方法,今天来总结一下。1、定义和用法eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码。返回通过计算 string 得到的值(如果有的话,无值返回undefined)。只接受原始字符串作为参数,如果 string 参数不是原始字符串,那么该方法将不作任何改变地返回。如原创 2017-08-31 14:01:30 · 33597 阅读 · 0 评论 -
JavaScript设计模式---单例模式
单例模式之所以这么叫,是因为它限制一个类只能有一个实例化对象。经典的实现方式是,创建一个类,这个类包含一个方法,该方法在没有对象存在时,将会创建一个新的实例对象。如果对象存在,这个方法只是返回这个对象的引用。let singleton = (() => { let instance; function init() { // 私有变量和方法 let privateString ...原创 2019-07-22 15:39:14 · 333 阅读 · 0 评论