2017年12月_TyrionJ

原创说说ES6 Promise

回调是JavaScript异步编程一种常用的手段，但这种手段有着局限性。1）使用多个回调或者嵌套回调会使代码变得非常复杂，难以理解和维护。2）如果你创建的回调函数在你使用的第三方插件或函数中调用，这会带来信任问题，比如有一天第三方API发生改变，（比如异步请求，5s内服务器没有响应会重新发送请求）你的回调可能被调用多次，而更加糟糕的是如果第三方函数是与支付相关的接口，用户可能会对同一件商品多次付款，

2017-12-31 13:55:11 281

原创异步：现在与未来

写在前面的话本文是你不知道的JavaScript（中卷）读书笔记，文章中的很多例子都来源于原书，当然本文也结合了自己的一些理解及总结归纳，如果你能看到这篇文章，请批判的阅读本文。1 分块的程序程序无论简单或者复杂，无论基于何种编程语言，都是由代码块组合而成的，每个代码块都扮演着自己角色，相互分工，相互合作，从而让一个程序运行起来。在JavaScript（后面简称JS）中，可以把JS程序写在.js文

2017-12-29 23:45:30 231

原创 ES6 函数的拓展

1.函数参数的默认值1.1 基本用法ES5函数参数没有默认值，通常这样传默认值function log(x,y) { if(typeof y === 'undefined') { y = 'world'; } console.log(x,y);};log('hello'); // hello worldlog('hello',false); //

2017-12-24 13:58:58 315

原创 sticky footer

在项目中前端er会遇到这种需求，页脚固定，这个固定指的是当内容较少时，页脚固定在浏览器底部（这种情况我们会考虑position:fixed），当内容足够多，浏览器视口高度小于内容高度时,页脚固定资页面内容页面的底部（这时会发现position:fixed满足不了需求）。content内容较少//html<header> I am header</header><div class="conten

2017-12-23 16:56:17 284

原创设置宽高相等的背景图片

