前端面试知识点整理——项目整理

前端面试知识点整理——项目整理

一、华工线上黑市（安卓）

1.MVP架构方面 先介绍整个架构是怎样的，并与传统的mvp架构的区别
后来经过两次变革
（1）抽出了base层，包括baseactivity（定义一些通用的view接口的函数，和一些绑定样式、初始化的函数）和basepresenter（定义一些绑定和解绑view的函数）
（2）把model层进行了整合，将所有网络请求封装在一个类当中，对于上层就像在调用api获取数据一样
首先定义了一个okhttpclientutil的类，类里面封装了相应的post和get等请求，然后我们可以直接在blackmarketapi里面，在调用登录、显示商品、上传图片、获得排序等等时来调用这些封装好的请求方法，把相应的参数和回调函数传进去，非常方便的进行网络请求。

2.xml样式
他会有一些线性布局linearlayout（水平、垂直方向上线性排列）、相对布局relativelayout（随意一些）、framelayout（所有控件默认摆放在布局的左上角）、百分比布局，还有一些listview、recyclerview的滚动控件

实现两栏布局的话，可以考虑使用linearlayout布局来划分怎么排列，使用一些例如android:layout_weight=“1”，来划分剩余空间

二、二手闲置商场&健身管理系统（小程序）

1.页面的一个结构：（全局大体也差不多）
js：Page里面保存了一些数据，还有调用一些页面的生命周期函数，以及自己定义的函数
json：页面的json用来注册一些组件，定义当前页面的标题、窗口的一些其他属性
wxml：整体和html很像，但是它是经过了微信的封装，例如块级元素在小程序中是用view标签来展示，行内元素使用text标签来展示。在里面可以绑定一些事件函数，也有一些wx：if、wx：for的一些指令，还可以使用mustache语法
wxss：和css很像，经常会用单位rpx

2.微信对小程序进行了怎样的封装

3.小程序的双线程模型
渲染层：wxml和wxss运行在渲染层，渲染层使用webview线程渲染（有多个页面则用多个webview渲染）
逻辑层：js脚本运行于逻辑层，逻辑层使用jscore运行js脚本
这两个线程都会经由微信客户端（native）进行中转交互

界面渲染整体流程：
（1）在渲染层，宿主环境会把wxml转化成对应的js对象
（2）将js对象再次转成真实的dom树，交由渲染层线程渲染
（3）数据变化时，逻辑层提供最新的变化数据，通过setData方法从逻辑层传递到Native，再转发到渲染层，js对象发生变化比较进行diff算法对比
（4）将最新变化的内容反映到真实的dom树中，更新ui

虚拟 DOM 机制 virtual Dom
用JS对象模拟DOM树 -> 比较两个DOM树 -> 比较两个DOM树的差异 -> 把差异应用到真正的DOM树上

4.小程序为什么要采用双线程模型
（1）为了管控安全，不允许操作dom，不希望能够获取到用户的隐私数据
（2）限制一些api的掉用

5.小程序的组件化开发
尽可能地将页面拆分成一个个小的、可复用的组件

自定义组件的步骤：
（1）创建：在组件的json文件里面进行组件声明（“component”: true）、在wxml中编写组件模板、在wxss中编写样式、在js文件中定义数据或其他相关逻辑
（2）使用：在使用的页面的json中注册（usingComponent）、在wxml中直接使用

6.小程序的基础库
小程序的基础库是JavaScript编写的，它可以被注入到渲染层和逻辑层运行。主要用于：
在渲染层，提供各类组件来组件页面的元素
在逻辑层，提供各种API来处理各种元素。
处理数据绑定、组件系统、事件系统、通信系统等一系列框架逻辑

小程序的渲染层和逻辑层是两个线程管理，两个线程各自注入了基础库。
小程序的基础库不会打包在小程序的代码中，它会被提前内置在微信客户端。这样可以：
降低业务小程序的代码包大小
可以单独修复基础库中的Bug，无需修改到业务小程序的代码包

参考：微信小程序底层原理

7.使用了小程序云开发里面的数据库 以及 微信的代码管理来进行多人协作开发

8.小程序的生命周期
页面的生命周期

有渲染层（view thread）和逻辑层（app service）两个线程同时执行，逻辑层会加载page，并执行onload和onshow，进入阻塞，等待请求。渲染层要先进行初始化，请求一些逻辑层的数据（mustache里面的数据），准备渲染的时候也会通知逻辑层。逻辑层知道渲染层开始渲染时，会执行onready。页面渲染完成。

当数据改变时，逻辑层会把新的数据发送给渲染层，重新渲染。

onhide：退到后台
onshow：回到前台
onunload：page退出

9.MVVM架构

三、birthday app（swift）

在main.stroyboard里面，通过拖拽组件的形式，并通过设定他们之间的依赖来进行页面布局的，通过设定这些依赖实现了能够适应不同屏幕大小的页面。
简单写了一些处理页面数据、实现本地数据持久化存储、以及添加图片等简单的操作，学了一些简单的动画。

框架的搭建其实指的是，我先画了一个整个app的原型图，然后大家按照这个原型图来进行开发，我主要是把所有的页面大概布局好，譬如说把底部的tab bar建好，通过一个tab bar controller控制其他四个页面，并在有些页面上添加table view的功能，然后再交由每个同学分工完成各自负责的页面。

写swift的优点？
比较简洁、定义变量简单（let定义常量、var定义变量）、还有一些很有趣的东西（譬如说强制解析操作！保证有值；还有一些0…<4 表示0123 用在for循环当中）、报错精准、

四、给Joey的生日页面（移动端）

这是一个小项目，使用了swiper来做轮播图

这个项目的最大问题就是使用了非常多又很大的图片，还有音频文件，没有做任何优化的情况下，项目首次在移动端打开的时候极慢。。。

之后学到相关优化技术回来进行优化

五、开发者博客（vue）

前端技术栈：Vue + elementUI + bootstrap
很简单的项目，就是bug有点多，慢慢改
界面展示