鱼与前端🐟

前言前端也是要刷算法的呀= =选自 leetcode hot 100 和 剑指 offer 1.两数之和 【哈希表】主要介绍实战给定一个整数数组nums 和一个整数目标值 target，请你在该数组中找出 和为目标值 target 的那 两个 整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。你可以按任意顺序返回答案。示例 1：输入：nums = [2,7,11,15], target = 9输出：[0,1]解释：因为 nums[0] + nums[1] == 9 ，返回 [0, 1] 。示例 2：输入：nums = [3,2,4], target = 6输出：[1,2]示例 3：输入：nums = [3,3], target = 6输出：[0,1]提示：2 <= nums.length <= 104-109 <= nums[i] <= 109-109 <= target <= 109只会存在一个有效答案进阶：你可以想出一个时间复杂度小于O(n2) 的算法吗？这道题对前端来说考察 ...

记录《深入浅出Vue.js》这本书中的内容，以笔记的形式了解vue之中涉及的部分原理 Object变化侦测vue的特性之一就是响应式系统，我们在学习的过程中知道它是通过侦测数据的变化进行视图的更新，而具体到其中的原理是什么呢？ 推和拉变化侦测分为两种类型 一种是推一种是拉。在Angular和React里面，变化侦测的内容属于”拉“，意思是当状态发生变化的时候，它不知道哪个状态改变了。只知道状态有可能变了。然后发送一个信号告诉框架。而在Vue当中，变化侦测属于”推”。当状态发送改变的时候，vue立刻就知道了，然后在一定程度上知道哪些状态变了。意味着vue能进行颗粒度更细的更新。 颗粒度所谓颗粒度呢，就是指某一个状态在发生更新的时候，会影响到多少节点。举个例子来说，假如一个状态绑定着很多个依赖，此时每个依赖表示一个具体的DOM节点，当这个状态改变的时候，会向所有依赖发出通知，进行更新操作。因此颗粒度越细，开销也就越大，所以vue将粒度调为中等，同时将依赖绑定的DOM节点换为了组件。 如何追踪变化vue中，先前的版本里，es6对浏览器的支持并不理想，所以采取了defineProperty ...

前言大家可能都有过这样的经历，把博客建立在类似github上面的外网上，然后国内正常的访问方式访问博客，静态资源的加载速度都非常的慢，解决这个问题的方法就是使用CDN，依赖市场上的CDN，可以实现博客的加速访问，接下来就来详细讲述CDN（内容分发网络）的原理。 Content Delivery NetworkCDN全称是Content Delivery Network，俗称内容分发网络，它是集中在世界各地的边缘服务器的集合。当你的服务器需要给来自世界各地的用户响应内容的时候，由于距离原因难免会有很大的网络延迟，所以就有人专门在世界各地设置了能帮你转发内容的服务器，并且有专门的人员进行维护。这些服务器叫做边缘服务器，意思就是接近用户的服务器，它们构建起来就是内容分发网络体系。CDN的这些服务器就是近距离给用户发送网页内容的。 分发内容CDN服务器分发的内容分为两个部分，一个是静态内容，一个是动态内容。简单的理解可以是长期不需要改变的内容为静态内容，经常需要改变的内容为动态内容，就好比网页中的标题，导航栏等，就是一开始设计好之后就基本不会更改的。而类似于echarts图表这种，可能会随某 ...

前言最近在了解性能优化的时候发现了vue的打包优化，其原理就是通过cdn的方式引入插件从而减小打包后的js和css体积。还有一个则是一款插件，可以让vue打包后以网页的形式显示js和css体积，更加直观。 webpack-bundle-analyzer效果预览安装方式使用教程鼠标移动到上面会显示相关的js大小项目地址：传送门1234# NPMnpm install --save-dev webpack-bundle-analyzer# Yarnyarn add -D webpack-bundle-analyzer 安装 打开package.json，修改script下面的build12345"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build --report", "lint": "vue-cli-service lint"&# ...

前言记录一下牛客网的错题记录以及知识点，用于查漏补缺 基础不牢，地动山摇Day1 行内元素 行内元素典型代表 span ,a, ,strong , em, del, ins特点：在一行上显示不能直接设置宽高元素的宽和高就是内容撑开的宽高。行内块元素（内联元素）典型代表 input img特点：在一行上显示可以设置宽高块元素典型代表,div,h1-h6,p,ul,li特点: 独占一行可以设置宽高嵌套（包含）下，子块元素宽度（没有定义情况下）和父块元素宽度默认一致。行内元素不可以设置宽高，但是可以设置 左右padding、左右margin `link`和`import` link除了引用样式文件，还可以引用图片等资源文件，而import只引用样式文件link属于html范畴 import属于css范畴1<link rel="icon" sizes="any&qu ...

