首页
首页
沸点
课程
直播
活动
竞赛
商城
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
会员
登录
注册
一次就好吧
掘友等级
前端
获得徽章 0
动态
文章
专栏
沸点
收藏集
关注
作品
赞
12
文章 4
沸点 8
赞
12
返回
|
搜索文章
一次就好吧
赞了这篇文章
一起去看星星吧
1年前
关注
ts保姆级教程,别再说你不会ts了
什么是 TypeScript? 一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第21天,点击查看活动详情。 TypeScript,简称 ts,是微软开发...
2.3k
210
分享
一次就好吧
赞了这篇文章
jecyu
VIP.5 如鱼得水
公众号【前端快快充】 @送快递的
·
1年前
关注
前端人必须掌握的抓包技能
时隔 3 年,重新接触了移动端 h5 页面开发,上一次还是大四实习。这一次是 hybrid 开发,涉及到 h5 页面与原生 app 的交互,h5 页面需要与原生打通登录态,...
1.3k
240
分享
一次就好吧
前端
·
1年前
举报
如何点击另外一个按钮,不仅轮播图要消失,轮播图对应的按钮也要消失?
1. 先给按钮动态绑定一个:class=“isShow”
2. 在data中定义这个isShow , 并赋上一个值, isShow: domhide
3. 在css中定义两个样式 , 因为最初是要显示这个按钮的,所以.domhide{display: block;}给显示 , .domshow{display: none;}给隐藏 , 这个是自己额外定义的
4. 再点击其他的按钮的时候,轮播图的数据直接给 ‘ ’空 , 然后调用this.isShow = "domshow" , 按钮隐藏
5. 再点击轮播图数据的时候,只需要在数据赋值给数组的上面调用this.isShow = "domhide" , 按钮显示
展开
分享
3
点赞
一次就好吧
前端
·
1年前
举报
uniapp如何将页面以轮播的方式切换?
不用使用任何组件库的swiper,因为组件库的swiper都是直接数据挂载到标签上,然后通过键值对的方式来进行渲染。我们这里先在pages文件夹下新建一个只使用原生swiper标签的父组件,然后将需要轮播滑动切换的页面封装到components目录下,作为子组件,然后再将需要轮播滑动切换的组件导入到那个原生的swiper组件里面去,每一个需要轮播切换的子组件以标签的形式放入到<swiper-item><swiper-item>标签里面去
展开
赞过
分享
评论
1
一次就好吧
赞了这篇文章
前端五月天
前端工程师
·
3年前
关注
变量的解构赋值(ES6)
上述代码表示,可以从数组中提取值,并且按照对应的位置,对变量赋值。 本质上,这种写法属于模式匹配,只要等号两边的模式相同,左边的变量就会被赋予相应的值。 如果解构不成功,变...
10
评论
分享
一次就好吧
赞了这篇文章
天行无忌
全栈开发 @DevPoint
·
1年前
关注
再谈JavaScript 中的对象解构
解构是一个概念,分解其中一种数据类型并将其单独的属性分配给变量,在文章《JavaScript 解构赋值 5 个常见场景和实例》中介绍过,今天再来复习一下。 基础解构 正如上...
56
11
分享
一次就好吧
前端
·
1年前
举报
Promise是什么?
Promise是ES6新出的一个 构造函数 , 用于创建Promise实例对象
Promise实例对象 :可以理解为一个处理异步和同步操作的容器
promise本身是同步的(容器 ) , Promise 的then( ) 方法里面的代码才是异步的
Promise 里面的代码怎么执行 , 取决于你在Promise的里面写了什么.
Promise作用 :
解决回调地狱 , 优化语法
回调地狱是什么 ?
异步回调 层层嵌套
Promise原理
Promise的本质是一个容器
Promise有三种工作状态 :
1. 进行中 pending
2. 已成功 fulfilled
3. 已失败 rejected
Promise状态切换只有两种情况
从pending(进行中)变成fulfilled(已成功)
从pending(进行中)变成rejected(已失败)
Promise创建的时候里面的代码会立即执行
(1) 不要在 Promise里面去处理异步结果
(2) 而是执行 Promise的resolve和reject方法
发挥联想 :
Promise像一个中介 , 我把居住证交给中介(Promise)来帮我办 , 中介(Promise)什么活都接 , 不管同步还是异步都接
中介办没办好 , 有三种状态
中介正在办理 pending
中介办理成功了 fulfilled
中介办理失败了 rejected
promise 本身无法控制异步顺序 (异步无序) , promise 本质只是控制异步结果的顺序
发挥联想 :
Promise像一个中介 , 我把居住证交给中介(Promise)来帮我办 , 中介(Promise)什么活都接 , 不管同步还是异步都接
中介办没办好 , 有三种状态
中介正在办理 pending
中介办理成功了 fulfilled
中介办理失败了 rejected
展开
收起
查看大图
向左旋转
向右旋转
赞过
分享
评论
2
一次就好吧
前端
·
1年前
举报
axios是什么 : 一个js框架,用于发送ajax请求(底层使用XMLHttpRequest)
请求axios的时候,如果res的数据是数组,则渲染的时候,需要使用arr.map(item={})
如果res的数据是对象 , 则可以直接获取元素之后进行innerHTML添加内容
get() : 写url和请求参数
then(res=>{}) : 成功回调, 相当于以前jq的success
catch(err=>{}):失败回调, 一般可以省略不写
then(()=>{}):完成回调, 表示请求完成,无论成功失败都会执行。一般可以省略不写
get方法第一个参数是url
get方法第二个参数是对象类型 { params:{get参数对象} }
post请求
post方法第一个参数是url
post方法第二个参数是对象类型 { post参数对象 }
axios.get().then()
axios.post().then()
(2)介绍第三种使用方式
axios({
url:'请求路径',
method:'请求方式',
data:{ post请求参数 },
params:{ get请求参数 }
}).then(res=>{
//成功回调
//console.log(res)
});
展开
赞过
分享
评论
1
一次就好吧
前端
·
1年前
举报
Ajax发送get请求与post请求 :
get传参格式:
url?key=value
示例:
autumnfish.cn
post请求 :
需要设置请求头(固定语法):
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded') 固定格式
使用xhr的send方法发送参数: xhr.send('参数名=参数值');
区别:
1. 传参的方式不同
2. get传小文件 , post传大文件
3. get传输的速度较快,post传输的速度较慢(需要切片传输)
4. post比较安全
展开
收起
查看大图
向左旋转
向右旋转
赞过
分享
评论
1
一次就好吧
前端
·
1年前
举报
Ajax是什么?
Ajax是让浏览器跟服务器交互的一套API,它的作用就是可以让浏览器和服务器进行交互。
说人话: ajax 是一种 用于`向服务器请求数据`的 技术
为什么需要ajax?
1.以前我的写的页面全部都是固定的假数据,其实网页的数据都是从服务器获取的,一旦服务器数据变化,网页上的内容也会发生变化
2.虽然可以通过在浏览器地址栏直接输入网址(url)的方式向服务器获取数据,但是我们的网页会刷新
3.学会ajax:就可以做到在不刷新网页的情况下向服务器请求数据,让网站数据内容动态变化。
ajax的工作流程:
- 1.创建XMLHttpRequest对象(俗称小黄人)
- `let xhr = new XMLHttpRequest();`
- 2.设置请求
- `xhr.open('get', '
autumnfish.cn
');`
- 3.发送请求
- `xhr.send();`
- 4.注册回调函数
- - 这个函数不是立即执行的,而是等服务器把数据响应返回才会执行(PS:什么时候执行取决于你的网速快慢)
- `xhr.onload = function () {console.log(xhr.responseText);}`
Ajax 即AsynchronousJavascriptAndXML(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。
说人话:ajax就是一套可以让网站跟服务器交互的一种技术,能在我们需要时,不用再刷新网页就能去服务器要一些数据回来
展开
收起
查看大图
向左旋转
向右旋转
分享
评论
点赞
一次就好吧
前端
·
1年前
举报
this指向:
JavaScript 中允许指定函数中 `this` 的指向,有 3 个方法可以动态指定普通函数中 `this` 的指向
使用 `call` 方法调用函数,同时指定函数中 `this` 的值
1. call` 方法能够在调用函数的同时指定 `this` 的值
2. 使用 `call` 方法调用函数时,第1个参数为 `this` 指定的值
3. `call` 方法的其余参数会依次自动传入函数做为函数的参数
apply:
1. apply` 方法能够在调用函数的同时指定 `this` 的值
2. 使用 `apply` 方法调用函数时,第1个参数为 `this` 指定的值
3. `apply` 方法第2个参数为数组,数组的单元值依次自动传入函数做为函数的参数
bind` 方法并不会调用函数,而是创建一个指定了 `this` 值的新函数:
bind` 方法创建新的函数,与原函数的唯一的变化是改变了 `this` 的值
展开
收起
查看大图
向左旋转
向右旋转
等人赞过
分享
1
7
一次就好吧
前端
·
1年前
举报
箭头函数:
箭头函数**中的 `this` 与普通函数完全不同,也不受调用方式的影响,事实上箭头函数中并不存在 `this` !箭头函数中访问的 `this` 不过是箭头函数所在作用域的 `this` 变量
console.log(this) // 此处为 window
// 箭头函数
const sayHi = function() {
console.log(this) // 该箭头函数中的 this 为函数声明环境中 this 一致
}
// 普通对象
const user = {
name: '小明',
// 该箭头函数中的 this 为函数声明环境中 this 一致
walk: () => {
console.log(this)
},
sleep: function () {
let str = 'hello'
console.log(this)
let fn = () => {
console.log(str)
console.log(this) // 该箭头函数中的 this 与 sleep 中的 this 一致
}
// 调用箭头函数
fn();
}
}
// 动态添加方法
user.sayHi = sayHi
// 函数调用
user.sayHi()
user.sleep()
user.walk()
展开
赞过
分享
评论
2
一次就好吧
前端
·
1年前
举报
this:
this` 是 JavaScript 最具“魅惑”的知识点,不同的应用场合 `this` 的取值可能会有意想不到的结果,在此我们对以往学习过的关于【 `this` 默认的取值】情况进行归纳和总结
普通函数:
普通函数的调用方式决定了 `this` 的值,即【谁调用 `this` 的值指向谁】
// 普通函数
function sayHi() {
console.log(this)
}
// 函数表达式
const sayHello = function () {
console.log(this)
}
// 函数的调用方式决定了 this 的值
sayHi() // window
window.sayHi()
// 普通对象
const user = {
name: '小明',
walk: function () {
console.log(this)
}
}
// 动态为 user 添加方法
user.sayHi = sayHi
uesr.sayHello = sayHello
// 函数调用方式,决定了 this 的值
user.sayHi()
user.sayHello()
展开
赞过
分享
评论
2
一次就好吧
前端
·
1年前
举报
try ... catch:
function foo() {
try {
// 查找 DOM 节点
const p = document.querySelector('.p')
p.style.color = 'red'
} catch (error) {
// try 代码段中执行有错误时,会执行 catch 代码段
// 查看错误信息
console.log(error.message)
// 终止代码继续执行
return
}
finally {
alert('执行')
}
console.log('如果出现错误,我的语句不会执行')
}
foo()
1. try...catch` 用于捕获错误信息
2. 将预估可能发生错误的代码写在 `try` 代码段中
3. 如果 `try` 代码段中出现错误后,会执行 `catch` 代码段,并截获到错误信息
展开
赞过
分享
评论
2
一次就好吧
前端
·
1年前
举报
深浅拷贝:
1. 首先浅拷贝和深拷贝只针对想Object,Array这样的复杂对象,简单来说,浅拷贝只复制一层对象的属性,二深拷贝则复制了所有的层级。
2. 对于字符串类型,浅复制是对值的复制,对于对象来说,浅复制是对对象地址的复制,并没 有开辟新的栈,也就是复制的结果是两个对象指向同一个地址,修改其中一个对象的属性,则另一个对象的属性也会 改变,而深复制则是开辟新的栈,两个对象对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性
const obj = {
uname: 'pink',
age: 18,
hobby: ['乒乓球', '足球'],
family: {
baby: '小pink'
}
}
// 把对象转换为 JSON 字符串
// console.log(JSON.stringify(obj))
const o = JSON.parse(JSON.stringify(obj))
console.log(o)
o.family.baby = '123'
console.log(obj)
异常处理:
了解 JavaScript 中程序异常处理的方法,提升代码运行的健壮性
throw异常处理是指预估代码执行过程中可能发生的错误,然后最大程度的避免错误的发生导致整个程序无法继续运行
function counter(x, y) {
if(!x || !y) {
// throw '参数不能为空!';
throw new Error('参数不能为空!')
}
return x + y
}
counter()
1. throw` 抛出异常信息,程序也会终止执行
2. `throw` 后面跟的是错误提示信息
3. `Error` 对象配合 `throw` 使用,能够设置更详细的错误信息
展开
赞过
分享
评论
2
一次就好吧
前端
·
1年前
举报
原型链:
基于原型对象的继承使得不同构造函数的原型对象关联在一起,并且这种关联的关系是一种链状的结构,我们将原型对象的链状结构关系称为原型链
// Person 构造函数
function Person() {
this.arms = 2;
this.walk = function () {}
}
// Person 原型对象
Person.prototype.legs = 2;
Person.prototype.eyes = 2;
Person.prototype.sing = function () {}
Person.prototype.sleep = function () {}
// Chinese 构造函数
function Chinese() {
this.skin = 'yellow';
this.language = '中文';
}
// Chinese 原型对象
Chinese.prototype = new Person();
Chinese.prototype.constructor = Chinese;
// 实例化
let c1 = new Chinese();
console.log(c1)
在 JavaScript 对象中包括了一个非标准备的属性 `__proto__` 它指向了构造函数的原型对象,通过它可以清楚的查看原型对象的链状结构。
展开
赞过
分享
评论
2
一次就好吧
前端
·
1年前
举报
原型继承:
基于构造函数原型对象实现面向对象的继承特性
// 所有人
function Person() {
// 人的特征
this.arms = 2;
this.legs = 2;
this.eyes = 2;
// 人的行为
this.walk = function () {}
this.sing = function () {}
this.sleep = function () {}
}
// 中国人
function Chinese() {
this.skin = 'yellow';
this.language = '中文';
}
// 日本人
function Japanese() {
this.skin = 'yellow';
this.language = '日文';
}
上述代码可以理解成将 `Chinese` 和 `Japanese` 共有的属性和方法提取出来了,也就是说 `Chinese` 和 `Japanese` 需要【共享】一些属性和方法,而原型对象的属性和方法恰好是可以被用来共享的
// 中国人
function Chinese() {
this.skin = 'yellow';
this.language = '中文';
}
// 日本人
function Japanese() {
this.skin = 'yellow';
this.language = '日文';
}
// 人们【共有】的行为特征
let people = {
// 人的特征
arms: 2,
legs: 2,
eyes:2,
// 人的行为
walk: function () {},
sleep: function () {},
sing: function () {}
}
// 为 prototype 重新赋值
Chinese.prototype = people;
Chinese.prototype.constructor = Chinese;
展开
赞过
分享
评论
2
一次就好吧
前端
·
1年前
举报
继承:继承是面向对象编程的另一个特征,通过继承进一步提升代码封装的程度,JavaScript 中大多是借助原型对象实现继承的特性。
龙生龙、凤生凤、老鼠的儿子会打洞描述的正是继承的含义,分别封装中国人和日本人的行为特征来理解编程中继承的含义,代码如下:
// 封装中国人的行为特征
function Chinese() {
// 中国人的特征
this.arms = 2;
this.legs = 2;
this.eyes = 2;
this.skin = 'yellow';
this.language = '中文';
// 中国人的行为
this.walk = function () {}
this.sing = function () {}
this.sleep = function () {}
}
// 封装日本人的行为特征
function Japanese() {
// 日本人的特征
this.arms = 2;
this.legs = 2;
this.eyes = 2;
this.skin = 'yellow';
this.language = '日文';
// 日本人的行为
this.walk = function () {}
this.sing = function () {}
this.sleep = function () {}
}
其实我们都知道无论是中国人、日本人还是其它民族,人们的大部分特征是一致的,然而体现在代码中时人的相同的行为特征被重复编写了多次,代码显得十分冗余,我们可以将重复的代码抽离出来
展开
赞过
分享
评论
2
一次就好吧
前端
·
1年前
举报
原型对象:
实际上每一个构造函数都有一个名为 `prototype` 的属性,译成中文是原型的意思,`prototype` 的是对象类据类型,称为构造函数的原型对象,每个原型对象都具有 `constructor` 属性代表了该原型对象对应的构造函数
function Person() {
}
// 每个函数都有 prototype 属性
console.log(Person.prototype)
了解了 JavaScript 中构造函数与原型对象的关系后,再来看原型对象具体的作用,如下代码所示
function Person() {
// 此处未定义任何方法
}
// 为构造函数的原型对象添加方法
Person.prototype.sayHi = function () {
console.log('Hi~');
}
// 实例化
let p1 = new Person();
p1.sayHi(); // 输出结果为 Hi~
构造函数 `Person` 中未定义任何方法,这时实例对象调用了原型对象中的方法 `sayHi`,接下来改动一下代码:
function Person() {
// 此处定义同名方法 sayHi
this.sayHi = function () {
console.log('嗨!');
}
}
// 为构造函数的原型对象添加方法
Person.prototype.sayHi = function () {
console.log('Hi~');
}
let p1 = new Person();
p1.sayHi(); // 输出结果为 嗨!
展开
赞过
分享
评论
2
下一页
关注了
0
关注者
16
收藏集
0
关注标签
2
加入于
2022-04-18