Mia Yu

浩瀚的宇宙，我们都是渺小的尘埃

raf实现数字跳动效果

动画利用requestAnimationFrame实现，有个很好用的npm包：raf 目前该组件只支持整数型的数字展示，可配置属性主要有： duration:默认值500，表示每次数字变化时的动效 thousandType: boolean类型，true表示数字显示千分位类型 value：整数型，需要展示的数字 demo展示中心：https://yomonah.github.io/p...

Posted by Mia Yu on March 24, 2017

原生js－分页表格

效果如图这款功能简单的分页表格有两种分页类型，一种是normal，一种是simple，可以通过type进行配置，其他配置还包括表格的宽度，文本对齐类型，数据、列配置，每页显示的条数等，具体如下： width: 数值型，表格的宽度 headHeight: 数值型，表头的高度 dataHeight: 数值型，表身每条数据的高度 pageSize: 表示每页显示的条数 emptyText：...

Posted by Mia Yu on March 24, 2017

webpack生产环境打包配置

之前写的webpack-dev-server搭建前端工程里面的配置是只针对开发环境的，现在针对生产环境另写了一套配置，配的比较简单，纯属个人浅见，做点笔记。首先看package.json文件： "scripts": { "build": "webpack", "dev": "webpack-dev-server --devtool eval --progress --col...

Posted by Mia Yu on March 24, 2017

d3.js-水波球

这款基于d3.js开发的水波球组件，原先是一位大神用jquery写的，我在此基础上，用v4.x版本重新改写并封装成了react组件，运行效果如下：调用组件的时候，只需要传入config和data两项props，config的配置信息： idDom: 传入容器id,这是必传项，用于指定画布的dom width和height: 容器的宽高 textColor: 显示在底容器层数据文本的颜色...

Posted by Mia Yu on March 19, 2017

canvas实现环形倒计时

之前项目中有做过一款环形计时器，当时是纯用css3实现的，动画效果不错，但有一个非常致命的缺点：通用性差，动画时长只能在css中写死，如果遇到需要统计不同时长的情况下，就必须根据不同的时长写不同的样式。所以现在我换用js和canvas实现环形计时器并将其封装成组件，我们调用这个组件时，只需要传一些配置属性，就可以根据不同需求来展示，非常灵活又实用，具体配置如下： let props=...

Posted by Mia Yu on March 13, 2017

webpack-dev-server搭建前端服务器

前端时间用react+webpack搭建套web前端工程，是用webpack-dev-server起的node服务进行开发，通过自己的实践和网上查阅的资料，整理成这篇笔记： webpack-dev-server是一个小型的Node.js Express服务器，生存在内存中，十分小巧，它使用webpack-dev-middleware来服务于webpack的包，除此自外，它还有一个通过Soc...

Posted by Mia Yu on March 8, 2017

响应式前端开发-viewport笔记

viewport 是用户网页的可视区域，是设备的屏幕中能用来显示网页的那块区域，再进一步讲的话，它就是浏览器中用于显示网页的屏幕区域。大部分移动设备中的浏览器会把viewport默认设置为980px或1024px，显然这个尺寸比它的浏览器的可视区域会更大，因此，我们用移动设备打开一个网站就会出现水平滚动条用于显示整个页面。通过查阅资料，发现移动设备中包含了三种不同概念的viewport：...

Posted by Mia Yu on March 3, 2017

CSS3 clip-path图形剪裁

CSS3中的clip-path可以遮罩很多图形，它的原理其实是将超出剪裁范围的内容overflow设置为hide了，该属性可以剪裁多种不同的图形效果，算是比较方便实用的工具，但目前看来该属性浏览器兼容性不佳，ie和firefox并不兼容，chrome可以支持，我在chrome尝试了几个简单的例子。 1.圆形circle //html <div class='container'&g...

Posted by Mia Yu on February 28, 2017

es6特性整理

es6相较之前es5，增加了许多新的特性，提高了javascript体验，我在es6学习和使用的过程中进行了纪录。箭头函数箭头函数简化了函数的书写方法，变的非常简洁，还能解决this指向问题。示例如下： //es5写法： var item = data.map( function ( item, i ){ return item; }) //使用箭头函数 var ...

Posted by Mia Yu on February 27, 2017

react＋webpack构建web项目

一、准备工作安装node.js, npm(现在的node版本已整合npm，无需额外安装), webpack 二、新建项目文件夹： react-demo 在react-demo中创建一个package.json用于配置项目所需的各种模块，内容如下： { "name": "react-demo", "version": "0.0.1", "description": "", ...

Posted by Mia Yu on February 25, 2017