宝藏男孩们的锦鲤搬砖工-CSDN博客

原创 Webpack打包基础及原理

Webpack模块化打包工具出现的意义新特性打包编译： ESM有环境兼容问题，需要打包工具将开发阶段的一些文件在生产阶段直接编译成兼容绝大多数环境的代码。模块化JS打包：将模块文件打包到bundle.js文件中，解决了浏览器中频繁对模块文件发出请求的问题。支持不同种类型的资源模块Webpack快速上手初始化生成package.json文件webpack本质是npm的一个工具模块，通过yarn init初始化的方式生成配置文件yarn init --yes安装webpack核心模

2021-01-12 11:21:07 359

原创模块化开发与规范标准

ES Modules特性通过给script添加type= module的属性，就可以以ES Module的标准执行其中的JS代码ESM采用严格模式。严格模式下不可打印this每个ESM都是运行在单独的私有作用域中ESM是通过CORS的方式请求外部JS模块的ESM的script标签会延迟执行脚本。等同于添加了defer属性ES Modules导出通过export 关键词导出，import导入。通过as关键词进行导出时的重命名。导出的模块本质上是导入的变量的引用，而不是值export {

2021-01-11 10:42:17 221

原创学习笔记---2.1前端工程化

工程化概述工程化定义及意义：工程化：按照一定标准，通过工具来提高效率的一种手段解决的问题：传统语言或者语法的弊端无法使用模块化/组件化重复的机械式工作代码风格统一、质量保证依赖后端服务接口支持整体依赖后端项目脚手架工具Yeoman安装yeoman：在安装node之后，通过nmp或者yarn安装//yarnyarn global add yo//cnpmcnpm install -g yo安装generator:npm install -g generator

2020-10-15 10:09:45 245

原创 Gulp自动化构建思路

gulp-sass插件对scss文件进行转译，并将新文件以src的基础文件结构放在dist文件夹中。而以下划线_开头的文件会被默认为是主文件的依赖文件,不会被编译执行。gulp-babel插件对js文件进行转译，并将新文件以src的基础文件结构放在dist文件夹中。其中gulp-babel只会安装babel转换过程，@babel/core和@babel/preset-env这些babel中实际进行转换的插件需要手动安装。gulp-swig插件对模板文件进行转译。gulp-imagemin插件对图片和.

2020-10-14 22:31:21 104

原创学习笔记---1.2ESMAScript

ES新特性最主要的四个方面：解决原有语法上的一些问题或者不足对原有语法进行增强全新的对象、全新的方法、全新的功能全新的数据类型和数据结构作用域作用域：某个成员能够作用的范围块级作用域：let关键词声明变量，在花括号范围内生效的块级作用域let变量声明不会提升。const定义恒量。所以声明时就需要赋值。const声明的成员不能被修改，指的是是不允许再修改指向新的内存地址，但成员的属性值是可以修改的。解构关键字：[]。还可直接在解构的位置=指定默认值。…展开。但只能用于最后的位置

2020-10-06 12:23:01 214

原创学习笔记---1.函数式编程

1.函数式编程本质是对运算过程进行抽象，已达到像数学里的函数一样值和结果一一映射的关系。相同的输入始终得到相同的输出，与执行环境和顺序无关。函数式编程不会保留计算中间的结果，所以变量不可变（无状态）。在js中函数就是一个普通的对象，因此函数是一等公民：可以存储在变量中可以作为参数可以作为返回值高阶函数（函数是一等公民特性的体现）：可以把函数作为参数传递给另一个函数函数的返回结果也可以是一个函数Eg:函数作为参数。ForEach，循环时使用参数，即执行函数。定义时并不关心作为参数

2020-09-28 19:04:55 340

原创 Promise对象

Promise对象就是一个容器，里面保存着未来才会结束的事件的结果。有pending(进行中）、fulfilled(已成功）、reject(已失败）三种状态。状态是不可逆的，一旦进行完成，状态就固定了。只有两种可能：从pending变成fulfilled，或者从pendfing变成reject.记录的是这个Promise对象是否进行了。用法定义一个Promise对象，对象中异步操作成功时（例如文件读取成功，网络请求成功等），触发promise对象状态从pending变成resolve，并将异步操

2020-09-23 14:23:54 88

原创 Three.js---纹理贴图

贴图分类API纹理贴图通过加载器TextureLoader的load方法加载一张图片返回一个纹理对象Texture，纹理对象Texture作为模型材质颜色贴图.map属性的值。// 纹理贴图映射到一个矩形平面上var geometry = new THREE.PlaneGeometry(204, 102); //矩形平面// TextureLoader创建一个纹理加载器对象，可以加载图片作为几何体纹理var textureLoader = new THREE.TextureLoader();

2020-09-17 17:51:05 1389

原创 Three.js---加载外部模型文件

外部文件自定义模型加载器文件一般外部的json格式文件都是通过THREE.FileLoader引入，外部文件加载成功之后以参数形式返回到回调函数中。几何体数据、网格模型、Group对象、场景对象一般都是json格式的外部文件。// 创建一个文件加载器，该加载器是对异步加载的封装var loader = new THREE.FileLoader();loader.load('material.json', function(elem) { console.log(elem);// 查看加载返

2020-09-17 15:13:02 1180

原创 Three.js---动画

帧动画编辑关键帧并解析播放创建网格模型通过KeyframeTrack编辑关键帧混合器AnimationMixer，可播放参数中所有子对象的帧动画。剪辑clip作为参数，通过混合器clipAction方法返回AnimationAction操作对象。操作Action设置播放方式AnimationAction.play()，开始播放渲染。为了帧动画的连贯性，播放关键帧动画的时候，需要在渲染函数render()执行mixer.update(渲染间隔时间）告诉帧动画系统两次渲染的时间间隔。间隔时间

2020-09-16 17:32:46 758

原创 Three.js---精灵模型、粒子系统、几何体对象、曲线、三维建模、文字

精灵模型、粒子系统精灵模型：本质可以当作是三维场景中一个模型的标签，标签上可以显示一个写模型的信息。和网格对象一样，需要创建材质对象，但不需要创建精灵模型对象。本质上精灵模型对象内部封装了一个平面矩形几何体PlaneGeometry，这个矩形平面始终平行于Canvas画布。ps:颜色贴图map最好通过函数的形式引入。 function getTexture() { return new THREE.TextureLoader().load('sprite.png'); //r

2020-09-15 18:04:42 751

原创 JS宏任务和微任务

宏任务：宿主环境提供的任务。微任务：用语言标准提供的任务。宿主环境：简单来说，就是使JS运行的环境，目前常见的两种宿主环境有浏览器和node.语言标准：JS是一种编程语言，由它提供的就是微任务，比如ES6提供的promise常见的宏任务：整体代码script、setTimeout、setInterval常见微任务:Promise、process.nextTick执行顺序：先执行一个...

2020-09-11 16:41:42 204

原创 Three.js---材质、点线面、光源、组对象Group、相机对象

Three.js—材质、点线面、光源材质材质与模型的关系材质的共有属性.side如何贴面.opacity材质透明度点线面模型点模型Points、线模型Line、网格网格模型Mesh都是由几何体Geometry和材质Material构成，这三种模型的区别在于对几何体顶点数据的渲染方式不同。模型对象的变换具体使用文档可参考Object3D对象的克隆、复制复制方法.copy()克隆方法.clone()光源对象光照原理及光源类型基类Light和Object3DSpotLig

2020-09-11 16:14:05 730

原创 three.js--- 顶点、几何体

three.js— 顶点、几何体简而言之，就是通过three的不同模型api以各自的构建方式（点、线、面）渲染几何体，并赋值给material，从而生成几何体。立方体网格模型Mesh是由立方体几何体geometry和材质material两部分构成.eg:var material = new THREE.模型构建API({参数}）var mesh = new THREE.Mesh(geometry, material); //网格模型对象Meshscene.add(mesh); //模型对象添加到

2020-09-10 17:10:10 718

原创 three.js学习笔记

简介Three.js是基于原生WebGL封装运行的三维引擎。主要用于实现3D可视化。引用和其他的js用法一样，可以script引用外部three.js文件地址，或者将文件下载到本地引入。也可以通过模块来引入：通过npm来安装：npm install three导入模块:var THREE = require(‘three’);var scene = new THREE.Scene();或者直接使用ES6 import方式导入：import * as THREE from ‘three’;

2020-09-10 10:28:45 316 1

原创 js基础-数据类型

数据类型原始数据类型存储在栈（stack）中的简单数据段，也就是说，它们的值直接存储在变量访问的位置。ECMAScript 有 5 种原始类型（primitive type），即 Undefined、Null、Boolean、Number 和 String。1.Undefined 类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined。；2.另一种只有一个值的类型是 Null，它只有一个专用值 null，即它的字面量。值 undefined 实际上是从

2020-09-08 10:33:29 116

TF_0806