前端JavaScript面试技巧

前端JavaScript面试技巧

第一章 课程简介

1-1课程简介

(前端基础&)

1-2前言

(网站前端程序开发分析&)

1-3几个面试题

(typeof操作符&require命令加载ES6模块&SpringLoaded&)

1-4如何搞定所有面试题

(获取字符串的字符集和排序方式的函数&)

第二章 JS基础知识（上）

2-1变量类型和计算一

(值类型&值类型和引用类型&typeo f操作符&==&===&请求帮助！我的测试运行得太慢了(引用类型对象数组和函数，可以无限扩展属性，typeof undefined function string object=null空指针 number boolean，字符串拼接类型转换，双等于把100转为字符串100 ，0和空字符串，null和undefined都会转为false，三等不会出现问题。If会把里面变量强制转为boolean类型，10会转为true，与或非逻辑运算符转化，！！两个非转为true))

引用类型对象、数组和函数，可以无限扩展属性

Typeof只能区分值类型的相信类型，不能区分引用类型都返回object undefined function string object=null空指针 number boolean

字符串拼接类型转换，双等于把100转为字符串100 ，0和空字符串，null和undefined都会转为false，三等不会出现问题。

If会把里面变量强制转为boolean类型，10会转为true，

与或非逻辑运算符转化，！！两个非转为true

2-2变量类型和计算二

(Undefined类型&Null类型&内置函数库(三等没有类型转换，判断null使用双等全部判断了，内置函数))

三等没有类型转换，判断null或者undefined使用双等全部判断了

内置函数

2-3变量类型和计算三

(内置对象与方法(JSON也是JS中内置对象，stringify把对象变为字符串 parse把字符串变为对象))

JSON也是JS中内置对象，stringify把对象变为字符串 parse把字符串变为对象

2-4类型和计算三代码演示

(类数组对象&类和类型&继承？我也会！& if标签(代码演示)&)

2-5原型和原型链-构造函数

(this词法&构造函数&instanceof有什么作用 (构造函数，首字母要大写，new实例的过程，this默认有return this ，this为空对象，构造函数的语法糖，instanceof Array判断一个函数是否是一个变量的构造函数))

构造函数，首字母要大写，new实例的过程，this默认有return this ，this为空对象，构造函数的语法糖，instanceof Array判断一个函数是否是一个变量的构造函数

构造函数，首字母要大写，new形成实例的过程，this注释后默认有return this ，New的时候this会先变为空对象，默认把this要return回来，

构造函数的语法糖，instanceof Array判断一个函数是否是一个数据，跟着数组变量的构造函数

2-6原型规则

(Null类型&__proto__ 属性& 类的prototype属性和 __proto__ 属性&原生构造函数的继承(所有对象除了null以外，都具有自由可扩展对象属性，所有引用类型都有_proto_属性隐式原型(属性值是一个普通对象)，所有函数都有一个显示原型prototype属性，_proto_指向构造函数的显示prototype属性obj._proto_===Object.prototype，试图修改一个对象属性本身没有属性会去构造函数的prototype属性))

所有对象除了null以外，都具有可扩展对象属性，

所有引用类型都有_proto_属性，所有函数都有一个prototype属性，_proto_指向构造函数的显示prototype属性，

试图修改一个对象属性本身没有属性会去构造函数的prototype属性

本身没有alertName属性，回去prototype中去找，

2-7原型规则二

(this和对象原型& Object.getOwnPropertyDescriptors()(this，hasOwnProperty拿到自己自身的属性，) )

F.alertName()通过对象的属性this永远指向对象自身f，通过对象属性执行函数，this永远指向对象本身

for in对对象进行循环，hasOwnProperty仅仅拿到自己自身的属性，拿不到alertName原型中来的属性

2-8原链

(toString与length方法&原型模式&Object.prototype(原型链，隐式原型本身是一个对象，对象构造方法的显示原型也是一个对象))

