- 博客(45)
- 收藏
- 关注
RSS订阅原创 分段贝塞尔曲线
贝塞尔曲线的阶数过高，可能存在计算性能和控制点影响小的问题分段贝塞尔曲线可以解决这个问题，只要解决分段处的平滑问题直接放结论：当两侧控制点与分段交接点共线且形成的线段长度相等时，满足曲线平滑性质即中间点p1.xy = (p0.xy + p2.xy) / 2详细原理...
2022-06-05 13:03:03
1895
原创 1.threejs 创建一个场景
// 场景、相机和渲染器,这样我们就能透过摄像机渲染出场景// 场景var scene = new THREE.Scene();// 透视摄像机PerspectiveCamera// 第一个参数75 视野角度（FOV field angle of view） 视野角度就是无论在什么时候，你所能在显示器上看到的场景的范围，它的值是一个角度// 第二个值是长宽比（aspect ratio）。 也就是你用一个物体的宽除以它的高的比值。// 比如说，当你在一个宽屏电视上播放老电影时，可以看到图像仿.
2022-03-13 23:49:19
493
原创 less的循环
// 定义数组@list: red, green, yellow;// less的index是从1开始到length.loop(@i: 1) when(@i <= length(@list)) { @color: extract(@list, @i); // extract取数组的第i个元素 #@{color} { background: @color; } // i+1的递归调用自身 .loop(@i + 1);}// 不传参数，使用默认设置的@i:1.
2022-03-10 22:31:26
1332
1
原创 六大设计原则
1.开闭原则软件中的对象（类，模块，函数等等）应该对于扩展是开放的，但是对于修改是封闭的这意味着一个实体是允许在不改变它的源代码的前提下变更它的行为。该特性在产品化的环境中是特别有价值的，在这种环境中，改变源代码需要代码审查，单元测试以及诸如此类的用以确保产品使用质量的过程。遵循这种原则的代码在扩展时并不发生改变，因此无需上述的过程2.单一职责原则就一个类而言，应该仅有一个引起它变化的原因我的理解是和函数一样，只做一件事，做好这件事3.依赖倒置原则程序要依赖
2022-03-07 22:18:47
172
原创 js的继承方式
确定原型和实列的关系instance instanceof ClassName ClassName.prototype.isPrototypeOf(instance)1. es6的extends清晰方便// es6继承class Point { x; y; constructor(x, y) { this.x = x; this.y = y; } print() { console.log(`Point:(${this.x},${this.
2022-01-10 23:14:15
207
原创 HTTP请求头和响应头
请求头Accept：浏览器可接受的MIME类型。就是希望服务器返回什么类型的数据，比如application/json，text/html，image/png，*/*Accept:application/json, text/javascript, */*; q=0.01q是Quality values，权重系数，范围 0 =< q <= 1，q 值越大，请求越倾向于获得其“;”之前的类型表示的内容，若没有指定 q 值，则默认为1，若被赋值为0，则用于提醒服务器哪些是浏览器不接
2021-12-12 23:12:55
3599
原创 查看页面绑定的事件数量
在做优化的时候，可能需要知道是否有太多dom元素绑定了事件。如下代码复制到控制台运行即可查看事件绑定数量Array.from(document.querySelectorAll('*')) .reduce(function(pre, dom){ var evtObj = getEventListeners(dom) Object.keys(evtObj).forEach(function (evt) { if (typeof pre[evt] === 'u.
2021-12-07 22:50:33
554
原创 HTTP状态码
1XX Informational（信息性状态码）这一类型的状态码，代表请求已被接受，需要继续处理。这类响应是临时响应，只包含状态行和某些可选的响应头信息，并以空行结束2XX Success（成功状态码） 200 OK：请求成功执行 201 Created：新资源已创建，新创建的资源URI在响应头Location字段给出。服务器必须在返回201状态代码之前创建资源。如果无法立即执行操作，服务器应该响应202 202 Accepted：表示该请求已被接受处理，但处理尚..
2021-12-05 23:25:17
209
原创 一次HTTP请求的完整过程
1.域名解析（DNS）（Domain name resolution）依次进行以下步骤，直到成功命中浏览器检查自身的DNS缓存，看这个域名有们没有对应的IP地址 搜索操作系统自身的DNS缓存（可以在命令行下使用 ipconfig /displaydns 查看）。如果找到且没有过期则成功 尝试读取位于C:\Windows\System32\drivers\etc下的hosts文件，如果找到对应的IP 地址则解析成功 请求本地域名服务器（LDNS）来解析这个域名，这台服务器一般在你的城市的某个
2021-12-03 22:55:53
1955
原创 vue使用postcss-pxtorem px转rem
1.安装postcss-pxtorempostcss-pxtorem是Postcss的插件，所以同时也要安装Postcsspostcss-pxtorem使用更高版本可能会导致Error: PostCSS plugin postcss-pxtorem requires PostCSS 8. 这里使用了5.1.1可以避免这个错误// package.json 其他依赖这里略过{ "devDependencies": { "postcss": "^8.3.11", "post.
2021-11-19 23:47:18
1740
原创 vue学习-状态管理
使用reactive打造简单状态管理。（复杂的用Vuex）适用于全局的数据变更，需要更新下面多个层级的组件的情况。（props只适合父子组件传递）1.用一个store.js专门保存全局信息// store.jsimport { reactive } from "vue";export default { state: reactive({ globalMsg: "全局信息" }), setGlobalMsg(newValue) { this.state.globalMs
2021-11-09 00:05:33
197
原创 vue学习-teleport
基本使用teleport 可以将包裹的内容移动到另外的dom元素下属性：to：类型Stirng，必须是有效的查询选择器（#some-id .some-class之类）或 HTMLElementdisabled：类型boolean，启用和禁用转移功能改变disabled，这将移动实际的 DOM 节点，而不是被销毁和重新创建，并且它还将保持任何组件实例的活动状态。所有有状态的 HTML 元素 (即播放的视频) 都将保持其状态teleport包裹的子组件虽然被转移到了不同地方，但...
2021-11-06 00:03:06
232
原创 vue学习-自定义指令
vue局部指令使用：元素上加上v-自定义指令名<template> <input type="text" v-my-focus /></template><script>export default { directives: { "my-focus": { mounted(el) { el.focus(); }, }, },};</script>钩.
2021-11-05 23:17:35
4079
原创 vue学习-生命周期
生命周期钩子 | Vue.jshttps://v3.cn.vuejs.org/api/options-lifecycle-hooks.html#beforecreate文档写的太好了，只能照搬。列一下上图中没有的几个钩子activated被 keep-alive 缓存的组件激活时调用deactivated被 keep-alive 缓存的组件失活时调用。以上两个是针对动态组件的激活和缓存<keep-alive> <component :is="current...
2021-11-03 23:45:05
145
原创 vue学习-模板引用
模板引用ref，获得dom元素实例，可以进行一些操作<input type="text" ref="input" />this.$refs.input.focus()也可以加在子组件上，调用子组件的methods，修改子组件的data<ref-child :ref="refName"></ref-child>data() { return { refName: "childComponent", };},mounted(
2021-10-31 23:29:40
732
原创 vue学习-动态组件 & 异步组件
1.在动态组件上使用 keep-alive使用<component :is="currentTabComponent"></component>进行组件切换的时候，每次改变currentTabComponent的值，都会重新创建一个该组件的实例，这意味着组件的状态（比如用户的输入）在切换组件后不会被保存下来。要缓存动态组件的内容，需要用<keep-alive>包裹它<!-- 失活的组件将会被缓存！--><keep-alive> .
2021-10-30 23:50:51
338
原创 vue学习-深层组件传递数据Provide/inject
1.Provide/inject父组件的数据可以放在provide，任意层级的子组件声明inject，便可以访问到该数据 provide: { msg: "父组件数据", },inject: ["msg"]值为对象的provide无法访问组件实例 property，要访问需将provide 转换为返回对象的函数，子组件部分不需要做修改。 data() { return { dataMsg: "父组件数据", }; }, pr.
2021-10-29 23:52:31
493
原创 vue学习-插槽
1.插槽内容父组件可以在html的子组件元素中间插入html 字符串 组件，这些东西都会被插入到子组件的<slot></slot>所占的位置上，如果子组件没有<slot></slot>，则插入的内容会被抛弃 <slot-child> <h3>插槽内容</h3> </slot-child> <div>slot-child</div> <slot>
2021-10-29 23:03:52
144
原创 vue学习-自定义事件
与组件和 prop 一样，建议在父组件html使用kebab-case (短横线分隔命名)，在子组件用驼峰命名触发事件。1.验证抛出的事件要添加验证，将为事件分配一个函数，该函数接收传递给 $emit 调用的参数，并返回一个布尔值以指示事件是否有效<template> <div @click="click()">{{ name }}</div> <input type="text" v-model="name" /> <bu
2021-10-28 00:02:46
234
原创 vue学习-非 Prop 的 Attribute
一个非 prop 的 attribute 是指传向一个组件，但是该组件并没有相应 props 或 emits 定义的 attribute。常见的示例包括 class、style 和 id 属性。1.Attribute 继承当组件返回单个根节点时，非 prop attribute 将自动添加到根节点的 attribute 中如下例，父组件data-status就会自动添加到子组件的单个根节点的attribute中当然，如果子组件将dataStatus加入props，就不会出现在根节点的attr
2021-10-26 23:51:33
550
原创 vue学习-Props
1.Prop 类型prop可以声明类型，当类型不一致，能正常运行，但是会在console报warn props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function, contactsPromise: Promise, // 或任何其他构造函数 },传入一个bool.
2021-10-25 23:20:22
532
原创 vue学习-路由入门
1. 安装vue本身没有整合路由，是使用的vuer-routernpm install vue-router@42. 使用router.js可以使用嵌套路由，嵌套父组件也需要router-viewimport { createRouter, createWebHistory } from "vue-router";import Ha from "./components/Ha.vue";import Hb from "./components/Hb.vue";//.
2021-10-23 23:54:19
296
原创 vue学习-组件基础
1. 父子组件传值父组件通过prop向子组件传递数据，HTML attribute 名不区分大小写，因此浏览器将所有大写字符解释为小写，所以这里的prop使用kebab-case命名法。传递到子组件，因为不是html attr，可以正常使用camelCased命名法，比如子组件的：props: ["childName", "fontSize"],{{ childName }}不过如果是单文件组件，是可以用camelCased命名法命名HTML attribute的<template.
2021-10-22 23:28:08
156
原创 vue学习-表单输入绑定
1. 文本v-model进行双向绑定。v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：text 和 textarea 元素使用valueproperty 和input事件； checkbox 和 radio 使用checkedproperty 和change事件； select 字段将value作为 prop 并将change作为事件。 <div> <input type="text" v-mode...
2021-10-20 23:51:56
350
原创 vue学习-事件处理
1. 函数绑定可以用v-on:click="methodName"或者快捷方式@click="methodName"绑定事件处理函数@click="methodName()"也可以，@click="methodName"猜测是简写 <div v-on:click="add">{{ count }}</div> <div @click="add">{{ count }}</div> data() { return { .
2021-10-19 23:37:38
157
原创 vue学习-列表渲染
1. 遍历数组可以使用of或者in作为分隔符users为源数据数据第一个参数user为别名（{id: '#0', name: 'a'}...）（选用）第二个参数index为索引名user，index可以自行取名<template> <div v-for="(user,index) of users" :key="index">{{user}}</div> <hr> <div v-for="(user,index) i
2021-10-18 23:33:21
385
原创 vue学习-条件渲染
1. v-if v-else-if v-else和js代码一样，if可以嵌套，并且elseif else都必须有对应的if（猜测也是就近匹配）<template> <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C &
2021-10-17 23:01:46
210
原创 vue学习-class style绑定
1.class绑定方式1.对象语法绑定（class名称有-的需要用''）red-a和bold是否在这个div出现，取决于属性isRed和isBold<div :class="{'red-font': isRed, bold: isBold}">红色加粗</div>2.classObj不内联<div :class="classObj">加粗</div>data() { return { classObj:.
2021-10-16 23:15:12
154
原创 vue学习-计算属性和侦听器
计算属性Vue知道计算属性aAddB依赖于a和b，在a或b发生变化的时候aAddB也会发生变化即使是改b对象的属性（this.b.num = Math.random()），也能监听到，调用函数重新生成计算属性<template> <div>a: {{a}}</div> <div>b: {{b}}</div> <div>a+b: {{aAddB}}</div></template>&
2021-10-15 23:46:45
134
原创 vue学习-Data Property 和方法
1. property组件的data选项是一个函数,返回一个对象，对象的属性可以在模板中使用。<template> <div class="hello"> <div>{{test}}</div> </div></template><script>export default { $data: null, data() { return { test: '普通..
2021-10-15 00:03:06
397
原创 vue学习-模板语法
1. 插值 v-once 只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能 v-html容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要将用户提供的内容作为插值 <template> <div class="hello"> <div>{{ msg }}</div> <div>{{ test }}</div>..
2021-10-13 23:47:15
86
原创 css渐变实现border部分显示
利用渐变可以让border在某个百分比变色，把其中一个改为透明即可隐藏部分border#grad1 { height: 200px; border: 10px solid; border-image-slice: 1; border-image-source: linear-gradient(to left, red 0, red 50%, green 50%, green 100%);}隐藏左边50%的border#grad1 { height: 200...
2021-10-12 22:47:34
481
原创 vue学习-部署项目
1.gitee部署 （免费）gitee类似github，也提供了gitee Page，类似github Page的功能。npm run build之前，需要设置正确的pulicpath，不然会导致文件4041. 在vue.config.js加入（这里todo-list是仓库名字）module.exports = { publicPath: process.env.NODE_ENV === "production" ? "/todo-list/" : "/",};2. 这里我把
2021-10-12 00:14:01
141
原创 vue学习-安装和初始化
1.安装cli工具运行命令安装：npm install -g @vue/cli安装完毕检查安装是否成功：vue --version2.创建vue项目运行命令创建项目：vue create project-name3.运行vue项目运行命令npm run serve，可在http://localhost:8080/查看项目4.构建项目运行命令npm run build，在dist文件生成构建打包后的东西安装vue-tools（其他谷歌扩..
2021-10-11 00:34:22
79
原创 多个async/await错误处理
async/await多用于串行异步请求，错误处理方式有两种，按需使用。1.try catch当前面的请求发生错误，会直接进入catch，后面请求的错误和结果都不会被捕获// log// error1req();function req1() { return new Promise((resolve, reject) => { setTimeout(() => { reject('error1'); // resolve('data1'
2021-07-22 00:10:08
1221
原创 angular 路由守卫异步请求串联 async await
假设路由守卫的这种场景1.需要请求request1，拿到request1返回的数据后，才能去请求request22.最后根据request1和request2的结果决定是否能访问有种做法是正常嵌套请求，路由守卫保存当前url，先返回false，等2个请求回来之后再跳转回那个url，就是嵌套层级如果多会不好看。比较好的做法是使用async和await使用async awaitexport class TwoGuard implements CanActivate { con..
2021-06-23 23:50:42
792
2
原创 js安全访问对象属性操作符?.
在某些情况下，需要访问一个层级多的对象，如obj.a.b.c。而这个obj并不能保证一定有这些属性的时候，经常会导致UncaughtTypeError:Cannotreadproperty'XX'ofundefined。如果每一层就判断一次是不是undefined，那实在是太麻烦了。使用可选链操作符就可以解决这种情况。可选链操作符就像使用.一样使用可选链操作符?. 不同的是，可选链操作符不会造成报错，在属性不存在的情况下，会返回undefined 可选链操作符也可以用于...
2021-06-09 23:20:35
558
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人