React Router 4.x 开发,这些雷区我们都帮你踩过了

前言 在前端框架层出不穷的今天,React 以其虚拟 DOM 、组件化开发思想等特性迅速占据了主流位置,成为前端开发工程师热衷的 Javascript 库。作为 React 体系中的重要组成部分:React Router 也成为开发者首选的路由库,其主要功能是通过管理 url 实现组件的切换和状态的变化。 正文 在 React Router 4.x 发布之前,我们在项目中使用的是 React Router 3.x。随着第四版 React Router 的正式亮相,其精简的 API 、语义化的路由匹配方案以及动态路由等变化,都彰显着此次升级的颠覆性。所以,我们决定在新的 React 项目中使用 4.x(React Router 4.x)开发,亲身实践之后发现: 4.x 不仅是 API 的简单改变,还有整个设计理念的变化;初次使用确实有一些别扭,更可怕的是按照 API 文档写出的代码,有时运行时会出现一些莫名其妙的红色错误(此刻的心情 down 到谷底~)。为了避免大家在使用时遇到同样的问题多绕弯子,我们把开发过程中遇到的问题以及相应的解决方法做了汇总。 4.x 使用问题汇总 1. 包引用方式 在之前的 3.x 中,在入口文件中定义路由时,我们会这么写:

但是保存后运行发现页面报错了,如下图所示: 解决方法:

页面显示正常,问题解决。接下来我们对该解决方法进行详细的解释: 4.x 中采用了单代码仓库模型架构,所以里面包含了若干个相互独立的包,如下所示: react-router  […]

WebGL入门与进阶2

程序创建完之后,我们需要需要对着色器进行动态控制才能达到我们所需要的功能。(如不知道怎么创建WebGL,可参考上篇文章)。 首先让我来介绍2个变量,我们需要借助这2个变量搭建的桥梁才能使JavaScript与GLSL ES之间进行沟通。 attribute: 用于顶点点着色器(Vertex Shader)传值时使用。 uniform:可用于顶点着色器(Vertex Shader)与片元着色器(Fragment Shader)使用。 将顶点动态化 先在顶点着色器代码中,将对应的vec4的固定值变成变量。

位置参数使用了attribute变量来承载。这样WebGL对象就可以获取到对应的存储位置,就可以去动态改变GLSL变量了。 使用WebGL来获取对应参数的存储地址。

然后给变量赋值。

注意:vertexAttrib3fv这个函数是典型的GLSL语法命名规范,vertexAttrib函数功能: 3:对应需要传3个参数,或者是几维向量。 f:表示参数是float类型。 v:表示传如的为一个vector变量。 也就是说对应设置顶点着色器的函数有一下几种功能:

同样操作可以如下修改PointSize:

片元着色器编程 对片元着色器变成需要使用uniform变量来承载。

获取片元着色器变量地址。

给变量赋值。

注意:uniform3fv这个函数是典型的GLSL语法命名规范,uniform3fv函数功能: 3:对应需要传3个参数,或者是几维向量。 f:表示参数是float类型。 u:表示参数是Uint32Array类型。 i:表示参数是integer类型。 ui:表示参数是unsigned integer类型。 v:表示传如的为一个vector变量。 uniform对应函数同attribute的函数构成相似,这里就不详细列举,具体请参考 [1]。 着色器中的代码precision mediump float;表示的意思是着色器中配置的float对象会占用中等尺寸内存。 具体包含的尺寸: highp for vertex positions, mediump for texture coordinates, lowp […]

WebGL入门与进阶1

