Jeff's World

Things that I'm interested in

41
文 章
2
分 类
59
标 签

使用typescript改造koa开发框架

原文地址:使用typescript改造koa开发框架

强类型的 TypeScript 开发体验和维护项目上相比 JavaScript 有着明显的优势,那么对常用的脚手架进行改造也就势在必行了。

接下来开始对基于 koa 框架的 node 后端脚手架进行改造:

  1. 项目开发环境 和 typescript 编译环境的搭建;
  2. nodekoa、koa中间件和使用到的库 添加类型化支持;
  3. 基于 typesript 的特性改造项目。
more

WebGL之物体选择

使用WebGL将图形绘制到画布后,如何与外部进行交互?这其中最关键的就是如何实现物体的选择。比如鼠标点击后判断是否选中了某个图形或图形的某个部分。

本节实现的效果: WebGL选中物体
WebGL选中物体

more

WebGL学习之HDR与Bloom

什么是HDR

HDR (High Dynamic Range,高动态范围),在摄影领域,指的是可以提供更多的动态范围和图像细节的一种技术手段。简单讲就是将不同曝光拍摄出的最佳细节的LDR (低动态范围) 图像合成后,就叫HDR,它能同时反映出场景最暗和最亮部分的细节。为什么需要多张图片?因为目前的单反相机的宽容度还是有限的,一张照片不能反映出高动态场景的所有细节。一张图片拍摄就必须要在暗光和高光之间做出取舍,只能亮部暗部两者取其一。但是通过HDR合成多张图片,却能达到我们想要的效果。
hdr

more

WebGL学习之纹理盒

我们之前已经学习过二维纹理 gl.TEXTURE_2D,而且还使用它实现了各种效果。但还有一种立方体纹理 gl.TEXTURE_CUBE_MAP,它包含了6个纹理代表立方体的6个面。不像常规的纹理坐标有2个纬度,立方体纹理使用法向量,换句话说三维方向。本节实现的demo请看 天空盒
sky box

more

WebGL学习之法线贴图

实际效果请看demo:纹理贴图

法线贴图

为了增加额外细节,提升真实感,我们使用了漫反射贴图和高光贴图,它们都是向三角形进行附加纹理。但是从光的视角来看是表面法线向量使表面被视为平坦光滑的表面。以光照算法的视角考虑的话,只有一件事决定物体的形状,那就是垂直于它的法线向量。砖块表面只有一个法向量,表面完全根据这个法向量被以一致的方式照亮。如果每个片元都用不同的法线会怎样?这样我们就可以根据表面细微的细节对法线向量进行改变;这样就会获得一种表面看起来要复杂得多的幻觉:
表面法线

more

WebGL学习之纹理贴图

为了使图形能获得接近于真实物体的材质效果,一般会使用贴图,贴图类型主要包括两种:漫反射贴图和镜面高光贴图。其中漫反射贴图可以同时实现漫反射光和环境光的效果。
实际效果请看demo:纹理贴图

more

如何将markdown转换为wxml

话说我要为技术博客写一个小程序版,我的博客解决方案是 hexo + github-page,格式当然是技术控们喜欢的 markdown 了 。但小程序使用的却是独有的模版语言 WXML。我总不能把之前的文章手动转换成小程序的 wxml 格式吧,而网上也没完善的转换库,还是自己写个解析器吧。

解析器最核心的部分就是字符串模式匹配,既然涉及到字符串匹配,那么就离不开正则表达式。幸好,正则表达式是我的优势之一。

more

小试小程序云开发

微信小程序刚出没多久时,曾经上手写过demo,但开发体验比较差,所以一直没怎么关注。不过自从诸多适配方案出炉,以及云端的开通,觉得还是有必要上手体验一番的,于是为我的技术博客也写了个小程序版。

原生开发我是不想再试了,那就选一种适配方案,目前比较知名的有基于vue的 mpvueumi-app,基于react 的 taro,以及TX团队出的全新框架 wepy。个人对 react 的好感 以及 taro 框架的走向成熟,促使我选择了 taro

more

koa+mysql+vue+socket.io全栈开发之前端篇

ReactVue 之间的对比,是前端的一大热门话题。

  • vue 简易上手的脚手架,以及官方提供必备的基础组件,比如 vuexvue-router,对新手真的比较友好;react 则把这些都交给社区去做,虽然这壮大了 react 的生态链,但新手要弄出一套趁手的方案挺麻烦的,不过好在现在有很多类似 dva 的方案了。

  • vue 比较讨喜的一点,就是它的数据双向流动在表单开发时特别方便,而 react 在这方面可就麻烦多了。

  • 但是 vue 复杂的 api ,简直让人头大,光是文档说明都几十页了。太多的语法,太多的魔法符号,对进化速度越来越快的前端届来说,就是入手这个框架的最大阻碍。

  • 而相反 react 的 api 数量简直可以忽略不计了,顶多花几小时就能看完官方文档。你只要理解 JavaScript,就能理解 react 的很多行为。react 的很多用法,它的 api 都是符合直觉的,你对它用法的猜测基本都是八九不离十的,这真是大大降低了心智负担。

  • 除此之外,reactjsx 语法表达能力更强,还有 hochooks 使代码也更容易组织和复用。

虽然我更喜欢 React ,但工作上的需求,还不是要你用什么你就得用什么 😂,所以这个 demo 就当是探索 Vue 的前奏。

more

扫一扫,分享到微信

Powered by Hexo Theme simply

Copyright © 2020 Jeff Zhong

给我的早餐加个蛋吧 😊

weixinpay alipay