yoliu-CSDN博客

原创 Typescript贪吃蛇项目练习

贪吃蛇项目练习注意分工明确，遵循单一职责原则，就是一个类只做一件事，把任务分清楚，方便日后维护，分工逐一谁的事谁去做。1. 项目搭建该部分可参考前面TypeScript——5. 编译选项、6. 使用webpack打包ts代码部分生成对应的配置文件（可直接使用part3中的配置文件）在之前的基础上在webpack中引入css插件，使得webpack可以对css代码进行处理并增加css的兼容性 npm i -D less less-loader css-loader style-lo

2021-05-12 16:35:14 217

原创 Typescript之面向对象

面向对象面向对象是程序中一个非常重要的思想，他被很多同学理解成了一个比较难，比较深奥的问题，其实不然，面向对象很简单，简而言之就是程序之中所有的操作都需要通过对象来完成举例来说：操作浏览器要使用window对象操作网页要使用document对象操作控制台要使用console对象一切操作都要通过对象，也就是说所谓的面相对象，那么对象到底是什么？这就要说到程序是什么，计算机程序的本质就是对现实事物的抽象，抽象的反义词是具体，比如：照片是对一个具体的人的抽象，汽车模型是对具体汽车的抽象等等，

2021-05-12 16:33:20 311

原创 Typescript基础

1. Typescript是什么？以JavaScript为基础构建的语言一个JavaScript的超集（对js进行了扩展，完全支持js，又在js的基础上增添了许多功能，最主要就是在js中引入了类型的概念，让js类型由动态类型变为静态类型，更便于维护与开发）可以在任何支持JavaScript的平台中执行Typescript扩展了JavaScript，并添加了类型TS不能被JS解析器直接执行，得把TS文件编译为JS2. Typescript增加了什么？类型支持ES的新特性添加ES不具备的

2021-05-12 16:32:03 146

原创自动化构建工具——16.webpack5介绍和使用

webpack5介绍和使用1.目前进度此版本重点关注以下内容:通过持久缓存提高构建性能.使用更好的算法和默认值来改善长期缓存.通过更好的树摇和代码生成来改善捆绑包大小.清除处于怪异状态的内部结构，同时在 v4 中实现功能而不引入任何重大更改.通过引入重大更改来为将来的功能做准备，以使我们能够尽可能长时间地使用 v5.2.下载npm i webpack@next webpack-cli -D3.自动删除 Node.js Polyfills早期，webpack 的目标是允许在浏览

2020-07-08 17:14:16 1180

原创自动化构建工具——15.webpack 配置详情

webpack 配置详情官方文档：中文：https://webpack.docschina.org/英文：https://webpack.js.org/因为webpack是国外发明的，所以最新的内容都在英文官方文档里，所以建议使用英文官方文档1.entry入口起点1.1.string形如：entry: ‘./src/index.js’ 字符串的形式入口数：单入口形成chunk数：打包形成一个chunk。输出一个bundle文件。此时chunk默认名称为main即[na

2020-07-08 14:17:45 176

原创自动化构建工具——14.webpack 性能优化

webpack性能优化一、开发环境性能优化最关键的点就是希望打包速度更快一些就够了1.1.优化打包构建速度HMR1.1.1HMRHMR：如果一个模块发生变化，只更新一个模块，其他模块使用缓存目录结构复用5.开发环境配置中08.开发环境配置HMR：hot module replacement 热模块替换/模块热替换作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块），极大提升构建速度。1.1.1.1.运行npx webpack-dev-server并修改

2020-07-07 22:34:05 274

原创自动化构建工具——13.webpack 生产环境基本配置

生产环境基本配置之前学习了各种文件的处理，接下来就需要汇总到一起，生成一个我们想要的生产环境的基本配置const { resolve } = require('path')const MiniCssExtractPlugin = require('mini-css-extract-plugin')const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')const HtmlWebpackP

2020-07-05 15:15:51 286

原创自动化构建工具——12.webpack 压缩html和js

