latency_cheng-CSDN博客

原创 JavaScript设计模式---单例模式

单例模式之所以这么叫，是因为它限制一个类只能有一个实例化对象。经典的实现方式是，创建一个类，这个类包含一个方法，该方法在没有对象存在时，将会创建一个新的实例对象。如果对象存在，这个方法只是返回这个对象的引用。let singleton = (() => { let instance; function init() { // 私有变量和方法 let privateString ...

2019-07-22 15:39:14 357

原创 JavaScript设计模式---模块模式

关于单例及模块模式，之前写过一篇博客。模块模式返回一个对象，这个对象有一些私有属性和方法，并且提供了api来访问这些私有数据。let singleton = function(){ //私有变量和函数 let privateVariable = 10; function privateFunction(){ return false; ...

2019-04-13 16:27:41 302

原创 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 358

原创 JavaScript 实现红绿灯

使用setTimeout、Promise、async await 三种方式实现红绿灯代码，红灯2秒，黄灯1秒，绿灯3秒，循环改变颜色。改变颜色的方法，就简单写成打印出颜色。setTimeout实现使用setTimeout是最基本的实现方式，代码如下，使用递归来实现循环改变颜色。function changeColor(color) { console.log('traffic-li...

2019-03-19 13:55:43 9054

原创 JavaScript 监听元素是否进入/移出可视区域

JavaScript 监听元素是否进入/移出可视区域常规操作防抖节流IntersectionObserver兼容的代码常规操作通常的做法是，监听srcoll事件，根据元素的offset来判断。window.addEventListener('scroll', this.scrollHandle, true); 使用getBoundingClientRec()来获取元素的位置。sc...

2018-12-11 23:13:27 20748

原创 css 实现元素自适应屏幕大小---等比缩放

有的时候，我们需要一个元素无论在什么尺寸的设备上都以一定的宽高比展示，或者说等比缩放，比如下面这个例子：无论屏幕大小如何变化，这张背景图都需要完全展示出来。元素的宽度自适应很好实现，高度要等比例变化的话，就需要一个css知识点：元素的margin和padding属性的值（无论是上下边距还是左右边距）如果设置为百分比，都是以宽度为基准计算。...

2018-11-06 18:06:29 42916 5

原创 Vue过渡transition实现轮播组件

轮播组件的使用非常广泛，与前写的swiper不同，这个组件实现的是自动轮播的功能。先上效果图：纵向滚动的轮播一般适用于一些信息的滚动展示横向滚动的轮播一般适用于banner图的变换这种组件写起来也其实也不算复杂，但是用Vue的transition组件会更加简单。1、Vue过渡组件transition ...

2018-10-25 16:01:45 6584 3

原创 Vue左滑组件slider的实现

slider组件与swiper组件不同，slider滑动时并不翻页，实现的是左滑时，显示右侧内容的功能1、主要思路思路和swiper组件类似，主要的也就是对三个触摸事件的处理：touchstart、touchmove、touchend 在touchstart事件处理程序中记录一些初始值，比如原始坐标，偏移距离；在touchmove事件处理程序中计算实时...

2018-10-09 15:53:56 9300 3

原创 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 2632

原创 Vue滑动翻页组件swiper的实现---第一版

关于滑动翻页，有很多优秀的插件可以使用，但是多多少少都有点大，所以自己试着完成一个组件来实现。（以左右滑动翻页为例）1、主要思路最主要的就是对三个触摸事件的处理：touchstart、touchmove、touchend 在touchstart事件处理程序中记录一些初始值，比如原始坐标；在touchmove事件处理程序中计算实时滑动的距离，让元素随之一起偏...

2018-09-29 11:47:56 3132

原创自定义引入 swiper 组件

Swiper是目前应用较广泛的移动端网页触摸内容滑动js插件，在项目中引入也很方便。但是有时候，我们只需要swiper的部分功能，这样也可以减少swiper文件的大小。首先可以在gitbub拉下swiper项目。 \swiper-master\scripts\build-config.js文件中的components列举了所有swiper提供的...

2018-09-29 10:31:23 2755

vs code格式化代码的快捷键如下：（来源于这里）On Windows Shift + Alt + FOn Mac Shift + Option + FOn Ubuntu Ctrl + Shift + I但是自带的格式化并不能满足我的需求，这个时候，不得不说插件大法好。1、代码格式化为eslint风格（参考自这里）需要插件：eslint在设置中添加："eslint.autoFixOnSave":...

2018-05-22 18:13:16 554703 8

原创基于webpack的项目，动态添加图片

有些时候，有的图片没办法在html中直接写好，比如有10张图片，名字分别为 rank1.png、rank2.png......rank10.png，我们希望可以在一个循环中把它们添加进来，而不是手动写10次。基本思路是下面这样：<li class="list-item" v-for="(item, index) in rankList" :key="item.id"> <...

2018-05-21 18:10:19 2757 1

原创 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 393

原创 Vue 单页应用的首屏优化

对于单页应用，要在一个页面上为用户提供产品的所有功能，在这个页面加载的时候，首先要加载大量的静态资源，这个加载时间相对比较长。所以我们需要做一些相应的优化，减少响应时间，尽快把首屏显示出来。1、压缩代码无论是否为单页应用，代码的压缩都是要做的。对于vue-cli生成的项目，在Webpack配置文件中使用了UglifyJsPlugin进行代码的压缩：//webpack.prod.conf.jsp

2018-04-21 16:59:14 3399

原创 webpack 中 entry 的配置之合并指定文件为指定的名字

参考文档（https://doc.webpack-china.org/concepts/entry-points/）首先来看 webpack.config.js 中entry的几种写法：1、单入口简写const config = { entry: './path/to/my/entry/file.js'};module.exports = config;只有一个入口的时候，用

2018-04-21 11:00:02 1567

原创 JavaScript 中的 this 究竟指向谁，箭头函数的 this 有什么不同

1、普通函数先说说普通函数中的this，各式各样的情况下判断this的指向，可以说是非常刁钻了。判断的时候，只要记住【this 永远指向调用它的对象，new的时候，指向new出来的对象。】这句话就够了。看几个例子：//例1var obj = { name: 'latency', sayName: function(){ console.log('n

2018-04-20 22:03:45 9681 5

原创 Vue 使用 Mint UI 实现左滑删除效果（CellSwipe）

Mint UI 是饿了么开源的，基于 Vue.js 的移动端组件库。关于Mint UI，有文档不够准确详尽，组件略显粗糙，功能不够完善等问题；也有高度组件化，体积小等优点。安装Mint UI：# Vue 1.xnpm install mint-ui@1 -S# Vue 2.0npm install mint-ui -S引入组件：// 引入全部组件im

2018-03-16 13:05:22 9960 4

原创 Vue 使用 vuelidate 实现表单验证

表单验证的应用场景十分广泛，因为网站对用户输入内容的限制是非常必要的。在vue中，我们使用vuelidate方便地实现表单验证。1、安装使用npm安装：npm install vuelidate --save在main.js中引入：import Vuelidate from 'vuelidate'Vue.use(Vuelidate)在组件.vue中引入需要使用的验

2017-11-20 11:43:35 13186

原创用 vue-route 的 beforeEach 实现导航守卫（路由跳转前验证登录）

路由跳转前做一些验证，比如登录验证（未登录去登录页），是网站中的普遍需求。对此，vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫（navigation-guards）。导航守卫（navigation-guards）这个名字，听起来怪怪的，但既然官方文档是这样翻译的，就姑且这么叫吧。贴上文档地址：https://router.vuejs.org/zh-c

2017-11-20 10:54:58 106909 1

原创用 vue-router 实现 tab 标签页（单页面）

vue-router 是 Vue.js 官方的路由插件，适合用于构建标签页应用。Vue 的标签页应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来，vue-router 会把各个组件渲染到正确的地方。首先，.vue中的内容非常简单，创建标签，并指定路径，渲染路由匹配到的组件。

2017-10-17 16:20:57 18272 3

原创 Vue 组件实现表单的双向绑定

下面是一个简单的货币输入的自定义控件，来自https://cn.vuejs.org/v2/guide/components.html： {{price}} Vue.component('currency-input',{ template: '' + '' + '$ ' + '',

2017-10-10 15:23:44 3880

原创 Vue 中的按键别名（.enter）和修饰键（.ctrl）

1、按键别名在监听键盘事件时，我们经常需要监测常见的键值。Vue 允许为 v-on 在监听键盘事件时添加关键修饰符：对于一些常用键，Vue 还提供了按键别名：全部的按键别名： .enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right2、修饰键除了

2017-09-30 12:55:31 18795 5

原创 Vue 中的 v-if 和 v-show

带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 是简单地切换元素的 CSS 属性 display。v-if 有配套的 v-else 和 v-else-if 可以使用，并且可以使用渲染一整个组 Title Paragraph 1 Paragraph 2下面的总结是在Vue官网看到的（https://cn.vuejs.org/v2/gui

2017-09-29 16:17:03 801

原创 JavaScript中的 eval() 函数究竟有什么用

之前对eval()函数一直有一些疑问，觉得没什么用，很疑惑为什么设计这样一个方法，今天来总结一下。1、定义和用法eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。返回通过计算 string 得到的值（如果有的话，无值返回undefined）。只接受原始字符串作为参数，如果 string 参数不是原始字符串，那么该方法将不作任何改变地返回。如

2017-08-31 14:01:30 34304

原创 JavaScript 中的 call()、apply() 和 bind() 方法

call()、apply() 和 bind() 都用于在特定的作用域中调用函数，实际上等于设置函数体内this 对象的值。其中，call() 和 apply() 由函数直接调用，bind() 则创建一个函数的实例。1、call() 和 apply() call() 和 apply() 的唯一区别在于接收参数的方式不同：call() 第一个参数为作用域，其余参数都直接传递给执

2017-08-29 16:33:53 386

原创 JavaScript 中的单例以及模块模式

一、单例单例指的是只有一个实例的对象，JavaScript以对象字面量的方式创建单例对象。var singleton = { name: value, method: function(){ //方法 }};二、私有变量和公有（特权）方法任何在函数中定义的变量，都可以认为是私有变量。私有变量包括函数的参数，局部变量和在函数内部定义的

2017-08-02 16:24:05 623

原创 JavaScript 中的闭包

一、什么是闭包闭包是一个函数，它有权访问另一个函数作用域中的变量。JavaScript中，函数内部定义的变量，都可以看作私有变量，函数外部无法直接访问。闭包就是有权访问另一个函数作用域中的变量的函数。创建闭包的常用方式，就是在一个函数内部创建另一个函数，并作为返回值。function fun(){ var name = 'latency'; return f...

2017-08-02 15:26:06 260

原创 JavaScript 的函数柯里化

1、什么是柯里化概念：只传递给函数一部分参数来调用它，让它返回一个函数去处理剩下的参数。作用：js预处理，将预先传入的参数保存在闭包中。优点：不立即求值，而是等到需要的时候再求值。自己的理解：预先传入一部分参数，所以可以使得函数降阶（function(arg1，arg2) --> function(arg1)(arg2) ）。但降阶并不是柯里化的目的，因为也可以预先传入所有参数

2017-07-25 15:48:19 264

原创 css 如何画三角形

之前一直不懂用 css 的 border 属性怎么画出的三角形，今天来总结一下。关键就在于如果指定一条边的border，那这个border就是一条直线。但如果每个边都指定border，但是隐藏其他三个边，剩下的一条border显示为一个梯形.tri-angle{ height: 200px; width: 200px; /*border: 10px so

2017-07-20 16:10:17 352

原创 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 249

原创 JavaScript GET请求向 URL 末尾添加查询字符串参数

GET 是最常见的请求类型，最常用于向服务器查询某些信息。必要时，可以将查询字符串参数追加到URL的末尾，以便将信息发送给服务器。对XHR而言，位于传人open()方法的URL末尾的査询字符串必须经过正确的编码才行。使用GET请求经常会发生的一个错误，就是查询字符串的格式冇问题。查询字符串中每个参数的名称和值都必须使用encodeURIComponent()进行编码，然后才能放到URL的末尾；

2017-06-20 15:53:10 3761

原创 JavaScript 对象与 JSON 对象的相互转换

一、JSON对象ES5定义了全局对象JSON，对解析JSON的行为制定了规范。JSON对象有两个方法：stringify() 和 parse()。二、JavaScript 对象序列化为 JSON对象JSON.stingify( js对象 [, 过滤器] [, 选项])二三参数可选，js对象中的函数和原型成员将被忽略，值为undefined的属性也被跳过。默认情况下，

2017-06-19 15:42:30 51401

原创 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 2749

原创 HTML 富文本编辑器插件 CKEditor

CKEditor 首页：http://ckeditor.com/一、使用1、将ckeditor整个文件夹放到网站资源目录下。2、在要添加ckeditor的网页上加入ckeditor.js。 --> Title3、在要转换成富文本的textarea下方编写js：CKEDITOR.replace('te

2017-05-18 15:31:32 4396

原创 JavaScript 对象数组，根据某个对象属性进行排序

每个函数都是 Function 对象的实例，函数名是一个指向函数对象的指针。所以可以从一个函数中返回另一个函数。sort() 方法的参数是一个比较函数，接收两个参数，即比较的值。function createComparisonFunction(propertyName) { //为什么要在内部添加一个函数，而不是直接进行操作？ return fun

2017-04-24 15:13:55 766

原创 JavaScript 中数组的 splice() 方法

splice( 开始的位置，要删除的个数 [，插入的项1 ] [，插入的项2 ][...] )直接对原数组进行处理，返回一个数组，包含从原数组中删除的项。1、删除任意位置项 ------ 传入两个参数，第二个参数不为0；2、从任意位置添加新项 ----- 传入三个及以上参数，第二个参数为0；3、替换任意位置项 ----- 传入三个及以上参数，第二个参数不为0。var color

2017-04-23 12:45:36 726

原创 JavaScript 中的字符串分割 slice()、substr()、substring()

三个函数均可接受两个参数，其中第二个参数可选。第一个参数指定字符串的开始位置，第二个参数：1、slice() 及 substring() 的第二个参数指定字符串的结束位置（不包括该指定字符）。2、substr() 的第二个参数指定子字符串的长度。var string = "hello world";alert(string.slice(3));

2017-04-22 11:07:40 928

原创 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 361

原创 JavaScript 中的 undefined、null 和 NaN

一、UndefinedUndefined 是 JavaScript 的基本数据类型之一，这个类型只有一个值，就是 undefined。已经声明但未初始化的变量，其值就为undefined。（未声明的变量和已声明未初始化的变量，其 typeof 都返回 undefined）二、NullNull 是第二个只有一个值 null 的数据类型，从逻辑角度看，null 值表示一

2017-04-21 13:10:04 412

空空如也

空空如也