2017年01月_刻刻帝丶

原创应用数据流状态管理框架Redux简介、设计思想、核心概念及工作流

前几天给大家谈了谈React 不过它只是一个侧重于UI的框架只能算作是MVC中的V（View视图）而且只是DOM的一个抽象层，不是Web应用完整解决方案如果仅仅用它构建大型项目你会非常的吃力简介14年，Facebook提出Flux架构意图解决这个问题 15年，Dan Abramov将 Flux 与函数式编程相结合，创造了Redux由于简单易学就开始流行起来了 16年，Dan A

2017-01-31 17:54:12 4351 10

原创 React组件开发流程——利用React构建简单的可检索产品数据表

今天就是春节了，祝各位鸡年大吉，心想事成感觉这两天错过了好几个亿净往外赔钱了~马云爸爸才给了我2.08. 心塞昨晚发现博客还增加了30+访问流量没想到除夕夜还有这么多努力的人. 佩服 d===(￣▽￣*)b 好了废话不多说使用React构建可搜索产品数据表是React官网上的一个demo，它不是很难不过却能够很好的映射React的开发流程而且把我们常用的语法基本都涉及了

2017-01-28 21:06:24 2559

原创客户端高性能组件化框架React简介、特点、环境搭建及常用语法

明天就是春节了预祝大家新春快乐 [ ]~(￣▽￣)~* 天天饭局搞得我是身心疲惫= = 所以更新比较慢今天想跟大家分享的就是这个大名鼎鼎的React框架简介React是这两年非常流行的框架流行到什么程度呢? 我看了一下Github上的数据React达到了5w8+的star（1w+就很了不起了）在JavaScript中star排名第4 受欢迎程度可见一斑感兴趣的同学，给大家设置

2017-01-26 23:35:26 4069

原创分布式版本控制系统Git与项目托管平台Github相关概念、操作方法、开发流程与常用命令

简介 GitHub 是一个面向开源及私有软件项目的托管平台因为它只支持 Git 作为唯一版本库格式进行托管，所以命名GitHub Git是一个开源的分布式版本控制系统可以有效、高速的处理从很小到非常大的项目版本管理它也是目前世界上最先进的分布式版本控制系统什么是版本控制系统呢？简单地说，它有以下功能备份（记录多个版本文件的功能）记录操作时间线（查看历史操作，进行版本回滚、前

2017-01-22 23:00:19 10155 4

原创移动端Touch事件与H5-Canvas像素点检测实现刮刮乐

最近又被支付宝的集福字刷屏了我到底还是没看到敬业福ค(TㅅT) 心塞今天给大家带来移动端的刮刮乐实现效果就是这样的手滑动触发刮卡当刮卡面积达到70%以上，自动刮开全部灰色图层代码不是很多全部代码就这些<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta content="wid

2017-01-19 21:47:53 7276 5

原创 CSS预处理语言Less常用语法

Less是一种动态样式语言，属于css预处理语言的一种它使用类似CSS的语法为CSS的赋予了动态的特性如变量，继承，运算，函数等，更方便css的编写和维护实现css模块化less 可以在多种语言，环境中使用，包括浏览器端、桌面客户端、服务端其实它非常简单要想使用less我们需要下载它我选择利用npm包管理器下载 npm install less less-loader修改配置文

2017-01-19 16:27:09 2878 1

原创前端自动化构建工具Webpack1.x开发模式使用指南

WebpackWebpack是时下最流行的模块打包器它的主要任务就是将各种格式的JavaScript代码，甚至是静态文件进行分析、压缩、合并、打包，最后生成浏览器支持的代码特点：代码拆分方案：webpack可以将应用代码拆分成多个块，每个块包含一个或多个模块，块可以按需异步加载，极大提升大规模单页应用的初始加载速度智能的静态分析：webpack的智能解析器几乎可以处理任何第三方库

2017-01-18 20:01:49 8466 6

原创 HTML5客户端数据存储Web Storage——localStorage与sessionStorage

HTML5提供了在客户端存储数据的新方法Web Storage 类似于HTML4中的Cookie 不过它要强大的多Cookie先来简单复习一下之前使用的cookiecookie存储数据到用户设备上，存储的数据量较小只有4KB 可以通过navigator.cookieEnabled检测是否开启了cookie设置cookie document.cookie = 'key=value';获取co

2017-01-18 00:02:21 3856 2

原创 HTML5优化Web动画——requestAnimationFrame

在页面中实现动画，我们有很多选择可以使用CSS3的transition CSS3中的animation配合keyframes规则 SVG中也可以使用SMIL-animation 最原始的方法就是我们利用JavaScript的setTimeout/setInterval来实现动画不过现在我们又多了一种方法 requestAnimationFrame优势requestAnimationF

