SoulReader

初始化项目123npx create-next-app# oryarn create next-app 如果想要添加特殊配置有以下选择 --ts，--typescript 使用TypeScript -e，--example [name][github-url]使用样例 --example-path --use-npm 应用页面路由 Routernextjs 路由匹配规则 /pages/example.js | /pages/example/index.js 匹配路由 /example /pages/example/[id].js 匹配路由 /example/1 /pages/example/[...args].js 匹配路由 /example/1/2.../n /pages/example/[[...args]].js 匹配路由 /example/.../n 12345678// /example/[id].js// 路由为 /example/1import { useRouter } from "next/dist/client/rout ...

THREE.Scene() 创建场景对象方法 add 添加物体，会被添加到坐标为 (0, 0, 0)的位置上 THREE.PerspectiveCamera() 这个对象是 threeJs 中相机的其中一种 透视摄像机参数有四个 视野角度 表示在显示器上看到的场景的范围，值是一个角度（值会 mod 360） 长宽比 长宽比的值会影响我们渲染物体的是否是正常的还是拉伸的，压扁的 远剪切面 近剪切面 物体所在的位置比摄像机的远剪切面远或者所在位置比近剪切面近的时候，该物体超出的部分将不会被渲染到场景中，根据我们渲染的物体的z轴的值和摄像机的z轴位置来决定的 THREE.WebGLRenderer() 创建一个渲染器实例属性 domElement 渲染器生成的dom元素，通过 appendChild 方法插入到页面中 setSize(width, height, updateStyle) 第二个参数决定是否以较低的分辨率来渲染 render(scene, camera) 渲染场景和摄像机

因为threeJs 版本在不断更新，所以本文可能部分 api 被替换，如果出现问题，请百度或者查找官方文档对应api 初始化引入引入的话可以采用 npm 引入 或者直接通过 CDN 方式引入 npm 引入 123456npm install three// 引入const THREE = require("three")import THREE from "three" CDN 方式引入 CDN地址 1<script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/three.js"></script> 创建画布 12345678910// 创建场景const scene = new THREE.Scene()// 创建一个摄像机const camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 1, 1000)// 实例化渲染器c ...

简单工厂模式 简单工厂模式(Simple Factory) 又叫静态工厂模式，由一个工厂对象决定创建摸一种产品对象类的实例 简单工厂模式的理念就是创建对象，提取多个类似需求中相同部分，针对不同的地方进行特殊处理 1234567891011121314151617181920function factory(object) { const Factory = new Object() // 相同的部分 Factory.name = object.name Factory.age = object.name // 不同的部分 switch(object.type) { case 'type1': // 特殊处理 break; case 'type2': // 特殊处理 break; default: break; } return Factory} 工厂方法模式 工厂方法模式(Factory Methods) 通过对产品类 ...

当时面试的时候遇到了这两个函数编程题，但是该死的是完全没有思路(悲伤) 利用 Promise 完成一个队列，队列中的任务数满了的话，后续任务不执行，当队列中的任务有完成的状态，才会添加新的任务进入队列 利用 Promise 完成一个 retry 函数，传入一个执行函数和一个计数器，在一定次数范围内，如果函数执行失败的话会再次尝试执行该函数，直到执行成功 面试结束之后，我上网上搜索了一下类似的问题，接下来是我总结之后的思路，以及最后成功的代码 Promise 队列 这个问题有以下几个重点 队列： 存放未执行的任务队列 计数器： 存放当前正在执行的任务数量 任务执行最大数量 添加任务函数 执行任务函数 接下根据我们上述描述的重点来创建一个任务队列执行类 1234567891011121314class Scheduler { // 初始化任务队列，以及根据传入的数量来限制最大执行数量 constructor(maxCount) { this.maxCount = count this.list = [] this.count = 0 ...

ES6新增了一个用于处理异步操作数据的一个原生API，能够解决回调地狱的产生 常用的方法 Promise.resolve() Promise.reject() Promise.then() Promise.catch() Promise.finally() Promise.all() Promise.race() Promise.allSettled() Promise.any() 接下来我们来使用代码来实现这些操作 实现Promise 首先我们在创建 Promise 实例，会传入两个函数用来表示成功的回调以及失败的回调，然后我们可以设计 Promise 类中的内容大概是这个样子的 12345678910111213141516171819202122232425262728293031const PANDING = 'panding'const FULFILLED = 'fulfilled'const REJECTED = 'rejected'class Promise { constructor(fn) & ...

定义 Vue 构造函数1234567891011121314151617181920212223import { initMixin } from './init'import { stateMixin } from './state'import { renderMixin } from './render'import { eventsMixin } from './events'import { lifecycleMixin } from './lifecycle'import { warn } from '../util/index'function Vue (options) { if (process.env.NODE_ENV !== 'production' && !(this in ...

内置指令Vue 内置了以下几种指令 v-text v-html v-show v-if v-else v-else-if v-for v-on v-bind v-model v-slot v-pre v-cloak v-once 在源码中分为以下几种 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465// v-html v-text v-modelvar directives$1 = { model: model, text: text, html: html}// v-on v-bind v-clockvar baseDirectives = { on: on, bind: bind$1, cloak: noop};// v-if v-else v-else-iffunction processIf (el) { var exp ...

$on $emit监听 Vue.$emit 发送的事件，回调函数会接收所有传入参数的参数 源码123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566// $on 监听事件Vue.prototype.$on = function (event, fn) { var vm = this; if (Array.isArray(event)) { for (var i = 0, l = event.length; i < l; i++) { vm.$on(event[i], fn); } } else { (vm._events[event] || (vm._events[event] = [])).push(fn); // optimize hook:event cost by using a bo ...

$data源码12dataDef.get = function () { return this._data };Object.defineProperty(Vue.prototype, '$data', dataDef); 通过 Object.defineProperty 方法对 Vue 原型上的 $data 设置监听方法，访问 $data 属性的时候 直接返回 Vue 的 _data 数据 不推介使用 $data 来访问 Vue 中 data 中的数据，因为 Vue 在内部已经做了映射，直接把 data 中的属性 映射到 Vue 实例上 $props源码12propsDef.get = function () { return this._props };Object.defineProperty(Vue.prototype, '$props', propsDef); 通过 Object.defineProperty 方法对 Vue 原型上的 $props 设置监听方法，访问 $props 属性的时候 ...