对象本身没有属性回去构造函数显示原型找，如果没法找到，原型链，隐式原型本身是一个对象，显示原型指向普通的对象构造函数是Object，对象构造方法的显示原型也是一个对象

方框是构造函数，圆角是对象，Foo.prototype也是一个对象，对象构造函数是Oject函数，函数有一个Object.prototype显示原型(也是对象)

2-9原链-install

(instanceof有什么作用 (instanceof一层一层能否对应到Foo.prototype))

Instanceof引用类型是哪个构造函数，一层一层能否对应到Foo.prototype

2-10原型和链接-解答

(类的prototype属性和 __proto__ 属性&原生构造函数的继承&this和对象原型(判断一个变量是数组类型，原型继承例子，new一个对象的过程，this指向这个新对象，))

判断一个变量是数组类型，typeof引用类型只有函数是function其他都是Object

原型继承例子，Dog.prototype=new Anial() 显示原型赋值一个对象，这个对象有一个eat方法。哈士奇=new Dog() 哈士奇.eat()会从Dog的显示原型中取，显示原型已经有了eat属性

new一个对象的过程，this指向这个新对象，执行代码对this赋值

2-11解答2

(什么是DOM&获取 HTMLElement 节点的 Ext.Element 实例)&addEventListener与attachEvent&通过html()方法判断元素是否为空& jQuery事件的链式写法(原型继承实例，原型链扩展一个函数，on addEventListener))

This.elem属性对象有了elem属性，原型继承实例，原型链扩展一个函数，div变量就会有elem属性，原型上扩展一个函数，如果val有值就赋值，否则就返回 returnthis返回这个对象，Dom.innerHTML

On事件绑定，第一个是click第二个是一个函数， addEventListener执行事件绑定

链式操作，函数都返回this ，返回div1对象

2-12原型和原型链-代码演示

(Function&for、let和return子句&[[Prototype]]&Object.prototype&instanceof有什么作用 &)

第三章 JS基础知识（中）

3.1作用域和闭包-执行代码演示

(变量提升& let取代var& Arguments对象& “this”关键字(函数表达式与函数声明，))

函数表达式var fn=function(){ }提前执行会报错 与函数声明function fn(){}会被前置在前面执行fn()不会报错 ，函数表达式不能把函数提前，var前置执行会undefined

函数执行之前age提前占位，

也是成立的

函数执行之前this就已经确定为window，arguments函数参数集合和this在执行之前就能确定值

3.2作用域和闭包-执行上下文

(容器上下文环境(执行上下文， 函数arguments )&)

执行上下文，

一段标签都会生成执行上下文， 函数arguments，函数执行前先把变量定义函数声明拿出来，this和所有参数集合都提前拿出来

3-3到3-5

(This关键字&使用apply或call实现伪继承&使用window对象&绑定JavaScript对象属性&使用bind()方法绑定事件&没有块级作用域&全局作用域&函数内部属性&自由式作业&延长作用域链(this要在执行时才能确认值，this作为构造函数，对象属性执行，普通函数执行，call apply bind))

this要在执行时才能确认值，定义时无法确认值。Call的时候this赋值给B，this是B。

this作为构造函数返回this，对象属性执行，普通函数执行(this==window)，call apply bind，this相当于第一个参数

函数作为对象属性执行，

Call后面跟着fn1的参数，第一个参数是this

Bind函数this规定为y:200不想让函数的this是window，bind不能用函数声明必须用函数表达式var fn=function(){}

没有块作用域，Js没有块级作用域name在括号外面可以访问到，但是有全局作用域var a=100; 函数中定义的a与外面隔绝的，要把所有变量定义在函数中，

当前作用域没有定义的变量即自由变量，函数父作用域是函数定义时的位置，不是函数执行是的位置。作用域链会找到外面

F2在F1中定义，F2的父级作用域是F1。自由变量会去父级作用域找，如果找不到继续向上找，

