- 博客(36)
- 收藏
- 关注
RSS订阅原创 Vue----组件化开发
组件化开发:1. 问题: 使用Vue.component()创建的组件，可在程序的任何位置使用，毫无限制!2. 原因: Vue.component()创建的组件，叫全局组件！可以在项目的任何位置随意使用的组件。3. Vue中共包括3种组件:(1). new Vue() —— 根组件，一个页面甚至一个项目中只有一个根组件！(2). Vue.component() —— 全局组件，如果我们希望一个功能可以在程序的任何页面，任何位置都能使用时，就创建全局组件！(3). 子组件:a. 什么是: 被限制
2021-02-28 14:13:18
216
1
原创 vue对象生命周期
vue对象生命周期:1. 什么是: 一个VUe对象从创建到所有页面内容加载完成所经历的过程2. 包括: 4个阶段:(1). 创建 create 必经a. 创建new Vue()对象，在new Vue()对象中创建data对象并请保镖b. 暂时不扫描DOM树，暂时没有虚拟DOM树(2). 挂载 mount 必经a. 扫描DOM树，生成虚拟DOM树，并首次挂载数据到页面元素上(3). 更新 update 当data中的变量被修改时才触发 (4). 销毁 destroy 还有调用$destroy
2021-02-28 13:55:46
495
原创 vue----Axios
Axios:1. 什么是: 专门在各种平台都能发送ajax的基于promise的函数库2. 为什么: jQuery不是已经又.ajax()今后框架开发，几乎不用jquery的。仅仅为了使用一个函数.ajax() 今后框架开发，几乎不用jquery的。仅仅为了使用一个函数.ajax()今后框架开发，几乎不用jquery的。仅仅为了使用一个函数.ajax()发送ajax请求，就把包含几十个上百个函数的jQuery函数库引入进来，极其不划算！今后其它非jquery的前端框架，急需要一种专门发送ajax请求
2021-02-28 13:39:27
187
1
原创 Vue----计算属性
计算属性：1. 什么是: 自己不实际保存属性值，每次使用属性时，都临时根据所依赖的变量动态计算出结果应用到页面上。2. 何时: 如果一个属性值不是现成的，需要经过复杂的计算过程才能获得，都要用计算属性3. 如何:(1). 在new Vue()中添加新成员:new Vue({el:"#app",data:{ … },methods:{ 事件处理函数 },computed:{ 专门保存计算属性属性名(){return 根据其他变量动态计算出新属性值}}})(2). 使用计算属性:
2021-02-28 13:02:12
355
原创 Mvvm----虚拟Dom树
Mvvm:model view viewModelmvvm设计模式：对前端代码的重新划分一、旧的前端代码分为三部分：html：专门保存网页的内容和结构css：专门为网页中的元素添加样式js：专门为网页中的元素添加交互效果问题：a.因为html和css都是静态语言，缺少标准的程序语言必须的要素b.页面上所有的琐碎都要修改，都要依赖js来实现，导致js代码及其冗余，且重复大量劳动二、新的mvvm将代码分为了3部分：1.界面(view)：包括以前的html+css，还增强了html的功能a
2021-02-15 21:48:43
190
原创 vue
vue:第三方开发的基于mvvm设计模式的渐进式的纯前端js框架渐进式：可以在项目中逐步引入 vue相关功能，很容易和其他技术混搭框架：已经包含核心功能的半成品前端程序编写界面：整个界面必须包裹在一个唯一的父元素内，找到界面中可能发生变化的位置，用{{}}临时占位找到界面中可能触发事件的元素，用@事件名="自定义处理函数名"标记出来定义两个仓库对象，叫data和methodsdata专门保存界面上所需的所有变量和初始值methods专门保存界面上所需的所有事件处理函数 new Vue({
2021-02-15 21:15:32
44
原创 observer----观察者模式
observer----观察者模式：当一个变量值被修改时，可以自动通知所有关注这个变量的其他对象，让他们自动重新获得这个变量的新值。vue里是怎么样发出的通知，用观察者模式发出的通知。比如：大家都关心的变量money=1000，有一个数组观察者们，一个函数用于修改Money的值，只要Money的值被修改，所有关注这个变量的观察者们都可以得到消息。data对象，专门保存所有人关注的数据和操作方法，只不过需要额外定义一个数组，保存所有关注这个数据的其他对象。1.创建data对象2.定义Money3
2021-02-15 20:49:49
160
原创 页面加载后自动执行
页面加载后自动执行：1.页面中很多数据都需要在页面加载完成，就自动发送ajax请求，填充到页面，无需用户手动操作。有些元素的事件处理函数，也是在页面加载完成后，自动绑定上的。2.解决：由于页面是顺序加载的，希望页面加载自动执行的代码，都放在body结尾的script中。3.将js代码写在html文件中，不符合内容与行为分离的原则，不便于维护。4.今后js代码都要放在独立的js文件中，在引入HTML文件里。5.有的会放在开头，有的会放在结尾，如何保证不管放哪都可以自动执行？6.解决：把页面初始化
2021-02-14 19:29:30
1226
1
原创 DOM----给任意一个父节点，遍历出这个父节点下所有后代节点
给任意一个父节点，遍历出这个父节点下所有后代节点： 1.先定义一个函数，仅遍历直接子节点 function getChildren(parent){ var children=parent.children; //遍历children for(var child of children){ //每遍历一个子元素，就输出元素名 console.log(child.nodeName); 2.对每个子元素调用和父元素一样的遍历函数getChildren getChildren(c
2021-02-14 19:00:01
781
原创 防抖和节流
如何不让滚动，拖拽频繁的发送请求防抖：只要不是最后一次触发，就不执行异步请求。 var timer; window.onscroll=function(){ //如果timer不是空,说明前面有一个等待的请求，还未发送，就停止前面的等待 if(timer!==undefined){ clearTimeout(timer); } //在重新开始下一个等待 timer=setTimeout(function(){ //当200ms内，未发生滚动时，才发送请求 con
2021-02-14 18:53:21
88
1
原创 封装ajax请求
封装ajax请求：定义函数ajax，封装ajax4步： function ajax(){ //创建xhr对象 //绑定onreadystatechange事件处理函数 //如果有参数,将参数拼接url末尾 //打开连接(url,type) //如果是post,修改请求头 //如果是get, send() //否则 send(参数) } //url:服务端地址 //type:请求的类型get/post //data:参数可有可无 datatype:返回数据的类型,如果
2021-02-12 23:36:31
597
原创 DOM----事件
事件：1. 事件绑定: 3种:(1). 在HTML中绑定:a. html中: <元素 on事件名=“事件处理函数()”>b. js中: function 事件处理函数(){…}c. 问题: 不符合行为(js)和内容(html)分离的原则，不便于维护d. 但是: 在Vue，react等框架的开发中，这种绑定方式又回来了！（待续…）(2). 在js中用赋值方式:a. 元素对象.on事件名=function(){… …}b. 问题: 如果一个事件上可能同时绑定多个事件处理函数
2021-02-11 23:45:51
108
1
原创 事件循环事件队列
事件循环事件队列：程序执行时，先执行主程序在执行过程中，如果发现有setTimeout，setInterval，xhr.send异步调入语句，就创建外部对象 setTimeout，setInterval对象，http调用对象但因为是异步调用，所以暂不执行，只是创建对象而已。什么时候执行：定时器：当定时器等待时间结束，回调函数自己执行xhr.onreadystatechange=function(){} 当响应结果回来时执行这些异步回调函数执行时，都不能立刻进入主程序执行都应该先进入js的任务
2021-02-11 22:57:30
166
4
原创 jsonp跨域
jsonp跨域：动态创建 client.html //引入jq.js $("button").click(function(){ $ajax({ url:'http://localhost:3000', type:'get', dataType:'jsonp', success:function(result){ alert(result) } }) })如果把res.end()放到setTimeout里，可以看到函数的执行过程。 app.js
2021-02-11 22:40:42
53
1
原创 统计一个字符串每种字符出现的次数？出现最多的是哪个字，共出现几次？
计一个字符串每种字符出现的次数？出现最多的是哪个字，共出现几次？ var str="you can you up,no can no bb"; var arr=[]; for(var i=0;i<str.length;i++){ //获得当前字母 var a=str[i]; //如果arr中没有这个字母，就向arr中添加当前字母，值为1，如果有这个名称的字母，值+1 if(arr[a]===undefined){ arr[a]=1; }else{ arr[a]
2021-02-11 17:16:30
384
原创 数组去重
数组去重：一个对象中不允许有重复的下标 hash={}1. var arr=[1,2,3,1,4,2,4,5,2,3,4,2]; var hash={}; for(var i=0;i<arr.length;i++){ hash[arr[i]]=i; } var res=[]; for(res[i++] in hash); console.log(res);2.向一个数组中添加十万个元素，每个元素随机生成 var arr=[]; for(var i=0;i<10000
2021-02-11 17:08:01
62
原创 Promise
Promise:专门保证多个异步任务必须顺序执行，且解决了回调地狱问题的一项技术。回调地狱问题：由于多层回调函数的嵌套，形成的很深的嵌套结构，就称之为回调地狱。用回调函数的方式：1.第一个任务把第二个任务装起来，暂不执行，第二个任务把第三个任务装起来，也不执行。2.第一个任务最后一句话执行完毕，主动调用装有第二个任务的函数。3.第二个任务最后一句话执行完毕，主动调用装有第三个任务的函数。示例：使用回调函数解决多个异步任务顺序的执行 function liang(next){//亮哥:异步
2021-02-11 16:53:58
79
原创 Es6----class
class:集中保存一个类型的构造函数和原型对象的程序结构只要在es6中想创建一种类型时，都要用class1.用class包裹构造函数和原型对象方法2.构造函数名/类型名要提升到class后，作为整个class的名字，同时构造函数统一去掉function，更名为constructor，其余构造函数形参和内容都保持不变3.放在class中的方法，不用加类型名.prototype，默认就是放在原型对象中 class 类型名{ constructor(形参列表){ this.属性名=形参;
2021-02-11 16:35:21
90
1
原创 Es6----解构
解构：从一个大的对象或数组中仅提取出个别成员单独使用1.数组解构：从数组中提取出个别元素值，单独使用 var [变量1,变量2,...]=数组 变量1=数组[0],变量2=数组[1] var arr=[2021,1,2]; var [,m,d]=arr console.log(`${m}`);//1 console.log(`${d}`);//2不声明第三个变量，而交换两个变量的值:[a,b]=[b,a]var a=3,b=5;[a,b]=[b,a];consooe.
2021-02-11 15:05:52
103
原创 Es6----参数增强
参数增强：1.参数默认值即使调用函数时没有传入实参值，对应的形参变量也有默认值可用function 函数名(形参1=值1，形参2=值2，…）{…}a.如果调用函数时，形参变量对应的位置传入了用户自定义的实参值，则优先使用用户自定义的实参值b.如果调用函数时，形参变量对应的位置没有传入实参值，则启用默认值局限：只能解决结尾几个形参变量有没有实参值的情况，无法解决中间或开头形参变量的缺少2.剩余参数专门代替arguments来解决不确定实参值个数的问题今后：只要一个函数调用时不确定传入几个实参
2021-02-11 01:05:56
248
原创 Es6
一、模板字符串支持动态生成内容以及换行等格式的特殊字符串，今后只要字符串拼接，都要用模板字符串可以放：变量，算数计算，各种有返回值的运算，三目，有返回值的函数调用，创建对象，访问数组元素不能放：程序结构（分支，if，else，switch和循环while，for，dowhile）不能放没有返回值的js表达式或函数调用二、let代替var声明变量的关键词var的缺点：会被声明提前，打乱代码正常的执行顺序，没有块级作用域，{}代码块的变量会影响外部的代码let不会被声明提前，让if，else，
2021-02-11 00:39:41
51
原创 Es5----数组函数
数组函数：一.判断：1.every()判断数组中是否所有元素都符合要求var bool=arr.every( function (elem,i,arr) {return 判断条件} )原理：1.every中自带for循环，自动遍历.前数组中，每个元素2.每遍历一个元素，就自动调用一次回调函数3.每次调用回调函数时，都自动传入三个值如果当前元素经过回调函数判断后，返回false，则整个every不再继续向后循环，返回false，表示当前数组不是所有元素都符合要求 var arr=[1,
2021-02-10 23:50:44
155
原创 Es5----替换this
替换this：有时函数中的this不是我们想要的1.临时调用一次函数，并临时替换一次this为指定的该对象要调用的函数.call，替换this的对象其余实参值列表原理：call调用的意思，意为立刻调用函数执行一次调用时，call()的第一个实参值对象进入要调用的函数内替换this除第一个实参值对象以外，其他剩余实参值会依次传给要调用的函数的形参变量 function jisuan(base,a1,a1){ console.log(`${this.ename}的总工资是${a1+a2}`)
2021-02-10 23:23:45
115
原创 Es5----Object.create()
Object.create()：就js中想要创建一个子对象，同时继承一个父对象，只有唯一的方法，new构造函数()在没有构造函数的前提下，也想创建子对象，继承指定的父对象，就要用Object.create()1.基本用法：仅创建新对象，并自动继承父对象a. var 子对象=Object.create(父对象)；b.创建新的空对象自动设置新对象继承父对象2.完整用法：创建新对象，并自动继承父对象，还能为新对象添加自有属性 var 子对象=Object.create(父对象,{ 属性名：
2021-02-10 23:06:40
110
原创 Es5----严格模式和保护对象
一、严格模式：比普通的js运行机制要求更严格的新运行机制在当前作用域的顶部 “use strict”新要求：1.禁止给未声明过得变量赋值旧的js中：可以给未声明过得变量赋值，结果会自动在全局创建该变量，不会报错。缺点：极易造成全局变量，不便于调试程序新的js中严格模式，禁止给未声明过得变量赋值，如果强行赋值会报错。2.静默失败升级为错误3.普通函数调用中的this不再指window，而指undefined旧的js中：如果函数调用时前边既没有点，又没有new，函数中的this默认指win
2021-02-10 22:58:11
116
1
原创 原型链&&面向对象----多态
原型链：由多级父对象（原型对象）逐级继承形成的链式结构。一个对象可以访问的所有父级原型对象，以及这个对象可用点访问到的所有属性和方法。判断一个对象能否使用某一个属性和方法，唯一标准就是这个属性或方法是否保存在这个对象的原型链上。属性或方法的使用顺序：先自由，再共有，就近原则。多态：一个函数在不同情况下表现出不同的状态重写：在子对象中定义一个和父对象中成员名同名的自有成员。Student.prototype.className=“初一 二班”lilei.className=“初一 三班”-
2021-02-10 22:15:35
109
原创 面向对象----自有属性和共有属性
自有属性和共有属性：自有属性：保存在当前对象内，仅归当前对象自己所有的属性。共有属性：保存在原型对象中，归多个子对象共有的属性。如果修改自有属性：才可以用子对象.属性名=新值。如果修改共有属性：只能用原型对象修改–类型名.prototype.共有属性=属性值。内置类型对象的原型对象： js中包括11种内置类型/对象：String.Number.Boolean.Array.Date.Regexp.Math.Error.Function.Object.Global(在浏览器中被window代替)。
2021-02-10 22:00:34
555
1
原创 js----面向对象--继承
继承：将方法的定义放在构造函数中，每创建一个新对象，都会重复创建该方法一模一样的副本，浪费内存。解决：如果多个子对象都要使用一个相同的方法时，应该把这个方法放在一种原型对象中，构造函数中不再包含方法定义。原型对象：一个类型中，专门为所有子对象集中保存共有方法的对象。同一类型下多个子对象需要用一个共用的方法时，都应该将这个方法放在原型对象中。1.原型对象不同于手工创建，定义了一个构造函数，js会自动赠送一个空的原型对象。2.不用手工设置继承，new的第二步：让新创建的子对象自动继承构造函数的原
2021-02-09 15:43:58
46
原创 js----面向对象--封装
面向对象：程序中都是先用对象解构来描述现实中一个具体事物的属性和功能，然后按需使用对象中的属性和功能。为了大量数据的使用和维护封装，继承，多态一、封装 创建一个对象，集中保存现实中一个事物的属性和功能 为了大量数据的使用和维护 何时：今后只要使用面向对象，第一步都是创建对象，集中保存事物的属性和功能。 1.用 { } 创建 var 对象名={ 属性名：属性值， 方法名：function(){ this.属性名... } } 说明：方法、函数、functio
2021-02-09 15:19:00
846
原创 js----闭包
闭包：既重用一个变量，又保护变量不被更改的一种编程方法。本质：外层函数的作用域对象，被内层函数引用着无法释放，形成了闭包。今后：只要希望给一个函数保护一个专属的变量，只函数内可以反复使用，函数外无法更改这个变量，就要用闭包。如何：1.用外层函数将要保护的变量和使用这个变量的函数包裹起来。2.要想让内层函数在外部依然可用，则需要外层函数将内层函数返回到外部。3.想要获得内层函数的人，必须调用外层函数才能获得内层函数的对象继续使用。 function parent(){ var total=1
2021-02-07 10:44:26
37
原创 js---函数执行过程
函数执行过程中：1.每使用一个变量，函数都会由近到远的遍历自己的好友列表中的作用域对象。2.如果在离自己近的格子中找到了局部变量，就优先使用局部变量，不再去全局找。3.如果在离自己近的格子中没找到要用的局部变量，才被迫去全局找，如果在全局找到了想用的变量，则本次修改结果，会影响全部变量的值。当函数调用后：1.函数会清空’好友列表’中离自己近的格子。2.导致函数作用域对象没人要了，自动释放。3.导致函数作用域对象内本次使用的局部变量一同释放，所以，局部变量在函数外无法使用，也无法重用。作用域链
2021-02-07 10:35:59
315
原创 js----作用域和作用域链
js中包括两级作用域：1.全局作用域:保存着所有的全局变量，整个程序中随处可用，可反复使用。2.函数作用域:保存着一个函数内的所有局部变量，仅函数内可用，且不可重用。作用域原理:1.全局作用域也是一个对象，在浏览器中是window，驻留在内存中。在全局声明的变量和函数，默认都保存在window中。2.函数作用域也是一个对象，调用函数时临时创建，函数调用后自动释放。 定义函数时:在内存中创建一个函数对象，在全局创建函数名变量，函数名变量通过地址引用着函数对象。每个函数对象身上都有一个’好友列
2021-02-07 10:19:35
40
1
原创 js--匿名函数
匿名函数：不定义函数名的函数:1.节约内存2.划分临时作用域，避免使用全局变量，造成全局污染绝大数的回调函数，都用匿名函数------节约内存，用一次就释放几乎，所有的js代码都要包裹在匿名函数自调里------避免全局污染匿名函数自调: 什么是:创建一个函数后，立刻调用该函数，调用后，立刻释放。 问题:如果不用函数包裹，声明的变量都是全局变量，全局变量既不会自动释放，浪费内存，又会造成全局污染。 解决:用匿名函数自调，包裹起来，原来的全局变量就变成了局部变量，就随函数的调用结束而自动释放
2021-02-07 09:58:51
238
原创 重载
相同函数名，不同形参列表的多个函数，在调用时，可根据传入的实参值列表不同，自动选择对应的函数版本，为了减少函数的个数，减轻调用者的负担。 借助arguments 对象来变通实现重载效果 js语言不允许多个同名函数，同时存在，如果强行定义多个同名函数同时存在，最后只有一个函数能存下来。 三步： 1.只定义一个函数，且不要定义任何形参变量 2.在函数内，arguments对象会自动获得将来传入的所有实参值列表 3.在函数内，可通过判断传入的实参值个数(arguments.length)或实参值内容.
2021-02-07 09:39:10
76
原创 函数
函数：程序集中保存一段可用的代码片段的程序结构在公司中，能反复使用的代码，全部封装为函数-----代码重用定义函数： function 函数名(){ //可能反复使用的代码片段--函数体 } 调用函数： 函数名（） 参数：专门保存函数执行时必须的数据的变量 返回值：一个函数的执行结果创建函数的三种方式： 1.用声明的方式： function 函数名(){...} 会被声明提前，程序会将var声明的变量和function声明的函数，提升到当前作
2021-02-07 09:29:00
41
原创 将每个英文句子里的单词首字母替换为大写
将每个英文句子里的单词首字母替换为大写<script> var str="you can you up,no can no bb"; str=str.replace(/\b[a-z]/ig,function(keyword){ console.log("返回${keyword.toUpperCase()}"); return keyword.toUpperCase(); }); console.log(str);</script>...
2021-02-07 09:17:35
462
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人