一只前端小白的博客

基于原生js封装ajax（回调函数） const $ = { //get请求 get:function(url,fn){ let xhr = new XMLHttpRequest(); xhr.open('get',url,true); xhr.onreadystatechange=function(){ if(xhr.readyState===4&&amp...

解决问题：回调地狱（callback hell）引用很经典的一张图，可以看出回调地狱带来的不友好的书写方式

sticky（粘性定位）解释：粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。设置该属性的元素并不脱离文档流，仍然保留元素原本在文档流中的位置。使用sticky实现固定导航头部在以前，我们实现的主要思路就是使用js监听页面滚动事件，然后判断导航距离顶部的距离，为其动态添加position:fixed属性，这样写起来相对麻烦，并且实现的效果也不...

查看当前仓库的状态$ git status例如：下述代码表示，当前文件被修改过，但是还没提交C:\Users\Simple\Desktop\gitdir>git statusOn branch masterChanges not staged for commit: (use "git add <file>..." to update what will be c...

将属性作为变量使用.test{ color:#000; background-color:$color;}//编译后.test{ color:#000; background-color:#000;}//与变量一样，less在选择属性时，会将最后一个作为“最终”值.test{ color:#000; .inner{ background-color:$color;...

vue声明式渲染：采用模板语法来声明式的将数据渲染进Dom<div id="app"> <h1>{{msg}}<h1></div>new Vue({ el:"#app", data:{ msg:"hello Vue", }});//渲染结果会将h1中的文本渲染成hello Vue指令：v-bind指令（简写为“:”）：用...

首先什么是版本库呢？版本库又名仓库，英文名repository，相当于就是一个目录，这个目录里面的所有文件都可以被Git管理起来，每个文件的修改、删除，Git都能跟踪，以便任何时刻都可以追踪历史，或者在将来某个时刻可以再还原。开始创建版本库第一步：我们可以随意选择（创建）一个目录//创建一个目录（文件夹）$ mkdir test//切换到当前工作目录下$ cd test第二...

前言：网站访问速度的重要性：网站的访问速度直接关乎网站的用户体验，对于一般的用户而言，如果网页打开响应时间过长，大部分用户都会选择离开，响应速度过慢甚至关乎一个网站的建设的成败！那么我们该怎么样来提升网站的访问速度呢？

什么是less?Less是一门CSS预处理语言，它扩展了CSS语言，增加了变量，Mixin，函数等特性，使CSS更易维护和扩展。更少可以运行在Node或浏览器端安装：安装Less的最简单方法是通过npm，node.js包管理器$ npm install -g less命令行用法：//命令行调用编译器$ lessc styles.less//输出编译的CSS$ lessc s...

理论基础：什么是rem?（fontsize of the root elelment）说白了就是字体单位，是指相对于根元素的字体大小的单位。rem的优点：相对于流式布局、响应式布局等布局方式，rem更为灵活，可以根据根不同屏幕尺寸上的根元素来等比例适配。rem的基准值（根元素的字体大小）而网页的根元素就是html,所以我们只需要改变html的字体大小，就可以改变rem的基准值。既然re...

理论基础：适配问题：屏幕尺寸不一样解决方案：百分比，自适应布局，叫做流式布局，同时还需要对移动端的viewport视口进行设置才能达到目的流式布局的特点：非固定像素，内容向两侧填充视觉窗口：viewport是移动端特有的，看成是一个虚拟的区域，用来承载网页，其关系：浏览器承载viewport,而viewport承载网页适配方案的要求：1、网页的宽度必须与浏览器保持一致2、默认显示的...

理论基础：绘制饼状图之前，需要对操作canvas的方法有一定的了解绘制的过程中还会涉及到数学中的弧度计算和三角函数…分析：1、确定从圆心伸出去的线=半径+伸出去的距离(自定义)2、对边 即y轴方向的长度=斜边* sin(角度)3、临边 即x轴方向的长度=斜边 * cos(角度)4、伸出去点的横纵坐标x=原点横坐标+(半径+超出饼状图的长度)*cos(角度)y=远点纵坐标+(半径...

理论基础：掌握canvas绘制圆形，以及绘制扇形的弧度计算（涉及三角函数），掌握canvas的动画基础和绘制图片》了解更多&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&

理论基础：掌握使用canvas绘制线条和圆形以及绘制文字实现思路：先构建一个画布，设置一定的宽高（在canvas中设置和在style中设置是有区别的，建议直接在canvas标签中设置），封装一个生成随机数的方法，为线条和圆形的绘制设置随机的位置，既然是随机的，必然是有随机的区间，先获取画布的宽高，线条和圆的位置就是（0~画布的宽高区间）的随机位置，再定义一个随机字符，获取随机的索引值，即可...

1、script中直接引入引入之后vue会被注册为一个全局变量注：建议在开发时不要使用压缩版本，这样会没有错误的提示2、使用NPM安装$ npm install vue//简写为$ npm i vue

在小程序中该如何使用字体图标？以下Font Awesome为例1、第一步：我们需要进入Font Awesome官网下载字体图标的文件2、第二步：我们需要用到一个Transfonter生成工具。打开刚才下载的文件，在fonts文件夹找到fontawesome-webfont.ttf打开Transfonter官网，将fontawesome-webfont.ttf上传，选择base64编码，然...

有时候合并分支并非一帆风顺，那么出现冲突怎么解决呢？首先我们创建一个新的分支test$ git checkout -b testSwitched to a new branch 'test'在test分支下新建一个文件index.txt，并输入一些内容#新建一个index.txt文件$ cd .>index.txt#编辑内容为hello vue$ vim index.tx...

前言：之前我们都是在master主分支上操作的，其实Git是可以创建多个分支的，那么多个分支又该如何操作呢？创建分支git checkout -b 自定义分支名$ git checkout -b devSwitched to a new branch 'dev'#-b表示创建并切换到当前分支创建完成，查看当前分支git branch$ git branch* dev ma...

什么是工作区：就是我们平常可以看到的目录版本库（Repository）：在创建git仓库之后，此时文件夹下会自动生成一个.git目录，这个就是版本库，但不是工作区暂存区：版本库中会生成很多东西，其中最重要的就是称为stage（或者叫index）的暂存区，还有Git为我们自动创建的第一个分支master，以及指向master的一个指针叫HEAD例如：我们对已有的文件进行更改Simple@...

当我们在本地创建了Git仓库，我们如何和github仓库远程同步呢？1、首先需要在github中创建一个仓库1.1、填写仓库信息2、完成创建后就可以将本地的git仓库和github上的仓库关联了#注意：这里的地址要改成自己的地址$ git add remote origin git@github.com:SimpleZGJ/Vue-demo.git#查看当前关联的远程主机地址$...

为什么Git比其他版本控制系统设计得优秀？因为Git跟踪并管理的是修改，而非文件修改：比如新增了一行、删除了一行、更改了某些字符，这些都是一个修改为什么说Git跟踪管理的是修改？这时候，可以做个实验证明，例如修改某一文件（下述test.txt）内容然后将修改后的test.txt文件添加到暂存区Simple@Simple MINGW64 ~/Desktop/gitdir (mas...

本地模拟跨域编辑本地‪hosts文件(C:\Windows\System32\drivers\etc\hosts)可以新增两个域映射到本机地址127.0.0.1例如：127.0.0.1 a.test.com127.0.0.1 b.test.com测试跨域请求function crossAjax(){ let url="http://a.test.com:63342/模拟跨域/...

在Vue中提供了多种过度动画效果在 CSS 过渡和动画中自动应用 class可以配合使用第三方 CSS 动画库，如 Animate.css在过渡钩子函数中使用JavaScript 直接操作 DOM可以配合使用第三方 JavaScript 动画库，如 Velocity.js在Vue项目中，我们可以使用Vue封装的transition组件，这样就可以为任意元素和组件添加过度和动画先...

什么是Git?Git是目前世界上最先进的分布式版本控制系统版本控制系统又分分布式和集中式集中式：版本库是集中存放在中央服务器的，集中式版本控制系统最大的毛病就是必须联网才能工作。分布式：分布式版本控制系统没有“中央服务器”，每个人的电脑上都是一个完整的版本库，这样工作的时候，就不需要联网了。和集中式版本控制系统相比，分布式版本控制系统的安全性要高很多。因为每个人电脑里都有完整的版本库，如...

首先需要对监听的组件添加相对定位一般我们监听的都是body，所以直接给body一个相对定位 body { position: relative;}给监听的组件添加 position: relative; 之后，通过 js代码启动滚动监听插件$('body').scrollspy({ target: '链接标签的id/类名' })实例：

首先，什么是 HTML 本地存储？本地存储（LocalStorage），web 应用程序可以将用户在浏览器中输入的数据进行本地储存。html本地存储：优于cookies在h5出来之前，数据只能储存在cookie中，本地储存相较于cookie更加安全，并且本地存储限制要大得多（至少5MB）&amp;gt; 关于html5的本地储存对象：window.localStorage 存储永久数据win...

思路：给定一个数组，储存每张图片的位置，旋转将位置进行替换左旋转：将数组第一个数据删除，然后添加到数组的最后右旋转：将数组最后一个数据删除，然后添加到数组的开头先附上效果图，再来实现接下来就是最主要的，封装原生js动画函数//封装函数获取任意一个元素的任意属性的值（兼容ie8）function getStyle(element, attr) { return wind...

原型链的定义：什么是原型链？就是实例对象和原型链对象之间的关系，是通过__proto__原型来联系的原型链指向哪里？实例对象中有__proto__原型构造函数中有prototype原型prototype中也有__proto__原型，指向了&gt;&gt;&gt;系统构造函数例子

理论基础：需要获取元素的任意css属性值getComputedStyle(element,null)，支持谷歌，火狐element.currentStyle，支持ie8//获取任意css属性值（兼容性代码）function getStyleAttr(element,attr){ return window.getComputedStyle?window.getComputedStyl...

基础理论顶级对象：文档对象document元素：页面上所有的标签节点（node）页面上所有的内容（标签，属性，文本（文字，换行，空格））node根节点：html节点的属性：.nodeType:节点的类型：1&gt;&gt;&gt;标签 2&gt;&gt;&gt;属性 3&gt;&gt;&gt;文本.nodeName:节点的名字：大写的标签名字&gt;&gt;&gt;标签节点 ，小写...

主体内容附上主体代码，样式就省略了&lt;body&gt; &lt;div class="wrap"&gt; &lt;div class="top"&gt; &lt;ul&gt; &lt;li style="background:orange"&gt;电影&lt;/li&am

Web API基础理论js的三部分1、ECMAScript js的基本语法2、DOM 文档对象模型，操作的是页面的元素3、BOM 浏览器对象模型，操作是浏览器文档：html文件，由于万物皆对象，这个文档也可以看成一个对象页面中的每一个标签都是一个元素节点（节点）：页面中所有的元素都是节点，标签 文本 属性根节点（node）:html由文档中所有的元素组成的树形结构图...

理论基础：先介绍创建对象的三种方式1、字面量的方式2、调用系统构造函数3、自定义创建对象 //使用自定义构造函数创建对象 function Peroson(name,age){ this.name=name; this.age=age; this.eat=function () { console.log("吃火...

由于没有后台数据，用数组模拟一下后台返回的数据&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-sc

绑定/解绑事件为元素绑定事件对象.addEventlistener(事件的类型，处理函数，false)参数一：参数类型：事件的类型&gt;&gt;&gt;事件的名字，没有on参数二：事件的处理函数&gt;&gt;&gt;匿名函数/命名函数参数三：布尔值，目前写false,默认值是false(可写可不写)对象.attachEvent(“有on的事件类型”,事件的处理函数)，完美支持ie...

String对象常用的属性和方法length 字符串的长度charAt(索引) 返回值是指索引位置的字符串，索引值超出了，返回空字符串concat(字符串一，字符串二…) 返回拼接后新的字符串，用变量去调用indexOf(要查找的字符串，从某个位置开始即索引值) 返回的是这个字符串的索引值（找到的第一个），找不到则返回-1replace(“原来的字符串”,“替换的字符串”)sl...

常用的Date对象的方法//获取年份console.log(dt.getFullYear());//获取月份console.log(dt.getMonth());//获取日份console.log(dt.getDate());//获取时console.log(dt.getHours());//获取分console.log(dt.getMinutes());//获取秒con...

首先，我们要清楚什么是闭包？闭包的概念：函数a中有一个函数b,而这个函数b可以访问函数a的变量，此时就形成的闭包即 闭包就是能够读取其他函数的内部的变量闭包就是函数内部和函数外部链接起来的桥梁 function f1(){ var num=100; function f2() { console.log(num); ...

理论基础：正则表达式：也叫规则表达式，按照一定的规则组成一个表达式作用：匹配字符串的组成：由元字符或者限定组成的一个式子常用元字符：

理论基础：什么是Flex 布局？Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。使用时需要将指定的容器添加display:flexFlex 布局常用属性：