还有元气满满以为你都会,结果敲出来是个废废更惨的事嘛
阿巴阿巴,今天像个傻瓜一样?一连二天都在面试,加上几个月没敲代码,脑子说它会,我信了,结果它骗我~
原生获取元素
通过ID获取(getElementById)
通过name属性(getElementsByName)
通过标签名(getElementsByTagName)
通过类名(getElementsByClassName)
通过选择器获取一个元素(querySelector)
通过选择器获取一组元素(querySelectorAll)
获取html的方法(document.documentElement)
document.documentElement是专门获取html这个标签的
获取body的方法(document.body)
document.body是专门获取body这个标签的。
vue中有两种方法获取到当前元素
var el = event.target; //当前元素,可修改(能够用此方法获取到他的子元素,不能获取他本身的内容)
var el = event.currentTarget;//当前元素,不可修改(能够用此方法获取到他的子元素及能获取他本身的内容)
var el = event.currentTarget;
e.target.getAttribute(“data-a”)
es6 遍历 forEach Map
forEach
var arr = [1, 2, 3, 4, 5];
arr.forEach(function (item) {
if (item === 3) {
return;
}
console.log(item);
});
Map
css3新增属性
新增属性之border-color:为边框设置多种颜色
新增属性之border-image:图片边框
新增属性之border-radius:圆角边框
css3新增属性之box-shadow:阴影效果
新增属性之background-size:指定背景图片尺寸
新增属性之background-origin:指定背景图片从哪里开始显示
新增属性之background-clip:指定背景图片从什么位置开始裁剪
新增属性之text-shadow:文本阴影
css3新增属性之word-wrap:自动换行
1、transform变换效果:
2、animation动画效果
3、transition过渡效果
Flex
flex-direction 决定主轴的方向(即项目的排列方向)
flex-wrap 决定容器内项目是否可换行
flex-flow flex-direction 和 flex-wrap 的简写形式
justify-content 定义了项目在主轴的对齐方式。
align-items 定义了项目在交叉轴上的对齐方式
align-content定义了多根轴线的对齐方式,如果项目只有一根轴线,那么该属性将不起作用
html css实现三角形
1.CSS3 transfrom 旋转 45 度实现三角形
html
css
2 border
HTML:
css
.message-box {
position:relative;
width:240px;
height:60px;
line-height:60px;
background:#E9FBE4;
box-shadow:1px 2px 3px #E9FBE4;
border:1px solid #C9E9C0;
border-radius:4px;
text-align:center;
color:#0C7823;
}
.triangle-border {
position:absolute;
left:30px;
overflow:hidden;
width:0;
height:0;
border-width:10px;
border-style:solid dashed dashed dashed;
}
.tb-border {
bottom:-20px;
border-color:#C9E9C0 transparent transparent transparent;
}
.tb-background {
bottom:-19px;
border-color:#E9FBE4 transparent transparent transparent;
}
什么是跨域?怎么实现的
出于浏览器的同源策略限制。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域
【1】设置document.domain解决无法读取非同源网页的 Cookie问题
【2】跨文档通信 API:window.postMessage()
【3】JSONP
【4】CORS
CORS 是跨域资源分享(Cross-Origin Resource Sharing)的缩写。它是 W3C 标准,属于跨源 AJAX 请求的根本解决方法。
1、普通跨域请求:只需服务器端设置Access-Control-Allow-Origin
2、带cookie跨域请求:前后端都需要进行设置
【前端设置】根据xhr.withCredentials字段判断是否带有cookie
linux 五个并说出功能
1、cd命令
这是一个非常基本,也是大家经常需要使用的命令,它用于切换当前目录,它的参数是要切换到的目录的路径,可以是绝对路径,也可以是相对路径。如:
cd /root/Docements # 切换到目录/root/Docements
cd ./path # 切换到当前目录下的path目录中,“.”表示当前目录
cd …/path # 切换到上层目录中的path
2、ls命令
这是一个非常有用的查看文件与目录的命令,list之意,它的参数非常多,下面就列出一些我常用的参数吧,如下:
-l :列出长数据串,包含文件的属性与权限数据等
-a :列出全部的文件,连同隐藏文件(开头为.的文件)一起列出来(常用)
-d :仅列出目录本身,而不是列出目录的文件数据
-h :将文件容量以较易读的方式(GB,kB等)列出来
-R :连同子目录的内容一起列出(递归列出)
3、grep命令
该命令常用于分析一行的信息,若当中有我们所需要的信息,就将该行显示出来,该命令通常与管道命令一起使用,用于对一些命令的输出进行筛选加工等等,它的简单语法为
grep [-acinv] [–color=auto] ‘查找字符串’
4、find命令
find是一个基于查找的功能非常强大的命令,相对而言,它的使用也相对较为复杂,参数也比较多,所以在这里将给把它们分类列出,它的基本语法如下:
find / -name passwd # 查找文件名为passwd的文件
find . -perm 0755 # 查找当前目录中文件权限的0755的文件
find . -size +12k # 查找当前目录中大于1
5、cp命令
该命令用于复制文件,copy之意,它还可以把多个文件一次性地复制到一个目录下,它的常用参数如下:
-a :将文件的特性一起复制
-p :连同文件的属性一起复制,而非使用默认方式,与-a相似,常用于备份
-i :若目标文件已经存在时,在覆盖时会先询问操作的进行
-r :递归持续复制,用于目录的复制行为
-u :目标文件与源文件有差异时才会复制
cp -a file1 file2 #连同文件的所有特性把文件file1复制成文件file2
cp file1 file2 file3 dir #把文件file1、file2
6、mv命令
该命令用于移动文件、目录或更名,move之意,它的常用参数如下:
-f :force强制的意思,如果目标文件已经存在,不会询问而直接覆盖
-i :若目标文件已经存在,就会询问是否覆盖
-u :若目标文件已经存在,且比目标文件新,才会更新
注:该命令可以把一个文件或多个文件一次移动一个文件夹中,但是最后一个目标文件一定要是“目录”。
例如:
mv file1 file2 file3 dir # 把文件file1、file2、file3移动到目录dir中
mv file1 file2 # 把文件file1重命名为file2
7、rm命令
该命令用于删除文件或目录,remove之间,它的常用参数如下:
-f :就是force的意思,忽略不存在的文件,不会出现警告消息
-i :互动模式,在删除前会询问用户是否操作
-r :递归删除,最常用于目录删除,它是一个非常危险的参数
例如:
rm -i file # 删除文件file,在删除之前会询问是否进行该操作
rm -fr dir # 强制删除目录dir中的所有文件
11、file命令
该命令用于判断接在file命令后的文件的基本数据,因为在Linux下文件的类型并不是以后缀为分的,所以这个命令对我们来说就很有用了,它的用法非常简单,基本语法如下:
file filename
#例如:
file ./test
13、cat命令
该命令用于查看文本文件的内容,后接要查看的文件名,通常可用管道与more和less一起使用,从而可以一页页地查看数据。例如:
cat text | less # 查看text文件中的内容
变量提升问题
(面试的和下面的例子,异曲同工之意)
console.log(a); //输出 undefined
var a=10;
console.log(a) // 输出 10
var 有提升的作用其实上面的代码会变成会变成
var a;
console.log(a); //输出 undefined
a=10; //赋值留在原地
console.log(a) // 输出 10
2.if语句中的 var
var a=5;
if(a==5){ // if语句没有 语句块的作用 所以没有闭包的作用 这里的a是
console.log(a); //输出5
var a=3; //再 if语句中声明的变量 也是一个全局变量 所以这个a=3 会把前面的 5覆盖
console.log(a); //输出3
}
console.log(a); //输出3
3.function的提升
var a;
function a(){console.log(123)};
a(); //输出 123 再js中函数是第一公民 会比var声明的的变量更靠前
var a;
function a(){console.log(123)};
function a(){console.log(456)}
a(); //输出 456 再js中函数是第一公民 后面的 a函数把前面的
覆盖 js只会存在一个同名变量 函数声明的变量是以一个地址的形式存储在内存中 同时 js中如果已经存在 一个同名的变量且已经赋值 在重新定义的没有赋值的变量 就会跳过初始化阶段
function a(){console.log(123)};
function a(){console.log(456)}
var a=10;
a(); //输入引用错误 a不是一个函数 这个时候又定义了一个a变量 会把前面同名的函数给覆盖掉 js是弱数据类型 这个时候 a就变成了一个number类型 所以 报出了 a不是一个函数
4.function 和 var 的 一起使用
var b=10;
function a(){ //函数具有局部作用域的效果 所以内部和外面的全局作用不通
console.log(b); //输出undefined
var b=8;
console.log(b); //输出 8
}
a(); //记住函数只有调用才有用 别忘了调用
console.log(b); //输出 10
5.if语句
if (!("a" in window)) {
var a = 1;
};
alert(a);
上面的语句相当于
var a;
if (!(“a” in window)) { //判断 a是否在全局变量中 如果不再则会将 a赋值 1 大家记住在 if语句中 var声明的变量 也是一个全局
a = 1; // 变量 ,而并不会 在一这个条件是否成立 js在执行程序之前 会首先把在全局中用var 声明的变量提前
};
alert(a); // 弹出 undefined
6.练习 下面这个难度有点大 是一个es6的闭包的知识 答案我就不公布 闭包作用就是利用了函数作用域和外部不通的原理防止全局污染
var name="world";
(function(){
console.log(name)
if(typeof name==="undefined"){
var name="jack";
console.log("goodbye "+name)
}else{
console.log("hello "+name)
}
}()}
这年头,连作者都开始俏皮了,给我给你们康康结果是啥
understand
goodbyejack
git 拉取 合并 上传
git拉取
1.可以直接使用git pull命令拉取,但是不建议(容易出现远程仓与本地仓代码冲突);
2.使用git fetch拉取,再使用git merge FETCH-HEAD命令合并(中间可用比对工具查看不一样的地方);
3.将git本地仓的工程copy到workspace进行开发。
git上传
1.git log查看远程仓操作日志;
2.git status查看当前git仓状态;
3.git diff查看修改的地方,简单确认是否有误;
4.git add . 将本地git仓修改的文件添加至暂存区;
5.git status 查看add命令后暂存区的状态;如果有误,使用命令git reset --hard清除git暂存区的文件;
6.如果第五步无误,使用git commit命令进行提交至本地git仓,并写入日志信息;
7.git status,git log查看本地仓状态;
8.git push将本地仓的文件push到远程git仓。
其它命令:
git checkout . 放弃对本地仓所有文件的修改
git branch 查看当前分支
git checkout 切换分支
注:明确四个概念:workspace(工作区)、本地仓、暂存区、远程仓。
vue 同级传参 bus
请将12345678 货币加入,每三个",",12.345.678。
求大佬救我,感觉像个递归或正则能写出来的样子
清除浮动方法
1.在浮动元素之后添加一个空的div标签,设置clear:both
2.给父级元素添加 overflow:hidden属性
3.给父元素使用伪元素 :after清除浮动
.box::after {
content: " ";
clear: both;
display: block;
}
视频面试的题
let arr = [
{id: ‘a’, value: 1},
{id: ‘c’, value: 3},
{id: ‘b’, value: 2},
]
获得数组 [‘a’, ‘c’, ‘b’]
for(var i=0;i<arr.length;i++){
console.log(arr[i].id)
}
获得 id == ‘c’ 的那个对象 {id: ‘c’, value: 3}
// arr.map((item)=>{
// if(item.id == ‘c’){
// console.log(item,111)
// }
// })
// arr.forEach((item)=>{
// if(item.id == ‘a’){
// console.log(item,222)
// }
// })
// 根据 value 值对 arr 进行排序
// function Object(a,b){
// return a.value-b.value ;
// }
// arr.sort(Object);
// console.log(arr,123)
// 从 arr 中移除第二个对象
// arr.splice(1,1);
// console.log(arr,123);
在项目中参与了什么?
状态存储有的什么方案?
vuex
mutation action有什么区别 详细 使用
1、流程顺序
“相应视图—>修改State”拆分成两部分,视图触发Action,Action再触发Mutation。
2、角色定位
基于流程顺序,二者扮演不同的角色。
Mutation:专注于修改State,理论上是修改State的唯一途径。
Action:业务代码、异步请求。
3、限制
角色不同,二者有不同的限制。
Mutation:必须同步执行。
Action:可以异步,但不能直接操作State。
computed watch有什么区别
watch:监视单个属性
computed:监视多个属性
watch是一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。
由于watch监视的是单个属性的地址, 这就意味着 监视简单数据类型 和 监视复杂数据类型做法不同。
与watch不同,computed将监视对象 写在了函数内部,凡是函数内部有 this.相关属性 改变,都会触发当前函数。(注:第一次如进入界面渲染也会触发一次)
(附加赠送 watch:当你要对data里的一个变量进行监视,且当该变量在改变时``要做出一些响应 时使用
computed: 当你要对data里的多个变量进行监视,且这些变量有一个或多个在改变时 要做出一些响应 时使用
filters: 当你要对数据进行一些处理,且过程中不需要使用data里的数据时使用(纯函数)
methods: 当你要对数据进行一些处理,过程中还要使用data里的数据时使用)
v-model 的原理
vue中实现双向数据绑定其实用的就是Object.defineProperty方法
Object.defineProperty这个方法在js高程上面有详细的讲解
写法:Object.defineProperty(要添加或者修改属性的对象, 要添加或者修改的属性名, 特征对象)
两个数组合成一个数组
concat push
var let区别
var
var 存在全局作用域和函数作用域两种。没有块级作用域的说法,并且存在变量提升。
let
1.块级作用域{}
作用域只在他所在的代码块
一个 {}可以看作一个作用域
if语句和 for语句里面的{ }也属于块作用域
let 不允许在相同的作用域内,重复声明同一个变量。
const
const 声明一个只读的常量,一旦声明,常量值就不可以改变。所以const一旦声明就必须立即初始化。
只声明,不赋值,会报错(注意:var let 只声明不赋值 : undefined)
不能重新赋值const定义的值,但是可以修改const’声明的对象类型
变量提升好嘛?(主观意识,个人想法即可)
es6 结构赋值在什么时候用 …
写法繁琐的时候(个人观点)
浏览器 协商缓存 强缓存的区别
浏览器缓存的优点有:
减少了冗余的数据传输,节省了网费
减少了服务器的负担,大大提升了网站的性能
加快了客户端加载网页的速度
浏览器缓存的分类
浏览器缓存主要有两类:缓存协商和彻底缓存,也有称之为协商缓存和强缓存。
强缓存
强缓存是利用http的返回头中的Expires或者Cache-Control两个字段来控制的,用来表示资源的缓存时间。
协商缓存
协商缓存就是由服务器来确定缓存资源是否可用,所以客户端与服务器端要通过某种标识来进行通信,从而让服务器判断请求资源是否可以缓存访问,这主要涉及到下面两组header字段,这两组搭档都是成对出现的,即第一次请求的响应头带上某个字段(Last-Modified或者Etag),则后续请求则会带上对应的请求字段(If-Modified-Since或者If-None-Match),若响应头没有Last-Modified或者Etag字段,则请求头也不会有对应的字段。
(回去敲敲代码找找感觉,又忘了一个世纪,晚点还有一个面试,明天更哦!)