12 2019 档案
摘要：原文地址：http://www.cnblogs.com/shaojiang/p/5295826.html 最终实现界面如下： 页面加载时，自动轮播，轮播鼠标悬停在整个banner容器的时候，两边会显示向左，向右按钮，鼠标悬停在中下方索引圆圈的上面，自动跳转到相应的图片。 banner容器里面包含了图
阅读全文
摘要：Package Control插件本身是一个为了方便管理插件的插件 最简单的方式是通过Sublime Text 3的console命令界面进行安装 Sublime text3 import urllib.request,os,hashlib;h = '6f4c264a24d933ce70df5ded
阅读全文
摘要：（1）为什么学习node？ 服务器为中间件 学习node.js便是为了帮助前端开发人员 打开服务器的黑盒子，了解接口制作、数据处理等，以便更好地配合后端进行协同开发 案例：node.js中文社区系统（多人社区） （2）什么是node？ 前端：HTML、CSS、JS 服务器端：node、java、PH
阅读全文
摘要：1.input placeholder问题 在chrome 模拟移动端调试时［上图］，显示的非常正常，但是在真机上［下图］，placeholder里面的内容明显靠上，非常的不美观 在国外网站，对这个属性的兼容性处理，那就是不要设计input的line-height或者设置line-height为no
阅读全文
摘要：上面动图是实现的效果。 全程无需重新加载整个页面，只需要上下拉即可刷新数据！ index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>上拉加载</title> <meta name="viewp
阅读全文
摘要：下拉刷新实现原理 实现下拉刷新主要分为三步： 监听原生touchstart事件，记录其初始位置的值，e.touches[0].pageY； 监听原生touchmove事件，记录并计算当前滑动的位置值与初始位置值的差值，大于某个临界值时，显示下拉刷新头，并将页面的overflow属性，设置为false
阅读全文
摘要：点击样式闪动 Q: 当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。A:根本原因是-webkit-tap-highlight-color，这个属性是用于设定元素在移动设备（如Adnroid、iOS）上被触发点击事件时，响应的背景框的颜色。建议写在样
阅读全文
摘要：最近一直在整理一些做移动端时遇到的问题，现在把他们列在一起，方便收藏查找： 1、关闭iOS键盘首字母自动大写 IOS的机子，默认英文输入法状态下，首字母是自动大写的，有时候挺烦人的。 我们写页面的时候有没有办法把这个自动大写关闭呢？autocapitalize的属性可以实现： 在iOS中，默认情况下
阅读全文
摘要：编程思想就是一种解决现实问题的一种办法，每一种语言都是对现实问题进行抽象，从而让计算机去解决。 面向过程更多的是把问题抽象成步骤，一步一步去执行而不关心是谁在执行，面向对象则是把现实问题里面的概念构件都抽象成了对象，通过发送请求的方式让对象去完成任务，就比如大象装进冰箱，那么就不光是可以装大象了，还
阅读全文
摘要：一、概述 在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。 ES6中，
阅读全文
摘要：导语：随着大数据的发展，数据可视化成了我们日常开发中普遍存在的一种需求。现在我就日常工作过程中的可视化开发总结一下，回顾一下，本篇使用百度开源的echarts库来做案例。 echarts资源 echarts官网 echarts Github 下载并引入echarts 下载echarts npm in
阅读全文
摘要：一个好的可视化，能够带给人们不仅仅是视觉上的冲击，还能够揭示蕴含在数据中的规律和道理。下面就总结一下可视化的基础概念。 【可视化的意义】 可视化的终极目标是洞悉蕴含在数据中的现象和规律，这里面有多重含义：发现、决策、解释、分析、探索和学习。 简明定义是：通过可视表达增强人们完成某些任务的效率 可以化
阅读全文
摘要：1.简介 随着移动端的愈加火爆，目前很多HTML5的框架都在支持移动方向，比如：Vue.js，zepto.js，React Native等等。 Zepto是一个轻量级的针对现代高级浏览器的JavaScript 库， 它与jquery 有着类似的api。 如果你会用 jquery，那么你也会用 zep
阅读全文
摘要：【一】AJAX+ML+DTD概念 【二】AJAX简介与原理 【三】AJAX请求5步法 相关属性及方法： onreadystatechange:当AJAX的readyState读取状态发生变化时触发 readyState：AJAX的读取状态 responseText：以字符串形式接收服务器端返回信息
阅读全文
摘要：简单理解：就是以浏览器可以识别的一种方式去分析对应数据是否符合要求 （1）字符查找，search类似于indexOf，没有则返回-1 （2）字符串截取substring （3）返回字符串某一位charAt （4）字符串截取切分split 【缘由/优势】 需求：找出字符串中所有数字 （1）普通原始字符
阅读全文
摘要：应用场景： （1）邮箱登录，第二次访问时，会自动填写 （2）两周内自动登录 【JS应用cookie】 （1）本质： document.cookie可以理解为document上的一个属性 （2）过期时间 如果不设置过期时间，则回到浏览器关闭时自动清除 （3）日期对象 （4）设置时间 （5）设置过期时间
阅读全文
摘要：这是一篇关于js模块化历程的长长的流水账，记录js模块化思想的诞生与变迁，展望ES6模块化标准的未来。经历过这段历史的人或许会感到沧桑，没经历过的人也应该知道这段历史。 无模块时代 在ajax还未提出之前，js还只是一种“玩具语言”，由Brendan Eich花了不到十天时间发明，用来在网页上进行表
阅读全文
摘要：ES2015正式发布（也就是ES6，ES6是它的乳名），其中Promise被列为正式规范。作为ES6中最重要的特性之一，我们有必要掌握并理解透彻。本文将由浅到深，讲解Promise的基本概念与使用方法。 ES6 Promise 先拉出来遛遛 复杂的概念先不讲，我们先简单粗暴地把Promise用一下，
阅读全文
摘要：知识点： 操作table: insertRow()，deleteRow()，insertCell()，deleteCell() table表格中的常用方法和属性: deleteRow(行号):删除行 rowIndex:获取当前行数的数值 insertRow(行号):添加一行,行数的值 insertC
阅读全文
摘要：（1）首页 - 图标选择Icons区域开发 注意：这里需要添加逻辑操作，当页面加载时，遍历icons，且对 icon 的个数进行动态计算，将结果 push 到一个二维数组中 （2）axios接口调用与mock数据模拟 （3）模拟调用接口数据 编写json模拟数据 （4）vue-router跳转 （5
阅读全文
摘要：（1）原型链 <script type="text/javascript"> function Student(local){ this.local = local; } var wang = new Student('石家庄'); console.log(wang) console.log(Stu
阅读全文
摘要：require 和 import，都是为了JS模块化使用。最近项目中，因为多人协同开发，出现了一个项目中同时使用了require 和 import 引入依赖的情况。正常情况下，一个项目中最好是对引入方式做一个规范。下面我们就来看一下require 和 import的区别： 一.require req
阅读全文
摘要：首先我们要明白一个前提，CommonJS模块规范和ES6模块规范完全是两种不同的概念。 CommonJS模块规范 Node应用由模块组成，采用CommonJS模块规范。 根据这个规范，每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。 Commo
阅读全文
摘要：安卓浏览器看背景图片，有些设备会模糊因为手机分辨率太小，如果按照分辨率来显示网页，字会非常小，安卓手机devicePixoRadio比较乱，有1.5的，有2的也有3的。想让图片在手机里显示更为清晰，必须使用2x的背景图来代替img标签（一般情况下都是2倍的），或者指定background-size:
阅读全文
摘要：前端组件化的痛点 在前端组件化横行的今天，确实极大的提升了开发效率。不过有一个问题不得不被重视，拟引入的这些html、css、js代码有可能对你的其他代码造成影响。虽然我们可以通过命名空间、闭包等一系列措施来加以防备，不过还是存在这些隐患。为了解决这些问题，有一个基本大家遗忘的技术还是可以了解一下的
阅读全文
摘要：话不多说上代码： 1 2 3 4 5 6 7 8 9 1.判断是不是微信 function is_weixn(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i)=="micromessenger"
阅读全文
摘要：源文：http://blog.csdn.net/tivonalh/article/details/60954373 假设是已经申请完成各平台开发者账号。 先来简单的，微博和QQ 微博： 引入微博JS <script src="http://tjs.sjs.sinajs.cn/open/api/js/
阅读全文
摘要：方式一，调用函数，得到返回值。强制函数直接量执行再返回一个引用，引用在去调用执行方式二，调用函数，得到返回值。强制运算符使函数调用执行(function(){})(); 是 把函数当作表达式解析，然后执行解析后的函数相当于 var a = function(){}; a(); a得到的是函数(fun
阅读全文
摘要：localStorage 和 sessionStorage 的增删改查： 存储数据： sessionStorage.setItem('key', 'sessionStorage的值'); // 存储数据 1 获取指定键名数据： let dataSession=sessionStorage.getIt
阅读全文
摘要：起因是因为想了解闭包的内存泄露机制，然后想起《js高级程序设计》中有关于垃圾回收机制的解析，之前没有很懂，过一年回头再看就懂了，写篇博客与大家分享一下。 #内存的生命周期： 分配你所需要的内存： 由于字符串、对象等没有固定的大小，js程序在每次创建字符串、对象的时候，程序都会分配内存来存储那个实体。
阅读全文
摘要：（1）函数防抖debounce 函数触发停止一段时间后(期间不能再触发 debounce，否则将重新计时)，再执行回调函数 机制： 防抖函数主要利用定时器的延迟执行特性，根据是否有定时器在等待执行： 触发了一个事件后：如果有一个定时任务待执行，就清除定时器，重新计时。 如果没有任务待执行，就定时执行
阅读全文
摘要：前言 说到Vue的钩子函数，可能很多人只停留在一些很简单常用的钩子(created,mounted)，而且对于里面的区别，什么时候该用什么钩子，并没有仔细的去研究过，且Vue的生命周期在面试中也算是比较高频的考点，那么该如何回答这类问题，让人有眼前一亮的感觉呢... 前端进阶积累、公众号、GitHu
阅读全文
摘要：当做Vue-cli项目的时候感觉在路由跳转前做一些验证，比如登录验证，是网站中的普遍需求。 对此，vue-router 提供的 beforeEach可以方便地实现全局导航守卫（navigation-guards）。组件内部的导航守卫函数使用相同，只是函数名称不同（beforeRouteEnter 、
阅读全文
摘要：方式有两种 1、路由元信息（2.1.0版本之前） 2、属性方式（2.1.0版本之后新增） Vue2.1.0之前: 想实现类似的操作，你可以： 配置一下路由元信息 创建两个keep-alive标签 使用v-if通过路由元信息判断缓存哪些路由。 <keep-alive> <router-view v-i
阅读全文
摘要：（1）原理介绍 （2）静态布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> <style type="text/css"> *{ margin: 0; padding: 0; } li{ list-
阅读全文
摘要：断点调试有两种打点方式 （1）控制台手动打点 （2）代码中添加 debugger打点 .
阅读全文
摘要：（1）手风琴效果 分析： （2）基础缓冲运动 接下来取整 原因： px为计算机识别的最小单位，1px无法再往下拆分。所以css如果取值200.5px，解析时计算机会自动将其改为200px注意：这里的数值并没有四舍五入计算，200.9px最后依然是200px 速度不能是小数，需要取整，所以接下来进行取
阅读全文
摘要：【一】运动基础 （2）基础运动案例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> <style type="text/css"> .parent{ width: 600px; height: 300p
阅读全文
摘要：（1）浏览器解析 URL 为了能让我们的知识层面看起来更有深度，我们应该考虑下面两个问题了： 从浏览器输入 URL 到渲染成功的过程中，究竟发生了什么？ 浏览器渲染过程中，发生了什么，是不是也有重绘与回流？ OK，兴致来了，我们就先从 浏览器解析 URL 看起，先来看看当用户输入 URL，到浏览器呈
阅读全文
摘要：在说浏览器渲染页面之前，我们需要先了解两个点，一个叫 浏览器解析 URL，另一个就是本章节将涉及的 重绘与回流： 重绘(repaint)：当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要 UI 层面的重新像素绘制，因此损耗较少。 常见的重绘操作有： 改变元素颜色 改变元素
阅读全文
摘要：说完防抖，下面我们讲讲节流，规矩就不说了，先上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-sc
阅读全文
摘要：【前言】 在工作中，我们可能碰到这样的问题： 用户在搜索的时候，在不停敲字，如果每敲一个字我们就要调一次接口，接口调用太频繁，给卡住了。 用户在阅读文章的时候，我们需要监听用户滚动到了哪个标题，但是每滚动一下就监听，那样会太过频繁从而占内存，如果再加上其他的业务代码，就卡住了。 所以，这时候，我们就
阅读全文
摘要：前端模块规范有三种：CommonJs,AMD和CMD。 CommonJs用在服务器端，AMD和CMD用在浏览器环境 AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。 CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。 AMD:提前执行（异步加载：依赖先执行）+延迟执行
阅读全文
摘要：今天来探讨一下如何使用Git的操作，来进一步的实现代码的下载到本地，我原来也不是很明白git中生成公钥和私钥的作用，我一直在想，git里面你把自己的公钥发给了git的服务器，他是怎么判断的，每一次我换完系统，在重新装机，他是怎么确定是换完系统还是依然可以使用git的，今天我们就来讲解一下最为简单的S
阅读全文
摘要：一、我们为什么要学习vim编辑器？ Linux的命令行界面下面有非常多的文本编辑器。比如经常听说的就有Emacs、pico、nano、joe与vim等。vim可以看做是vi的高级版。我们为什么一定要学习vim呢？有以下几个原因： (1)所有的Unix like系统都会内置vi文本编辑器，其他的文本编
阅读全文
摘要：【一】git介绍 初始的项目版本管理可以在本地赋值备份之前版本代码，项目较小时还可以，但项目较大时，这种方法显得有点捉襟见肘 ... ... 后期也出现了很多版本管理工具，例如svn、vcs、vss等等... 【二】git安装 安装时分为32位和64位 下载好安装包后，安装即可 （1）安装验证，右击
阅读全文
摘要：最近做一个移动端项目，弹框写的比较麻烦，查找资料，找到了这个组件，但是说明文档比较少，自己研究了下，把我碰到的错，和详细用法分享给大家！有疑问可以打开组件看一看，这个组件是仿layer-mobile的，很多用法都一样，可以看看哦！ 一、npm 安装 // 当前最新版本 1.2.0 npm insta
阅读全文
摘要：图上那些类似于星座图的点和线 是由vue-particles生成的，不仅自己动，而且能与用户鼠标事件产生互动。 是非常炫的一种动态特效 可以在Vue项目中使用，需要安装第三方依赖 使用步骤 1. 安装 npm install vue-particles --save-dev 复制代码 或者 npm
阅读全文
摘要：前言：之前没有接触过页面调用地图的项目，某次面试，老板要求我用vue-amap调用高德地图，回家以后，我去网上查了一些案例和教程，看似很简单的引入调用，我却整整弄了一宿，还没弄出来！！！百般无奈之下，我选择第二天重头来过，一定要找到什么原因... 结果！血的教训告诉我，记录教程的时候，一定要有实践基
阅读全文
摘要：懒加载优化 （1）前言 利用vue-lazyload实现图片懒加载，下面介绍下具体使用步骤 （2）下载安装第三方模块 （3）引入并激活相关参数 （4）组件调用 使用方法很简单，将图片的:src改为v-lazy即可，如下所示 此时效果如下 因为之前设置的img宽度为100，所以这里需要用到属性选择器去
阅读全文
摘要：解决方法如下 项目方案： 在最外侧添加样式操作 .
阅读全文
摘要：keep-alive 简介 keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。 用法也很简单： <keep-alive> <component> <!-- 该组件将被缓存！ --> </component> </keep-alive> props incl
阅读全文
摘要：前言 据说阿里有一道面试题就是谈谈函数节流和函数防抖。 糟了，这可触碰到我的知识盲区了，好像听也没听过这2个东西，痛定思痛，赶紧学习学习。here we go！ 概念和例子 函数防抖(debounce) 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。 看一个🌰（栗子）： //模
阅读全文
摘要：什么是Vue.nextTick()？？ 定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。 所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码； 理解：n
阅读全文
摘要：CSS 属性 touch-action 用于指定某个给定的区域是否允许用户操作，以及如何响应用户操作(比如浏览器自带的划动，缩放等) 默认情况下，平移(滚动) 和 缩放手势由浏览器专门处理。该属性用于取消浏览器默认手势行为，开发人员自定义滚动和手势行为。 touch-action的值： auto :
阅读全文
摘要：一、CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下，CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的，这个和top, bottom等属性的百分比值不一样。 这么设计的原因在我的新书（应该不出几个月就要出版了）中会有说明，这里不展开。 对于pad
阅读全文
摘要：一般的，如果是静态数据（本地数据），可以直接在mounted生命周期中初始化，循环轮播、自动播放都比较正常。 但是，如果是动态从后台获取数据的话，采用上述方法会发现，轮播图无法自动播放，也无法拖拽。 解决办法：在从后台获取完数据之后再初始化swiper，同时启动动态检查器observer，当改变sw
阅读全文
摘要：阻止启动生产消息，常用作指令。通俗理解为消息提示的环境配置。 阻止启动生产消息 這又是什麽意思? 看下效果 （1）Vue.config.productionTip = false （2）Vue.config.productionTip = true 感覺多了一行信息 小结： 开发环境下，Vue 会提
阅读全文
摘要：在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。 一、viewport的概念 通俗的讲，移动设备上的viewport就
阅读全文
摘要：【前言】 eslint是一个JavaScript的校验插件，通常用来校验语法或代码的书写风格。这篇文章主要介绍了vue项目关闭eslint校验,需要的朋友可以参考下 【主体】 简介eslint eslint是一个JavaScript的校验插件，通常用来校验语法或代码的书写风格。 官方文档：https
阅读全文
摘要：我们在写vue项目的时候会遇到给组件命名 这里的name非必选项，看起来好像没啥用处，但是实际上这里用处还挺多的 ? 1 2 3 export default { name:'xxx' } 1.当项目使用keep-alive时，可搭配组件name进行缓存过滤 举个例子： 我们有个组件命名为detai
阅读全文
摘要：AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。 CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。 这些规范的目的都是为了 JavaScript 的模块化开发，特别是在浏览器端的。目前这些规范的实现都能达成浏览器端模块化开发的目的。 在了解AMD，CMD规范前，我们先
阅读全文
摘要：我们在浏览器输入http://www.baidu.com想要进入百度首页，但是这是个域名，没法准确定位到服务器的位置，所以需要通过域名解析，把域名解析成对应的ip地址，然后通过ip地址查找目的主机。整个访问过程可以概括为： 域名解析 发起TCP三次握手建立连接 建立连接后发起http请求 服务器响应
阅读全文
摘要：隐式类型转换 四则运算 判断语句 toString 在 JavaScript 中声明变量不需指定类型，对变量赋值也没有类型检查，同时还允许隐式类型转换。 这些特征说明 JavaScript 属于弱类型的语言。 在强类型的 C++ 中，多数情况下构造函数需要声明为 explicit 来禁止隐式类型转换
阅读全文
摘要：任何一个对象都有toString()方法(默认继承自Object，自己可以重写)，此方法返回一个字符串。 var sayYo = function () { alert("sayYo2!"); } console.log(sayYo); 输出打印值为函数体 科普： 实际打印的是：sayYo.toSt
阅读全文
摘要：今天在跟踪调试项目的代码时，发现在一个function中用到了这么一段[].slice.call(arguments, 1) 的代码。心中便起了疑惑，对于slice 和 call 的方法，倒是不怎么陌生，解析了下上面的那段代码，就是为了获取arguments 从1 开始到结尾的所有元素。只是觉得奇怪
阅读全文
摘要：类数组（Array-like）对象 slice 方法可以用来将一个类数组（Array-like）对象/集合转换成一个新数组。你只需将该方法绑定到这个对象上。 一个函数中的 arguments 就是一个类数组对象的例子。 function list() { return Array.prototype
阅读全文
摘要：简单理解就是函数内部不断调用自身 直接上代码： function dg(num){ if(num<1){ return 0; }else{ return num+dg(num-1) } } console.log(dg(6)) 最后输出值为21，记住加限制条件退出递归，不然会形成死循环... ...
阅读全文
摘要：类数组对象：arguments总所周知，js是一门相当灵活的语言。当我们在js中在调用一个函数的时候，我们经常会给这个函数传递一些参数，js把传入到这个函数的全部参数存储在一个叫做arguments的东西里面，那么这到底是什么东西？ 在js中万物皆对象，甚至数组字符串函数都是对象。所以这个叫做arg
阅读全文
摘要：apply 和 call 的区别 ECMAScript 规范给所有函数都定义了 call 与 apply 两个方法，它们的应用非常广泛，它们的作用也是一模一样，只是传参的形式有区别而已。 apply( ) apply 方法传入两个参数：一个是作为函数上下文的对象，另外一个是作为函数参数所组成的数组。
阅读全文
摘要：介绍 JavaScript中有一个被称为作用域(Scope)的特性。虽然对于许多新手开发者来说，作用域的概念并不是很容易理解，我会尽我所能用最简单的方式来解释作用域。理解作用域将使你的代码脱颖而出，减少错误，并帮助您使用它强大的设计模式。 什么是作用域(Scope)？ 作用域是在运行时代码中的某些特
阅读全文
摘要：今天同事问了道问题 var a=0,b=0; for(;a<10,b<7;++a,++b){ g=a+b } console.log(g) 问输出结果为多少？？？ 答案：12 这里要知道for循环的条件不管写多少个，必须都满足才可以，我们可以使用断点测试 第一次如下 点击下一个，让断点下传，到6时便
阅读全文
摘要：什么是函数柯里化？ 百度百科： 在计算机科学中，柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术。通俗点说就是将一个函数拆分成多个函数，是固定部分参数，返回一个接受剩余参数的函数，也称为部分计算函数，
阅读全文
摘要：在一般的vue项目中，都会用到Loading或者Alert之类的弹窗浮层，而他们是一种比较高频率出现的组件。 一般情况下，我们都会去直接import该组件，然后直接以标签的形式引用进去当前页面组件中，如下图： 这种是我们比较常用的一种方法，它的好处就是让我们比较直观地对组件进行调用， 方便地通过标签
阅读全文
摘要：vue生命周期流程图：4张图 ： 生命周期的解析和应用： Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程，就是生命周期。 beforecreate :
阅读全文
摘要：vue生命周期简介 咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了。 生命周期探究 对于执行顺序和什么时候执行，看上面两个图基本有个了解了。下面我们将结合代码去看看钩子函数的执行。 ps:下面代码可以直接复制出去执行 <!DOCTYPE html> <html> <head>
阅读全文
摘要：目录 Vue实例的生命周期全过程（图） 在beforeCreate和created钩子函数间的生命周期 created钩子函数和beforeMount间的生命周期 el选项的有无对生命周期过程的影响 template参数选项的有无对生命周期的影响 Vue的编译过程——把模板编译成 render 函数
阅读全文
摘要：computed是用来把多个基础的数据组合成一个复杂的数据；同时获得了vue提供的自动变更通知机制。 即将基础数据变为复杂数据，同时获得自动变更通知机制 watch是利用了vue的自动变更通知机制，用于把这一变化扩散出去（实现相关的更新逻辑或者做和computed相反的事情）。 即利用自动变更通知机
阅读全文
摘要：面向过程编程 Procedure Oriented Programming C语言是面向过程编程的，面向过程编程主要使用顺序、条件选择、循环三种基本结构来编写程序。 顺序：按照时间轴顺序完成每个处理； 条件选择：根据条件的成立与否执行不同的条件分支； 循环：根据一定的条件反复执行同样的代码； 面向过
阅读全文
摘要：【大纲】 【主体】 注意：先进先出 事件轮询： 事件初始化代码执行完毕后，开始执行事件队列里的待处理事件 .
阅读全文
摘要：一. 什么是Vuex? Vuex Vuex是一个专门为Vue.js应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化. Vuex核心 上图中绿色虚线包裹起来的部分就是Vuex的核心, state中保存的就是公共状态, 改变stat
阅读全文
摘要：概念流程图： 案例： （1）src/store/index.js导出仓库 （2）在入口文件引入仓库并派发到每个组件，在入口文件main.js引入，挂载到根组件上，方便以后使用this.$store调用仓库数据 （3）组件读取显示 直接读取： 年纪：{{this.$store.person.age}}
阅读全文
摘要：最近在用vue写pc端项目，用vuex来做全局的状态管理， 发现当刷新网页后，保存在vuex实例store里的数据会丢失。 1. 产生原因 2. 解决思路 3. 解决过程 1. 产生原因其实很简单，因为store里的数据是保存在运行内存中的,当页面刷新时，页面会重新加载vue实例，store里面的数
阅读全文
摘要：大纲： 主体： （1）介绍 （2）案例 编程实现斐波那契数列的计算 递归调用实现案例： Web Workers多线程的新标准并没有改变JS单线程的本质，分离出的子线程完全受主线程控制，且不得操作DOM，只有主线程才可以对页面进行更新操作。 （3）使用 ①创建分线程文件 ②主线程发消息并设置回调 （4
阅读全文
摘要：大纲： 相关知识点： 主体： （1）模型原理 JS部分：初始化代码执行 WebAPIS：执行上下文对象（不是一个真的对象，而是一个抽象的虚拟对象，可以看做栈里的一个区域，包含很多对象） setTimeout：定时器管理模块（分线程） DOM（document）：事件响应管理模块（分线程）callba
阅读全文
摘要：大纲： 【主体】 （1）如何证明JS运行是单线程的？ 上述代码执行顺序结果为：fn()→timeout 1111→timeout 2222 接下来对上述代码做下修改 执行结果如右图所示 接下来点击确认，关闭弹框，再往后1s执行timeoout 1111，再过1s执行timeout 2222 从这里可
阅读全文
摘要：首先看几个问题： 【主体】 （1）定时器真的时定时执行的吗？ 顺序验证： 测试结果： 接下来对上述代码做下修改，增加一个长时间工作的消耗，此时再来验证下定时器运行的精准度 结果如下： （2）定时器回调函数是在分线程上执行的吗？ 主线程上执行 原因：JS代码是在主线程执行，所以回调函数是在主线程上执行
阅读全文
摘要：不同浏览器的内核，不太一样 360双核切换机制 一般涉及到金钱交易时，会切换到Trident内核，因为IE内核安全性较稳 不涉及金钱利益时，则会使用webkit内核 （1）内核是由很多模块构成 注意： 定时器模块运行在分线程上，那么是不是说明回调函数在分线程上？？ JS代码运行在分线程上？？？ 答案
阅读全文
摘要：【大纲】 二级大纲： 三级大纲： 【主体】 （1）进程process 如下所示，两者内存空间相互独立 （2）线程thread （3）图解 注意：有的程序是多进程的，有的时单进程的 （4）单线程与多线程 1、如果一个进程只包含一个线程，那么它就是单线程的 2、如果一个进程有多个线程，那么它就是多线程的
阅读全文
摘要：导航守卫 导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。（记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察$route对象来应对这些变化，或使用beforeRouteUpdate的组件内守卫。） 具体有哪些？
阅读全文
摘要：本文简单介绍下三种路由传参： （1）在路由中配置 { path : ‘/home/:id’, name : ‘Dome’, component } 然后写调用的时候 this.$router.push({path : `/describle/${id}`}) 取值： $route.parms.id
阅读全文
摘要：router-link传参 【注意】 1、使用params方式传参时，只支持name跳转； 案例如下： 2、使用query传参，注意：两种都支持 案例如下 .
阅读全文
摘要：package.json文件配置及其含义，这个是vue-cli自动生成的文件，先贴一张代码及其含义： { "name": "secondproject",//模块名称 "version": "1.0.0",//模块版本 "description": "A Vue.js project",//对模块的
阅读全文
摘要：分享文章： 浅谈vue-cli 3 和 vue-cli 2的区别 https://blog.csdn.net/weixin_42080056/article/details/81631661 vue-cli3运行npm run serve修改为npm run dev https://jingyan.
阅读全文
摘要：首先简单来说明一下$router和$route的区别 //$router : 是路由操作对象，只写对象 //$route : 路由信息对象，只读对象 //操作 路由跳转 this.$router.push({ name:'hello', params:{ name:'word', age:'11'
阅读全文
摘要：（1）借用构造函数继承 案例如下： 验证： （2）组合继承 案例如下： 验证如下： 结果如右图所示 . .
阅读全文
摘要：【前言】 之前已经介绍了对象创建的五种模式，下面看下继承模式 本节介绍下《原型链继承》 【主体】 验证如下： 关键点： .
阅读全文
摘要：【前言】 函数高级部分先看到这里，接下里看下面向对象高级部分 1、对象创建模式 2、继承模式 【主体】 （1）Object构造函数模式 案例如下： 测试结果如右图所示 （2）对象字面量形式创建 案例如下： 结果如右侧所示 （3）工厂模式创建对象 案例如下： 工厂模式问题--局限性，验证如下 （4）自
阅读全文
摘要：【面试题1】 答案：The Window 分析： 本案例里，不存在闭包。 条件： 1、函数嵌套（满足） 2、内部函数调用外部函数变量（没有） 综上所述，该例中不存在闭包 【面试题2】 答案：My Object 分析： 案例2为闭包，具体如下所示 .
阅读全文
摘要：发现网上一堆闭包的教程都说闭包会造成内存泄漏，特意去查了下书，发现这一直是一个误解。 js高程原文这样说的：由于IE9 之前的版本对JScript 对象和COM 对象使用不同的垃圾收集。因此闭包在IE 的这些版本中会导致一些特殊的问题。具体来说，如果闭包的作用域链中保存着一个HTML 元素，那么就意
阅读全文
摘要：什么是闭包？能够访问其他函数内部变量的函数 闭包解决了什么问题由于变量的作用域的原因 （函数内部能读取全局变量，函数外部无法读取函数内部的变量【局部变量】），为了在函数外部读取局部变量，所以就有了闭包。 闭包的作用1.访问其他函数内部变量2.保护变量不被内存回收机制回收3.避免全局变量被污染 方便调
阅读全文
摘要：【大纲】 【主体】 （1）闭包优缺点 1、延长局部变量的生命周期2、外部访问函数内部变量 闭包的优点同时也是它的缺点，就是 （2）解决方案 1、能不用闭包就不用（很难做到，因为应用较多） 2、及时释放 通过null，将其设置为垃圾对象，利用垃圾回收机制回收 如下所示，及时释放 （3）内存溢出与内存泄
阅读全文
摘要：【自定义JS模块】 【闭包案例】 （1）案例1 对应的模块文件 （2）案例2 使用匿名函数 对应的模块文件 案例2分析：因为内部函数引用了外部函数的变量，且存在嵌套关系，所以是闭包，分析结构图如下 .
阅读全文
摘要：大纲： 主体： （1）场景1：点击按钮显示点击的第几个 注意：伪数组每次循环时都会重新计算一次长度，所以最好提出去或者直接加到for循环内部 结果： 分析： 1、i为全局变量 解决方案： 1、下标法 2、闭包法 变量分类与读取： 【闭包理解】 （1）首先做下断点测试 （2）自定义验证： （3）闭包条
阅读全文
摘要：面试题1： ，答案为10 有一点需要明确：作用域是在定义编写代码时已经决定好的 面试题2： 结果1： 结果2： 首先在内部作用域找，没有 然后在全局作用域找，window没有，所以会报错如果想找对象内部的它，此时需要借助this .
阅读全文
摘要：大纲： 主体： （1）概论 （2）层级 执行上下文层级为n+1原则 作用域层级也是n+1原则 验证： （3）函数作用域作用 隔离变量，不同作用域下，相同变量名不会有冲突 （4） .
阅读全文
摘要：大纲： 主体： 注意：*******函数调用时才会产生上下文栈，声明时不会产生********** 顺序： 概念图： 执行上下文栈的顺序 →后进先出 其他概念图： 当前执行的上下文总是在顶部 全局执行上下文总是在底部 【面试题】 递归调用：在函数内部去调用本身 递归一般都会有退出条件，不然会是死循环
阅读全文
摘要：1、代码分类 2、全局执行上下文 3、函数执行上下文 .
阅读全文
摘要：大纲： 主体： 案例1： 接下来在控制台source里进行断点测试 打好断点后，在控制台测试window .
阅读全文
摘要：测试1： 分析如下 结果如下： 测试2： 测试3： 测试4： .
阅读全文
摘要：【大纲】 【主体】 1、创建函数 注意：Object内置原生对象原来就有 2、添加实例方法 3、根据构造函数创建实例对象 原型链寻找 1、本身有在本身找 2、本身没有往摸着隐式原型链往里找 或者再上层 4、原型链尽头 Object.prototype.__prop__为null 5、原型链理解 本质
阅读全文
摘要：前言： 1、函数对象即函数的prototype原型属性指向原型对象，在创建函数时便存在，默认为空Object 2、实例对象的__proto__隐式原型在实例化创建实例时产生，值等于构造函数的显式prototype原型属性的值3、开发时程序员操作显式原型在原型prototype上添加方法，不能直接操作
阅读全文
摘要：思维导图 栈堆翻译为为stack （1）原型与原型链 概念一、原型对象 验证步骤： 1、打印Data函数的原型prototype 原型属性指向原型对象 ES源码结构分析示意 2、空对象 3、JS特点：动态添加属性 小结： prototype原型、constructor构造 1、每个函数有一个prot
阅读全文
摘要：【总结】 小括号和中括号开头的在其前必须加封号； 【主体】 首先搜索下 【主体】 （1）讨论 编码风格问题 （2）什么情况必须用封号？ 1、其后跟着匿名式函数调用 此时可以在匿名函数前加；如下所示 2、有时也会加到前面 原因：上线时会对js文件进行合并压缩， 如果不加，则会报错，将之前代码视为一体
阅读全文
摘要：this对象指向 重点：谁调用this，则指向谁 （1）案例代码： （2）分析： （3）案例2 （4）相关问题 .
阅读全文
摘要：IIFE（ 立即调用函数表达式）是一个在定义时就会立即执行的 JavaScript 函数。 全称为Immediately Invoked Function Expression 有时如果不加；会出现一些不必要的bug，这时为了代码的整洁性，我们不会给所有语句加，所以这里选择在IIFE之前加 上述作用
阅读全文
摘要：1、什么函数是回调函数？ 此时两者的执行并没有先后顺序 两个都是回调函数 满足三个特点就是回调 1、定义了函数 2、没有主动调用 3、最后执行了 2、常见的回调函数有哪些？ 1、DOM事件回调函数 2、定时器回调函数 3、ajax请求回调函数 4、生命周期回调函数 .
阅读全文
摘要：【问题】 【主体】 1、什么是函数？ ①实现特定功能 ②多条语句的封装体 ③可以重复执行的代码块 2、为什么用函数？ 提高代码的复用性，提升效率 3、如何定义函数？ ①函数声明定义 ②函数表达式定义③构造函数定义 4、如何调用执行？ ①直接调用 ②通过对象调用 ③通过new④通过call或apply
阅读全文
摘要：四个问题 问题拓展：对象访问方式 1、属性名包含特殊字符，例如空格、-等 2、变量名不确定 变量名不确定时需要使用['属性名'] .
阅读全文
摘要：【一】基础 （1）什么是数据？ 存储在内存里 代表特定信息 本质为0101，二进制数据 （2）什么是内存？ 内存条通电后产生的可存储数据的空间（临时的） 拓展： 1、2种数据 2、内存分类--栈和堆 （3）什么是变量？ （4）数据、变量、内存区别 【二】相关问题 （1）内存 （2）引用变量赋值 （3
阅读全文
摘要：首先看下大概流程 【一】基础 接下来看下数据类型分类和判断 （1）数据类型分类 基本类型/值类型5种 字符串String、数字Number、布尔值Boolean、未定义undefined、空null 对象类型/引用类型 Object（任意对象） Function（一种特别的对象，可以执行） Arra
阅读全文
摘要：面试常问的一个基础问题 == 和 区别是什么？ 这里简单描述下 " "叫做严格运算符，"=="叫做相等运算符 而且 == 会对数据做隐式转换，而 则是直接判断数值和类型 .
阅读全文
摘要：前端经常在静态资源的存放上有分歧 相同点： assets和static两个都是存放静态资源文件。项目中所需要的资源文件图片，字体图标，样式文件等都可以放在这两个文件下，这是相同点 不相同点： assets中存放的静态资源文件在项目打包时，也就是运行npm run build时会将assets中放置的
阅读全文
摘要：路由跳转前做一些验证，比如登录验证，是网站中的普遍需求。 对此，vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫（navigation-guards）。 导航守卫（navigation-guards）这个名字，听起来怪怪的，但既然官方文档是这样翻译的，就姑且这么
阅读全文
摘要：首先我们要明白一个前提，CommonJS模块规范和ES6模块规范完全是两种不同的概念。 CommonJS模块规范 Node应用由模块组成，采用CommonJS模块规范。 根据这个规范，每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。 Commo
阅读全文
摘要：【一】分类 导航守卫分为：全局守卫、路由独享守卫、组件守卫三种 【二】全局守卫 指路由实例上直接操作的钩子函数，他的特点是所有路由配置的组件都会触发，直白点就是触发路由就会触发这些钩子函数，如下的写法。钩子函数按执行顺序包括beforeEach、beforeResolve（2.5+）、afterEa
阅读全文
摘要：【重点】 history与hash路由的区别 hash前端路由，无刷新 history 会去请求接口 vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。 如果不想要很丑的 hash，我们可以用路由的 hi
阅读全文
摘要：除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。 【语法】 .
阅读全文
摘要：审查代码，查看激活类名 （1）设置激活类名样式 （2）也可以在路由文件里配置激活类名的别名 （3）配置别名后再次审查，如下所示 此时可以直接配置active类名样式即可 此时便可以实现路由高亮效果 .
阅读全文
摘要：【步骤】 （1）路由配置 或者 （2）传递参数 或者 （3）接收传递参数 或者 【二】步骤小结 【三】参数形式 （1）上面这种是/100形式传递过去 （2）另外还有?count=100的格式，这便是get传值，如下所示，看【四】 【四】get传值 除了路由传值，也可以使用get传值 获取get传值
阅读全文
摘要：（1）公共路由裁减 不是每个页面都存在导航，所以不要把导航组件在根组件APP.vue里引入，哪个页面需要，在哪里引入即可。 方案： 哪个页面需要，在哪个页面引入即可 （2）嵌套路由 注意：children下的path无需/，它会自动补全匹配 接下来在相应页面渲染二级嵌套路由即可 （3）嵌套路由重定向
阅读全文
摘要：【一】步骤 （1）新建导航组件 （2）根组件引入 （3）也可以动态传递url 【注意】 （1）a链接与router-link对比 （2）其他写法 .
阅读全文
摘要：（1）传统开发模式MVP 案例：jQuery操作-面向对象 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-compatible" content="IE=Edg,chrome=1"> <meta
阅读全文
摘要：数据来源方式： 为什么要用mockjs 实际开发中，前后端分离，前端需要后端的接口去完成页面的渲染，但是并不能等到后端成员写完接口再开始进行测试。大部分情况下，前后端需要同时进行开发。因此便需要mockjs制造随机数据来进行后端接口模拟。看了官方文档之后一脸懵逼，这些都是什么鬼？？？？？因此总结了一
阅读全文
