- 博客(69)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 2021-07-24 留点回忆在人间---
人生的总结—— 真的要做一次总结了。。。。。大家好，艾瑞吧嘚，我叫毛毛，来自山东德州（德州扑克，德州扒鸡贼好吃的那种 ）， 一名00后的颜值担当，一块腹肌硬是吃成了九块。重点来了：我是一名专科生--------已经成功入坑的前端工程师 （北京！！！！）专科生要有态度有志者事竟成 大厂看学历和技术，小厂看技术，今年六月底毕业，正在实习，过来人奉劝你一句，别被室友带歪了，少打游戏多读书，少生孩子多养猪，别等毕业了或者快毕业了出去找工作面试问啥啥不会还抱怨工作不好找(就是我没错了)，自己多学点
2021-07-25 20:18:48
248
1
原创 5.8 2021年5月9日，是第108个母亲节
一个专科奋斗在前端道路的菜鸡5月9号就要母亲节了，这是第108个母亲节，又有多少人记得，放下你手里的所有事情，哪怕是几分钟，给妈妈打一个电话吧，分享一下你最近的酸甜苦辣。 或许你忙到没有准备礼物，或许你不擅表达说不出肉麻的话，但只是简短地唠唠家常就是给她们最好的礼物了。用一通电话告诉她们你的爱意，用一段家常告诉她们 你的想念。去感恩这个赐予我们生命的人，不要忘了，她曾经也是美少女战士呢~~~~我相信一句话：世界上永远不会骗你的就是你的父母小时候的她“陌生人给的东西不要吃，陌生人说的话不要信。”
2021-05-08 22:54:14
217
原创 2022.3.3 前端性能优化
面试中了解性能优化吗?输入URL 到看到整个页面经历了什么过程?工作中页面加载好慢，不知道是前端问题还是后端问题。页面交互卡顿，不知道具体哪里出了问题什么是web性能打开速度动画效果表单提交列表滚动页面切换MDN上的 Web性能定义: Web性能是网站或应用程序的客观度量和可感知的用户体验。·减少整体加载时间:减小文件体积、减少HTTP请求、使用预加载使网站尽快可用:仅加载首屏内容，其它内容根据需要进行懒加载·平滑和交互性:使用CSS替代JS动画、减少UI重绘感
2022-03-03 22:24:04
888
原创 2022.3.2 什么是长任务（时间切片，Web Worker ）
长任务：提示：理解长任务浏览器执行耗时操作超过50ms就是长任务JavaScript 单线程同步任务：同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。异步任务：异步任务指的是，不进入主线程，而进入任务队列的任务，只有“任务队列”通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。事件循环所有的同步任务都在主线程上执行，形成了一个执行栈。主线程外，还存在一个“任务队列”。只要异步任务有了运行结果，就在“任务队列”中放置一个事件一旦执行栈中的所
2022-03-02 17:03:05
1172
原创 2021.12.10 vue axios （15）
axiosaxios基于promis对ajax的一种封装(就像jq封装实现ajax功能是一样的)为什么要使用axios?ajax为mvc服务,但是原生的xml,http已经不符合我们当前的架构了,如果我们还是使用ajax去发送网络请求,那么原生的ajax步骤是比较复杂的,功能不够集中,需要自己封装,那么如果要功能集中的话我们需要使用jQuery,而如果只是单纯的为了使用ajax引入jQuery,这样是不合理的,并且使用webpack打包时,jQuery不享受打包服务,这就很恶心,所以说我们要使用axi
2021-12-10 14:07:17
238
原创 2021.12.10 vue vuex（14）
什么是Vuex?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化这个状态自管理应用包含以下几个部分：state，驱动应用的数据源；view，以声明方式将state 映射到视图；actions，响应在 view 上的用户输入导致的状态变化。components: { cpn: { // state data() { return { num: 123 }
2021-12-10 13:46:26
436
原创 2021.12.10 vue 路由 （13）
什么是路由?这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（single page application）的路径管理器。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系。至于我们为啥不能用a标签，这是因为用Vue做的都是单页应用（当你的项目准备打包时，运行npm run
2021-12-10 13:40:36
399
原创 2021.12.10 vue vue-cil (12)
单文件组件在很多 Vue 项目中，我们使用Vue.component 来定义全局组件，紧接着挂载到vue实例中。这种方式在很多中小规模的项目中运作的很好，在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，下面这些缺点将变得非常明显：全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复字符串模板 (String templates) 缺乏语法高亮，多行HTML写起来
2021-12-10 13:38:10
235
原创 webpack 解决app.js文件过大问题（初始化）
引入压缩插件，分别对 Js、Html、Css 进行压缩，Js压缩：UglifyJsPlugin，Html压缩HtmlWebpackPlugin，提取公共资源：CommonsChunkPlugin，提取css并压缩：ExtractTextPlugin 。
2021-12-07 17:54:19
3068
3
原创 2021.11.28 vue render渲染函数的基本约束 （11）
render渲染函数的基本约束VNode必须唯一组件树中的所有VNode 必须是唯一的。这意味着，下面的渲染函数是不合法的：render(createElement) { let my_el = createElement('h1', { on: { click: (e) => { this.msg += 'ok' } } }, this.msg) return createElement(
2021-11-28 15:26:44
476
1
原创 2021.11.28 vue的全局自定义指令（10）
vue的全局自定义指令除了核心功能默认内置的指令(v-model , v-show等等)，Vue 也允许注册自定义指令。Vue.directive( “eventName”, options)一个指令定义对象可以提供如下几个钩子函数 (均为可选)：bind：只调用一次，。在这里可以进行一次性的初始化设置。指令第一次绑定到元素时调用inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)update：所在组件的 VNode ( 抽象DOM )更新时调用，但是可能
2021-11-28 15:15:10
511
原创 2021.11.28 vue 生命周期 （9）
生命周期的基本概念我们一起回顾一下上节课讲到的,过渡的几个钩子函数:<body> <div id='app'> <button @click='show=!show'>btn</button> <transition :css=false @before-enter='fn1' @enter='fn2' @after-enter='fn3'> <h1 v-if='show'>嘿嘿嘿</h1>
2021-11-28 15:11:13
101
原创 2021.11.28 vue 实例的数据与方法（8）
Vue实例的数据与方法当一个 Vue 实例被创建时，它将data 对象中的所有的属性加入到Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。对于值本身的操作咱们之前已经学过了, 现在我们在来学习一下实例属性和方法.Vue 实例的实例属性与方法。它们都有前缀$，以便与用户定义的属性区分开来<body> <div id='app'> {{a}} <button @click='fn'>按钮</butto
2021-11-28 15:04:47
217
原创 2021.11.28 vue 过渡和动画（7）
vue过渡和动画过渡:从一种状态过渡到另外一种状态,只有两种状态,一般只需要我们去做两个关键帧,其他的关键帧是由计算机帮我们生成的动画:多个关键帧,多段,多状态,我们可以去定义自己的关键帧我们先来回顾一下css3的过渡和动画动画:<style> @keyframes move { 0% { transform: translateX(100px); } 50% { transform: translateX(50px); }
2021-11-28 14:56:45
292
1
原创 2021.11.28 vue 作用域插槽（6）
作用域插槽有时让插槽内容能够访问子组件中才有的数据是很有用的。<body> <div id='app'> <!-- 在根组件内是可以访问到根组件的数据的 --> <!-- {{kobe.name}}->{{kobe.num}} --> <!-- <cpn>{{kobe.name}}->{{kobe.num}}</cpn> --> <!-- 在根组件中不能访问到子组件里
2021-11-28 14:48:30
405
原创 2021-09-12 vue基础知识 （5）
动态组件有的时候，在不同组件之间进行动态切换是非常有用的，比如在一个新闻网站实现多新闻内容选项卡,可以通过 Vue 的 component元素加一个特殊的is 特性来实现：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id='
2021-09-12 14:03:55
195
原创 2021-08-11 svg基础标签
一，概述svg是一种基于XML语法的图像格式，全称是可缩放矢量图( Scalable Vector Graphics )。其他图像格式都是基于像素处理的，SVG则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。svg文件可以直接插入网页，成为DOM的一部分，然后用JavaScript和CSS进行操作。<.! DOCTYPE htm1><.html><.head><./head><.body><
2021-08-11 18:56:59
5691
原创 2021-08-11 vue 基础知识（four)
组件使用1.创建组件Vue.component('myplay', { data: function () { return { player: [ { num: 24, name: 'kobe', test: 81 }, { num: 3, name: 'iverson', test: 60 }, { num: 1, name: 'tmac', test: 62 }, { num: 15, name: 'carte
2021-08-11 18:53:03
88
原创 2021-08-11vue 基础知识 （three）
v-for指令一.数组遍历我们可以用v-for 指令基于一个数组来渲染一个列表。v-for指令需要使用item in items 形式的特殊语法，其中items 是源数据数组，而item 则是被迭代的数组元素的别名。1.遍历过程中没有使用索引值<body> <div id='app'> <ul> <li v-for="item in names">{{item}}</li> </ul> <
2021-08-11 18:46:41
497
原创 2021-07-29 vue基础语法（two）
v-bind指令基本使用v-bind指令用于响应更新HTML特性，将一个或多个attribute，或者一个组件prop动态绑定到表达式。以下我们来看一个 v-bind的简单例子:<div id='app'> <img src="./images/p1.jpg" alt="1号猛男" title='1号猛男'> <img v-bind:src='src' v-bind:alt="msg" v-bind:title="msg"></div>`
2021-07-29 20:43:25
125
1
原创 2021-07-28 vue 基础语法 （one）
1. 基本的设计模式基本的设计模式之MVC模式MVC是目前应用最广泛的软件架构之一, 一般MVC是指:Model(模型),Controller(控制器),View(视图),这主要是基于分层的目的.View一般都是通过Controller来和Model进行联系的。Controller是Model和View的协调者，View和Model不直接联系。基本联系都是单向的。所有的逻辑都在C层，不可避免的会造成C层非常复杂，如果项目越来越大，C层的代码会更加臃肿，维护起来也非常麻烦基本的设计模式之MVP模式
2021-07-28 22:55:29
369
5
原创 2021-07-21 webpack 简介以及使用
我们在开发中可能会遇到这样一些问题,比如在编写css时使用的是less语法,或者使用js时使用了impot导入,此时,我们如果直接在html中导入这两个文件,是没有效果的,因为我们的浏览器不认识less和import那么我们此时就需要一个工具,帮我们把less转变为浏览器可识别的css,把js高级语法解析为浏览器可识别的普通js语法,这一些小工具在以前我们需要一个个单独的去做,单独维护,那么有没有一种工具可以把处理css,js还有其他文件的方法整合到一起呢?此时我们前端就提出了构建工具的概念,构建工具
2021-07-21 18:21:03
113
9
原创 2021-07-04 ES6的相关概念
什么是ES6ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。二.ES6新增语法letES6中新增了用于声明变量的关键字let声明的变量只在所处于的块级有效 if (true) { let a = 10; }console.log(a) // a is not defined**注意：**使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性。不存在变量提升console.log(a)
2021-07-04 22:19:20
95
4
原创 2021-07-03 Es5的语法分为核心的语法和高级语法
一、什么是对象对象在js分为两种狭义的对象和广义的对象狭义的对象就是{ } 这种字面量的方式，它里面包含了一组属性的集合var obj={ age:12, name:"shaokang", hobby:[] }上面这个东西就是一个对象，里面有三个属性，这个对象只有属性，没有其他，那我们现在想一想，所谓的对象到底是什么？比如说我们现在不用{}，我们用数组来储存一组值Var obj=[“xiaoming”,12] //12你能看出他是什么意思吗？Var obj
2021-07-03 18:41:56
150
7
原创 6.30跨域问题解决
跨域跨域:非同源策略请求同源策略请求 ajax(也可以跨域)跨域传输2013年以前,没有真正的web前端工程师,前后端不分离,前端只需要写基础的html和css文件,发给后台,后台服务器去渲染数据,所以此时不存在跨域问题,因为前端和后端都在一起.前端发展,异步无刷新操作–>ajax前端写前端代码.后端写后端代码.最终是部署在同一个服务器上面:同源策略,但是在开发的时候双方都要调试,所以前端统一去使用后端编辑器,麻烦,噩梦,还要会后端资源合理运用:服务器拆分:web服务器:静态资源 k
2021-06-30 22:34:41
206
7
原创 6.30 ajax 兼容性问题以及封装
ajax1. AJAX在IE中的问题1.1. XMLHttpRequest 对象IE兼容问题所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。var xhr;if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xhr=new XMLHttpRequest(); }else {// code for IE6, IE5
2021-06-30 22:31:36
175
2
原创 6.26 服务器 webworker ajax
基本概念1.什么是服务器?服务器也是电脑,只不过是一台24小时不断电,不关机的电脑,根据提供的服务功能不同,分为:文件服务器,邮件服务器,web服务器简而言之:服务器其实就是一台’提供了某种服务功能’的超级电脑2.如何让电脑能够提供某种服务?如何让电脑聊天? 安装qq如何浏览网页?安装浏览器3.如何让电脑提供管理网站的服务?安装web服务相关的软件, Apache, IIS, NodeJs等安装了web服务器软件的电脑称之为web服务器4.如何用node搭建一个本地服务器?4.1下载no
2021-06-26 22:33:46
250
3
翻译 6.26 jq (事件 和特性）
jQuery事件jQuery特效一、绑定事件的方法鼠标事件键盘事件表单事件文档/窗口事件clickkeypresssubmitloaddblclickkeydownchangeresizemouseenterkeyupfocusscrollmouseleaveblurunloadhover语法：$("p").click(function(){ // 动作触发后执行的代码!!});$("p").on(.
2021-06-26 22:13:08
104
1
原创 6.19 jq( jq获取 设置 删除 类 样式)
回顾：jquery的选择器们JQuery遍历-祖先 parent（）parents（）parentsUntil()遍历子元素 children（）find(‘p’)遍历同胞 siblings() next() nextAll() prev() prevAll()过滤 first() last() eq() filter() not() ;目标：使用jQuery获取属性和内容使用jQuery设置内容添加删除元素获取和设置css类获取和设置css样式一、jQuery - 获取内容
2021-06-19 22:31:57
296
5
原创 6.16 cookie，本地保存
1.cookie是由W3C组织提出，最早由Netscape社区发展的一种机制。由于HTTP是一种无状态的协议，服务器单从网络连接上无从知道客户身份。怎么办呢？就给客户端们颁发一个通行证吧，每人一个，无论谁访问都必须携带自己通行证。这样服务器就能从通行证上确认客户身份了。这就是Cookie的工作原理。简单说cookie会话跟踪技术在一次会话从开始到结束的整个过程中,全程跟踪记录客户端的状态,例如是否登录,购物车信息, 是否已经下载,是否已经点赞,视频播放进度等1. cookie的作用与特性cooki
2021-06-16 22:38:29
200
3
翻译 6.16 jq （选择器）
回顾：目标：什么是jQueryjQuery选择器一、什么是jQueryjQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少，做的多"的JavaScript库。jQuery库包含以下功能：HTML 元素选取HTML 元素操作CSS 操作HTML 事件函数JavaScript 特效和动画HTML DOM 遍历和修改AJAXUtilities除此之外，Jquery还提供了大量的插件。二、引入两种方式引入2.1、下载jQuery 库是
2021-06-16 22:36:45
82
翻译 6.11移动web开发流式布局
1.0 移动端基础1.1浏览器现状PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样。总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可。.
2021-06-11 22:56:21
78
原创 6.11 css（3D转换和动画）
回顾浏览器内核前缀css背景（重点）背景颜色过渡（重点）过渡动画（重点）目标掌握2、3D转换（难点）掌握动画（难点）一、3D旋转[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z1KnWqWS-1623422434882)(/image-20200727204143130.png)]1.1、三维坐标系[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6Ws3ENFE-1623422434883)(/image-20200
2021-06-11 22:45:16
101
3
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人