压缩html和js1. js压缩生产环境下会自动压缩js代码，所以js压缩只需要将配置文件中的mode设置为production即可1.1 配置文件const { resolve} = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = { entry: './src/js/index.js', output: { filename: 'js/bui

2020-07-05 14:15:31 199

原创自动化构建工具——11.webpack JS兼容性处理

js兼容性处理接着上一节目录结构进行修改index.jsconst add = (x, y) => { return x + y;}console.log(add(4, 5))运行webpack，查看构建后的结果built.js，可以看到并没有进行兼容性处理将构建好的index.html在Chrome浏览器打开，可以看到没有问题在IE浏览器打开，可以看到提示语法错误，即出现兼容性问题所以需要进行兼容性处理1. 需要的核心库babel-loade

2020-07-05 11:52:29 255

原创自动化构建工具——10.webpack JS语法检查

js语法检查作用：规范代码风格和检查常见语法错误需要下载的库语法检查eslint-loadereslint规则（Airbnb）设置eslint-config-airbnb-baseeslint-plugin-import设置检查规则package.json中的eslintConfig设置"eslintConfig": { "extends": "airbnb-base", // 规则},修改配置文件const { resolve } = require('pa

2020-07-04 22:22:47 206

原创自动化构建工具——9.webpack压缩css

压缩CSSCSS体积越小，请求速度也会更快，那么加载速度就快，用户看到效果就更快一些，这样用户体验就会更好，所以在代码上线之前一定要压缩CSS。目录结构沿用上一节需要下载的插件optimize-css-assets-webpack-pluginnpm i optimize-css-assets-webpack-plugin -D步骤引入插件const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-

2020-07-04 16:43:05 131

原创自动化构建工具——8.webpack CSS兼容性处理

CSS兼容性处理让我们在写样式的时候不用太过操心兼容性问题，而把它交给工具，让工具自动去完成，这样就大大解放程序员的一些操作，让程序员只考虑最简单的东西，通过工具帮我们做兼容性处理。目录结构沿用上一节提取CSS成单独文件需要下载的库postcss-loader、postcss-preset-envnpm i postcss-loader postcss-preset-env -D在package.json文件中的browserlist配置browserlist的详细配置可以去GitHub搜

2020-07-04 16:06:05 267

原创虚拟现实大作业——VR游乐园（无设备开发）之4.游乐项目场景

1. 放置VR摄像机该部分就是将VR摄像机放入场景中即可，所以将之前设置的VR摄像机置为预制体（也可以按照之前放置VR摄像机中的步骤进行设置）设置该预制体：将该预制体下的所有子物体的位置进行重置（清除掉之前的设置：在图中位置右键->Reset），再进行相关设置打开任意一个游乐项目场景，这里以过山车为例,将VR摄像机放置到合适位置运行看看视野是否正常2. 控制欢呼音效的播放时机和跳转场景游乐项目结束时有一个欢呼音效并且倒数3秒后跳转回设备选择场景通过项目Animation组件获

2020-06-29 14:41:24 3337 7

原创虚拟现实大作业——VR游乐园（无设备开发）之3.3.游乐设备选择场景搭建

1. 射线控制视频播放继续编辑GameItem脚本using System.Collections;using System.Collections.Generic;using UnityEngine;using UnityEngine.Video;using VRTK;using System.IO;public class GameItem : MonoBehaviour{ private VideoPlayer m_VideoPlayer; private

2020-06-27 23:50:21 1426

原创虚拟现实大作业——VR游乐园（无设备开发）之3.2.游乐设备选择场景搭建

1. 使用VRTK实现射线交互修改VR相机中手柄的缩放程度是我们能够看到手柄对VRTK SDK 下 Simulator中的[VRSimulator_CameraRig]进行配置勾选掉Reset Hands At Switch选项防止按下Alt键控制手柄的时候手柄位置重置；因为整个场景都是放大了数千倍的，手柄也放大了，所以相机和手柄的移动幅度也要相应放大，以免无法正常进行移动。在场景中创建一个空物体，修改名称为VRTK_Scripts,再在该物体下创建两个空物体，分别命名为Contr

2020-06-27 20:26:06 2487 1

原创虚拟现实大作业——VR游乐园（无设备开发）之3.1.游乐设备选择场景搭建

游乐设备选择场景搭建完善开始场景搭建时创建的MainScene1. 打开之前创建的MainScene场景，找到Res->MainScene->fullLevel->Galaxy.fbm->Galaxy并拖拽到场景中2. 为了把摄像头包裹住，需要把Galaxy放大（这里放大3000倍）3.修改材质颜色为白色4. 放置VR摄像机因为要把场景变成VR场景，使用的是VR相机，所以把默认的Main Camera删除，在将VR摄像机放入场景中注：由于没有设备，所以使用的是无

2020-06-27 16:19:30 2754

原创虚拟现实大作业——VR游乐园（无设备开发）之2.开始场景的搭建

开始场景的搭建1.先打开默认提供的SampleScene场景2.修改Game窗口分辨率为1920*1080没有该分辨率选项则点击“+”号自行添加3. 删除默认光源4. 创建一个Canvas（右键->UI->Canvas）5. 修改Canvas缩放模式为和屏幕进行缩放得到UI的自适应选中Canvas，修改其下的Canvas Scaler中的缩放模式和分辨率6. 在Canvas下创建一个image子物体7.将image填充到与Canvas一样大8. 修改imag

2020-06-26 16:08:34 2742

原创虚拟现实大作业——VR游乐园（无设备开发）之1.环境配置

VR 游乐园项目资料：链接：https://pan.baidu.com/s/1k8isH1ZhpdCKYpLUpTnRfA提取码：ed9ySteamVR与VRTK的导入Unity具有极高的版本要求，所以不管是Unity、SteamVR还是VRTK都需要版本匹配才能够使用，不然会导致项目出现很多错误。本项目版本情况如下：Unity 2019.3.10f1 (64-bit)SteamVR plugin for Unity - v1.2.3VRTK_v3.3.0新建项目导入插件

2020-06-26 15:54:53 2568

原创自动化构建工具——7.webpack提取CSS成单独文件

生产环境搭建——提取CSS成单独文件一、目录结构a.css#box1 { width: 100px; height: 100px; background-color: pink;}b.css#box2 { width: 200px; height: 200px; background-color: deeppink;}index.jsimport '../css/a.css'import '../css/b.css'index.html

2020-06-08 13:04:07 204

原创自动化构建工具——6.webpack构建环境介绍

构建环境介绍开发环境开发环境指的就是能让代码本地调试运行的环境，详细的就是我们写的源代码里面包含ES6语法、less文件等，经过webpack的编译处理（例如将less编译成css，Es6编译成浏览器能识别的语法等），输出bundle这个能被浏览器所运行的资源文件。这个环境为了让程序员更加轻松、方便，所以还加了一些自动化的工作（比如自动打开浏览器、自动编译等操作），让我们的效率更高。这就是开发环境所做的事情。生产环境概念：生产环境就是能让代码优化上线运行的环境。我们要做的事情有：CS

2020-06-08 12:09:31 118

原创自动化构建工具——5.webpack开发环境配置

开发环境配置随着项目资源越来越多，如果不划分目录就会非常的乱，所以需要对项目进行目录划分基本目录划分将src目录主要分为：css——样式资源目录imgs——图片资源目录js——js文件目录media——媒体目录（存放其他资源）index.html——首页webpack.config.js——配置文件基本开发环境配置webpack.config.js/** * 开发环境配置：能让代码运行成功 * 运行项目指令： * webpack 会将打包结果输出出去 *

2020-06-07 23:00:54 113

原创自动化构建工具——4.webpack打包各类资源

webpack各类资源的打包将所需要的包下载到根目录，这样在子目录用的时候会自动向上一级找包一、创建配置文件项目和配置是两方面，项目的代码用的是ES6模块；而配置模块是基于node.js平台运行的默认采用commonjs。创建文件 webpack.config.js基本配置内容如下/** * webpack.config.js webpack的配置文件 * 作用：指示webpack干哪些活（当你运行webpack指令时，会加载里面的配置） * * 所有构建工具

2020-06-07 19:02:44 163

原创自动化构建工具——3.webpack初体验

2020-06-07 18:52:37 158

原创自动化构建工具——2.webpack简介

webpack简介webpack 是什么？webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。资源构建工具：就是将前端一系列需要做的小操作整合成一个大的工具，他一次性能干完，这样的工具就叫构建工具，Webpack就是构建工具中的一种。静态模块打包器：很多要引

2020-06-03 22:34:49 220

原创自动化构建工具——1.webpack准备

一、技能点二、环境参数Node.js 10版本以上Webpack 4.26版本以上三、预备技能基本Node.js知识和Npm指令熟悉ES6语法

2020-06-03 22:20:29 115

原创 Git&GitHub——GitHub部分相关笔记

GitHub在版本控制系统中，大约90%的操作都是在本地仓库中进行的：暂存、提交，查看状态或者历史记录等等，除此之外，如果仅仅只有你一个人在这个项目里工作，你永远没有机会需要设置一个远程仓库。只有当你需要和你的开发团队共享数据时，设置一个远程仓库才有意义。你可以把它想象成一个“文件管理服务器”，利用这个服务器可以与开发团队的其他成员进行数据交换。注册访问[GitHub][https://github.com/] 首页,点击Sign up连接。（注册）多人协作开发流程A在自己的计算机中创建

2020-06-03 20:20:32 150

原创 Git&GitHub——Git相关笔记

Git基础版本管理什么是版本管理版本管理就是一种记录文件变化的方式，以便将来查阅待定版本的文件内容。人为维护文档版本的问题文档数量多且命名不清晰导致文档版本混乱每次编辑文档需要赋值，不方便多人同时编辑同一个文档，容易产生覆盖Git是什么Git是一个版本管理控制系统（缩写VCS），它可以在任何时间点，将文档的状态作为更新记录保存起来，也可以在任何时间点，将更新记录恢复回来。Git安装网址：https://git-scm.com/download/winGit基本工作流程

2020-06-03 20:19:31 164

原创 JS模块化——ES6相关笔记

ES6一、规范1.1 说明http://es6.ruanyifeng.com/#docs/module依赖模块需要编译打包处理1.2 语法导出模块: export引入模块: import二、实现使用Babel将ES6编译为ES5代码使用Browserify编译打包js三、ES6-Babel-Browserify使用教程定义package.json文件npm init -y 安装babel-cli, babel-preset-es2015和browserify

2020-06-03 17:30:48 121

原创 JS模块化规范——CMD相关笔记

CMD（相对于其他三个，在市面上应用不多，作了解即可）一、规范1.1 说明Common Module Definition(通用模块定义)https://github.com/seajs/seajs/issues/242专门用于浏览器端, 模块的加载是异步的模块使用时才会加载执行1.2 基本语法定义暴露模块//定义没有依赖的模块define(function(require, exports, module){ exports.xxx = value module.expor

2020-06-02 22:28:15 118

原创 JS模块化规范——AMD相关笔记

AMDAMD规范时间早于CommonJS浏览器端实现一、没有模块化规范时创建项目结构|-js |-alerter.js |-dataService.js |-test1.html|-app.js定义模块代码dataService.js// 定义一个没有依赖的模块(function (window) { let name = 'dataService.js' function getName() { return name } window.

2020-06-02 22:23:55 155

原创 JS模块化规范——CommonJS相关笔记

CommonJS_Node模块化下载安装node.js创建项目结构|-modules |-module1.js |-module2.js |-module3.js|-app.js|-package.json { "name": "commonJS-node", "version": "1.0.0" }其中package.json文件通过命令行工具进入所在根目录，再输入命令npm init -y创建(-y指快速生成)下载第三方模块npm i

2020-06-01 20:43:07 176

原创 JS模块化理解

模块化理解什么是模块/模块化？将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起块的内部数据/实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信一个模块的组成数据—>内部的属性操作数据的行为—>内部的函数模块化编码时是按照模块一个一个编码的, 整个项目就是一个模块化的项目模块化的进化史全局function模式：module1.jslet msg = 'module1' function foo

2020-06-01 15:44:01 325

原创 ECMAScript7相关笔记

ECMAScript7相关笔记指数运算符(幂)Array.prototype.includes(value)判断数组中是否包含指定value<script type="text/javascript"> console.log(3 ** 3) let arr = [1, 4, 5, 6, 'abc'] console.log(arr.includes('a')) // false</script>...

2020-05-31 22:34:44 143

原创虚拟现实大作业——VR游乐园之需求分析文档

需求分析（NABCD）文档引言编写的目的项目背景参考资料功能需求功能划分功能描述性能需求接口需求用户界面软硬件接口成员分工

2020-05-31 22:33:01 5210

原创 ECMAScript6相关笔记

ECMAScript6常用let关键字1. 作用:** 与var类似, 用于声明一个变量*2. 特点:** 在块作用域内有效*** 不能重复声明*** 不会预处理, 不存在提升*3. 应用:** 循环遍历加监听*** 使用let取代var是趋势*<script type="text/javascript"> // 不会预处理, 不存在提升 // console.log(username) //error let username = 'yol

2020-05-31 22:20:04 158

原创 ECMAScript5相关笔记

ECMAScript5严格模式理解除了正常运行模式(混杂模式)，ES5添加了第二种运行模式：“严格模式”（strict mode）。顾名思义，这种模式使得Javascript在更严格的语法条件下运行目的/作用消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为*消除代码运行的一些不安全之处，为代码的安全运行保驾护航为未来新版本的Javascript做好铺垫使用在全局或函数的第一条语句定义为: ‘use strict’;如果浏览器不支持, 只解析为

2020-05-30 12:09:16 177

yoliu的博客