- 博客(52)
- 收藏
- 关注
RSS订阅原创 Ajax前端网络
封装Ajax原理：1、浏览器2、ajax对象3、ajax.open(method,url,true); 发送请求4、ajax.send();5、onreadystatechage 监听事件6、status == 200 403 503//封装兼容函数，Ajax函数 ajaxFunc(method, url , data, callback, flag) function ajaxFunc(method, url, data, callback, flag) { var xhr =
2020-10-21 16:58:15
110
原创 Flex布局（弹性盒子布局）
Flex布局（弹性盒子布局）开启 flex 布局：display:flex;行内元素开启flex布局：display: inline-flex;容器属性flex-direction 决定主轴方向flex-wrap 定义项目在一条主轴上排列不下该如何排列flex-flow 是flex-direction和flex-wrap的复合写法justify-content 定义项目在主轴上的对齐方式align-items 定义项目在交叉轴上的对齐方式align-content 定义多条轴线的对齐
2020-10-03 22:23:51
243
原创 JavaScript克隆 JSON方法
JavaScript克隆 JSON方法JSONJSON对象包含两个方法: 用于解析JSON格式字符串将其转换成对象的 parse() 方法，以及将对象/值转换为 JSON字符串的 stringify() 方法深度克隆遍历对象法遍历对象 for(var prop in obj)判断是不是原始值 typeof() object判断是数组还是对象 instanceof toString constructor建立相应的数组或对象递归//深度克隆function deepClone(ori
2020-09-29 15:04:05
1667
原创 Promise
PromisePromise MDN实例对象和函数对象的区别实例对象： new 函数产生的对象,称实例对象简称对象函数对象：将函数作为对象使用时，简称函数对象两种类型的回调函数同步回调：立即执行，执行完了才结束，不会放入回调函数队列异步回调：不会立即执行，会放入回调函数队列中将来执行JS的error处理Error MDN错误类型Error:所有错误的父类型ReferenceError:引用的变量不存在TypeError:数据类型不正确RangeError:数据值不再其允许的
2020-09-24 23:43:07
98
原创 ES6新增
ES6新增作用域作用域是变量所作用的区域，也叫执行期上下文块级作用域let 声明的变量具有块级作用域，不存在变量提升，不能重复声明，声明之后绑定当前作用域const 声明定义的是常量，具有let声明的特性；conset声明指向的是内存中的地址，所以它定义的原始值不能改变，引用值可以改变变量的解构赋值数组的解构赋值 实质是模式匹配数组解构赋值//解构成功，左右两边迭代器要相同即两边都是数组或者两边都是对象let [a,b,c] = [1,2,3];console.log(a,b,c);
2020-09-24 20:19:02
330
原创 数组、字符串、对象、类数组、typeof
数组、字符串、新增对象方法数组中常用方法改变原数组 在原数组上操作.push(num1,num2,num3...)在数组的最后添加数据.pop( )把数组最后一位剪切.shift( )把数组的第一个元素从其中删除，并返回第一个元素的值。.unshift(num1,num2.. )向数组开头添加一个或更多元素，并返回新的长度。.reverse( )将该数组反序.splice(从第几位开始,截取多少长度,在切口添加新的数据1,在切口添加新的数据2...).sort( )根据asc码排升序，提供
2020-09-24 14:51:08
735
原创 JS模块化
JS模块化前端模块化具有相同属性和行为的事物的集合。在前端中，将一些属性比较类似和行为比较类似的内容放在同一个js文件里面，把这个js文件称为模块，为了每个js文件只关注与自身有关的事情，让每个js文件各行其职。模块要有几个特点： 独立、完整、依赖关系CommonJs根CommonJs规范，每一个文件就是一个模块，其内部定义的变量是属于这个模块的，不会对外暴露，也就是说不会污染全局变量。该规范最初是用在服务器端的node的，前端的webpack也是对CommonJS原生支持的。CommonJS
2020-09-22 21:57:15
1980
原创 HTML5常用知识点
HTML5常用知识点HTML5属于上一代HTML的新迭代语言，设计HTML5最主要的目的是为了在移动设备上支持多媒体例如： video 标签和audio 及 canvas 标记新特性：取消了过时的显示效果标记 <font>和 <center>新表单元素引入新语义标签的引入canvas标签（图形设计）本地数据库（本地存储）一些API新语义标签header：定义了文档的头部区域footer：定义文档页脚，它不只是页面的最底部，在文档中也可以定义多个arti
2020-09-18 18:24:01
187
原创 盒子模型
盒子模型标准盒模型 box-sizing: content-box;怪异盒模型 box-sizing: border-box;标准盒模型：元素style的width等于**内容区域**的宽度怪异盒模型：元素style的width等于**内容区域+padding+border**的宽度flex弹性盒模型column多列布局答：其实我们常用的是标准盒模型，它的width是指的内容宽度，盒子的宽高是内容+padding+border，但是我在做项目的是时候给盒子加border就会让盒子变大要重新计算
2020-09-18 12:22:27
118
原创 CSS3过渡、动画和形变
CSS3过渡和动画详情：http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html过渡transition.item { /*transition: 过渡时间 延迟时间 目标属性 过渡速度；可用‘，’同时指定多个属性变化*/ transition: 1s 1s height linear, 1s width;}单独定义： transition-property: height; transitio
2020-09-18 12:13:42
129
原创 两栏布局和三栏布局
两栏布局和三栏布局两栏布局<div class="wrapper"> <div class="left">我是文字测试君</div> <div class="right">我是文字测试君</div></div>1.浮动方法float给固定宽度的一方设置浮动，给自适应的一方设置100%宽度值，用浮动控制左右宽固固定或自适应<style> .left {
2020-09-18 00:42:31
885
原创 BFC
BFCBFC 定义BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。哪些元素会生成BFC?根元素float属性不为noneposition为absolute或fixeddisplay为inline-block, table-cell, table-caption, flex, inline-flexoverf
2020-09-17 23:28:36
59
原创 清除浮动 clear float
清除浮动 clear float清除浮动.wrapper::after { content: ''; display: block; clear: both; }清除浮动和边框塌陷.wrapper::after,.wrapper::before { content: ''; display: block; }.wrapper::atter { c
2020-09-17 21:19:55
538
原创 Flex布局（弹性盒子布局）
Flex布局（弹性盒子布局）详情：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html开启 flex 布局：display:flex;行内元素开启flex布局：display: inline-flex;容器属性flex-direction 决定主轴方向flex-wrap 定义项目在一条主轴上排列不下该如何排列flex-flow 是flex-direction和flex-wrap的复合写法justify-content 定义项目
2020-09-17 20:45:36
282
原创 requestAnimationFrame 客户端存储 历史记录 worker
requestAnimationFrame1、页面刷新前执行一次2、1000ms 60fps -> 16ms3、cancelAnimationFrame4、用法和 setTimeout类似5、兼容性requestAnimationFrame(f)cancelAnimationFrame(id)//requestAnimFramewindow.requestAnimFrame = (function(){return window.requestAnimationFrame ||w
2020-09-06 23:02:17
146
原创 Git日常应知应会
初始化git init（初始化git）vue-cli创建项目时可选择自动初始化git status (检查)git add .(全部提交到本地仓库缓存区)git commit -m "提交说明" (全部保存到本地仓库)再次git status没问题就进行下一步创建远程仓库GitHub/码云关联本地与远程仓库（远程仓库地址：关联到哪个地址上传到哪里）保存提交到远程仓库开新分支每次更新项目就创建一个新的分支git checkout -b newname(分支名）查看当前所有分支git
2020-09-06 22:26:36
71
原创 HTML5应知应会
HTML5什么是HTML5？HTML5 的概念与定义定义：HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，号称下一代的 HTML两个概念：是一个新版本的 HTML 语言，定义了新的标签、特性和属性拥有一个强大的技术集，这些技术集是指： HTML5 、CSS3 、javascript, 这也是广义上的 HTML5HTML5 拓展了哪些内容语义化标签本地存储兼容特性2D、3D动画、过渡CSS3 特性性能与集成HTML5 新增
2020-09-04 22:48:01
133
原创 CSS3应知应会
CSS3兼容手册：http://www.runoob.com/cssref/css3-browsersupport.html兼容写法：新增样式:圆角、阴影border-radius: 20px; box-shadow: 10px 5px 4px red;渐变背景色、断点换行、开发者自备字体线性渐变：linear; background: linear-gradient(90deg,red 10%, green 100%);径向渐变：radial; background: radial-gr
2020-09-04 22:47:01
123
原创 CSS应知应会
css的作用添加页面样式，美化页面css的引入方式行间样式、内嵌样式、外链样式css选择器基础选择器ID选择器：# 权重：100类选择器：. 权重：10元素选择器：div 权重：1通配符选择器：* 权重：0css复合选择器后代选择器 ul li子元素选择器 ul>li交集选择器 li.red 选中即是li元素，又带有red类名的元素并集选择器 div, ul, .red 同时选中这三个元素伪类选择器 :hover链接伪类选择器a:lin
2020-09-04 11:33:13
396
原创 HTML应知应会
web标准构成：解构、样式、行为HTML超文本标记语言<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body></html>标签元素双标签单标签标签语义化常用标签排版标签：h1-h6 p <
2020-09-03 22:56:46
126
原创 jQuery应知应会
什么是jQuery？jquery是JavaScript的一个库，是一个封装好的特定的集合主要是为了快速操作DOM，里面基本上是函数方法移动端是用zepto，简化版的jquery，新增了一些移动端api它的宗旨是“写的更少，做的更多”“write less, do more”jQuery的优点是什么？轻量级的库只有几十kb跨浏览器兼容链式编程，隐式迭代对事件、样式、动画支持，大大简化了DOM操作支持第三方插件：如树形菜单、日期控件、轮播图免费、开源如何使用jQuery？页面引
2020-09-03 17:51:04
164
转载 vue基础组件的自动化全局注册
vue基础组件的自动化全局注册可能你的许多组件只是包裹了一个输入框或按钮之类的元素，是相对通用的。我们有时候会把它们称为基础组件，它们会在各个组件中被频繁的用到。所以会导致很多组件里都会有一个包含基础组件的长列表：import BaseButton from './BaseButton.vue'import BaseIcon from './BaseIcon.vue'import BaseInput from './BaseInput.vue'export default { compon
2020-08-12 15:05:18
285
1
原创 简单模拟Vue虚拟DOM
简单模拟Vue虚拟DOM <script> // 简单模拟Vue虚拟DOM function vElement(tageName, prop, children) { //判断调用者是否为vElement的实例 if(!(this instanceof vElement)) { return new vElement(tageName, prop, children)
2020-08-10 17:36:17
187
原创 vuex 数据管理
数据管理 {ignore}在实际的开发中，经常会遇到多个组件共享一个数据的场景面对这种场景，会产生至少以下两个问题：多个组件如何共享同一份数据？如果某个组件修改了数据，如何让其他组件知道？面对这种问题，一个可行的解决办法，就是让数据提升所谓数据提升，就是把数据提升到更加顶层的组件，让顶层的组件通过属性下发数据，而当组件想改变数据的时候，又通过事件一层层向上传递使用这种方式，虽然可以解决问题，但是带来了更多的问题：书写特别繁琐依赖极其混乱：某些组件本来并不需要一些数据，但是由于它的
2020-08-01 15:57:12
298
原创 vue路由 vue-router 应知应会
vue路由一个站点由很多页面组成，需要在不同的页面之间切换在vue中，可以把每个页面看作是一个组件，页面的切换，实际上就是组件的切换显示除了可以手动的实现组件切换，还可以利用vue路由安装vue路由的核心功能，就是根据不同的页面地址，切换到不同的组件进行显示要实现这一点，需要用到vue-router库在页面上引入vue-router库创建一个VueRouter对象vue-router库提供了一个构造函数VueRouter，通过它可以创建一个对象var router = new Vu
2020-08-01 15:54:03
196
原创 vue组件事件、组件插槽、v-model
深入组件 {ignore}属性约束参考官网描述组件事件组件之间经常都会发生消息的传递，我们称之为组件通信prop是组件通信的一种，消息从父组件传递到子组件但还有一些场景，就是子组件中发生了一件事，可是它没有能力处理这件事，需要使用它的人来处理，此时，就需要事件 event例如，倒计时组件停止了，可是停止之后干嘛呢？在不同的场景要做不同的事情，可能什么也不做，可能在页面上显示倒计时结束了，也可能把计时器组件销毁掉，也可能另一个组件会变化？无论是哪种情况，都超出了计时器组件的控制能力所以，计时
2020-07-30 12:53:36
296
原创 vscode中，vue模板字符串``中自动闭合html标签及提示
vscode中，vue模板字符串``中自动闭合html标签及提示按F1打开搜索栏并清空输入：settings.json添加如下代码即可 "emmet.triggerExpansionOnTab": true, "emmet.showAbbreviationSuggestions": true, "emmet.showExpandedAbbreviation": "always", "emmet.includeLanguages": { "javascript":
2020-07-29 00:40:28
2612
3
原创 vue组件
vue组件知识准备ES6的模块化知识ajax网络请求fetch apipromise apiasync awaitajax请求地址：http://yuanjin.tech:5005/api/movie?page=页码&limit=页容量组件概念一个完整的网页是复杂的，如果将其作为一个整体来进行开发，将会遇到下面的困难代码凌乱臃肿不易协作难以复用vue推荐使用一种更加精细的控制方案——组件化开发所谓组件化，即把一个页面中区域功能细分，每一个区域成为一个组件
2020-07-27 17:13:17
113
原创 vue入门
vue入门前言能够使用vue开发大部分应用的常见功能对vue的核心原理有一定认识需要的知识html+css知识javascript知识部分ES6知识（本节课需要用到字符串模板、速写方法、速写属性）vue是什么？vue的官网：https://cn.vuejs.org/vue是一个渐进式的javascript框架渐进式：vue可以和其他传统（比如jquery）前端技术融合，这意味着你可以向已有工程中逐步植入vue，而无须全部重写javascript框架：基于JS语言书写而成的框架
2020-07-27 00:36:47
84
原创 主流浏览器及其内核
主流浏览器及其内核IE TridentChrome Webkit/blinkSafari WebkitFirefox GeckoOpera Presto
2020-07-27 00:32:04
62
原创 date( )日期对象 定时器
date( )日期对象 定时器var date = new Date( );var time = date.getTime( );/new Date( ).getTime( );定时器定时器是全局对象window上的方法，内部函数this指向window //每隔1000毫秒就执行一次内部代码 setInterval(function () {}, 1000); var timer = setInterval(function () {
2020-07-05 22:41:53
280
原创 ES5严格模式
ES5严格模式浏览器基于es3和es5的新增方法执行js代码es3和es5产生冲突的部分如何解决？默认使用es3方法，主动开启es5严格模式后，它们的冲突部分使用es5方法启用es5严格模式//写在页面的最顶端，启动的是全局es5严格模式//写在函数内部的最顶端，启动的是局部es5严格模式（推荐）“use strict”;不再兼容es3的一些不规则语法。使用全新的es5规范就是一行字符串，不会对不兼容严格模式的浏览器产生影响不支持 with , arguments.callee , fu
2020-07-05 22:40:13
93
原创 代码调试 try....catch 错误信息
代码调试 try…catch 错误信息//在try里面发生错误，不会执行错误后的try里的代码，try外面代码继续执行//try里代码不出错catch里代码不会执行,出错则执行catchtry{ console.log('a') console.log(b) console.log('c')}catch(e) { //error error.message error.name ---> errot console.log(e.name + '' + e.message);}con
2020-07-05 22:38:32
574
原创 对象、对象枚举、包装类
创建对象1.对象字面量/对象直接量var obj = {key : value,name : ‘king’,}2.构造函数系统自带的构造函数 new Object( )var obj = new Object( );obj.name = ‘king’;obj.age = 20;自定义构造函数 名字使用大驼峰 function Car(color) { this.color = color; this.name = 'BMW
2020-07-05 22:37:14
131
原创 数组、类数组、typeof 类型转换
数组的定义字面量 var arr = [1,2,3,a,g,d,first,undefined…];构造方法 var arr = new Array(length/content);数组的读写arr[num]arr[num]数组中常用方法改变原数组 在原数组上操作.push(num1,num2,num3…) 在数组的最后添加数据.pop( ) 把数组最后一位剪切.shift( ).unshift(num1,num2,num3… ) 在数组的前面添加数据.reverse( ) 将该数组
2020-07-05 22:32:18
915
原创 if、switch与for 三目运算符
if判断语句 if (条件) { 满足条件执行的语句 } else if 要条件互斥 if (条件) { 满足条件执行的语句 } else if (条件) { 满足条件执行的语句 } else { 以上条件都不满足时执行的语句 }弹窗输入框： var n = parseInt(window.prompt(‘inpu
2020-07-05 22:25:29
443
原创 JS克隆
克隆深度克隆遍历对象 for(var prop in obj)判断是不是原始值 typeof() object判断是数组还是对象 instanceof toString constructor建立相应的数组或对象递归 function deepClone(origin, target) { var target = target || {}, toStr = Object.prototype.toString,
2020-07-05 22:17:26
107
原创 this、arguments call 和 apply
this函数预编译过程 this ——> window全局作用域里 this ——>windowcall/apply 可以改变函数运行时this指向obj.func( ); func( )里面的this指向objargumentsarguments.callee //找到函数的引用 就是函数的名字func.callercall 和 apply 改变this指向改变this指向call和apply的区别是传参列表不同call 需要把实参按照形参的个数传进去apply 需要传
2020-07-05 22:13:50
120
原创 闭包、作用域、作用域链、立即执行函数
闭包、作用域、作用域链、立即执行函数js运行三部曲：通篇扫描 语法分析任何未经声明就赋值的变量和全局变量都归window所有预编译预编译发生在函数执行的前一刻预编译四部曲：函数创建AO 全局创建GO 过程一样创建AO对象（AO执行期上下文）找到形参和变量声明，将它们作为AO属性名，值为undefined将实参和形参统一在函数体里找函数声明，值赋予函数体解释执行作用域、作用域链[[scope]]指的是作用域，其中储存了运行期上下文的集合。每个js函数都是一个对象，就有些可以访问有些
2020-07-05 22:11:08
133
原创 命名空间
命名空间管理变量，防止污染全局变量，适用于模块化开发。 var init = (function () { var name = 'abc'; function callName() { console.log(name); } return function () { callName(); }
2020-07-05 22:01:22
60
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人