改革开发40年以来,世界日新月异,无论从生活到精神上都有了颠覆性的变化,曾经教授还是教书的,砖家还叫专家,太阳还不叫日,菊花还是一种花,老王还没那么多,Web还只需要做IE,XHR还没出生的时候,怎么能想到现在浏览器会提供如此丰富多彩的多媒体生活,无论是音频、视频、以及各种漂亮的页面都在让用户更好的拥抱着互联网,当二维页面无法满足用户之后,会出现什么样的内容来继续推进Web进展呢,没错,就是3D,浏览器中看到的内容从平面变成3D的时候,oH,My God,提起来都让人兴奋。 网站的未来是这样子的: 的确,3D技术会让平淡的网页变的更酷,更让人眼花撩眼,这本后隐藏着什么呢?来来,咱们做下来泡一壶茶,边喝边聊,这个神奇的家伙叫做WebGL。 谈起WebGL可能有一些人比较陌生,实际上WebGL是一种3D绘图标准,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化。显然,WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计3D网页游戏等等。 此链接可以查看你的游览器是否支持WebGL以及支持的版本[1]。 看WebGL的背景实际上是JavaScript操作一些OpenGL接口,也就意味着,可能会编写一部分GLSL ES 2.0的代码,没错,你猜对了,WebGL只是绑定了一层,内部的一些核心内容,如着色器,材质,灯光等都是需要借助GLSL ES语法来操作的. 基于WebGL周边也衍生了众多的第三方库,如开发应用类的Three.js,开发游戏类的Egert.js等,都大大的降低了学习WebGL的成本,但是本着有问题解决问题,没问题制造问题在解决问题的程序猿态度,还是觉得应该稍微了解一下WebGL一些基本的概念,以便能更好的去理解不同框架带来的便捷以及优势。 接下来先简单介绍一下使用到的知识要点。 创建webGL对象 不同浏览器生命WebGL对象方式有所区别,虽然大部分浏览器都支持experimental-webgl,而且以后会变成webgl,所以创建时做一下兼容处理

着色器 WebGL依赖一种新的称为着色器(shader)的绘图机制。着色器提供了灵活且强大的绘制二维或三维图形的方法,所有WebGL必须使用它。着色器不仅强大,而且更复杂,仅仅通过一条简单的绘图指令是不能操作它的。 WebGL需要两种着色器 顶点着色器(Vertex shader):顶点着色器是用来描述顶点特性(如位置、颜色等)的程序。顶点(Vertex)是指二维或三维空间的一个点,比如二维或三维空间线与线之间的交叉点或者端点。 片元着色器(Fragment shader):进行逐片元处理过程(如光照等)的程序。片元(fragment)是一个WebGL的术语,你可以将其理解成像素。 着色器语言使用的是GLSL ES语言,所以在javascript需要将之存放在字符串中,等待调用编译 创建顶点着色器:

创建片元着色器:

浏览器的整个过程如下: 着色器中包含几个内置变量:gl_Position、gl_PointSize、gl_FragColor。 着色器语言中涉及到vec4的数据类型,此数据类型是一个思维浮点数组,所以其值不可以是整形如(1,1,1,1),正确应为:(1.0,1.0,1.0,1.0) gl_Position: 为一种vec4类型的变量,且必须被赋值。四维坐标矢量,我们称之为齐次坐标,即(x,y,z,w)等价于三维左边(x/w,y/w,z/w),w相当于深度,没有特殊要求设置为1.0即可。 gl_PointSize:表示顶点的尺寸,也是浮点数,为非必填项,如果不填则默认显示为1.0。 gl_FragColor:该变量为片元着色器唯一的内置变量,表示其颜色,也是一个vec4类型变量,分别代表(R,G,B,A),不过颜色范围是从0.0-1.0对应Javascript中的#00-#FF。 有了着色器我们就可以着手去绘制图像了,既然绘制3D图形,必然会有对应的三维坐标系,WebGL采用右手坐标系,如图所示: 使用着色器 让我们来看看如何把着色器代码编译并且使用起来 着色器代码需要载入到一个程序中,webgl使用此程序才能调用着色器。

让我们尝试绘制一个点