3-6到3-8

(闭包&闭包与变量&关于this对象& 函数属性、方法和构造函数&参数传递(闭包，闭包使用场景函数作为返回值和函数作为参数传递))

没有块级作用域，大括号没有办法约束变量

闭包对自由变量进行保护找父级作用域，闭包使用场景函数作为返回值和函数作为参数传递，全局作用域与局部作用域没有任何关系，一个函数父级作用域是它定义时的作用域不是执行时的作用域，定义的时候就是var a=100。

作用域更改，作用域完全不一样

参数传递，里面的return funtion()执行，在声明定义作用域找与执行作用域无关

3-9到3-10作用域和闭包—解题

(如何阻止冒泡的发生&闭包与变量&for、let和return子句(创建10个标签，点击弹出对应序号，自执行函数))

Alert(i)自由变量去副作用域找，i早就成10了，全局作用域会有影响，创建10个标签，点击弹出对应序号，自执行函数

点击a标签是在都指向完毕后i是自由变量

监听点击click事件，取消默认行为链接点击跑了，自执行定义函数自己执行自己，函数里有函数作用域。针对函数作用域的i还是当时定义执行时的i没有变化。

判断用户是否为第一次加载，闭包意义在函数外面不能修改list值。List不能随意修改。

下划线变量是私有变量，list自由变量去定义的时候父作用域取值，闭包实际中做绑定与收敛权限，只把常用的东西开放出去。

第四章JS基础知识(下)

4-1什么是异步

(setTimeout&同步方法与异步方法& Alert应用程序编程接口&setInterval(setTimeout异步，alert()同步，是否阻塞后面程序的运行，何时需要异步，使用异步场景，绑定 addListener和 ajax请求))

setTimeout异步不会阻塞后面代码，alert()同步需要等待，是否阻塞后面程序的运行，

何时需要异步，使用异步场景，加载，事件绑定 addListener和 ajax请求

Img.src=””，下面该怎么做就怎么做

绑定事件

4-2什么是异步-代码演示

(addEventListener与attachEvent&load()方法&$.get()方法和$.post()方法($.get() img.οnlοad=function(){ }))

4-3异步和单线程-单线程

(&单线程(异步与单线程，一次只能做一件事，))

异步与JS单线程，一次只能做一件事，先把能执行的执行完回过头再看阻塞（暂存封禁着的）的

4-4异步和单线程-解答  

(同步和异步(暂存了一个，))

暂存了一个，等待1000毫秒解封打印4,13524

4-5日期和math

(合并日期和时间&Math(工具函数，获取日期格式，随机数长度一致，变量数组和对象的通用forEach函数，))

工具函数获取日期格式，Date日期构造函数，getMonth()从0开头的+1

随机数长度一致，变量数组和对象的通用forEach函数，

4-6数组和对象的API

(some/every判断表达式&排序类Sort &Filter配置(every判断所有哦元素符合条件，some判断至少一个元素符合条件，map重新组装生成新数组，filter过滤符合条件元素))

every判断所有哦元素符合条件，some判断至少一个元素符合条件，map重新组装生成新数组，filter过滤符合条件元素

所有元素都符合条件，所有都要满足，有1,2个不满足就会判断失败，最后result为true

只要有一个元素满足条件返回。

生成另外的数组，对元素重新组装

大于100的过滤出来，只打印2,3的数组

For in遍历对象，key是obj的属性名，hasOwnProperty是原生的属性，打印obj[key]就是一个值

4-7知识点代码演示

(some/every判断表达式(arr.forEach(function(item,index)))&)

arr.forEach(function(item,index))

4-8其他知识点  

(定义统一返回的格式&用Math.random（）产生随机数&遍历对象&遍历数组(getFullYear() 0+”” ，random.slice(0,10) for(key int obj) obj[key] )&)