2017-01-17 17:46:08 2330

原创 SVG（可缩放矢量图形）图片添加、高斯模糊、渐变与g标签

今天主要谈一下SVG的特殊效果其实和canvas都是差不多的，只不过是利用XML标签用的不是很多但是以防以后万一用到还是整理一下图片添加svg中也可以添加图片<svg width=300 height=300> <image xlink:href="./images/d.jpg" x=100 y=100 height=100 width=100></image></svg>注意这里

2017-01-17 14:00:52 3725

原创 SVG（可缩放矢量图形）虚线相关属性与线条动画原理：一条会动的线

SVG可以实现非常酷炫的线条动画甚至是这样的网页传送门我们可以先来实现一个简单的SVG线条动画像这样不要着急，在此之前我们需要先了解一些属性值虚线属性虚线属性包括两个stroke-dasharray与stroke-dashoffsetstroke-dasharray大家来看下面的例子 <svg width=300 height=300 viewbox="0 0 30 30"> <pat

2017-01-15 22:08:04 10893

原创 SVG（可缩放矢量图形）绘制工具Method Draw

给大家介绍一个制作svg的工具当我们在网页上要绘制一个非常复杂的svg图片的时候可以借助于Method Draw工具进行绘制绘制完毕后可以导出为代码拷贝到我们的项目当中不需要下载，这是一个网页工具工具地址：传送门虽然这个网页bug很多不过这依然是一个不错的工具画布点击画布，在页面的右侧我们可以调整画布属性点击属性，滚动滑轮可以微调或者直接双击修改属性值工具栏左侧工具栏

2017-01-15 17:52:42 23025 5

原创 SVG（可缩放矢量图形）视区盒属性viewbox与preserveAspectRatio

SVG除了width和height这两个基本的宽高设置属性还有两个更高级的属性 viewbox与preserveAspectRatio视区盒viewbox是svg标签上的属性看下面的例子<svg width=300 height=300> <rect x=10 y=10 width=10 height=10></rect></svg>rect { fill: red;}

2017-01-15 16:51:21 2750

原创 SVG（可缩放矢量图形）基本图形绘制方法与path路径命令

SVG（Scalable Vector Graphics）可缩放矢量图形用于描述二维矢量图形的一种图形格式它不是HTML5新增的很早之前它就出现了相比于canvas，它更适合作一些小图标icon等等它的优点就是无论怎样放大，都不会模糊 canvas是js动态绘图，而svg是XML文档来描述绘图 svg-icon网址：传送门下面我们来看一下如何使用svg绘图创建svg和ca

2017-01-15 15:12:37 7132

原创 HTML5画布Canvas图片抽取、像素信息获取、命中检测

今天主要介绍canvas中比较强大的功能比如将画布内容抽取为图片获取、修改画布的像素信息以及画布的命中检测首先我仍然需要创建画布<canvas id="myCanvas" width=500 height=500></canvas>图片抽取首先要明确的一点是 toDataURL()是canvas对象自身的方法而不是环境对象的这个方法会将canvas的内容抽取为一张图片（base

2017-01-14 20:30:46 32669 6

原创 HTML5画布Canvas文本填充、线段属性、裁剪、透明度与像素合并方式

CSS3中的很多都可以类比与我们canvas的一些属性 canvas中“画笔”环境对象的很多属性都可以类比CSS3中的属性我们不仅仅可以绘制图形，还可以向画布中添加文字文字填充同样先获取元素对象与环境对象<canvas id="myCanvas" width=500 height=500></canvas>var canvas = document.getElementById('myCanv

2017-01-08 22:56:34 11444

原创 HTML5画布Canvas坐标轴转换、图案填充、渐变与阴影

上一篇文章我们了解了一些canvas基本图形绘制下面我们再来看一些相关操作坐标轴变换我们画布中默认的坐标轴与浏览器坐标轴相同 x正半轴朝右 y正半轴朝下但是我们可以手动设置画布坐标轴变换首先还是会获取“画布”和“画笔”<canvas id="myCanvas" width=500 height=500></canvas>var canvas = document.getElement

2017-01-08 21:01:57 2992

原创 HTML5画布Canvas线段、矩形、弧形及贝塞尔曲线等简单图形绘制

HTML5中最有意思的就是这个canvas了通过它我们可以画自己想要的图形它也是十分重要的技术应用于游戏、图表等等或者绘制各种酷炫的东西这里给大家分享一个网站传送门里面都是canvas技术绘制的图形画布创建canvas是html的一个标签是一个图形容器首先要在html页面添加一个canvas元素<canvas id="myCanvas" width=500 heig

2017-01-08 14:38:11 10973

尐轩web前端网络日志