面试必备技能

1.面向对象:面向对象思想有三大要素：封装、继承和多态。

2.什么是ajax
基于XHTML 和 css标准表示
使用Document Object Model 进行动态的交互
使用XMLHttpRequest与服务器进行异步的交互
js可以绑定一切

3.创建ajax的过程?
创建XMLHttpRequest对象,也是创建一个异步调用的对象
创建一个新的HTTp请求,并指定改HTTp请求的方法,url以及验证信息
设置响应的HTTP状态变化的函数
发送HTTp请求
获取异步调用返回的数据
使用javascript 和 DOM 实现局部刷新

4.箭头函数: 保证this的指向,在创建的时候就确定了
字符串模板: 支持多行

解构赋值 :

 let a=1;
 let b=2;
 [a,b]=[b,a];

 ({a,b}={a:1,b:2})

 [a,b]=[1,2];

{ // 模拟json数据
    let metaData = {
        title: 'abc',
        test: [{
            title: 'test',
            desc: 'descrption'
        }]
    }
    let {title: esTitle, test: [{title: cnTitle}]} = metaData;
    console.log(esTitle, cnTitle);
}

5.获取cookies

if (getCookie('left')) {
    oDiv.style.left = getCookie('left') + 'px';
    oDiv.style.top = getCookie('top') + 'px';
}
设置cookies
// 设置cookie

setCookie('left',disX,7);
setCookie('top',disY,7);

6.ajax的请求数据

ajax('豆瓣.json'?act=add&user=ww&t='+Math.random(),function (data) {  // t是随机因子
    var json = eval('('+data+')'); // parse更加安全
    console.log(json.image);
    oImg.src = json.image;
},function (err) {
        console.log(err);
});
ajax({
    url: 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
    data: {wd: 'a',cb: 'show'},
    success: function (str) {
        alert(str);
    }
});

7.创建ajax对象 (判断是否存在请求头) –> 连接服务器 (‘请求方式’,url,true) –> 发送请求 –> 接收 onreadysatechange –> 状态是否为4 –> 状态码是否成功的 –> 成功的回调 (失败的回调)

8.跨域请求数据: 定义一个变量src等于接口+ this.value –> 手动创建一个script(document.createElement(‘标签名’)) –> 添加到head里面(appendChild) –> oScript.src = src; –> 设置一个全局函数show 接收 function(str) { var arr = str.s} , 设置ul的内容为空 , 循环创建 li标签 –> 赋值li标签 –> 添加进入到ul;

9.jsonp:
1.先把接口放到浏览器里面测试
2.手动写script标签
3.先全局的返回函数
4.解析数据
5.用完就移除

10.只要是使用new Person()创建对象,做了以下几件事件:
1.自动帮我们在函数里面new 了 Object
2.将创建的对象的值 赋值给了this
3.return this

11.有关方法继承问题:
子构造函数.prototype = new 父构造函数();
子构造函数.prototype.constructor = 子构造函数;

12.原型+构造函数创建
构造函数?
1.自动创建了一个对象obj
2.把obj赋值给了this
3.返回了this

封装继承多态

继承属性: 改变this的指向
父构造函数.call(this,形参对应的实参)
父构造函数.apply(this,arguments)

继承方法:
子构造函数.prototype = new 父构造函数();
子构造函数.prototype.constructor = 子构造函数

子弹: 和飞机的属性和init都有

13.jquery
css(属性名,属性值): 设置一个属性
css({属性名: 属性值,属性名: 属性值}): 设置多个属性

获取:
css(属性名)

双标签的内容: (相当于innerHTML)
html(): 没有参数,获取
html(内容): 设置

表单元素的内容: (相当于value)
val(): 没有参数,获取
val(内容): 设置

14.属性选择器:
选择器名[属性名=属性值]

index(): 获取同级元素的下标
类名:
addClass(类名): 添加类名
removeClass(类名): 删除类名

15.toggle开关,hover鼠标移入移出

toggle(function () {},function (){})
hover(function () {
    鼠标移入的时候执行
},function (){
    鼠标移出的时候执行
})

带有动画的方法:
slideDown(): 下拉
slideUp(): 上拉

fadeIn(): 淡入 (显示)
fadeOut(): 淡出(隐藏)

16.动画:

animate(params,[speed],[easing],[fn]): 常用
params: 必需参数,带[]的参数,是可选参数,可有可无,顺序不限
params: 属性对象 {属性名: 属性值}
speed: 动画时间 slow  normal fast 数字: 单位是毫秒
easing: 速率 linear swing
fn: 动画完成以后执行的函数 (回调函数)

17.移除事件

off(事件名,事件函数)  removeEvent
off(事件名): 移除该事件名的事件
off(): 移除所有

