JonyYu
JonyYu
简要介绍：在webpack的官网，给出了十几种sourcemap，那么每一种sourcemap之间有什么区别，本文在理解sourcemap的基础上，分析在生产和开发环境中，应该采用何种形式的sourcemap ### 一 、 从Sourcemap和Data URL说起 #### (1) 什么是Sourcemap? 我们在打包中，将开发环境中源代码经过压缩，去空格，babel编译转化，最终可以得到适用于生产环境的项目代码，这样处理后的项目代码和源代码之间差异性很大，会造成无法debug的问题。 举例来说，如果压缩等处理过的生产环境中的代码出现bug，调试的时候只能定位到压缩处理后的代码的位置，无法定位到开发环境中的源代码。 sourcemap就是为了解决上述代码定位的问题，简单理解，就是构建了处理前的代码和处理后的代码之间的桥梁。主要是方便开发人员的错误定位。这里的处理操作包括： - 压缩，减小体积 - 将多个文件合并成同一个文件 - 其他语言编译成javascript，比如TypeScript和CoffeeScript等 #### (2) 什么是DataURL? DataURL最早是出现在HTML文件img标签中的关于图片的引用，DataURL提供了一种将图片"嵌入"到HTML中的方法。 跟传统的img的src属性指向服务器中某张图片的地址不同，在Data URL协议中，图片被转换成base64编码的字符串形式，并存储在URL中，冠以mime-type。具体通过DataURL引入图片例子如下： ``` ``` DataURL使用于如下的场景 - 访问外部资源受限 -...
# React Hooks工程实践总结 ------ 最近在项目中基本上全部使用了React Hooks,历史项目也用React Hooks重写了一遍，相比于Class组件，React Hooks的优点可以一句话来概括：就是简单，在React hooks中没有复杂的生命周期，没有类组件中复杂的this指向，没有类似于HOC,render props等复杂的组件复用模式等。本篇文章主要总结一下在React hooks工程实践中的经验。 > * React hooks中的渲染行为 > * React hooks中的性能优化 > * React hooks中的状态管理和通信 ------ ## 一、React hooks中的渲染行为 ### 1.React hooks组件是如何渲染的...
# Typescript工程实践总结 ------ 使用typescript陆续也有1年多的时间，总结一下自己在typescript工程实践中的一些经验，主要包含了以下几个方面。 > * Typescript工程初始化 > * Typescript内置函数 > * 易混淆typescript知识点 > * 其他心得补充 ------ ## 一、Typescript工程初始化 刚开始迁移到typescript的时候，不知道从何开始，我们首先想到的就是如何将typescript编译成javascript.我们先从tsconfig.json讲起。 ### (1)、tsconfig.json tsconfig.json是typescript编辑的配置项，该配置决定了如何将typescript编译成ECMAscript，这里介绍比较重要的配置项： ```js "compilerOptions": { "target": "es2018", //可选属性es3,es5,esnext等 "module":...
------   对于Typescript项目的编码规范而言，主要有两种选择ESLint和TSLint。ESLint不仅能规范js代码，通过配置解析器，也能规范TS代码。此外由于性能问题，TypeScript 官方决定全面采用ESLint，甚至把仓库作为测试平台，而 ESLint 的 TypeScript 解析器也成为独立项目，专注解决双方兼容性问题。   最近在我的项目的编码规范中全量的用ESLint代替了TSLint,针对其中遇到的问题做一个记录。 > * 用ESLint来规范Typescript代码 > * 用ESLint来规范React代码 > * 结合Prettier和ESLint来规范代码 > * 在VSCode中使用ESLint > * husky和lint-staged构建代码工作流 > * gitlab的CI/CD来规范代码 ------ ## 一、用ESLint来规范Typescript代码 首先安装依赖：...
# 优雅的学习webgl(5)—webgl中的光照和反射变换 ------ 在前一章中我们介绍了投影模型，至此我们知道了在三维场景下观测一个物体必须要有视觉模型和投影模型，然而光有这两个模型好不够，跟现实生活中还是有差异的，举例来说，我们前面绘制的正方体没给面的颜色是不同的，因此我们可以区别出来不同的面，如果正方体的每个面的颜色都是相同的，我们只用视觉模型和投影模型是区别不出来的。然而现实生活中，即使是一个纯色的正方体，我们也能够区别出不同的平面。那么是为什么呢，这就是光照的影响 > * 光照 > * 光源类型和反射类型 > * 方向光和漫反射 > * 点光源和漫反射 ------ 这个系列的源码地址为：源码的地址为： https://github.com/forthealllight/webgl-demo ## 一、光照 我们以一个简单的例子来引出光照对于渲染结果的影响，同样的绘制一个正方体，这次我们绘制的正方体的8个面的颜色是相同的，比如都是白色的。那么绘制结果如下图所示： 上述的绘制结果，其实我们无法区别是每一个面，然而在现实生活中，即使是一个纯色的正方体，我们用肉眼也是可以区别出不同平面的，那么是为什么呢？ ***因为正方体每个平面处的光照不同，因此成像在人的视网膜中的每个平面的颜色就不会完全相同。*** 简单来说，是光照导致了纯色正方体成像的差异，因为光照通常是随位置变化的。影响光照的因素就主要是光源类型和反射类型，不同的光源类型和反射类型也可以排列组合，因此光照的影响表现出多样性。 ## 二、光源类型和反射类型 ### 1.光源类型 下面我们来看光源类型，在你本文中主要讨论平行光、点光源和环境光。在本文中不会去考虑光强的影响，在本文中的光源默认照射到的地方，光强是相同的。...
# 优雅的学习webgl(4)—webgl中的投影模型 ------ 在前一章中我们介绍了三维图形基础，提到了要想在画布中渲染出三维图形，必须同时确定视图矩阵和投影矩阵，这章我们来详细的介绍一下什么是投影模型。 > * webgl中的坐标系统 > * 什么是投影 > * 正射投影 > * 透视投影 ------ 这个系列的源码地址为：源码的地址为： https://github.com/forthealllight/webgl-demo ## 一、webgl中的坐标系统 在了解投影之前，我们现来看一下webgl中的坐标系统,在webgl中有两个坐标系统，一个是裁剪面坐标,另一个是纹理坐标。其中跟旋转变换以及图形渲染可视有关的是裁剪面坐标，这里我们先介绍webgl中的裁剪面坐标，而纹理坐标会在纹理贴图章节介绍。 webgl中的裁剪面坐标如下所示：  从上述裁剪坐标系统的示意图中我们可以看出，webgl中整个裁剪平面的中心坐标是(0,0),对于二维的裁剪平面而言其水平方向从(-1,0)到(1,0),其竖直方向从(0,-1)到(0,1). 也就是说其裁剪坐标任何方向的值在区间[-1,1]内。 注意一点：***裁剪平面是决定如何映射到画布上，因为画布是二维的，因此裁剪平面也是二维的。webgl中z轴的坐标并不限制在(-1,1),可以为任何值***。 那么画布坐标呢，比如我们以canvans640 X 480大小的画布为例：...
# 前端面试总结——进阶javascript篇 ### 1.自己实现一个bind函数 **_原理：通过apply或者call方法来实现。_** #### (1)初始版本 Function.prototype.bind=function(obj,arg){ var arg=Array.prototype.slice.call(arguments,1); var context=this; return function(newArg){ arg=arg.concat(Array.prototype.slice.call(newArg)); return context.apply(obj,arg); } } #### (2) 考虑到原型链 **_为什么要考虑？因为在new 一个bind过生成的新函数的时候，必须的条件是要继承原函数的原型_** Function.prototype.bind=function(obj,arg){ var arg=Array.prototype.slice.call(arguments,1); var context=this; var...
# 优雅的学习webgl(3)—webgl中的矩阵变换和三维图形 ------ 在前一章中我们了解了着色器和缓冲区，有了这两个我们可以绘制任意图形，本章我们在此基础上学习如何绘制三维图形以及如何让图形动起来. > * 矩阵变换 > * 三维图形基础 ------ 这个系列的源码地址为：源码的地址为： https://github.com/forthealllight/webgl-demo ## 一、矩阵变换 矩阵变换包含了平移、旋转和缩放，我们可以依次来看看如何实现这三种变换。以最简单的的三角形的平移为例，对于二维图形的平移就是x轴和y轴的坐标加上一定的分量： ```js const vsSource = ` attribute vec4 a_Position; uniform vec4 u_Translation; void main() {...
# 优雅的学习webgl(1)—从0开始构造你的第一个webgl程序 ------ 学习webgl也有小半年的时间了，有了一些心得和体会，在这里做一个记录，整个系列的代码都会给出，这篇文章是这个系列的第一篇文章，带你走进webgl的世界。 > * 什么是webgl > * 用webgl画点 > * 用webgl实现一个彩色正方形 ------ 这个系列的源码地址为：源码的地址为： https://github.com/forthealllight/webgl-demo ## 一、什么是webgl 在介绍什么是webgl之前，我们来看一个最简单的webgl程序。 ```js WebGL Demo main(); // start here function main() { const...