宽高相等的图片在需求中是常见的，比如外卖网站食物详情页食品详情的照片一般都是宽高相等的图片，那么如何达到这种效果呢（即使图片原本不是宽高相等的）。一段css代码解决需求。html<div class="wrapper"> <img src="XXX.jpg"></div>CSS.wrapper { position: relative; width: 100%;

2017-12-23 14:42:47 813

原创浅谈clearfix类和clear清除浮动

CSS浮动会对原本的布局产生破坏，所以我们会考虑清除浮动产生的影响，本文不谈浮动以及各种清除浮动的方法，只讨论clearfix类和clear清除浮动。在网页设计中，很常见的一种情况是给内容一个div作为包裹容器，而这个包裹容器不设置高度，而是让里面的内容撑开包裹容器的高度。<div　class="wrapper" > <div class="content"> </div></

2017-12-23 13:51:30 6751

原创数值的扩展

本文就介绍了ES6数值拓展和Math对象新增的方法（常用）1.二进制和八进制表示法 ES6 提供了二进制和八进制数值的新的写法，分别用前缀0b（或0B）和0o（或0O）表示。0b111110111 === 503 // true0o767 === 503 // true从 ES5 开始，在严格模式之中，八进制就不再允许使用前缀0表示，ES6 进一步明确，要使用前缀0o表示。// 非严格模式(f

2017-12-22 16:59:04 250

原创字符串的扩展

ES6 加强了对 Unicode 的支持，并且扩展了字符串对象。本文对常用字符串拓展进行阐述，更多详细内容请参考字符串的拓展1.includes(), startsWith(), endsWith() JavaScript 只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。let s = 'Hello world!';s.startsWith('He

2017-12-22 15:04:38 391

原创变量的解构赋值

本文内容参考ECMAScript 6 入门解构赋值通俗点讲就是解析赋值号两两遍的结构，然后按照一定模式对变量进行赋值。解构赋值是变量声明和赋值变得更加简洁清晰。本文主要从以下阐述变量的解构赋值数组的解构赋值对象的解构赋值字符串的解构赋值数值和布尔值的解构赋值函数参数的解构赋值圆括号问题用途1.数组解构赋值ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为

2017-12-20 14:50:25 308

转载编辑器

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦：Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl

2017-12-20 12:53:30 202

原创媒体特性与Responsive

1.媒体类型媒体类型（Media Type)在CSS2中是一个常见属性，可以通过媒体类型对不同设备指定不同样式。 1.1 Media Type设备类型ALL:所有设备Braille：盲人用点子法触觉回馈设备Embossed:盲文打印机Handheld：便携设备Print：打印用纸或打印预览视图Projection:各种投影设备Screen：电脑显示器Speech：语音或音频合成

2017-12-18 15:01:26 820

原创 CSS3动画

前面就介绍了使用CSS3的transition属性实现一些属性过渡的动画效果。虽然tranition在一定的时间内可以实现元素的初始状态在指定的事件范围内过渡到最终状态，模拟一种过渡动画效果，但功能有限，通过CSS3animation属性可以像flash制作动画一样，通过关键帧控制动画的每一步，实现更为复杂的动画效果。1.动画简介1.1 步骤通过关键帧来声明一个动画在animation属性中调用

2017-12-18 12:37:40 324

原创 CSS3过渡

CSS3 过渡使前端开发人员通过CSS和JHTML来实现动画效果，而不需要借助Flash或者JavaScript。可以通过：hover，：focus，：active，：checkded，或者JavaScript触发一个元素，使用过渡会使样式的变化更加细腻，而不会突兀，用户体验更好。1.CSS3过渡简介 CSS3的transition允许CSS属性值在一定的时间区间内平滑过渡。这种效果可以再鼠标点击

2017-12-18 01:52:18 497

原创 CSS3变形

WEB设计师借助CSS3可以轻松实现倾斜，缩放，移动及翻转元素1.变形简介CSS3变形时一些效果的集合，比如平移、旋转以及缩放效果，每个效果都称为变形函数（Transform Function），在CSS没有变形之前，这些效果需要依赖图片、Flash或JavaScript才能实现。而使用纯CSS来完成这些变形无须加载这些额外的文件，再一次提升了开发效率，提高了页面执行效率。CSS变形属性及函数CSS

2017-12-17 15:53:33 468

原创 CSS3盒模型

CSS有一种基础设计模式叫盒模型，定义了Web页面中的元素怒是如何看做盒子来解析的，没一个盒子都有不同的界面，本文主要介绍CSS3盒模型。 1.CSS盒模型简介在CSS中主要有以下几种盒模型：inline、inline-block、block、table、absolute position、float.浏览器把每个元素看作一个盒模型，每一个盒模型是由以下几个属性组合所决定的.display、p

2017-12-15 16:09:22 578

原创 CSS3颜色特性

1.网页中的色彩特性1.1 在web网页上，显示器中看到的色彩会随着显示器环境变化而变化，特别是在web页面这个特殊环境之下。1.1.1 网页色彩的表现原理 web安全颜色有256种，具体指8位颜色的表现能力，随着科技的发展，颜色有了16位，32位。如果用两台品牌型号都一样的显示器，分别调16位和32位颜色，就能看出在网页上颜色区别。在web页面的设计中，颜色主要用16进制表示法。

2017-12-15 12:52:50 409

原创 vue数据传输排坑

在项目开发中忽略了一个问题，导致数据不能传输报错。 App.vue 商品goods组件要传递需要的数据给购物车shopcart组件shopcart组件也定义了props来接受父组件goods传来的数据为什么会报错呢，shopcart组件尽管定义了props来接受父组件的seller相关数据，goods组件也绑定了相关的seller相关的price数据但是这里忽略了重要的一点，goods组件是

2017-12-05 14:25:15 356

TyrionJ的博客