18.事件委托:

给父级元素添加事件,通过事件对象的srcElement|| target实现对应的操作
$(父元素的选择器).on(事件名,子元素的选择器名,fn);

19.向上滚动的距离

scrollTop(): 获取
$(document).scrollTop()
scrollTop(值): 设置滚动距离

20.offset(): 相当于我们原来的getPos()
$(‘div’).offset().left

21.动画:
animate({属性名,属性值},fn)

22.伪类选择器:

:nth-child(): 从1开始
:first-child:
:last-child:
:odd
:even
:gt(大于)
:lt(小于)
:eq(): 从0开始

23.开始动画以前,一定要先写stop()

24.标签属性:

oDiv.属性名= 属性值;
attr(属性名): 获取属性            getAttribute()
attr(属性名,属性值): 设置一个属性
attr({属性名: 属性值}): 设置多个属性   setAttribute()

removeAttr(属性名): 删除属性

25.遍历:

如果是标签元素的遍历:
$('li').each(function (index,ele) {});
如果是js数据类型的遍历:
$.each(遍历的数据,function (index,ele){});

json对象
$.each(遍历的数据,function(key,value) {});

26.删除元素:

remove(): 删除所有,包括本身 (直接删除自己)
empty(): 删除所有的子元素

children(): 所有的子元素  (js的children)
parent(): 父元素           (js: parentNode)

siblings(): 所有的兄弟

事件对象: 不需要进行兼容,直接用,pageX,pageY也不需要兼容

27.取消冒泡:
return false: 也可以取消冒泡;

evt.stopPropagation(): 可以取消冒泡

28.接口

get,post的区别:
1.get参数直接拼接在url地址后面,post的参数在url里面看不见
2.get只能发送4kb的数据,post能发送1G
3.post发送请求的时候,需要设置请求头
4.get在send里面不需要参数,post需要参数 (get?后面的内容)
5.get有缓存,post没有缓存

缓存: 一个url地址只请求一次; 
解决缓存问题: 加随机因子: t=Math.random() (当前时间 oDate)

29.自己封装:

ajax({
    url: url地址,
    type: 请求的类型,(默认是GET)
    data: ?后面的参数,
    success: function (str) {
        var json = eval('('+str+')');
    },
    error: function () {
        数据请求失败的回调函数
    },
});

30.jsonp: 跨域取数据!

json和jsonp的区别?
json是目的,jsonp是手段;
json是一种数据类型;jsonp是数据的处理方式;

jq的交互:

$.ajax({
    url:,
    data:,
    type:,
    async: true,
    success:,
    error:,
    cache: false(不缓存,true为需要缓存),
    timeout: 毫秒数 (网络超时),
    complete: function () {} (交互完成,无论数据请求成功,或者失败,都走complete)
})

31.4.json: 直接返回的数据就是json

$.ajax({
    url:,
    data:,
    type:,
    dataType: 'jsonp',
    jsonp:'callback'(默认值),
    success:function (str) {
        str字符串
    },
    error:,
    cache: false(不缓存,true为需要缓存),
    timeout: 毫秒数 (网络超时),
    complete: function () {} (交互完成,无论数据请求成功,或者失败,都走complete)
})

32.webpack 四个核心概念:入口(entry)、输出(output)、loader、插件(plugins)。

33.- 全局安装: npm install -g webpack
- 新建一个项目目录
- npm init -y
- 本地安装webpack : npm install -D webpack
- 在项目目录根目录下,新建一个文件: webpack.config.js

34.## webpack 的配置选项

- entry : 字符串, 
- output: 对象
    - path: 字符串: 你要输出的目标文件的路径文件夹
    - filename: 字符串: 你要输出的目标文件名
- module : 处理各种各样的loader
    - rules: [{},{}]
        - test : 匹配模式
        - use:  获取匹配后的文件,运用哪个loader进行处理, 从右往左执行
        - exclude : 排除某一些文件夹
- plugins : 处理各种插件: 数组

35.## 安装Gulp

- 全局安装: npm install -g  gulp  
- 创建package.json : npm init -y
- 本地安装: npm install -D gulp
- 在根目录里新建一个叫做gulpfile.js的文件. 

gulp的原生API

- gulp.task : 执行某一项任务
    - 任务名称
    - 任务的依赖数组
    - 任务执行的操作 

- gulp.src :
    - 读入操作, 把文件读入到内存流中
    - 生产环境文件夹目录: dist,  assets, build 
    - 如果参数输入的是数组,则必须满足所有数组中的匹配项,才可以. 

- gulp.dest :  
    - 输出操作, 通过gulp的流管道, 将文件流输出到新的路径中.  
    - 路径地址, 只能到文件夹, 不能到具体的文件.
- gulp.watch