程序员Better-CSDN博客

原创一文搞定Http缓存-强制缓存与协商缓存

本文从关注前端页面性能优化从而进一步理解HTTP缓存的核心过程，更详细的页面加载渲染和网络请求你可以参考血案文章：从输入 URL 到页面展现中间发生了这些!(最全面拓展讲解)掘金原文一文搞定Http缓存-强制缓存与协商缓存, 点击关注csdn 和掘金查看更多好文分享HTTP缓存当浏览器访问网站的时候, 第一访问的时候需要加载资源 html css js 图片,向服务器请求资源第一次之后访问可以利用缓存的功能从缓存中获取可以提高页面加载的速度,输入网址到页面加载减少网络请求的体积和数量可以加快页

2021-10-17 17:49:37 313

原创 vue2&vue3数据响应式原理分析及手动实现

数据响应式视图跟数据是自动更新的,数据更新的时候视图是自动的更新的追踪数据的变化,在读取数据或者设置数据的时候能够做一些劫持的一些操作vue2 使用definePropertyvue3 改用Proxy使用defineProperty如何追踪变化var obj = {}var age Object.defineProperty(obj, 'age', { get: function() { consoel.log('get age ...') re

2021-10-07 11:35:20 336 1

原创面试20个人居然没有一个写出数组扁平化?如何手写flat函数

定义 : 扁平化就是将多维数组变成一维数组,不存在数组的嵌套实现数组扁平化的方法有很多, 评分也每个人有各自的看法, 欢迎大家在评论区留下你自己对每个实现方式的评分,一起学习交流哦!不会没关系,最重要的是肯学程序员Better让我们一起学习呀~

2022-11-05 23:18:23 1687 5

原创最全js手写-建议死磕多练

最全的js手写-搞懂就完事了

2022-05-19 17:53:54 983 2

原创计算机应届生毕业论文高分宝典-计算机毕业设计及答辩攻略

最近又到毕设答辩的高峰期了,我们当年毕业是全程线上答辩的,B站账号下录的所有视频都是同学的答辩视频,经过本人同意发出的,视频过了几年在依旧有很多人关注,所以想对大家毕业做一些自己的分享,也会出视频给大家讲解,有不懂的可以在评论区讨论噢毕业设计怎么做如何选题我们当时选题有两种:导师提供的,还有跟导师沟通协商的感兴趣的能够找到范例的 (本科生不是科研,技术不是科研,不需要大家创造新技术)多跟导师沟通选题技术栈选择做自己今后职业需要用到的要做有效毕设自己实习中已经熟练的

2022-04-21 20:24:14 610

原创前端必看js数据结构与算法(队列,链表,集合,字典,树,图,堆)

队列队列简介一个先进先出的数据结构js中没有队列,但是可以用Array实现对队列的所有功能使用数组模拟先进先出的场景const queue = [] // 进队列queue.push(1)queue.push(2)// 出队列const itme1 = queue.shift()const itme2 = queue.shift()什么时候用食堂排队打饭所有先进先出的场景js 异步中的任务队列一个leetcode题第933题链表链表是什么多个元素组

2021-10-11 09:19:14 1302 4

原创 20届最难毕业的前端程序员的一年前端工作经验总结

作为2020年的毕业生,在经历了最难毕业季,最终如愿成为了一名前端程序员。经历了快一年的职场洗礼,到如今已经是一名成熟的职场,人在这个过程中我通过不断的学习，积极总结来不断成长，在整个学习成长工作的过程中自己也有着许多的收获：认清自己：这个世界有一些不平凡的人，也有更多的平凡的人，刚开始工作总是热情十足、活力四射的去做一件事情，希望能够做的更好，但慢慢发现很多事情不是一个人能完成的，我们需做的努力的做好自己的每一项工作。这是一个平凡的过程，但是会创造不平凡的价值，我们要做好每一件平凡事：每个项

2021-04-29 10:30:07 3087 1

原创超全超实用的ES2021新特性

ES2021新特性关于ES的新特性的学习必然是必须的,目前已发布已被增添到 Google Chrome V8 引擎中的特性将于本文学习1 String.prototype.replaceAll我们都知道String.prototype.replace()方法来完成字符串的替换'betterman'.replace('e','1111')// "b1111tterman"在 String.prototype.replace() 方法中，当第一个参数是字符串类型时，只替换第一个匹配的字符串,如果我

2021-03-26 14:28:44 837

原创 TypeScript类的 Getter Setter static使用

TypeScript类的 Getter Setter static使用类的 Getter Setter对于p类的访问类型private 的使用,它的最大的作用是封装一个属性,然后通过Getter Setter来访问和修改这个属性对于xaiojiejie的age是一个不能随便告诉别人的属性class Xiaojiejie { constructor(private _age:number){}}如果别人想知道,就必须通过getter属性,getter属性的关键字是getclass Xiao

2021-03-24 16:30:36 681

原创 Typescript 构造函数

构造函数构造函数就是在类被初始化的时候,自动执行的一个方法构造函数的关键字:constructor类的构造函数希望在person类中定义一个name属性,name属性并不给初值,在new出对象的时候通过传递参数的形式给name赋值class Person{ constructor(public name:string){ }}const person= new Person('jspang')console.log(person.name)类继承中的构造器的写法在子类

2021-03-15 19:53:13 2551

原创 TypeScript 类的访问类型

类的访问类型基于三个关键private protected publicclass Person { name: string; } const person = new Person(); person.name = "jspang.com"; console.log(person.name);public 访问属性public从英文字面的解释就是公共的或者说是公众的，在程序里的意思就是允许在类的内部和外部被调用.如果不在类里对name的访问属性进行定义，

2021-03-15 15:57:03 204

原创 TypeScript 类的基本概念

类的基本使用 */// 使用关键字 class// 定义一个类里面有姓名属性和一个得到姓名的方法class Lady { content = "Hi，代码"; sayHello() { return this.content; }} const goddess = new Lady(); console.log(goddess.sayHello());类的继承class XiaoJieJie extends Lady { sayLove() {

2021-03-15 15:56:13 84

原创 TypeScript 数组类型定义

数组类型定义普通数组类型定义1. number类型可以直接写也可以自己定义const numberArr = [1, 2, 3];const numberArr2 : number[] = [1, 2, 3];2. string类型const stringArr: string[] = ["a", "b", "c"];3. 可以定义任何类型const undefinedArr: undefined[] = [undefined, undefined];4. 数组的元素有多重类型

2021-03-05 14:06:37 851

原创 TypeScript 函数参数和返回类型定义

函数参数和返回类型定义类型注解和类型推断如果 TS 能够自动分析变量类型，我们就什么也不需要做了如果 TS 无法分析变量类型的话，我们就需要使用类型注解// 注解通过:的形式function getTotal(one: number, two: number) { return one + two; } const total = getTotal(1, 2);// 推断通过鼠标放上去的形式let countInference = 123;1. 普通函数参数

2021-03-05 10:24:49 4223 1

原创 TypeScript 定义静态类型基础静态类型和对象类型

1.ts定义静态类型TypeScript 的一个最主要特点就是可以定义静态类型，英文是 Static Typing。那到底是什么意思那？太复杂的概念性东西这里就不讲了，你可以简单的理解“静态类型”为，就是你一旦定义了，就不可以再改变了。const number: number = 1;//自定义静态类型interface XiaoJieJie { uname: string; age: number;}const xiaohong: XiaoJieJie = { unam

2021-03-04 14:49:39 1144 1

原创 vue3 Suspense 异步请求组件使用

Suspense 异步请求组件使用前端开发中异步请求是非常常见的事情,比如远程读取图片,调用后端接口等等,在vue2中判断异步状态是一件必要的事情,但是这些状态都要自己处理,于是在3中提供了suspense函数suspense中文含义是悬念的意思Suspense是有两个template插槽的，第一个default代表异步请求完成后，显示的模板内容。fallback代表在加载中时，显示的模板内容。写一个异步请求加载显示的组件<template> <h1>{{result

2021-03-03 21:06:08 2033 1

原创 vue3 Teleport瞬间移动函数的使用

vue3 Teleport瞬间移动函数的使用Teleport一般被翻译成瞬间移动组件,实际上是不好理解的.我把他理解成"独立组件",他可以那你写的组件挂载到任何你想挂载的DOM上,所以是很自由很独立的以一个例子来看:编写一个弹窗组件<template><teleport to="#modal"> <div id="center" v-if="isOpen"> <h2><slot>this is a modal</slot

2021-03-03 11:38:08 614 2

原创 vue3-HOOKS模块化处理

vue3模块化处理vue3版本的更新,就是能搞更好的重用机制,可以把想要得模块独立出去eg:显示一个当前时间的工能,在多个页面需要调用的时候不用重复的调用可以在src目录下，新建一个文件夹hooks(所有抽离出来的功能模块都可以放到这个文件夹里)，然后再新建一个文件useNowTime.js,这里使用use开头是一个使用习惯，代表是一个抽离出来的模块import { ref } from "vue";const nowTime = ref("00:00:00");const getNowTi

2021-03-02 10:44:12 2279

原创 vue3中使用watch注意事项

编写watch函数需要编写两个参数,第一个是要监听的值,然后是一个回调函数。在函数中你可以获得到新知和老值。使用watch的时候同样需要先导入监听使用ref定义的变量的时候时候,第一个参数直接使用import {... , watch} from "vue"setup() { const selectGirl = ref(""); const data = reactive({ girls: ["a", "b", "c"], selectGirl

2021-03-01 17:07:25 6246 2

原创 vue3的生命周期钩子与vue2生命周期对比理解

生命周期更新对于vue的生命周期想必大家都非熟悉,在项目中非常常用生命周期:伴随着生命周期，给用户使用的函数，操控生命周期，主要是操控钩子函数。vue3的生命周期setup() :开始创建组件之前，在beforeCreate和created之前执行。创建的是data和methodonBeforeMount() : 组件挂载到节点上之前执行的函数。onMounted() : 组件挂载完成后执行的函数。onBeforeUpdate(): 组件更新之前执行的函数。onUpdated(): 组

2021-03-01 17:06:47 831

原创 vue3.0中setup ref reactive toRefs 函数详解

vue3常用函数的使用setup 函数用法,可以代替Vue2中的data和method属性,直接把逻辑加在setup中ref 函数在temlate中用的变量需要用ref包装下return出去的数组和方法在模板中才可以使用 setup() { const girls = ref(["小红", "小英", "晓红"]); const selectGirl = ref(""); const selectGirlFun = (index) => {

2021-03-01 13:46:46 2072

原创 01-vue3的新特性

vue3新特性渐进式开发,向下兼容,vue3支持大多数vue2的特性,甚至可以说就拿vue2的语法来开发vue3是没有任何问题的性能的提升,更快更轻的体验.官方网站给出的数据是：打包大小减少 41%，初次渲染快 55%，更新快 133%，内存使用减少 54%推出Composition API,，在 Vue2 中遇到的问题就是复杂组件的代码变的非常麻烦，甚至不可维护。说白了就是封装不好，重用不畅。这个Composition API一推出，立马解决了这个问题，本套课程中也会重点介绍这部分内容。它是一系

2021-02-22 09:50:16 151

原创 js优化汇总

js优化延期脚本带有defer属性的script标签。会等待DOM加载完成后再执行。无论是内联脚本还是外部脚本。动态脚本通过创建script标签，可以随时添加脚本，不会对页面加载有任何阻塞。标识符解析性能直接量和局部变量的访问速度比数组项和对象成员要快，具体快多少视浏览器而定。闭包的副作用因为闭包会保留作用域，所以经常访问范围之外的标识符会增加一些性能开销，为了减轻对运行速度的影响。最好将常用的域外变量存入局部变量中。缓存对象成员的值正因为原型链的存在，可以使js做到类似面向对象的继承机

2021-02-04 11:21:35 349 3

原创 2020前端经验总结

2020前端经验总结1.JS为什么单线程一个简单的原因就是，js在设计之初只是进行一些简单的表单校验，这完全不需要多线程，单线程完全可以胜任这项工作。即便后来前端发展迅速，承载的能力越来越多，也没有发展到非多线程不可的程度。而且还有一个主要的原因，设想一下，如果js是多线程的，在运行时多个线程同时对DOM元素进行操作，那具体以哪个线程为主就是个问题了，线程的调度问题是一个比较复杂的问题。HTML5新的标准中允许使用new Worker的方式来开启一个新的线程，去运行一段单独的js文件脚本，但是在这个

2020-12-24 14:24:28 817

原创超全手撕js 摆脱初级前端

01.数组扁平化数组扁平化是指将一个多维数组变为一个一维数组const arr = [1, [2, [3, [4, 5]]], 6];// => [1, 2, 3, 4, 5, 6]方法一：使用flat()const res1 = arr.flat(Infinity);方法二：利用正则const res2 = JSON.stringify(arr).replace(/\[|\]/g, '').split(',');但数据类型都会变为字符串方法三：正则改良版本const

2020-09-29 14:48:29 154

原创一文搞懂Grid 布局

Grid 布局是什么？Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。利用 Grid 布局，我们可以轻松实现类似下图布局，演示地址Grid 布局和 flex 布局讲到布局，我们就会想到 flex 布局，甚至有人认为竟然有 flex 布局了，似乎没有必要去了解 Grid 布局。但 flex 布局和 Grid 布局有实质的区别，那就是 flex 布

2020-09-29 10:25:14 44221 21

翻译那个男人带着他的vue3.0来了

随着尤大大很自豪地宣布Vue.js 3.0“ One Piece”的正式发布。该框架的新主要版本提供了改进的性能，更小的捆绑包大小，更好的TypeScript集成，用于处理大规模用例的新API，以及为框架的长期未来迭代奠定了坚实的基础。3.0版本代表了2年多的开发工作，具有30多个RFC，2600多个提交，来自99个贡献者的628个拉取请求，以及核心回购之外的大量开发和文档工作。我们要对我们的团队成员应对挑战表示最深切的谢意，我们对拉动请求的贡献者，对财务支持的赞助者和支持者，以及更广泛的社区对我们的设计

2020-09-19 19:38:45 142 2

原创深入理解vue 修饰符sync【 vue sync修饰符示例】

#深入理解vue 修饰符sync【 vue sync修饰符示例】在说vue 修饰符sync前，我们先看下官方文档：vue .sync 修饰符，里面说vue .sync 修饰符以前存在于vue1.0版本里，但是在在 2.0 中移除了 .sync 。但是在 2.0 发布之后的实际应用中，我们发现 .sync 还是有其适用之处，比如在开发可复用的组件库时。我们需要做的只是让子组件改变父组件状态的代码更容易被区分。从 2.3.0 起我们重新引入了 .sync 修饰符，但是这次它只是作为一个编译时的语法糖存在。它会

2020-09-15 10:06:20 151

空空如也

空空如也