![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端学习
神圣光
热爱前端技术,乐于分享的前端学习者!
展开
-
简单有趣的原型语法
前些天偶然看到了一个有趣的原型语法,这种方法稍微简化了咱们给原型对象添加方法和属性的书写过程,而且非常清新,给人一种一目了然的感觉,在这里欣喜地和大家分享一下先来看看我们传统的添加原型对象的属性、方法的方式:function Person() {}Person.prototype.name = 'Han';Person.prototype.age = 21;Person.prototype.j原创 2018-01-01 21:51:07 · 514 阅读 · 0 评论 -
学习ES6中的数组扩展小记
数组的扩展1. 扩展运算符(背后调用的是遍历器接口 Symbol.iterator)它好比是 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列console.log(...[1, 2, 3])// 1 2 3console.log(1, ...[2, 3, 4], 5)// 1 2 3 4 5该运算符主要用于函数调用时,将数组变为参数序列。如果扩展运算符后...原创 2018-08-21 20:08:07 · 408 阅读 · 0 评论 -
学习ES6中的函数扩展小记
函数的扩展1. 函数参数的默认值注意: 1. 参数变量是默认声明的,不能用 let 和 const 再次声明 2. 使用参数默认值时,函数不能有同名参数 3. 参数默认值不是传值的,而是每次都重新计算默认值表达式的值。(参数默认值是惰性求值的)与解构赋值默认值结合使用// 只对对象进行了解构赋值,参数本身并没有默认值,不传递参数会导致报错function foo({...原创 2018-08-21 14:13:56 · 185 阅读 · 0 评论 -
学习ES6中的对象扩展小记
对象扩展1. 属性的简洁表示法ES6 允许直接写入变量和方法,作为对象的属性和方法,需要注意的是简洁写法的属性名总是字符串const obj = { class () {}}// 这里的 class 是字符串,所以不会因为它属于关键字,而导致语法解析报错var obj = { 'class': function () {}}// 如果某个方法的值是...原创 2018-08-26 22:21:32 · 308 阅读 · 0 评论 -
学习ES6中的Promise小记
Promise1. 含义特点: 1. 对象的状态不收外界影响,代表一个异步操作,存在三种状态:pending(进行中)、fulfilled(已成功)、rejected(已失败)。只有异步操作的结果可以决定当前是哪一种状态 2. 一旦状态发生改变,就不再再变。 3. Promise 无法取消,一旦新建就会立即执行,无法中途取消。如果不设置回调函数,Promise内部抛出的错误,就无...原创 2018-08-26 20:25:05 · 440 阅读 · 0 评论 -
学习ES6中的数值扩展小记
数值的扩展1. 二进制和八进制表示法提供了二进制和八进制数值的新写法,分别用前缀 0b 和 0o 来进行表示,从 ES5 开始,在严格模式中,八进制不再允许使用前缀 0 表示 如果要使用 0b 和 0o 前缀的字符串数值转为十进制,需要使用 Number 方法Number('0b111') // 72. Number.isFinite(),Number.isNaN()...原创 2018-08-19 21:01:06 · 163 阅读 · 0 评论 -
学习ES6中的字符串扩展小记
字符串的扩展1. 字符的 Unicode 表示法JavaScript 可以采用 \uxxxx 形式表示一个字符(表示一个字符的码点),但是这种表示法只限于在 \u0000 - \uFFFF 之间的字符。超出这个范围的字符必须使用双字节的形式进行表示ES6 可以将码点放入大括号内,这样就可以正确的解读字符了// 使用大括号进行表示码点\u{20BB7}2. code...原创 2018-08-19 19:26:26 · 165 阅读 · 0 评论 -
学习ES6中的解构赋值小记
变量的解构赋值1. 数组的解构赋值默认值可以是其他变量,但该变量必须已经声明2. 对象的解构赋值对象的结构赋值,依据是属性名的一致,对象的解构赋值更像是这种方式的简写:// key 值相当于匹配的模式,value 值才是变量let {foo: foo, bar: bar} = {foo: 'aaa', bar: 'bbb'} 所以对象的解构赋值的内部机制,...原创 2018-08-19 16:28:14 · 307 阅读 · 0 评论 -
使用push你必须知道的小细节
相信大家平时开发的过程中,经常需要对数组进行操作,说到对数组的操作,push还是出场率很高的。今天本人在使用push的过程中,因为对这个方法的理解不够深,导致开发过程中出现了小小的困扰。这里先给大家举个例子:var obj = {name: 'han'};var arr = [];arr.push(obj)arr.push(obj)arr.push(obj)arr.push(ob...原创 2018-06-28 22:56:33 · 11668 阅读 · 0 评论 -
使用vue的transition完成滑动过渡
使用vue来做一些小巧的动画效果是非常方便的,今天本人想使用vue的transition来完成一个滑动过渡效果,这里和大家分享一下。直接上源代码:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Vue滑动效果</title>原创 2018-06-23 22:07:43 · 13665 阅读 · 0 评论 -
文本框里如何带上图标和文字提示
相信我们平时开发的过程中,会遇到这种需求:这里是一个输入框,里面有提示文字的同时,还有一个小图标。这里我的做法是使用一个父元素包裹住文本框,利用父级元素的背景图片来完成小图标的实现。提示文字部分则使用文本框的placeholder来解决。参考代码如下:HTML部分:<div class="search-input"> <input type="text...原创 2018-06-21 22:29:43 · 6438 阅读 · 0 评论 -
CSS3中的box-sizing
懂得如何运用box-sizing之前,必须需要了解一下常规盒模型和怪异盒模型(IE盒模型)。 我们都知道盒模型从里到外主要包括:content,padding,border,margin。如下图: 两种盒模型的宽度 标准盒模型的width = content 怪异盒模型的width = content + padding*2 + border*2 也就是说,一...原创 2018-06-21 20:45:28 · 364 阅读 · 0 评论 -
图标字体的优缺点和使用
图标字体的优势和劣势优势轻量级:一个图标字体要比一系列的图像要小。一旦字体加载了,图标就会马上渲染出来,不需要下载一个个图像。这样可以减少HTTP的请求数量,而且和HTML5的离线存储配合,可以对性能做出优化。灵活性:不调字体可以像页面中的文字一样,通过font-size属性来对其进行大小的设置,而且还可以添加各种文字效果,如color、hover、filter、text-shad...原创 2018-04-03 10:51:06 · 6167 阅读 · 0 评论 -
设备像素比dpr
物理像素、设备独立像素、CSS像素物理像素:指的是终端设备上显示的最小单位,我们可以把这些像素看做是显示器上一个个的点。设备独立像素:指的是计算机坐标系统中的一个个点,它是独立于设备的用于逻辑上衡量像素的单位。常用dips来表示。CSS像素:它是一个相对值,不是绝对值,是一个抽象的单位,是一种规范。最终显示是取决于物理设备的。它的显示方式由设备像素比来决定,如1px的CSS像素,在设备...原创 2018-04-03 10:17:11 · 1270 阅读 · 0 评论 -
项目中使用webpack基本的配置
什么是 webpackwebpack 可以看做是模块打包机:它做的事情是,分析你的项目结构,找到 JavaScript 模块以及其他的一些浏览器不能直接运行的扩展语言(Scss,TypeScript 等),并将其转换和打包为合适的格式供浏览器使用使用 webpack 前的准备npm init :创建一个 package.json 文件。它是标准的 npm 说明文件,包括当前项目的原创 2018-01-17 11:15:55 · 2373 阅读 · 0 评论 -
Web前端开发工程师必读的15个设计博客
Web设计是一个不断变化的领域,因此掌握最新的发展趋势及技术动向对设计师来说非常重要,无论是学习新技术,还是寻找免费资源与工具,设计博客都是很不错的去处。本文向Web前端开发工程师推荐15个非常不错的技术博客。1. Smashing Magazine Smashing Magazine创建于2006年,是最好的设计博客之一,有很多Web设计和开发方面的高质量文章,内容涉及HTML5、CSS、Java转载 2017-12-28 20:55:18 · 642 阅读 · 0 评论 -
vue-router文档细读
Vue-Router在组件内,可以通过 this.router访问路由器,通过this.router访问路由器,通过this.router 访问路由器,通过 this.route 访问当前路由当 对应的路由匹配成功,将自动设置 class 属性值 .router-link-active1. 动态路由匹配通过设置路由的 path 为 /user/:id 的这种形式,此时可以通过...原创 2018-09-02 22:33:11 · 1665 阅读 · 0 评论