2024年前端最新前端静态网页实战项目京东首页，vivo前端面试

JavaScript

• js的基本类型有哪些？引用类型有哪些？null和undefined的区别。

• 如何判断一个变量是Array类型？如何判断一个变量是Number类型？（都不止一种）

• Object是引用类型嘛？引用类型和基本类型有什么区别？哪个是存在堆哪一个是存在栈上面的？

• JS常见的dom操作api

• 解释一下事件冒泡和事件捕获

• 事件委托（手写例子），事件冒泡和捕获，如何阻止冒泡？如何组织默认事件？

• 对闭包的理解？什么时候构成闭包？闭包的实现方法？闭包的优缺点？

• this有哪些使用场景？跟C,Java中的this有什么区别？如何改变this的值？

• call，apply，bind

• 显示原型和隐式原型，手绘原型链，原型链是什么？为什么要有原型链

• 创建对象的多种方式

• 实现继承的多种方式和优缺点

• new 一个对象具体做了什么

• 手写Ajax，XMLHttpRequest

• 变量提升

• 举例说明一个匿名函数的典型用例

• 指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？有哪些内置对象和内置函数？

• attribute和property的区别

• document load和document DOMContentLoaded两个事件的区别

• JS代码调试

• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  

手机京东

3.在下面就是页面的主体部分，秒杀、优惠券、闪购、

下面这是真正的京东首页，与本次静态页面的不同是添加了部分照片，大家实战联系的时候可以分出一块区域添加图片

4.最后都是每个网站的页脚部分，主要是介绍一下自己还有就是合作方，部分代码如下，这些文字都是可以改掉的，这只是个简单的模板

购物指南

购物流程

购物流程

购物流程

购物流程

购物流程

购物流程

购物指南

购物流程

购物流程

购物流程

购物流程

购物流程

购物流程

购物指南

购物流程

购物流程

购物流程

购物流程

购物流程

购物流程

购物指南

购物流程

购物流程

购物流程

购物流程

购物流程

购物流程

购物指南

购物流程

购物流程

购物流程

购物流程

购物流程

购物流程

.CSS部分

.w { /* 版心的公共类 */

width: 1190px; /* 京东的版心是 1190 */

margin: 0 auto;

}

.fl { /* 浮动的公共类 */

float: left;

}

.fr {

float: right;

}

a {

text-decoration: none; /* 取消下划线 */

font-size: 12px;

color: #999;

}

a:hover {

color: #c81623;

}

blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{

margin: 0;

padding: 0;

}

input,button {

border: 0;

outline: none; /* 取消轮廓边框 */

}

ul {

list-style: none;

}

body {

background-color: #f6f6f6;

}

.f10{

color: #f10215!important;

}

@font-face { /* 声明字体 */

font-family: ‘icomoon’;

src: url(‘…/fonts/icomoon.eot?8qhwk5’);

src: url(‘…/fonts/icomoon.eot?8qhwk5#iefix’) format(‘embedded-opentype’),

url(‘…/fonts/icomoon.ttf?8qhwk5’) format(‘truetype’),

url(‘…/fonts/icomoon.woff?8qhwk5’) format(‘woff’),

url(‘…/fonts/icomoon.svg?8qhwk5#icomoon’) format(‘svg’);

font-weight: normal;

font-style: normal;

}

/* header部分 */

header {

height: 80px;

background-color: #020000;

}

/* 快速导航栏begin */

.shortcut {

height: 30px;

line-height: 30px;

background-color: #e3e4e5;

border-bottom: 1px solid #ddd;

}

.city {

margin-left: 200px;

}

.shortcut li {

float: left;

}

.shortcut i {

font-family: “icomoon”;

font-style: normal; /* 让倾斜的不倾斜 */

color: #ccc;

}

.space { /* 小竖线 */

width: 1px;

height: 10px;

background-color: #ccc;

margin: 10px 12px 0; /* 上 10 左右是 12 下是 0 */

JavaScript

• js的基本类型有哪些？引用类型有哪些？null和undefined的区别。

• 如何判断一个变量是Array类型？如何判断一个变量是Number类型？（都不止一种）

• Object是引用类型嘛？引用类型和基本类型有什么区别？哪个是存在堆哪一个是存在栈上面的？

• JS常见的dom操作api

• 解释一下事件冒泡和事件捕获

• 事件委托（手写例子），事件冒泡和捕获，如何阻止冒泡？如何组织默认事件？

• 对闭包的理解？什么时候构成闭包？闭包的实现方法？闭包的优缺点？

• this有哪些使用场景？跟C,Java中的this有什么区别？如何改变this的值？

• call，apply，bind

• 显示原型和隐式原型，手绘原型链，原型链是什么？为什么要有原型链

• 创建对象的多种方式

• 实现继承的多种方式和优缺点

• new 一个对象具体做了什么

• 手写Ajax，XMLHttpRequest

• 变量提升

• 举例说明一个匿名函数的典型用例

• 指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？有哪些内置对象和内置函数？

• attribute和property的区别

• document load和document DOMContentLoaded两个事件的区别

• JS代码调试

• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】