getFullYear()个位小于10要加 0+””字符串拼接强制类型转换， if(!dt)没有参数

random.slice(0,10)截取前十位， 获取长度一直字符串，后面加10个0，如果只有3位

for(key int obj) obj[key] ，调用函数

4-9其他知识点-代码演示  

(SimpleDateFormat非线程安全&slice切片浅层复制&foreach循环优于for循环&has() &)

第五章 JS-Web-API

5-1从基础到JSWebAPI

(Navigator对象--浏览器总体信息的代表)

5-2DOM本质

(把文档表示为树&DOM对象的通用属性和方法&使用attr(name)方法获取元素的属性(attr和property的区别，DOM本质))

attr和property的区别，DOM本质，浏览器拿到html代码(就是一个字符串)，结构化js与浏览器可识别的DOM，

5-3BOM节点操作

(querySelectorAll()方法& 函数的length属性&Class 与Style 绑定&Spring注解属性别名和覆盖（Attribute Aliases and Overrides）(Dom节点操作，获取dom节点，getElementsByClassName(),querySelectorAll()，js对象属性可扩展，p.style.width，getAttribute))

Dom节点操作，获取dom节点，getElementsByClassName(),querySelectorAll()集合之前所有过滤方式，js对象属性可扩展，p.style.width，getAttribute

每一个dom都有一个style属性，property是js对象的标准属性，

Attribute是标签的属性，获取的是文档html的属性

Protype是Js属性的获取，attribute不用console.log，改完直接跑到标签里。

5-4BOM节点操作-代码演示

(Reflect.defineProperty(target, propertyKey, attribute(getElementByTagName())s)&)

getElementByTagName()

5-5BOM结构操作  

(使用append()方法插入节点&has_parent query(createElement() appendChild() childNodes parentElement removeChild()))

createElement() appendChild() childNodes parentElement removeChild()

DOM是树结构，

5-6BOM结构操作-代码演示

(使用append()方法插入节点&children属性(innerHTML childNodes[0].nodeType nodeName )&)

innerHTML childNodes[0].nodeType nodeName

已经有了位置再移动一个节点appendChild()，以前的地方就没有了。

获取父元素，div1.parentElement，子元素集合通过数组的元素的方式获取单个元素，删除节点removeChile(child[0])

childNodes多级兼容，nodeType标签类型，正规标签是1，其他空格字符text获取为3

5-7BOM结构解答  

(HTML&修改文件属性)

HTML&修改文件属性

 

5-8BOM操作-知识点

