11 2021 档案
摘要：前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术，帮我们处理了前端开发中最脏最累的 DOM 操作部分， 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM；但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题，所以我们仍然需要去关注 Vue 项目性能方面的优
阅读全文
摘要：什么是虚拟DOM ? ⽤ JavaScript 对象表示 DOM 信息和结构，更新后使之与真实dom保持同步，同步过程就是协调，核心是diff算法。 DOM 定义了一个接口,该接口允许JavaScript之类的语言访问和操作HTML文档。元素由树中的节点表示，并且接口允许我们操纵它们。但是此接口需要
阅读全文
摘要：MVC,MVP,MVVM是三种常见的架构模式,它通过分离关注点来改进代码组织方式。不同于设计模式(Design Pattern),只是为了解决一类问题而总结出的抽象方法，一种架构模式往往能使用多种设计模式。 MVC模式是MVP,MVVM模式的基础，这两种模式更像是MVC模式的优化改良版,他们三个的
阅读全文
摘要：我们能够知道，一般情况下，组件进行切换的时候，默认会进行销毁，这里我们定义 Home 和 About 两个组件，每个组件都放置一个输入框，并使用钩子函数 created 和 destoryed 来显示每个组件的创建和销毁： 一开始进入页面时组件 Home 创建： 进入组件 About 时，About
阅读全文
摘要：前言 “导航”表示路由正在发生变化。 vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。 这里主要讲解一下全局守卫的 beferEach 和 afterEach,其它的导航守卫可以查看官方文档：Vue R
阅读全文
摘要：前言 对于 Vue 这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由，这也就是 Vue-Router 存在的意义。vue 的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用是用一些超链接来实现页面切换和跳转的。在vue-router单
阅读全文
摘要：路由传参的方式主要有两种：params 和 query. 接下来我们先定义两个路由 ‘/home’ 和 ‘/profile’ 来分别看看这两种传参方式各自的用法和区别，下面的测试都是从路由 ‘/home’ 跳转到 ‘/profile’ ，参数也是从 ‘/home’ 传到 ‘/profile’ 。 {
阅读全文
摘要：call var name = 'waq'; var obj = { name: 'goodLuck' } function sayName(){ console.log(this.name); } //1、改变this指向函数 Function.prototype.myCall = functio
阅读全文
摘要：浏览器 1、提高网站性能的方法 2、现在的主要浏览器 IE、Firefox、Safari、Chrome、Opera。 它们的浏览器内核（渲染引擎）、css 前缀： IE—— Trident —— -ms- Firefox—— Gecko —— -mos- Safari—— Webkit —— -we
阅读全文
摘要：对于下面的代码究竟会返回什么呢？ console.log(['1','2','3'].map(parseInt)); 我们都知道 map() 方法是对原始数组中同样位置的元素运行传入函数而返回的结果，结果是一个数组，这一点毋容置疑。而 parseInt 解析一个字符串，并返回一个整数。所以我们当然会
阅读全文
摘要：前言 ECMAScript 为数组定义了 5 个迭代方法： 每个方法都会接收两个参数：运行的函数以及作为函数运行上下文的作用域对象。其中运行的函数接收 3 个参数：数组元素、元素索引和数组本身。这些方法都不改变调用它们的数组。 对比区别 在这些方法中， every() 和 some() 是最相似的，
阅读全文
摘要：分享一些刚学习前端时写的静态页面 (*^▽^*) 想要页面源码的或者其它风格的页面源码可以添加微信：Q1823706051
阅读全文
摘要：1、绘制三角形 用 css 画三角形主要是利用边框 border 来设置的，是不是有点迷惑？我们先试试把 div 四条边框设置成不同的颜色看看会出现什么效果： <head> <style> .triangle { width: 50px; height: 50px; border-bottom: 2
阅读全文
摘要：实现 实现如图所示的轮播图，要实现的功能主要有： 鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。 点击右侧按钮一次，图片下滑一张；点击左侧按钮，图片上滑一张。 图片播放的同时，下面小圆圈模块跟随一起变化。 点击小圆圈，可以播放相应图片。 鼠标不经过轮播图，轮播图也会自动播放。 鼠标经过，轮播图
阅读全文
摘要：实现 实现如图所示的段落展开和收起功能： 分析 <div class="box"> <p id="content"> 人生最美是清欢；愿有一屋，不被打扰，幸福终老 ；一袭江南梦，醉卧烟雨中；春在水墨中发芽 恬淡，禅里开出的花 ；寻得一方庭院，做匠人 ；有一个院子，种花，画画 ；春未暖,花先开 中国青
阅读全文
摘要：1、原型链 基本思想：利用原型让一个引用类型继承另外一个引用类型的属性和方法。 原型链算是实现继承的一个简单又比较好理解的一个方法了，对于原型链不理解的可以先去看看彻底理解 JS 的原型和原型链。具体实现如下： <script> function Parent(){ this.a = 66; thi
阅读全文
摘要：前言 异步编程允许我们在执行一个长时间任务时，程序不需要进行等待，而是继续执行之后的代码，直到这些任务完成之后再回来通知你。早期的异步编程是通过回调函数实现的，这种编程的模式避免了程序的阻塞，大大提高了CPU的执行效率，尤其适用于一些前后端数据库交互的操作。然而回调函数会出现回调地狱的情况，为了解决
阅读全文
摘要：实现 实现如图所示的Tab栏切换，点击对应的 tab 出现对应的内容，同时该点击的 tab 背景颜色为红： 分析 首先建立一个大的 div 里面包含两个盒子 第一个盒子里面放 tab 栏 第二个盒子里面放相应的内容 <div class="tab"> <!-- tab栏--> <div class=
阅读全文
摘要：前言 在网页实际运行的某些场景下，有些事件会不间断的被触发，如scroll事件，而不像我们想象中的，滚动一次触发一次，稍微滚动一下就会触发n多次scroll事件。如下： window.onscroll = function (){ console.log(123); } //监听滚动条滑动 我只是轻
阅读全文
摘要：前言 早期的网站，几乎所有都使用 ASP、Java、PHP 这类做后端渲染，但后来随着 jQuery、Angular、React、Vue 等 JS 框架的崛起，开始转向了前端渲染。从 2014 年起又开始流行了同构渲染，号称是未来，集成了前后端渲染的优点，但多年过去，很多当时壮心满满的框架（rend
阅读全文
