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代码调试
-
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
6. 什么是****vue.js
(1)它是一个轻量级MVVM框架;
(2)数据驱动+组件化的前端开发
(3)GitHub超过25k star,社区完善
对比****Angular 和React
vue.js更加轻量,gzip后大小之后20K+,因此对于移动端来说vue更加适合;
vue.js容易上手,学习曲线平稳;(angular入手较难)
吸收两家之长,借鉴angular的指令和react的组件化;
Vue.js****的核心思想
**(1)数据驱动:**DOM是数据的一种自然映射
如果没有Viewmodel是如何交互的?视图改变会手动触发DOM改变。
使用了Vue.js之后,就省去了手动操作DOM的步骤,在vue.js中只用改变数据,vue.js通过Directive指令,对DOM进行封装,当数据发生变化,会通知指令修改对应的DOM,数据驱动DOM变化,DOM是数据的一种自然映射。Vue.js还会对操作做一些监听,当我们修改视图的时候,vue.js监听到这些变换,从而改变数据,这样就形成了数据的双向绑定。
数据响应原理:数据改变驱动视图更新。
有一份数据a.b,在一个vue对象实例化的过程中,会给b通过object。Defineproperty属性添加了getter和setter,同时vue.js会对模板进行编译,解析生成一个指令对象v-text指令,每个指令对象都会关联一个watcher,当我们对对应的表达式a.b求值的时候,就会触发getter,把依赖收集到watcher里面。当再次改变a.b的值的时候,会触发setter,会通知到对应的watcher,watcher会再次对a.b求值,计算对比新旧值,当发现值改变,watcher会通知到指令,使用指令的update方法,由于指令是对DOM的封装,所以就会调用原生DOM的方法更新视图,这样就完成了数据改变到数据更新的一个自动化的过程。
**(2)组件的设计原则:**页面上每个独立的可视/可交互区域视为一个组件;每个组件对应一个工程目录,组件需要的各种资源在这个目录下就近维护(前端工程化和分治思想);页面不过是组件容器,组件可以嵌套自由组合形成完整页面。
7. cube-ui组件库
-
Popup 弹层:底层弹层组件,主要用于基于此组件实现上层组件封装,只提供了基础功能:指定类型、是否有背景层、显示内容(HTML)以及是否居中。
-
内置所有的弹层类组件都是基于此组件实现,包括:Toast、Picker、TimePicker、Dialog、ActionSheet。
-
Scroll 滚动:滚动列表,提供了优质的原生滚动体验,便捷的配置项和事件,是一个基于better-scroll进行封装的组件。
-
Slide 幻灯片:轮播图,提供了常见的轮播及swipe的功能,也是一个基于better-scroll进行封装的组件。
-
IndexList 索引列表:索引列表,提供了列表索引的功能,也是一个基于better-scroll进行封装的组件。
-
create-api:有些时候,开发者可能也需要自己封装的组件支持 API 式调用,此时可以通过引入 create-api 模块或者通过全局的 Cube.createAPI 接口来达到封装目的。
-
Dialog:Dialog模态框组件,提供了多种样式及交互形式。
二、项目准备
==========
1. 需求分析
1)区块划分
6张设计稿;区块划分为:头部区、内容区(商品页、评论页、商家详情页)
点击导航栏会进行切换,由于是SPA单页面应用–切换页面时不会刷新整个页面;
(1)头部区:包括商家描述,当点击公告和数字的时候会展示黑色的浮层,点击按钮浮层关闭;
(2)内容区
**商品页:**可以拆分为左右两栏,左侧是商品的分类,右侧是实际商品的列表。当商品区块对应某个分类时,左边导航栏相应分类会高亮,当列表内容超过页面可视区块时,可以进行滚动,在滚动右侧时,左侧的高亮区也会保持联动的效果。商品页底部是一个购物车,当点击加号购买商品的时候,购物车会联动购买的商品总数和金额,当金额超过最小配送费时,显示“去结算”按钮,点击按钮可以进行结算;当购物车商品部位0 时,点击购物车是没有反应的;点击购物车会弹出购物车列表,列表也有最大高度,当超过最大高度,内部可以滚动,在购物车内部也可以进行添加和删除操作,并且和主页面保持联动。当我们点击具体的商品,会展示具体商品页浮层,有商品图片、介绍,可以点击加入购物车,一样可以完成一次购买流程,底部是一个评论区,我们可以条件查看,比如根基评级类型(有无内容)进行勾选,评论区的显示会相应做出变化,当浮层页面超过手机高度时,页面可以滚动,页面左上角有一个返回按钮,点击按钮浮层会关闭。
**商品评论页:**上面是一个评星级别,下面是具体的评论区。
**商家详情页:**主要是商家信息的展示,商家实景图是当图片官渡超过页面宽度时可以左右滚动,当整个页面超过手机高度,可以上下滚动,有一个收藏区块,可以点击收藏关注商家。
2)组件拆分
由于是组件化的开发,整个页面可以看成App.vue一个大组件。
大组件包含头部(header),导航区(主要控制下面内容部分的切换),内容部分包含商品(goods),评价(ratings),商家(seller)三个组件。
2. 图片素材
1)设备像素比
移动端一张图片需要2x和3x,来适应不同dpr(device picture ratio设备像素比)推荐文章:张鑫旭-设备像素比简单介绍
https://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/
参考链接:https://www.cnblogs.com/samwu/p/5341056.html
2)SVG图片
SVG是一种矢量图片,它的特点就是当我们把它放大之后图片质量不会下降,在移动端开发过程中,通常会把一些色彩单一的图片做成SVG图片,在CSS中引入图标字体文件。
推荐IcoMoon工具: https://icomoon.io/
网站具体使用方法:点击Icomoon app按钮,会跳转到如下页面,点击Icomoon icon按钮,之后选中所有的SVG文件;选中自己想要的图标后,点击右下角的generate font,可以查看代码。点击preference可以修改字体名称等;点击download按钮,解压后fonts里面就是所有的图标字体文件以及style.css。
3)support-ico组件对图标处理
由于项目中的图标(icon)多次使用,并且尺寸(1,2,3,4,四种尺寸)和类型(减、折、特、票),基于此,就不同把这些图标做成一个组件support-ico。
含有一个动态绑定的class,可以根据传入的props(size,type)改变绑定的class。
Computed计算属性icon Cls(),定义一个数组,数组保存了{‘decrease’, ‘discount’, ‘special’, ‘invoice’, ‘guarantee’},可以根据传入的type和size动态拼接icon的样式。
computed: {
iconCls() {
const classMap = [‘decrease’, ‘discount’, ‘special’, ‘invoice’, ‘guarantee’]
return icon-${this.size} ${classMap[this.type]}
}
}
实现对于不同的类型和大小引入不同的图片。
3. mock数据
准备了一个data.json里面是我们模拟的数据。包含三个部分:seller,goods,ratings
在vue.config.js中写入devServer字段,并且有一个before函数,可以通过app.get来模拟get接口,返回json字段,其中goods,ratings,seller都是通过data.json字段拿到的。
测试:启动服务之后输入localhost:8080/api/seller会返回json数据。表示mock服务成功了。
4. 使用vue-cli搭建项目框架
安装并创建项目,参考链接: https://cli.vuejs.org/zh/guide/installation.html
项目入口html在public目录下的index.html, index.html编译之后会引用main.js(入口js是src目录下的main.js)
.browserslistrc 浏览器,用CSS在不同浏览器可能存在兼容性问题,因此需要对其加前缀—针对于postcss.config.js中的autoprefixer插件()
Eslintrc.js就是eslint的配置
Package.json就是需要的依赖,项目描述
5. 安装cube-ui
移动端比较好用的组件库https://didi.github.io/cube-ui/#/zh-CN
Theme.styl 列出所有组件的颜色,可以进行修改
Package.json中添加了一个transormModules字段,引用cube-ui组件
Vue.config.js 可以进行额外配置
6. 项目common目录
1)fonts
存放SVG相关图片的信息
2)stylus
Index.styl 入口文件,里面import icon和base(在main.js需要引入index.styl)
Icon.styl是字体图标的样式(引用了font下面的文件,制作的图标可以通过类名可以访问到icon)
Base.styl定义了基础样式(html和body)
mixin.styl导入了cube-ui的stylus(@import “~cube-ui/src/common/stylus/mixin.styl”)
Variable.styl导入cube-ui的一些变量(@import “~cube-ui/src/common/stylus/variable.styl”),同时自己定义了项目的颜色
7. axios封装和数据获取
Axios第三方库获取数据:https://github.com/axios/axios
npm i axios --save
在目录下创建api-helper.js和index.js,对于所有的get方法进行封装
/helper.js/
import axios from ‘axios’
const ERR_OK = 0
export function get(url) {
return function(params) {
return axios.get(url, {
params
}).then((res) => {
const { errno, data } = res.data
if (errno === ERR_OK) { // 成功
return data
}
}).catch(() => {
})
}
}
/index.js/
import { get } from ‘./helpers’
const getSeller = get(‘/api/seller’)
const getGoods = get(‘/api/goods’)
const getRatings = get(‘/api/ratings’)
export {
getSeller,
getGoods,
getRatings
}
8. 1像素border实现
border-bottom: 1px solid rgba(7, 17, 27, 0.1)
在PC端是1像素边框,但是在手机端有设备像素比,所以可能看上去会有不同
设计一个mixin.styl
border-1px($color)
position: elative
&:after
diaplay: block
position: absolute
left: 0
bottom: 0
width: 100%
border-top: 1px solid $color
content: ’ ’
对于需要添加1像素边框的标签加上border-1px类,然后对伪类进行缩放
@media(-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
.border-1px
&::after
-webkit-transform: scaleY(0.7)
transform: scaleY(0.7)
@media(-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
.border-1px
&::after
-webkit-transform: scaleY(0.5)
transform: scaleY(0.5)
1像素border实现:伪类(绝对定位)+ 缩放(对伪类Y轴缩放),
最后
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
最后写上我自己一直喜欢的一句名言:
世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它