echoyoung46 / blog Goto Github PK

View Code? Open in Web Editor NEW

0.0 0.0 0.0 4.23 MB

JavaScript 17.00% HTML 57.99% CSS 25.01%

blog's People

Contributors

Watchers

blog's Issues

变量

使用有意义、可读性好的变量名
使用 const 定义长俩个
对功能类似的变量名采用统一的命名风格
使用易于检索名称（特别是数字）
传递参数时，使用说明变量
不要绕太多的弯子，显式优于隐式
当类/对象名已有意义时，对其变量命名不需要再次重复
避免无意义的条件判断

函数

函数参数不超过 2 个
函数功能的单一性
函数命名明确功能
函数只做一层抽象
移出重复的代码
采用默认参数精简代码
使用 Object.assign 设置默认对象
不要使用标记（Flag）作为函数参数
避免副作用，即避免「接受一个值并返回一个结果」
不要写全局函数
采用函数式编程
封装判断条件
避免「否定情况」的判断
避免条件判断，使用多态
避免类型判断
避免过度优化，现代浏览器运行时会对代码自动优化
删除无效代码

对象和数据结构

使用 getters 和 setters
让对象拥有私有成员，可以通过闭包完成

类

单一职责原则（SRP）
开/闭原则（OCP），易于扩展，难于修改
利斯科夫替代原则（LSP），子类对象应该能够替换其超类对象被使用
接口隔离原则（ISP），不依赖不需要的接口，一个类对另一个类的依赖应该建立在最小的接口上
依赖反转原则（DIP）
使用 ES6 的 classes 而不是 ES5 的 Function
使用方法链
优先使用组合模式而非继承

测试

单一的测试每个概念

并发

用 Promises 替代回调
Async/Await 是较 Promises 更好的选择

错误处理

捕获错误
不要忽略被拒绝的 promises

格式化

大小写一致
调用函数的函数和被调函数应放在较近的位置

注释

只对存在一定业务逻辑复制性的代码进行注释
不要在代码库中遗留被注释掉的代码
不需要版本更新类型注释
避免位置标记
避免在源文件中写入法律评论

定义场景

var scene = new THREE.Scene();

scene相当于一个容器，用来包容我们想渲染的物体。

定义相机

var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

fov表示视场，即相机位置所能看到的全部场景
aspect表示渲染结果输出去的长宽比，一般为window.innerWidth / window.innerHeight
- near表示近面，定义的是距离相机多近的地方开始渲染场景
- far表示远面，定义的是从近面出发可以看到多远的距离
camera.position.set(x, y, z); //设置相机位置

camera.lookAt(new THREE.Vector3(x,y,z)); //设置相机角度

定义渲染器

var webGLRenderer = new THREE.WebGLRenderer();

webGLRenderer.setClearColor(new THREE.Color(0x000, 1.0));

webGLRenderer.setSize(window.innerWidth, window.innerHeight);

webGLRenderer.shadowMapEnabled = true;

定义光源

var spotLight = new THREE.SpotLight(0xffffff); //设置光源颜色

spotLight.position.set(-20, 30, 40); //设置光源颜色

spotLight.intensity = 1.5 //设置光源亮度;

光线包括：AmbientLight（环境光）、PointLight（点光源）、SpotLight（聚光灯光源）、DirectionalLight（方向光）、HemisphereLight（半球光）、AreaLight（面光源）、LensFlare（镜头眩光）。

定义物体

Three.js提供了基本几何图形，包括二维和三维图形。

创建几何体只需要：

new THREE.PlaneGeometry(width, height, widthSegments, heightSegments);

二维图形包括：PlaneGeometry（平面），CircleGeometry（平面圆）、ShapeGeometry（自定义二维图形）。

三维图形包括：CubeGeometry（立方体）、SphereGeometry（球体）、CylinderGeometry（圆柱）、TotusGeometry（圆环）……

如果是外部模型，则通过