前言记录用vue-cli打包vue项目之后上传静态资源到github的踩坑向 开始踩坑首先对于新版的vue-cli打包，指令是1npm run build这个是没有变的在打包之前 必须注意的一点是，新版的cli已经没有config文件夹了，需要自己新建vue.config.js然后配置参数1234//这个是为了防止服务端找不到地址module.exports = { publicPath: './'}必须注意的第二点：在.gitignore文件夹下面，把有关dist的行数删掉必须注意的第三点：如果你的路由是history模式，建议直接注释掉或者改hash模式接着执行npm run build 会生成一个dist文件夹，检查里面的index.html的css和js路径是否正确。如果完全是静态的可以live server打开，动态的需要用tomcat或者node进行测试下面贴一个用node测试的 node test 新建文件夹初始化 可以直接一直回车1npm init安装expres ...

前言最近博客没更新的原因是，emm在搞一个新的项目，完全的从0开始没有参考任何项目视频，然后现在也是项目大体功能要做完了，就在这里写一下本次项目踩过的坑以及一些经验，算是一期杂谈。源码地址：传送门1项目演示地址:传送门2 主体演示制作完毕~ 效果展示 构建工具+技术栈编译软件：vscode开发框架: vue2打包工具：vue-cliUI：vuetifyicon：阿里巴巴其他：vuex， vue-router，git插件：pubsub，nanoid，less-loader，vuex-persist 组件列表 项目难点本次项目综合了很多方面的问题，比如vuex模块化加数据持久化，对所有任务的时间排序，以及vuetify的栅格系统等等，各种方面的问题哈哈，但好在最后都能够解决出来 vuex模块化结合本地化存储vuex是一个很方便的官方提供的数据管理插件，但在使用的时候一遇到刷新就会导致数据丢失的问题。于是想到了localStorage结合本地存储的方式进行数据持久化。 方案一 localStorage方案2 vuex-presist原理很简单 对于自己设置的数据先使用JSON.par ...

前言本文主要用于记录vue3的使用，参考视频【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通】 Vue3主要介绍Vue3的提升 创建Vue3工程主要介绍vueclivite两种方法 一种是传统的vuecli 另外一种是vite使用vuecli创建该工程需要确保脚手架的版本在4.5以上使用指令可以查看123vue -Vorvue --version否则重新安装1npm install -g @vue/cli创建1vue create vue_test启动12cd vue_testnpm run serve先看一图流 分析工程解构主要介绍基本语法主要查看vue3和2有什么结构和写法上面的区别从mainjs上面看 引入和实例化app的方法不一样了 而且也不能用vue2的形式写了1234567// 引入的不再是vue构造函数了 而是一个精简版的createApp工厂函数import { createApp } from 'vue'import App from './App.vue'createApp(App).m ...

本文主要用于记录vue路由的使用，参考视频【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通】 vue-router主要介绍SPA是vue的一个插件库 专门用于实现spa应用全称single page web application整个应用只有一个完整的页面点击页面的xx链接不会刷新页面 只会做局部更新数据需要通过ajax请求获取 基本使用主要介绍基本语法注意事项下面以单页面多组件跳转为例子讲解router的基本使用安装vuerouter1npm i vue-router创建router文件夹 写入indexjs 并导入相关组件的地址和名字1234567891011121314151617181920// 导入vuerouterimport VueRouter from "vue-router";// 导入相关组件import JOJO from '../components/JOJO.vue'import DIO from '../components/DIO.vue'export default new ...

前言本文主要用于讲解以及记录js数组去重的八种方法 主要学习其中的编程思想 方法总览 第三方库下面推荐underscore和loadash，这两个库也是官网直接下载下来然后引入即可效果如下123456789<script src="./underscore-min.js"></script><script> var arr = [2,4,5,2,4,7,9,1,9,500]; function getUniqueArray(){ var result = _.uniq(arr); console.log(result); } getUniqueArray();</script> es6的set方法set方法里面的东西是独一无二的 利用这个特性去重123456789var arr = [2,4,5,2,4,7,9,1,9,500];function getUniqueArray(){ // 两种都可以 推荐上面的 // var re ...