βloS

发表于 分类于 ，

开始

  让我们从头开始。
  JS是一门入门很简单的语言，能够给新手很强的自信心，这对学习是很大的帮助。就连写JS的工具都不需要特别复杂，你可以直接在记事本中输入如下部分并保存为index.html，然后在浏览器打开就是一个网页了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      .root {
        width: 300px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <div class="root"></div>
    <script>
      document.querySelector('.root').style.background = 'red';
    </script>
  </body>
</html>

  再进一步，就是找一个好用的文本编辑器，将HTML、JS、CSS分离，变得稍微专业一些。然后学习Vue、React、Angular等框架。这时已经可以正常进行项目开发了。
  这些框架各自提供了自己的脚手架，让我们可以实时看到自己写的代码产生的效果，但是如果我平时学习，难道也要分开好几个文件夹吗？那太麻烦了，可不可以在一套工程配置里实现兼容几种框架并且全部可以热更新？
  当然可以。

基础

  推荐一篇文章https://www.jianshu.com/p/42e11515c10f，笔者入门也是看到这篇文章。写的很好。如果你只想跟着一个人系统的学，那么可以看这里，也很详细！

  首先创建一个新的文件夹learnPack，进入文件夹，执行初始化

1
npm init
阅读全文 »

发表于 分类于

假如一个函数要在很短的时间内执行很多次，而且这个函数比较复杂，那么它对我们的程序性能就会造成很大的影响。解决这种问题的办法有两种：

  • 一种就是每隔一段时间执行一次，减少函数的执行次数。这就是节流
  • 另一种思路是既然短时间内执行了多次，那我只取最后一次的结果就行了。这就是防抖

节流

实现方法：时间戳、定时器

  1. 时间戳

记录每次执行函数时的时间，减去上次执行的时间，如果间隔小于预定的时间间隔就不执行。如下，设置初始时间为0，则第一次会触发, 后面每次执行进行判断，大于设定时间再执行，这样就可以防止多次执行复杂函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/**
 * @function throttle
 * @description 节流方法,使用时间戳实现，第一次会触发，最后离开触发范围不会触发
 * @param {any} fn
 * @param {any} fn
 * @param {any} wait
 * @returns
 */
function throttleTime(fn, wait) {
  let preTime = 0;
  return function (...args) {
    const context = this;
    const nowTime = +new Date();
    if (nowTime - preTime > wait) {
      fn.apply(context, args);
      preTime = nowTime;
    }
  };
}
阅读全文 »

发表于 分类于

什么是执行上下文（或叫执行环境: Execution context, EC）？

  • 执行环境定义了变量或函数有权访问的其他数据，每个函数都有自己的执行环境。通俗来讲，就是执行JS代码的环境的抽象概念。执行环境分为三类：
    全局执行环境——浏览器环境下是window
    局部执行环境——函数被调用时被创建
    eval执行环境——不建议使用该方法
  • JS在执行代码时会将代码运行时创建的所有执行上下文压入一个栈内，即执行环境栈。
    当 JavaScript 引擎第一次执行JS代码时，它会创建一个全局的执行上下文并且压入当前执行环境栈。每当引擎遇到一个函数调用，它会为该函数创建一个新的执行上下文并压入栈的顶部。引擎会执行那些执行上下文位于栈顶的函数。当该函数执行结束时，执行上下文从栈中弹出，控制流程到达当前栈中的下一个上下文。
    e.g.:
阅读全文 »

发表于 分类于

基本盒模型

每个人在学习CSS时一定会接触到盒模型，比如最基本的IE盒模型和W3C标准盒模型。文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）。每个盒子由四个部分（或称区域）组成，其效用由它们各自的边界（Edge）所定义。每个盒子有四个边界：内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。

  • 其中，两种盒模型都由内容、内边距、边框和外边距组成，可以用box-sizing属性进行切换；
  • 区别点是W3C标准盒模型的width和height只包含内容区Content，IE盒模型的width和height包含内容区、内边距Padding和边框Border。
  • 注意：background同时作用于内容区、内边距和边框！

如图给一个div设置宽高都是100px，W3C标准盒模型跟IE盒模型表现出的实际的盒子内容区大小是不一样的

阅读全文 »

发表于 分类于

什么是回流（重排）和重绘？

  • 1、回流：渲染树中的一部分或全部元素的尺寸、布局、隐藏等属性改变时，会引起渲染树重新构建，这就叫回流（reflow），也叫重排。比如调整窗口大小、设置字体大小、dispaly、获取实时属性offset系列、用户在input输入、激活CSS伪类:hover等等。

  • 2、重绘：当一些元素的可见性发生变化时，会引起重绘。比如outline、visibility、backgound-color等的变化。

  • 3、第一次渲染时一定会有回流和重绘。回流一定会引起重绘，重绘不一定引起回流。

  • 三个演示渲染过程的视频：
    http://www.youtube.com/watch?v=nJtBUHyNBxs
    http://www.youtube.com/watch?v=ZTnIxIA5KGw
    http://www.youtube.com/watch?v=dndeRnzkJDU

如何减少回流（reflow）、重绘（repaint）？

阅读全文 »

发表于 分类于

  曾经以为，loading的制作需要一些比较高深的动画技术，后来发现大多数loading都可以用“障眼法”做出来。比如一个旋转的圆圈，并不都是将gif图放进去，有些就是画个静止图像，然后让它旋转就完了。gif图也可以，但是加载时间比较长。
  CSS就可以做出大多数的loading，比如：
pianoheartcirclecicrleProgress
如何制作？

阅读全文 »

发表于 分类于

常用的选择器

1
2
3
4
5
6
7
8
9
10
# /* ID */
. /* 类名 */
element(div) /* 标签 */
A, E /* 所有A元素和B元素 */
A E /* 元素A的任一后代元素E (后代节点指A的子节点，子节点的子节点，以此类推) */
:first-child /* 第一个子元素 */
:last-child /* 最后一个子元素 */
:nth-child(n) /* 第n个子元素 */
:hover /* 鼠标悬停 */
:active /* 被激活(点击) */

关系形选择器

1
2
3
4
5
6
A, E /* 所有A元素和B元素 */
A E /* 元素A的任一后代元素E (后代节点指A的子节点，子节点的子节点，以此类推) */
A > E /*元素A的任一子元素E(也就是直系后代)*/
E:first-child /*任一是其父母结点的第一个子节点的元素E*/
A + E /*选择紧接在元素A之后的所有 兄弟元素E*/
A ~ E /*同一个父元素下，并且前面有A元素的E*/
阅读全文 »

发表于 分类于 ，

http的发展历史

  1. http/0.9
  • 只有一个get方法，服务器发送完数据就关闭TCP连接;
  • HTTP/0.9 的响应内容并不包含HTTP头，这意味着只有HTML件可以传送，无法传输其他类型的文件；
  • 没有状态码或错误代码
  • 请求方法：GET
  1. http/1.0
  • 状态码在响应开始时发送，使浏览器能够快速了解请求的状态并能做出一些调整
  • 引入了HTTP请求头的概念。
  • 在新HTTP头（Content-Type头）的帮助下，具备了传输非HTML文档的能力
  • 增加了协议版本信息
  • 1.0支持GET、POST、HEAD
1
2
3
// e.g.
GET /myPage.html HTTP/1.0
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36
1
2
3
4
5
6
7
8
200 OK
Date: Tue, 15 Nov 1994 08:12:31 GMT
Server: CERN/3.0 libwww/2.17
Content-Type: text/html
// 一个包含图片的页面
<HTML>
  <IMG SRC="/myimage.gif">
</HTML>
  1. http/1.1
阅读全文 »

发表于 分类于 ，

曲线

属性

1
1、 .arcLengthDivisions

当通过.getLengths计算曲线的累积段长度时，此值决定了分割的数量。为了确保在使用.getSpacedPoint等方法时的精度，如果曲线非常大，建议增加.arcLengthDivision属性。默认值为200。

方法

1
2
3
4
5
6
7
8
9
10
11
12
13
1、.getPoint ( t : Float, optionalTarget : Vector ) : Vector  
// getPoint方法返回在curve对象上t点(取值范围0.0-1.0之间)的矢量.
t: 来获取在任意百分比下的ｔ点的向量，百分比的值限于[0-1]。0是从路径的第一个点开始算起，1是最后一点,t=0.6表示从起点开始的60%处的点的向量。  
optionalTarget:　(可选)如果指定，结果将复制到此向量，否则将创建一个新的向量。  
2、.getPointAt ( u : Float, optionalTarget : Vector ) : Vector
// 根据弧长返回曲线上给定位置的矢量。  
u: u的取值范围是0.0 - 1.0, 将曲线作为一个整体, 一段弧长占曲线总长度的百分比。  
3、.getPoints ( divisions : Integer ) : Array  
// getPoints方法根据divisions将曲线等分,获得在曲线对象上等分点的点序列.如果没有设置参数divisions,默认初始化为5等分.返回对应等分线段顶点的坐标数组.数组长度为(divisions + 1)  
divisions -- 将曲线分成的段数，默认是5  
4、.getSpacedPoints ( divisions : Integer ) : Array  
// getSpacedPoints方法根据divisions将曲线等分,获得在曲线对象上等分点的点序列.如果没有设置参数divisions,默认初始化为5等分.返回对应等分线段端点在曲线上的相对位置数组,用弧长表示.  
// 获得一系列顶点的相对位置的数组.调用getPointAt方法。
阅读全文 »

发表于 分类于 ，

一、官方网站:https://threejs.org

二、关于Three.js

WebGL是大部分浏览器直接支持的一种3D绘图标准，它可以创建二维图形和应用，还可以充分利用GPU，创建漂亮的、高性能的三维应用。直接使用WebGL非常复杂，Three.js库提供了一套基于WebGL的、非常易用的JavaScrip API，它源自github的一个**开源项目**，通过这些API可以直接在浏览器中创建三维场景。本文整理了一些入门资料。

三、开始

  • 引入
    可以直接在HTML引入Three.js：
1
<script src="three.js"></script>

也可以用npm安装：
npm i three
import * as THREE from 'three'

  • 使用
    three渲染一个3D场景需要以下必要元素:
    1.场景(Scene)：是物体、光源等元素的容器，要渲染的东西需要先添加进场景；
    2.相机（Camera）：控制视角的位置、范围以及视觉焦点的位置,一个3D环境中只能存在一个相机；
    3.光源（Light）：包括全局光、平行光、点光源；
    4.物体对象（Mesh）：包括二维物体（点、线、面）、三维物体、粒子等；
    5.渲染器（Renderer）：指定渲染方式，如webGL\canvas2D\Css2D\Css3D等；
    非必要元素：
    控制器(Control)：相机控件，可通过键盘、鼠标控制相机的移动。

四、实例

阅读全文 »
0%