loader.load(path, function(result){}

加载到场景中。

动画

动画包括改变位置、缩放、旋转。

obj.position.x=stepX; obj.position.y=stepY;obj.position.z=stepZ;

obj.scale.set(scaleX, scaleY, scaleZ)

obj.rotation.x = rotationX; obj.rotation.y = rotationY; obj.rotation.z = rotationZ;

通过requestAnimatinoFrame来安排下一次渲染：

requestAnimatinoFrame(render);

如果要让几何体在垂直于Y轴的平面上沿着圆环运动，用sin、cos改变位置：

obj.position.x = r*Math.cos(t);

obj.position.z = r*Math.sin(t) - r;

将 Excel 表格数据转化为 JSON

本文介绍当产品给你一个表格，你要将表格里的数据以某种形式呈现到网页上时，不要傻傻地用手敲，用工具转换会比较方便。

Mac环境下，用Numbers打开表格，表格第一行改为JSON数据中的key值，比如：

然后依次选择 File->Export To->CSV，将文件转化CSV格式。CSV文件是可以直接转化为JSON格式的，比如到 CSVJSON 站点，添加文件之后，选择根据逗号分隔数据，可以得到一串JSON直接使用。

也可以再写段脚本转化为其他所需要的格式。

SVG，即可缩放矢量图形（Scaleable Vector Graphics），是一种 XML 应用，可以以一种简介、可移植的形式表示图形信息。写动画之前，需要准备素材，即 SVG 文件。有了素材则可以通过 CSS3 来呈现动画了。前端可以两种方法得到 SVG 文件，一种是通过将保留有绘制路径的设计稿导出成 SVG 格式，然后可以通过 AI 得到 XML 代码；另一种方法则是自己编写代码绘制图形。将 SVG 代码内联到 HTML 中：

<svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
 <title></title>
</svg>

基本图形

线段
```
<line x1="start-x" y1="start-y" x2="end-x" y2="end-y" style="stroke-width: width; stroke: color;">
```
除了上述属性之外，线段还有 stroke-opacity 控制线段的透明度，stroke-dasharray 控制线的长度和空隙的长度，数字之间用逗号或空格分隔，数字个数应为偶数，如果指定的数字个数为奇数，则 SVG 会重复一次，使得总个数为偶数。与 stroke-dasharray 对应的属性是 stroke-dashoffset，表示控制线的偏移量。stroke-dasharray 和 stroke-dashoffset 两个属性配合可以呈现出描边的过程。比如绘制一条 10px 的线段：
```
.line{
  stroke-dasharray: 10;
  stroke-dashoffset: 10;
  transition: all 1s linear;
}
.line.active{
  stroke-dashoffset: 0;
}
```
当偏移量从线段总长度逐渐减为 0 时，就是绘制出一条直线的过程。

矩形

<rect x="50" y="10" width="20" height="40" />
<!-- 圆角矩形 -->  
<rect x="50" y="10" width="20" height="40" rx="10" ry="5" />

圆和椭圆

<!-- 圆 -->
<circle cx="30" cy="30" r="20" style="stroke-widith: 5; stroke: black; fill: none;" />
<!-- 椭圆 -->
<ellipse cx="30" cy="80" rx="10" ry="20" style="stroke: black; fill: none;" />

多边形
```
<polygon points="15,10 55,10 45,20 5,20" style="fill: red; stroke: black;">
```
<polygon> 元素可以用来画任意封闭图形，指定一系列的 x/y 坐标对，并用逗号或者空格分隔。

如果要填充边线交叉的多边形，fill-rule 属性有 nonzero 和 evenodd 两个值来呈现不同的填充效果。
折线

<polyline> 与 <polygon> 有相同的 points 属性，不同在于图形并不封闭。
线帽和线连接

当使用 <polyline> 与 <polygon> 画线段时，可以用 stroke-linecap 指定不同的值来确定线的头尾形状，取值为 butt、round、square。也可以通过 stroke-linejoin 属性指定线段在棱角处交叉的效果，可能取值为 mitter（尖的）、round（圆的）、bevel（平的）。

分组和引用对象

元素会将其所有子元素作为一个组合，通常组合还有一个唯一的 id 作为名称。

图形中经常会出现重复的元素，比如一个表盘上的刻度，秒针的刻度有 60 个，如果一个个画出来需要 60 个只有角度不一样的或者。这时我们可以只绘制一个刻度，然后通过复制粘贴绘制整个表盘，如下：

<!--刻度-->
<rect id="secondMark" x="-2" y="-250" width="2" height="10" />

<g id="secondFace1">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#secondMark" transform="rotate(06)"></use>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#secondMark" transform="rotate(12)"></use>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#secondMark" transform="rotate(18)"></use>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#secondMark" transform="rotate(24)"></use>
</g>

<g id="secondFace2">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#secondFace1"></use>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#secondFace1" transform="rotate(30)"></use>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#secondFace1" transform="rotate(60)"></use>
</g>

<g id="secondFace">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#secondFace2"></use>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#secondFace2" transform="rotate(90)"></use>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#secondFace2" transform="rotate(180)"></use>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#secondFace2" transform="rotate(270)"></use>
</g>

定义了一组图形对象后，可以使用标签再次显示它们。

用于定义元素，但不显示它们，相当于作为”模板“供其他地方使用。
元素提供另一种组合元素的方式，和不同的是，不会显示。可以指定 viewBox 和 preserveAspectRatio 属性，通过给添加 width 和 height 属性就可以让适配视口大小。
```
<image xlink:href="xxx.jpg" x="" y="" width="" height="">
```
如果图像文件的尺寸与元素的宽度和高度不匹配，可以使用 preserveAspectRatio 属性指示浏览器怎么处理，默认值为 xMidYMid meet，会缩放图像并居中显示在指定的矩形中。

坐标系统变换

我们可以给对应的 SVG 元素添加 transform 属性，来进行 translate 和 scale 变换，用法同 CSS3 一样。这里需要特别说明的是，translate 移动的不是图形对象，而是网格坐标。scale 不是改变图形队形的网格坐标或者笔画宽度，而是其对应画布上的坐标系统大小。因此，变换序列的顺序会形成不同的结果。

渐变

linearGradient 线性渐变
```
<linearGradient id="two-hues">
  <stop offset="0%" style="stop-color: #ffcc00" />
  <stop offset="100%" style="stop-color: #0099cc" />
</linearGradient>
<rect x="20" y="20" width="200" height="100" style="fill: url(#two-hues); stoke: black;" />
```
元素有offset 和 stop-color 两个必要属性。offset 用于确定线上哪个点的颜色应该为 stop-color。

另外还可以使用 stop-capacity 设置颜色透明度。
```
<linearGradient x1="" y1="" x2="" y2=""></linearGradient>
```
如果想要颜色沿着竖线或者有角度的线条过渡，就必须使用 x1 和 y1 以及 x2 和 y2 属性指定渐变的起点和终点。
radialGradient 径向渐变
```
<radialGradient cx="0%" cy="0%" fx="50%" fy="50%" r="100%"></radialGradient>
```
cx 和 cy 指定渐变的起始位置，fx 和 fy 指定圆心位置，r 指定渐变圆心半径。

Demo 演示

SVG 滤镜那些事儿

虽然 SVG 不是一种位图描述语言，但它仍然允许我们使用一些相同的工具。当 SVG 阅读器程序处理一个图形对象时，它会将对象呈现在位图输出设备上；在某一时刻，阅读器程序会把对象的描述信息转换为一组对应的像素，然后呈现在输出设备上。

SVG 滤镜的用法如下：

<filter id="f1" x="0%" y="-500%" width="1000%" height="1000%"></filter>
<path class="st1" style="filter:url(#f1)" stroke="url(#linear)" d="M-556,2050.5l123-52l53,8l32-14"/>

用 SVG 的元素指定一组操作（也称作基元），在对象的旁边呈现一个模糊的投影，然后把这个滤镜附加给一个对象。

SVG 滤镜的用处在于可以创建投影效果。

创建投影效果

投影

起始和结束标记之间就是执行操作的滤镜基元。每个基元有一个或多个输入，但只有一个输出。一个输入可以是原始图形（被指定为 SourceGraphic）、图形的阿尔法（不透明度）通道（被指定为 SourceAlpha），或者是前一个滤镜基元的输出。
```
<filter id="">
  <feGaussianBlur in="sourceAlpha" stdDeviation="2" />
</filter>>
```
指定输入源用 in 属性，用 stdDeviation 属性指定模糊度，数值越大，模糊度越大。如果给 stdDeviation 提供两个有空格分隔的数字，第一个数字表示 x 方向的模糊度，第二个数字表示 y 方向的模糊度。

滤镜返回的是模糊单元，而不是原始图形。要实现原始图形加上投影的效果，需要添加更多的滤镜单元。

存储、链接、合并滤镜效果

<filter id="f1" x="0%" y="-500%" width="1000%" height="1000%">  
  <feOffset result="offOut" in="SourceGraphic" dx="5" dy="5" />  
  <feGaussianBlur result="blurOut" in="offOut" stdDeviation="8" />  
  <feMerge>
    <feMergeNode in="blur"/>
    <feMergeNode in="SourceGraphic" />	
  </feMerge>  
</filter>

通过 dx 和 dy 指定偏移量。

result 属性指定当前基元的结果稍后可以通过什么名字引用，它只在包含该基元的中有效。

基元包裹一个元素列表，每个元素都制定一个输入，这些输入按照出现的顺序一个堆叠在另一个上面。

发光式投影
```
<feColorMatrix type="matrix" values=
"0 0 0 0 0
0 0 0 0.9 0
0 0 0 0.9 0
0 0 0 1 0
" />
```
当黑色文本也需要投影时，可以用来改变颜色值。当 type 属性为 matrix，必须设置 values 为 20 个数字，按照 4 行 5 列的格式来描述变换信息。这个矩阵可以看作：
```
values=
"0 0 0 red 0
 0 0 0 green 0
 0 0 0 blue 0
 0 0 0 1 0"
```
关于矩阵的原理这里就不详细说明了。

允许我们使用任意的 JPG、PNG、SVG 文件，或者带有 id 属性的 SVG 元素作为滤镜的输入源。

<feImage xlink:href="xx.jpg" result="image" x="0" y="0" width="100%" height="100%" preserveAspectRatio="none" />

和

除了合并滤镜，还可以通过和两种滤镜来进行合并。

两者都需要指定 in 和 in2 属性来接受两个输入源。

通过 operator 属性来指定效果，可能值有：over、in、out、atop、xor、arithmetic 来改变两种滤镜的位置关系。

通过 mode 属性设置如何混合输入源，可能值有：normal、multiply、screen、darken、lighten。

这些是目前接触到的滤镜，后续了解更多之后再做补充。