(浏览器对象模型（BOM）&navigator对象&Screen对象--提供显示器分辨率和可用颜色数量信息& Location对象--当前窗口中显示文档的URL的代表& History对象--一个有趣的对象&location的快速检索(检查浏览器类型userAgent，navigator screen屏幕 location.protocol协议 pathname域名后的路径，search 问号后的查询字符串 hash#后面的 ， history.back() forward() ))

检查浏览器类型userAgent通过字符串查看浏览器特性，浏览器navigator screen屏幕 location地址栏信息. location.protocol协议 location.pathname域名后的路径，location.search 问号后的查询字符串 hash#后面的 ， 历史history.back() forward()左上角的返回

5-9BOM操作-代码演示

(Location对象--当前窗口中显示文档的URL的代表&)

Location对象--当前窗口中显示文档的URL的代表&

Location.host域名，location.href修改地址

第六章 JS-Web-API （下）

6-1事件-知识点_recv

(实现事件绑定的基本方法&addEventListener与attachEvent&取消事件的默认行为&事件冒泡&选择代理策略&：target伪类选择器 &undefined和null &matchesSelector()&绑定this(addEventListener通用事件绑定，preventDefault阻止浏览器默认行为，addEvent ，stopPropatation()阻止事件冒泡，e.target，target.matches(selectors)使用代理 ))

addEventListener通用事件绑定代码写完压缩编译不能压缩，占用带宽性能不好，需要进行方法封装，preventDefault阻止浏览器默认行为对于a标签不进行跳转否则不能alert了，addEvent ，stopPropatation()阻止事件冒泡，e.target，target.matches(selectors)使用代理

兼容低版本addachEvent ，点击激活弹出激活两字点击取消弹出取消两字，stopPropatation()阻止事件冒泡否则最后会冒泡到body上

以后会新增很多的a标签给所有的a标签增加事件，只能把事件绑定在div1上点击每一个标签最后都会冒泡到div上，e.target div上监听target告诉点击从哪里触发的，nodeName是a标签，innerHTML是a1，a2，a3，a4

Selector不用代理第三个参数也不能空着，不适用代理第三个参数不用传递fn就是第三个参数，target.matches(selectors)使用代理判断是否符合传递的目标元素，如果符合执行fn，不适用代理直接执行。

虽然div1绑定事件，要代理a标签的事件，代理事件触发的源头是a标签，如果没有this没法知道是a标签。call的第一个参数就是this，target是事件触发的目标。fn.call(this,e)this就是target，通过call执行函数，把执行时的this换成了target

6-2事件-代码演示_recv

(addEventListener与attachEvent &value和defaultValue的区别&使用apply或call实现伪继承()&)

addEventListener与attachEvent &value和defaultValue的区别&使用apply或call实现伪继承()&

函数里面有一个e阻止冒泡

6-3事件-解答_recv

(事件中的冒泡现象&事件绑定(通用事件监听函数，)&)

通用事件监听函数，

6-4Ajax-XMLHttpRequst_recv

(XMLHttpRequest&异步执行&HTTP状态码&Node Status(new XMLHttpRequest() xhr.onreadystatechange()异步执行，xhr.readState ==4 xhr.send(null) ))

new XMLHttpRequest() xhr.onreadystatechange()异步执行，xhr.readState ==4 xhr.send(null)

False是异步执行的，readyState==4已经完成，返回状态码status==200返回成功，responseText服务端返回的内容，定义完毕后面才会执行才是异步。每次readyState状态变化都会触发onreadystateChange方法。

6-5Ajax-跨域和问题解答_recv

(JSONP&headers 配置&策略是什么&命令 443&跨域请求&CDN架构&借助发送HTTP请求：JSONP&活用模板方法模式及Callback&跨域解决方案&response&Allow&XMLHttpRequest对象(浏览器有同源策略，不能访问其他域名接口，href ming src三个标签允许跨域加载资源，jsonp服务器可根据请求动态生成一个文件返回。Cros在服务端设置http header response.setHeader(“Allow-Origin”)运行跨域源，Headers Methods 接收跨域  ))

浏览器有同源策略，不能访问其他域名接口，href ming src三个标签允许跨域加载资源，jsonp服务器可根据请求动态生成一个文件返回。Cros在服务端设置http header response.setHeader(“Allow-Origin”)运行跨域源，Headers Methods 接收跨域

同源策略不再一个域名下不允许访问，

https默认端口443，http协议默认端口80

逃避跨域请求，

6-6存储_recv

( localStorage和sessionStorage&cookie &客户端存储&try/catch块(document.cookie存储量小，locationStorage和sessionStorage专门为存储设计，最大容量5M  ))

document.cookie存储量小，locationStorage和sessionStorage专门为存储设计，最大容量5M

第七章 开发环境

7-1开发环境介绍_recv

(在IDE工具中进行源码调试&在Git 中加密属性&JavaScript 模块化方案&打包&)

在IDE工具中进行源码调试&在Git 中加密属性&JavaScript 模块化方案&打包&

7-2 IDE_recv

(使用可视化软件WebStorm制作页面&Sublime界面风格选择&安装VSCode&发布更新信息的RSS/Atom&基于浏览器的图形化调试插件)

使用可视化软件WebStorm制作页面&Sublime界面风格选择&安装VSCode&发布更新信息的RSS/Atom&基于浏览器的图形化调试插件

7-3 git_recv

(命令git add -u快速标记删除/&深入了解 git checkout 命令/ &用git commit的一些注意事项&用push命令上载修改&pull：拉取项目镜像&创建分支&使用分支的原因&MERGE-----)

命令git add -u快速标记删除/&深入了解 git checkout 命令/ &用git commit的一些注意事项&用push命令上载修改&pull：拉取项目镜像&创建分支&使用分支的原因&MERGE-----

新建和修改了一些文件 git add . 点把所有修改和新增的文件全部囊括起来，checkout 发现自己改错了要还原回去，git commit -m “”备注 把修改内容提交到本地仓库，git push origin master提交远程服务器仓库 git pull origin master下载下来修改的内容，代码提交共享。

常用git命令，git add . git  checkout xxx git commit -m "xxx"，git push origin master， git pull origin master

多人开发git branch查看分支，git checkout -b新建分支 git checkout XXX 切换已有分支。

分支就是创建一个属于自己的地盘不和他人共享。

Git merge 原本分支是master分支，checkout -b在新建abc分支修改完毕，在git checkout master再切换回master分支，git merge 把以前abc修改的分支全部merge到master分支。

git merge xxx

7-4-代码演示_recv

(SSH配置&)

SSH配置&

创建远程仓库

Git init初始化git环境，

创建文件并且输入内容，

新增文件通过git status查看上传的状态，git add囊括文件

增加源，提交上去

git remote，git push

新增一个文件，修改文件

Git diff看不了新增的，只能看改过的，q退出，git add

Crtl+c可以取消git add命令

Git checkout让某个文件回到原来的状态

上传修改的文件，推到master上

git commit -m，

git push origin master

回到上一级目录

cd..

从git上把代码下载到本地，

git clone

Git pull origin master更新获取别人修改的内容

7-5-代码演示-多人协作_recv

(使用分支的原因& 检出分支&深入了解 git checkout 命令&PUSH 和 PULL 操作与远程版本库/ &MERGE)

使用分支的原因& 检出分支&深入了解 git checkout 命令&PUSH 和 PULL 操作与远程版本库/ &MERGE

一天一push要提交多次push就已经提交上去了，只做到一半有可能未测试会出现bug。

如果gitpull获取的代码有可能有问题的，git branch查看当前分支

git branch查看分支

新建一个分支 git checkout -b dev分支

要把本地的dev分支提交上去git push origin dev，对master分支没有任何影响

git Checkout master 获取已有的分支，到已有的master分支并且更新一下为最近的

把dev的修改merge进来，最后一步push到源master上去

Git pull origin master

git merge dev

git push origin master

7-6 模块化-ADM_recv

(优秀的模块化设计& export命令& require命令加载ES6模块&Module的加载实现&jQuery中异步加载XML文档& require命令加载ES6模块& for、let和return子句&AMD规范)

优秀的模块化设计& export命令& require命令加载ES6模块&Module的加载实现&jQuery中异步加载XML文档& require命令加载ES6模块& for、let和return子句&AMD规范

基础库，

Util.js吐出一个对象函数，不用暴露给全局。在a-util.js用到谁就主动引用utils.js，没有必要是全局变量。A.js最后用到谁就去引用谁，引用过来之后使用。最后直接src a.js就可以了。自己知道引用了谁就行，不会出现漏引用问题。

export require

异步模块定义的规范，全局定义define函数和require函数，只用依赖最表层只加载一个。

require.js

require定义a.js依赖return什么我们就获取什么， 说明main.js要依赖于a.js，a.js最后return 一个printDate对象，return得到东西就是赋值给a。

Define函数说明a.js要依赖于a-utils.js，function中的aUtil是a-util.js中返回的值，最终自己return一个对象的printDate。

只有define的东西才能被require。Require第一个数字，后面function就对应多个参数，最底层只要define即可。

Main.js就是程序入口，依赖关系的下载不需要我们关心。

7-7-AMD-代码演示_recv

(AMD规范& DEFINE_PER_THREAD() &)

AMD规范& DEFINE_PER_THREAD() &

返回一个对象，依赖的时候会把返回的对象传入function中，

define

最终把对象返回出去。

Main.js入口直接依赖就可以

7-8 模块化-CommonJS_recv

(服务端 JavaScript 的重生CommonJS 规范与实现　&安装和配置Node.js&包与NPM

&module)

服务端 JavaScript 的重生CommonJS 规范与实现　&安装和配置Node.js&包与NPM

&module

需要引用什么require，需要吐出什么module.exports

7-9 构建工具-安装nodejs_recv

(构建工具&webpack 的特点与优势&NPM入门&查看与删除使用npm命令安装的软件&package.json )

构建工具&webpack 的特点与优势&NPM入门&查看与删除使用npm命令安装的软件&package.json 

前端构建工具Grunt被gulp取代，最后是fis3在百度内使用最多，现在规范webpack

控制台进入有index.html的目录，启动node服务。

保证有nodeJs和npm 进入index.html的目录

window管理员权限运行后台，安装http-server只能浏览静态网页

在有静态页面的目录下执行http-server -p 8881，只能浏览静态页面

7-10 构建工具-安装webpack _recv

(&安装&基于 webpack 进行开发&安装)

&安装&基于 webpack 进行开发&安装

初始化npm的环境，在index.html目录下， 运行npm init

起名字

会多了一个package.json的文件

安装webpack，--save-dev 包webpack保存起来只用于开发环境，上线集中运行不需要webpack，jQuery库不仅仅在开发环境与运行浏览器都需要使用不能有-dev

简写

卸载uninstall

7-11 构建工具-配置webpack_recv

(配置文件&使用 plugin&实时构建&resolve&module&entry&配置文件&context&output&基本使用 )

配置文件&使用 plugin&实时构建&resolve&module&entry&配置文件&context&output&基本使用

新建Webpack.config.js文件，path获取nodeJs的path对象对路径处理能力，构建工具webpack需要使用，获取安装的webpack。

输出对象context:resolve()找到目录，双下划dirname在webpack的目录下面找到在weebpack目录下面的src目录，现在没有需要手动创建一个。

Entry是webpack的入口从哪开始处理js，app.js在context定义的src目录下。Webpack打包安装的输出的目录，path.resolve() output webpack会自动创建目录

处理app.js入口文件，在package.json中找到script，输入npm start命令执行webpack命令

执行webpack命令，要支持commonJS模块化打包，commonJS是nodeJs后端使用的放到前端需要有个东西能支持兼容一下，不能无缝连接。webpack支持CommonJs运行在前端，最后把我们的console.log()代码包含进去。

页面引入把打包输出的文件引入 bundle.js

7-12-构建工具-使用jQuery_recv

( require命令加载ES6模块 &Starter POMs&export风格)

require命令加载ES6模块 &Starter POMs&export风格

从package.json中取出jquery，通过名字来拿到

重新打包命令

知道id为root的div，require是字符串，通过package.json对接出来

重新指向构建命令。

使用自己定义到js，对象有一个print函数

通过require相对路径获取文件

7-13 构建工具-压缩JS_recv

(压缩&plugins)

压缩&plugins

Webpack压缩代码，追加plugins插件

打包工具对于Js核心作用就是代码和合并，合并通过webpack的CommonJs或者AMD对模块化代码打包，不压缩打包前端无法识别与上线，

7-14上线滚回-上线滚回流程_recv

(失败回滚&Master设计&当znode节点重新创建时，重置版本号(Linux命令行服务器，上线流程将完成代码提交到git版本库的master分支，保证master分支是测试完成之后的上线，当前服务器代码打包记录版本号备份，master版本代码覆盖线上服务器生成新版本号，回滚将服务器代码打包并记录版本号备份，上一个版本号解压覆盖线上服务器生成新版本号，)&)

Linux命令行服务器，上线流程将完成代码提交到git版本库的master分支，保证master分支是测试完成之后的上线，当前服务器代码打包记录版本号备份，master版本代码覆盖线上服务器生成新版本号，回滚将服务器代码打包并记录版本号备份，上一个版本号解压覆盖线上服务器生成新版本号，

7-15上线回滚-Linux基础命令_recv

(用SSH协议来共享版本库&vi与vim&命令写入&保存数据&HEAD 的重置即检出&grep(登录专门配的账号，通过ssh 用户名和机器ip登录，mkdir创建文件夹，ls查看 ll列表形式，cd进入文件夹，pwd当前目录，返回上一级cd .. 删除一个文件夹 rm -rf ，vi编辑 拷贝cp a.js a1.js，mv a.js移动，rm a.js删除文件。Vim i进入输入模式 esc不能输入，保存esc冒号w回车保存 冒号q退出。查看文件内容cat  head查看前面内容 tail  head -n 1 a.js 看第一行。Grep从文件中搜索 ))

登录专门配的账号，通过ssh 用户名和机器ip登录，mkdir创建文件夹，ls查看 ll列表形式，cd进入文件夹，pwd当前目录，返回上一级cd .. 删除一个文件夹 rm -rf ，vi编辑 拷贝cp a.js a1.js，mv a.js移动，rm a.js删除文件。Vim i进入输入模式 esc不能输入，保存esc冒号w回车保存 冒号q退出。查看文件内容cat  head查看前面内容 tail  head -n 1 a.js 看第一行。Grep从文件中搜索

Ls只看名字，ll列表形式，cd进入a文件夹 cd ..上一级目录，删除一个文件夹rm -rf a

拷贝cp a.js a1.js两个文件，

Mv移动到，mkdir创建文件夹

删除一个文件 rm

vim输入i进入输入环境，esc不能输入不可编辑环境。保存先点击esc冒号w回车写入，q退出。

Cat看文件全部内容，tail看前面和后面内容

只看第一行 head a.js -n 1

文件搜索

第八章 运行环境

8-1 介绍

(条件渲染和列表渲染&页面加载遮盖插件LoadMask &)

条件渲染和列表渲染&页面加载遮盖插件LoadMask &

 

8-2 页面加载-渲染过程

(加载资源文件的顺序&自定义DNS和上游DNS服务器&地图渲染&)

加载资源文件的顺序&自定义DNS和上游DNS服务器&地图渲染&

 

8-3页面加载-几种示例

(分离HEAD分支&内部类——InnerClasses属性&使用window对象&)

分离HEAD分支&内部类——InnerClasses属性&使用window对象&

 

8-4 页面加载-解答

(处理URL&操纵DOM的链接功能&)

处理URL&操纵DOM的链接功能&

 

8-5 性能优化-优化策略

(自动加载更多推荐列表&CDN架构&处理前端和后端&延迟加载/"懒汉模式"

&函数节流&)

自动加载更多推荐列表&CDN架构&处理前端和后端&延迟加载/"懒汉模式"

&函数节流&

 

8-6 性能优化-几个示例_recv

(源码篇——父子类合并策略&源码篇——缓存&合并业务逻辑组件和Domain Object &)

源码篇——父子类合并策略&源码篇——缓存&合并业务逻辑组件和Domain Object &

 

8-7 安全性-XSS

(X-XSS-Protection&因输出值转义不完全引发的安全漏洞&)

X-XSS-Protection&因输出值转义不完全引发的安全漏洞&

 

8-8 安全性-XSRF

(CSRF攻击&)

CSRF攻击&

 

8-9 面试技巧

(将员工照片插入到Word简历&)

将员工照片插入到Word简历&