前端知识
未读前言最近空了些时间来研究一些小知识点。今天就从websocket定义,作用,使用场景等角度浅探讨一下。
1.websocket简介
websocket定义
WebSocket 是一种在单个TCP连接上进行全双工通信的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。
在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接, 并进行双向数据传输。
WebSocket本质上一种计算机网络应用层的协议,用来弥补http协议在持久通信能力上的不足。
WebSocket 协议在2008年诞生,2011年成为国际标准。现在最新版本浏览器都已经支持了。
它的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送技术的一种。
websocket特点
(1)建立在 TCP 协议之上,服务器端的实现比较容易。
(2)与 HTTP 协议有着良好的兼容性。默认端口也是80和443,并且握手阶段采用 HTTP 协议,因此握手时不容易 ...
前言在vue中,父子组件传值借助于props,子组件也不能直接修改父组件的值,需要使用$emit实现。当父组件向子组件传递的数据是对象时,子组件就可以直接修改了。
1.浅析JavaScript内存空间JS的内存空间可以被分为两种:栈内存和堆内存。
(1)基本数据类型保存在栈内存中,如果删除一个栈原始数据,遵循先进后出;因为基本数据类型占用空间小,大小固定,通过按值来访问,属于被频繁使用的数据。
基本数据类型包括Boolean,Number,String,Underfined,Null以及对象变量的指针。
(2)引用数据类型保存在堆内存中,并且会有一个十六进制的内存地址,在栈内存中声明的变量的值就是十六进制的内存地址。因为引用数据类型占据空间大,大小不固定。如果存储在栈中,将会影响程序运行的性能。引用数据类型在栈中存储了该对象在堆内存的引用地址,对象的内容存储在堆中,你不可以直接访问堆内存空间中的位置和操作堆内存空间。只能操作对象在栈内存的引用地址。
引用数据类型包括Object,Array,Function。
2.问题解决(1)为什么子组件可以修改父组件传递的对象
联系到内存空间中 ...
前言组件传值(1)父传子
在父组件中给子组件标签绑定属性,属性值为要传递的值。
在子组件中,通过props选项接收传递的属性,然后就可以直接使用了。
(2)子传父
子组件到父组件的通信,要借助Vue实例的$emit方法,也是需要分成两步:
在子组件中,需要$emit发送时间(.$emit(自定义事件名,参数,……))
父组件中,在子组件的标签上写监听,绑定它$emit的事件
(3)同级互传
在Vue的原型上新增一个属性 $bus,值为 新的Vue实例
在A组件中通过 this.$bus.$emit('自定义事件', 参数) 发射同级接收的电波
在B组件中通过 this.$bus.$on('事件名', 处理函数) 接收电波
实现过程1.准备(1)新建项目:vue create创建项目后在App.vue中引入MoviePage组件,再新建views文件夹存放电影页面,如下:
MoviePage组件中导入其余ListCom,MaskCom,PageCom,TabsCom组件,并使用对应组件标签。
(2)封装请求;新建request文件夹,存放h ...
前端知识
未读1.Event Loop概念介绍JavaScript是一门单线程语言,细分了两个任务种类:同步任务,异步任务。
同步任务:可以被主线程立马执行的任务
异步任务:不进⼊主线程,⽽是进⼊任务队列的任务,执行完毕之后会产生一个回调函数,并且通知主线程。当主线程上的任务执行完后,就会调取最早通知自己的回调函数,使其进入主线程中执行。也就是异步任务会等待同步任务执行完毕后再去执行。
异步任务种类:
(1)Promise.then() ——微任务
(2)async/await ——–微任务
(3)setTimeout() ——–宏任务
(4)setUnterval() ———-宏任务
其余的js宏任务还有:Ajax、DOM事件,文件操作
js微任务有:process.nextTick、MutationObserver、 catch finally
2.微任务与宏任务概念介绍异步任务可分为微任务和宏任务。在异步任务中,有些异步任务的平均执行周期很长,这些任务被javascript标记为宏任务(比如setTimeout())。而平均执行周期相对比较短的任务,被javascript标记为微任 ...
前言vue是一套用于构建用户界面的渐进式框架。
实例的时候定义data属性既可以是一个对象,也可以是一个函数
组件中定义vue,只能是方法
12345678910111213const app=new Vue({ el:'#app', // 对象格式 data:{ foo:'foo' }, // 方法格式 data(){ return{ foo:'foo' } } })
1.函数(1)定义avaScript 函数通过 function 关键词进行定义,其后是函数名和括号 ()。
函数名可包含字母、数字、下划线和美元符号(规则与变量名相同)。
(2)调用
独 ...
前言animate使用animate.css是一个使用CSS3的animation制作的动画效果的CSS集合,里面预设了很多种常用的动画,且使用非常简单。使用步骤如下:
登录wow.js官网 wow.js — Documentation (wowjs.uk),查看使用过程
new一个wow的构造函数。注意:4.0之后的版本在添加animateClass时的属性值要做修改
123456789new WOW({ boxClass: 'wow', // default animateClass: 'animate__animated', // default offset: 0, // default mobile: true, // default live: true // default } ) wow.init();
引入animate.css https://cd ...
1.class(1)类的基本定义
es5中想要创建某种类型的实例对象时,通过构造函数new出来,想要添加某种方法,则添加在其原型上。但是在es6中,我们使用类来实现上述需求。
ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。
类的本质是一个函数
类相当于实例的原型,所有在类中定义的方法,都会被实例继承。如果在一个方法前,加上static关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法
12345678910111213141516171819202122232425262728293031<script> // 1 构造函数new实例对象的方法 // function Point(x,y){ // this.x=x; // this.y=y; // } // Point.prototype.fn=function(){ // ...
1.变量
var存在变量提升,一个变量可多次声明,后面的声明会覆盖前面的声明,在函数中使用var声明变量的时候,该变量是局部的,在函数内不使用var,该变量是全局的
let不存在变量提升,声明变量前该变量不能使用;let命令所在的代码块内有效,在块级作用域内有效;不允许在相同作用域中重复声明
12console.log(a); // ReferenceError: a is not definedlet a = 10;
const声明一个只读的变量,声明后,值就不能改变;必须初始化;变量指向的内存地址所保存的数据不得改动
var不存在块级作用域 ;let和const存在块级作用域
2.try catch捕捉到异常的同时不会使得代码停止执行而是可以做一些更为合理的操作。
执行 try {…} 里面的代码。
如果执行过程中没有异常,那么忽略 catch(err) 里面的代码,try 里面的代码执行完之后跳出该代码块。
如果执行过程中发生异常,控制流就到了 catch(err) 的开头。变量 err(可以取其他任何的名称)是一个包含了异常信息的对象。
12345try ...
项目总结
未读1项目简介基于css+js+ajax实现一个电影网站,包括电影主页,电影榜单页,电影详情,预告片,登录注册,个人中心。
2实现过程主页和榜单页的实现大同小异,都是循环渲染,下面主要介绍一下完善的小功能。
登录注册页进入页面主页时,因为是用户尚未登录,导航右部显示登陆二字,登录之后显示默认头像,用户在个人中心修改头像后显示最新头像。
点击登录时会根据token值到localstorage中查找是否存在该用户名,没有则进行注册然后将用户名和密码加密存入本地;已注册则直接登录。
123456789101112131415161718192021if (localStorage.getItem(user)) { $.ajax({ type: 'post', url: host + '/user/login', data: { ...
前端知识
未读1.web全局环境下的this指向window1console.log(this);//`window`
2.默认绑定函数直接调用的情况(无任何调用前缀)
非严格模式下,函数内部的this指向全局对象window;严格模式下为underfined
1234567891011// 非严格模式 function fun1(){ console.log(this);//window } fun1();// 严格模式 function fun2(){ "use strict";//严格模式的语法要求变量必须先声明后赋值 console.log(this);//underfined } fun2();
3.隐式绑定函数调用时,前面存在调用它的对象,那么this就会隐式绑定到这个对象上。如果函数调用前存在多个对象,this指向距离调用自己最近的对象。简而言之,this指向调用函数 ...