- 博客(38)
- 收藏
- 关注
RSS订阅原创 Three.js实现简易版VR全景看房
涉及知识点：1、对于网格模型的rotation、scale、position的控制2、对于精灵模型的创建3、对于光线透视Raycaster的使用，光线投射用于在三维空间中鼠标移过了什么物体4、修改相机Camera的控制之后，需要使用 updateProjectionMatrix 方法更新后 才会生效。5、TextureLoader 纹理贴图的使用6、控制器Control 需要在每次循环中使用.update()进行更新后 才会生效注意事项： 不同的室内图片的名称可以规则统一，通过一个变量来公用一
2022-03-04 11:13:17
2187
原创 Threejs基本功能——实现自动旋转阴影的立方体
写在前面：初次接触Three.js，个人认为需要的几个网站地址如下。如果官网打不开，教大家一个办法（借助站长之家的一个工具：打开https://ping.chinaz.com/github.com ，输入你需要的地址，可以测速，然后在自己电脑的host中把你需要打开的地址配置上对应的ip即可）。1、查看官网教程2、下载Three.js源码可看里面的例子文件学习3、自己动手试验Three.js相关apiThree.js 官网地址：https://threejs.org/Three.js CDN地
2022-03-03 16:20:32
702
原创 nrm安装后报错的解决办法（windows环境）
安装nrm: npm install -g nrm运行nrm ls报错配置系统环境变量查询npm所在的路径，执行以下命令，其中prefix就是所需路径。npm config ls新建系统环境变量，变量名：自己可定，只要与下一步添加时一致即可；变量值：上一步查询出来的prefix填入。3、找到系统变量path，编辑，新建，将刚刚新增的变量加入。重启命令行，执行nrm ls 仍然报错如下（借用别人的图）解决办法：先查看npm全局安装包的路径npm root -g根
2021-07-09 11:33:02
1755
原创 webpack v4 常用配置（以配置vue ssr的webpack为例）
webpack.base.config.js/** * 公共配置 */const VueLoaderPlugin = require('vue-loader/lib/plugin')const path = require('path')const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')const resolve = file => path.resolve(__dirname, .
2021-04-13 14:23:01
212
原创 js中typeof与instanceof的使用
typeoftypeof用以获取一个变量或者表达式的类型，typeof一般只能返回如下几个结果：（注意：以下各个结果均为字符串）numberbooleanstringfunction（函数）object（NULL，数组，对象，set实例，map实例）undefinedsymbol （ Symbol()实例 ）function curFun(){};var numberType = 123;var stringType = "123";var booleanType = fals
2021-04-08 14:56:40
131
原创 使用JSON.parse(JSON.stringify(object))实现深拷贝局限
JSON.parse(JSON.stringify(object))深拷贝的局限大部分情况我们都可以使用JSON.parse(JSON.stringify(object))来实现深拷贝，但该方法也有局限性，如下：会忽略 undefined会忽略 symbol不能序列化函数不能解决循环引用的对象例如：let a = { age: undefined, sex: Symbol('female'), jobs: function() {}, name: 'wzy'}let
2021-04-08 14:22:34
822
原创 自定义封装工作流 之 项目gulpfile工作流demo
整体思路概述：1、本地调试阶段：a. 将打算封装的功能准备好单独放在一个文件夹项目A中- 在A中package.json中配置main属性，指定入口文件为指定目录。`"main": "lib/index.js" `- 即 将上面配置的文件作为该项目包 所提供的主要功能 所存放的位置。- 使用`yarn link` 发布快捷方式到本地（这样就可以供本地的其他项目进行link链接了）- 注意：由于项目A作为供给方，需要将必须的安装依赖包都放在dependencies中，而不是devDependenc
2021-04-08 12:01:46
164
转载 webpack系列-externals配置使用（CDN方式引入JS）
文章目录方式一：使用html-webpack-externals-plugin方式二：直接配置externals如果需要引用一个库，但是又不想让webpack打包（减少打包的时间），并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用（一般都以import方式引用使用），那就可以通过配置externals。这样做的目的就是将不怎么需要更新的第三方库脱离webpack打包，不被打入bundle中，从而减少打包时间，但又不影响运用第三方库的方式，例如import方式等。
2021-04-07 14:57:03
654
原创 手动实现Promise、Promise.all、Promise.resolve
// 基础功能：// 1、一个类// 2、传递一个立即执行函数，该函数有两个参数均为方法，一个resolve，将pending状态转换为fulfilled，另一个reject，将pending状态转换为rejected；// 状态一旦改变，不能再次更改// 3、实例具有then方法，两个参数，第一个是fulfilled状态调用的回调函数，第二个是rejected状态调用的回调函数// 异步调用：// 4、当立即执行函数中，有异步调用时，在执行then方法时，状态仍未pending，此时需要..
2021-03-17 16:18:21
485
原创 现代化的服务端渲染（同构渲染）
同构渲染同构渲染 = 后端渲染 + 前端渲染基于Vue、React等框架，客户端渲染和服务器端渲染的结合：1、在服务端执行一遍，通过服务端渲染实现首屏直出2、在客户端再次执行一遍，用于接管页面及之后的交互有利于解决首屏加载慢的问题以及有利于SEO优化既拥有传统服务端渲染的有点，也有客户端渲染的优点实现同构渲染使用Vue、React等框架的官方解决方案优点：有助于理解原理缺点：需要搭建环境，比较麻烦使用第三方解决方案(常用)React生态的Next.jsVue生态.
2021-03-16 10:30:47
131
原创 模拟实现简易版Vuex
let _Vue = nullclass Store { constructor( options ) { const { state = {}, getters = {}, mutations = {}, actions = {} } = options //state是响应式的 this.state = _Vue.observable(state) //通过数据劫持的get方式给getters传入参数state Object.keys(.
2021-03-15 19:42:33
82
原创 Docker的基本使用及应用（配合gitlab、jenkins实现自动化部署）
DockerCentOS 8CentOS 8 下载镜像https://mirrors.aliyun.com/centos/8/isos/x86_64/宿主机配置 Host# 查看虚拟机中的 IPip addrC:\Windows\System32\drivers\etc\hosts192.168.137.128 lfz.com无法上网cd /etc/sysconfig/network-scripts/lsvi ifcfg-ens33BOOTPROTO=dhcp # 将
2021-03-12 18:40:10
323
原创 在虚拟机中安装CentOS 8
CentOS 8CentOS 8 下载镜像https://mirrors.aliyun.com/centos/8/isos/x86_64/宿主机配置 Host# 查看虚拟机中的 IPip addrC:\Windows\System32\drivers\etc\hosts192.168.120.11 zy.com无法上网cd /etc/sysconfig/network-scripts/lsvi ifcfg-ens33BOOTPROTO=dhcp # 将dhcp修改为st
2021-03-12 18:32:29
95
原创 Nginx配置反向代理
配置如下配置在server模块下：location /api/ { proxy_pass 真正的接口地址路径;}location ^~ / { # 注意这里末尾要有 / ，会把请求的路径拼接过来 proxy_pass http://127.0.0.1:3000/;}
2021-03-11 22:36:16
71
原创 nginx配置https
1、https://buy.cloud.tencent.com/ssl可以申请一个免费的https证书，是一个文件夹2、https域名还需要配置！！server { # 配置ssl表示开启https，默认也是配置上了http2 listen 443 ssl http2 default_server; # 配置多个访问的域名，用逗号隔开 server_name www.demo.com demo.com; # 配置根目录 root /home/www; ssl_certific.
2021-03-11 22:29:59
77
原创 Nginx配置浏览器缓存
几种免费的发布平台：一、 github pages：只能部署静态页面。在github中创建仓库后，settings => github pages，选择分支及文件夹（在当前目录下找index.html，若无则找README.md），点击发布。成功后，即发布成功。github Actions：持续部署，持续集成的工具：Circle CI、Travls CI。二、netlify：三、 Vercel：...
2021-03-11 21:33:06
1261
原创 vue2.0与vue3.0响应式的区别
Vue2.X响应式：需要遍历对象的每一个属性，调用defineProperty，把属性转换成getter/setter，性能不如Vue3.X无法监听删除操作，例如 delete data.name，只能通过Vue.delete这种额外的方法操作无法直接给对象动态增加响应式成员，需要调用Vue.set()数组的响应式需要特殊处理Vue2.X在程序启动的时候首先需要遍历所有的属性，设置gettersetter，属性嵌套层级比较多的话，消耗性能Vue3.X响应式：性能比Vue2.X提升，使用了
2021-03-11 15:15:52
334
原创 虚拟dom中的diff算法
这里主要描述一下vue中虚拟dom中使用的diff算法。在vue中首先使用patch函数进行新旧Vnode的比较（注意：新旧Vnode均为对象），比较方式是选择器和key是否均相同。若不相同，则将新的虚拟dom添加，旧的虚拟dom删除。若相同，则执行patchVnode函数，进行新旧Vnode的内部对比。在patchVnode函数中，对比新旧Vnode节点中的情况主要有四种：新Vnode无子节点、旧Vnode有子节点：删除旧Vnode子节点即可。新Vnode有子节点、旧Vn
2021-03-11 15:07:29
105
原创 weex 获取ref手机兼容问题
for 循环生成的ref ,使用weex 的dom.scrollToElement 兼容问题1、使用for生成的ref，在初始化获取ref节点时候需要有100ms延迟2、dom.scrollToElement 传入的 ref参数， 需要使用this.$refs.ref[0] 方式取值 ，不然会出现ios 安卓 不生效，h5生效....
2021-02-26 17:00:12
330
转载 require.context在前端工程中的使用
require.context是什么一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块什么时候需要用到require.context如果有以下情况,可以考虑使用require.context替换index.jsmodules在Vue写的项目中,我把路
2020-12-23 11:14:17
122
原创 Vue.js响应式原理（四）——模拟vue响应式原理
分析整体分析模拟最小版本的vue步骤：观察Vue基本使用结构打印Vue实例观察即将要模拟的成员：以_开头的是私有成员（例如_data），以开头的是公共成员(例如‘开头的是公共成员(例如`开头的是公共成员(例如‘data`)，我们只模拟公共成员即可。$el可以是选择器，也可以是dom对象，如果是选择器需要我们转换成dom对象进行存储。最小版本准备模拟$data、$el、$options最小版本的vue的整体结构如下，即需要实现的几种类型。不同类分别的作用如下：Vue：
2020-09-08 11:03:33
204
原创 Vue.js响应式原理（三）——发布订阅模式和观察者模式
发布/订阅模式订阅者发布者信号中心我们假定，存在一个“信号中心”，某个任务执行完成，就向信号中心发布（publish）一个信号，其他任务可以向信号中心订阅（subscribe）这个信号，从而知道什么时候自己可以开始执行。这就叫做“发布/订阅模式”（publish-subscribe pattern）常见的发布/订阅模式：Vue的自定义事件、node的事件处理机制。let vm = new Vue()vm.$on('dataChange', () => { console.lo
2020-09-03 15:02:56
3534
1
原创 Vue.js响应式原理（二）——响应式的核心原理
1、数据响应式核心原理-Vue2.x版本通过ES5提出的Object.defineProperty()实现，它是个无法shim（无法降级处理）的特性，故无法支持IE8及以下版本。简单的解释说明：在vue中把一个普通的js对象传入vue实例作为data选项，vue将遍历此对象所有的属性，并使用Object.defineProperty()把这些属性全部转为getter/setter。这些getter/setter对用户来说是不可见的，但是在内部它们让vue能够追踪依赖，在属性被访问和修改时通知变更。
2020-09-03 11:10:14
206
转载 深入浅出Object.defineProperty()
讲解大致会根据下图展开本文部分参考了书籍《你不知道的javascript》上卷【一】对象的定义与赋值经常使用的定义与赋值方法obj.prop =value或者obj['prop']=value【二】Object.defineProperty()语法说明Object.defineProperty()的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性Object.defineProperty(obj, prop, desc)obj 需要定义属性的当前对象prop 当
2020-09-03 11:08:12
99
原创 Vue.js响应式原理（一）——数据驱动
vue中常见的与数据驱动的三个相关概念：1、数据响应式数据响应式中的【数据】是指数据模型，数据模型仅仅是普通的JavaScript的对象，而当我们修改数据时，视图会进行更新，避免了繁琐的DOM操作，从而提高了开发效率。2、双向绑定即当数据改变，视图会发生改变；当视图改变，数据也随之改变。双向绑定中包含了数据响应式，因为双向绑定包含了视图变化。双向绑定针对的是可以和用户交互的表单元素，我们可以使用v-model在表单元素上创建双向数据绑定。3、数据驱动数据驱动是Vue最独特的特性之一。开发过
2020-09-02 16:30:17
300
原创 手写vue-router（history模式）
一、分析vue-router功能vue-router的使用：//一、router/index.jsimport Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'//1.注册VueRouter，Vue.use会自动调用VueRouter对象的静态方法install进行插件注册Vue.use(VueRouter)const routes = [ { path:
2020-09-01 15:09:57
226
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人