我们来看一看最终结果,果然出来了一个点。 Why? 咋这么模糊?没错不是你的眼镜度数又高了,的确是模糊的。 让我们来说说WebGL的坐标系。 因为WebGL的坐标系与实际页面中的坐标系是不同的,如下图,普通canvas坐标系与正常的浏览器像素值相同,但WebGL中的坐标系是以整个WebGL中心点为(0.0,0.0),而且坐标的精确度为小数点后一位。坐标系对比如下图所示: 图上的实例是在使用源生WebGL时,并且未对视角有设置的情况下的默认值。默认视角的位置为(0.0, 0.0, 0.0),并且lookAt(0.0, […]

如何用canvas实现在线签名?

随着计算机和网络技术的飞速发展,在线签名技术越来越多的被应用在无纸化办公中,这种直观便利的操作不仅可以大幅提升办公效率,而且使用数字化存储方式,避开了传统的纸质签字存储查阅困难等问题。在我们在日常生活中,已经有很多场景使用在线签名技术,例如:pos机刷卡签字、快递签收签字、银行或机关单位业务办理签字等。最近在做公司的业务办理需求,里面也涉及到在线签名,我们采用的 Canvas 技术实现,接下来,让我们来聊聊如何使用 Canvas 实现在线签名吧! 什么是 Canvas? Canvas 是 HTML5 新增的元素,用于在网页上绘制图形,它由 Apple 在 Safari 1.3 Web 浏览器中引入,之所以对 HTML 扩展的原因在于, HTML 在 Safari 中的绘图能力能为 Mac OS X 桌面的 Dashboard 组件所使用,并且 Apple 也希望有一种方式可以在 Dashboard 中支持脚本化的图形。Firefox 1.5 和 Opera 9 这两个浏览器也紧随 Safari 的引领,开始支持 Canvas 。 现在,Canvas 标签已经是 HTML5 最伟大的改进之一,因为它可以让我们在不使用图片的情况下实现网页的图形设计。它就像一块画布,本身没有绘制能力,但却把绘制 API 展现给客户端 JavaScript,我们借助 JavaScript 的支持,在画布范围内尽情发挥,达到想要的效果。 技术选型 这个功能无论是 Canvas、SVG 或是 […]

[译]Vue.js 结合 Firestore 实际应用

Vue.js 结合 Firestore 实际应用 作者: Lukas van Driel | 译:永无止晋 原文地址:https://www.smashingmagazine.com/2018/04/vuejs-firebase-firestore/ 你想做一个网站或者APP,竟然没有服务器?竟然没有数据库?竟然没有域名?你还不会后端技术?那都不是事儿!本文讲解如何利用 Firestore 配合 vue.js 做一个“八卦”网站。 ps: 访问 firebase 控制台需要“蓝灯”等网络代理 Firestore 是 Google Firebase 的一种新的数据存储方式(目前处于测试阶段),它以 Firebase 实时数据库为基础,且增加了一些漂亮的功能。在本文中,我们将使用 Vue.js 和 Firestore 建立一个网站。 假设你想制作一个新的产品(例如下一个 Twitter ,Facebook 或 Instagram )。 首先,你要制作本产品的原型或最小可行产品,即 MVP(Minimum Viable Product), 这样尽可能快地构建应用程序的核心,以便你可以将其展示给用户获取反馈并分析使用情况。这样用最短的时间完成,后续也可以快速迭代。 开始之前,我们先来给这个产品起一个厉害的名字,我们就叫它 “Amazeballs” 。 下面是我预想的设计: Amazeballs 的定位是—–一个与朋友们分享生活中的“八卦”的应用。网站分为两部分,上面区域,我们放一个输入表单用来发表你的“八卦”,下面用来展示好友们的“八卦”。 构建一个 MVP,你需要能够快速实现功能,随后可以灵活的添加和更改功能的工具。Amazeballs 的技术选型为 Vue.js( JavaScript 渲染框架),并用 Firebase(by […]

© 2018 JDC. All Rights Reserved.