JS
是么是面向对象?
面向对象可以把程序中的关键模块视为对象,而模块拥有属性和方法。这样我们把属性和方法封装起来,以后使用将非常方便,避免了一些繁琐重复的工作
JS的几种设计模式:
1.构造函数模式--定义一个特定类型的类,实例一个对象
2.工厂模式--声明一个对象,给它添加属性和方法,把它封装到一个函数中,并返回这个对象
3.单例模式--经常配合定时器使用,判断实例是否存在,如果存在就返回,如果不存在就创建
4.发布订阅者模式--绑定事件,添加回调
DOM的增删改查:
creatElement appendChild
removeChild
replaceChild
getElementById querySelectorAll
less和sass的区别
less和sass都是css的预编译处理语言
区别: less是基于javascript,是在客户端处理的
sass是基于Ruby的,是在服务器处理的
相同: 1、混入(Mixins)——class中的class;
2、参数混入——可以传递参数的class,就像函数一样;
3、嵌套规则——Class中嵌套class,从而减少重复的代码;
4、运算——CSS中用上数学;
5、颜色功能——可以编辑颜色;
6、名字空间(namespace)——分组样式,从而可以被调用;
7、作用域——局部修改样式;
8、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。
css3和h5新特性:
h5:1. 用于绘画 canvas 元素。
2. 用于媒介回放的 video 和 audio 元素。
3. 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;
sessionStorage 的数据在浏览器关闭后自动删除。
4. 语意化更好的内容元素,比如 article、footer、header、nav、section
5. 表单控件,calendar、date、time、email、url、search。
css3: 选择器----属性选择器、伪类选择器、伪元素选择器。
盒模型 -----box-sizing
背景和边框--- 圆角(border-radius)边框阴影: box-shadow
文字特效
2D/3D转换---transform:translate(x,y) rotate(x,y) skew(x,y) scale(x,y)
动画
多列布局
用户界面
DOM0 DOM2的区别:
dom0:不支持添加多个事件,后面的会覆盖前面的
无法取消
btn.οnclick=function(){}
dom2: 可以添加多个事件
支持事件冒泡和捕获
btn.addEventListener('click',function(){})
如何阻止事件冒泡和默认事件:
return false
event.preventDefault
event.stopPropagation()
ES6
解构赋值
模板字符串
三点运算符
箭头函数
Promise
函数的形参默认值
class类
数组和对象的新方法:filier ,find,keys,values,object.is(),Object.assign()
Number.isNaN() Number.parselnt(string,radix) //根据给定的进制数把一个字符串解析成整 数。
CommonJS,AMD,CMD
commonjs:
1. 所有代码都运行在模块作用域,避免污染全全局作用域
2.模块可以多次加载,但只会在第一次加载时运行一次,然后结果就会被缓存,以后在加载,会直接读取缓存结果
3.commonjs是同步执行的,它会按代码出现的顺序进行加载
4. commonjs中定义了两个重要概念,require和module.exports。但这两个重要概念(方法)浏览器不支持,如果想在浏览器中使用commonjs需要进行编译
require:导入,解析路径,读取文件或者缓存的结果,返回该模块的module.exports对象,如果没有会报错
module.exports:当前模块对外输出的接口,其它文件加载该模块其实就是读取module.exports的变量。为了方便,node为每一个模块提供了exports变量,指向了module,exports
var module = {exports:{}}
var exports = module.exports
每一个模块会默认被封装在一个函数中:
function(exports,require,module,__filename,__dirname){}
exporets和module都是暴露接口
require是引入文件
__filename是文件的完整路径(绝对路径)
__dirname是文件的目录路径
AJAX
原生ajax的实现
创建XMLHTTPRequest对象
var xhr = new XMLHTTPRequest()
设置请求信息(请求方式,请求地址,是否异步)
xhr.open('get',url,true)
设置请求头信息(是否设置看需求)
xhr.setRequestHeader('content-type':'application/x-www-form-urlencoden')
发送请求
xhr.send(body) //get不用传body,post需要传
接受响应,绑定事件监听执行到那一步
xhr.onreadystateChange=function(){
xhr,readystate ===0 刚刚创建实例,还未调用open()
xhr,readystate ===1 open调用,send未被调用
xhr,readystate ===2 响应头和状态吗收到
xhr,readystate ===3 正在接受相应数据
xhr,readystate ===4 数据接收完毕或失败
if( xhr,readystate ===4){
if(xhr.status===200){
console.log(xhr.response)
}
}
}
content-type有几种
content-type是设置请求头信息,它用来确定指定响应/请求的编码格式和数据类型,分别有文 本,二进制数据,图片,音频,视频等几种
node
node是一个基于chrome V8的javascript运行环境。
每个node文件都是一个函数,其中有5个参数(exports,require,module,__filename,__dirname)
在node中没有window,有一个类似window的全局对象:global
global中的几个重要属性:
setImmediate:立即执行函数
process.nextTick:在任意阶段都会执行,通常是第一个执行
buffer:缓冲器,一个和数组类似的容易,存储二进制数据
事件轮询:
timers: 计时和执行到点的定时器回调函数
pending callbacks: 执行延迟到下一个循环阶段的i/o回调
idle,prepare: 准备阶段
poll: 轮询阶段--如果轮询队列不为空,依次取出队列中的第一个回调函数并执行,直到队列为空或者达到系统最大的限制。如果轮询队列为空,如果之前设置过setImmdiate函数,直接进入check阶段,如果没有设置,会在当前阶段等待,直到塞入新的回调函数或者定时器到点了。
check: 执行setImediate设置额回调函数
close callbacks: 一些准备关闭的回调函数
在node中,我们自己编写的代码只能运行在一个线程中(主线程),而node提供的很多方法均使用了多线程。主线程不断读取轮询队列中是否有事件。而对于读取文件,http等容易堵塞的事件交给底层的线程池执行,并给线程池一个回调函数,当线程池操作完成任务后把结果和回调函数返回给轮询队列中。
vue
vue的声明周期--
beforecreate 初始化显示
created 创建
beforeMount 挂载之前
Mounted 挂载后
beforeUpdate 更新之前
Updated 更新之后
beforeDestory 销毁之前
Destoryed 销毁后
vue的导航守卫:
beforeEach((to,form,next)=>{}) //全局前置守卫
to:进入的目标路由
form:当前离开的路由
next:调用下一步
beforeRouteEnter(to,form,next) //进入路由前
beforeRountUpdate //路由没有改变,路由参数发生变化时被调用
beforeRountLeave //离开路由时
vue的MVVM模式--
vue在初始化时,一方面会对data数据中的每一层次的属性进行遍历,使用Object.defineProperty转化为setter和getter,实现数据变化监听功能,并给它们创建相对应的Dep,另一方面vue的指令编译器compile对元素节点进行解析,初始化视图,并订阅watcher,watcher会将自己添加到消息订阅器Dep中。
当数据发生变化时,Observer中的setter会调用Dep,dep会遍历所有的watcher,并调用watcher的update方法,对试图进行相应的更新
v-model的实现原理--
使用Object.defineProperty对data进行数据劫持监听,当数据变化,setter会调用方法更新视图,实现单向数据绑定,给标签添加事件监听,当视图发生变化时,调用方法同步改变数据,实现双向数据绑定
vue和react在数据绑定上的区别--
vue会在初始化时收集所有的依赖,数据改变,视图跟着改变,是双向数据绑定
react改变数据需要手动调用setState方法,是单向数据绑定。
vue怎么设置动态路由--
1) 配置路由
children: [
{
path: 'mdetail/:id',
component: MessageDetail
}
]
2) 路由路径
<router-link :to="'/home/message/mdetail/'+m.id">{{m.title}}</router-link>
3) 路由组件中读取请求参数
this.$route.params.id
vuex的使用--