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

2023-11-16

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

一、华工线上黑市(安卓)

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有点多,慢慢改
界面展示
在这里插入图片描述
在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

前端面试知识点整理——项目整理 的相关文章

  • 事件委托Tab栏切换

  • Fiddler工具 — 9.命令行和状态栏

    1 命令行 命令行在Fiddler的左下方的黑色窗口 也叫 QuickExec 可以调用 Fiddler的内置命令 这一系列内置的函数用于筛选和操作会话列表中的session 会话 虽然它不是很显眼 但用好它 会让你的工作效率提高 N 倍
  • React安装依赖 node_modules中有下载依赖项但package.json文件中没有依赖

    React安装依赖 node modules中有下载依赖项但package json文件中没有依赖 直接在下载依赖项后 加 S 就可以解决 随机 id 生成器 uuid nanoid npm install nanoid S S save
  • Typecho 最新XC主题 去除域名授权全解密源码

    简介 Typecho 最新XC主题 去除域名授权全解密源码 这是一款多样式主题 首页支持六种主题样式 支持Pjax优化访问速度 多种单页 如友链 说说等 评论支持表情 自定义编辑器 支持其他样式功能 该主题功能性挺高 比较花里胡哨 感觉有一
  • CMAKE_MAKE_PROGRAM is not set 解读

    目录 CMAKE MAKE PROGRAM 未设置 错误原因 解决方案 示例1 GNU Make 示例2 Ninja CMakeLists txt 的结构 示例 CMakeLists txt 文件 总结 CMAKE MAKE PROGRAM
  • 浏览器缓存相关面试题一网打尽,理论结合实践,用代码学习缓存问题,建议关注+收藏,(含项目源代码)

    前言 浏览器缓存的问题是面试中关于浏览器知识的重要组成部分 也是性能优化题目的一部分 但是不要被吓到 我话放到这里 就那么点东西 我这一篇文章基本上就涵盖了所有相关的知识点 认真看一遍 所有的问题都是纸老虎 一 准备工作 1 1 拉取仓库
  • ❤ Vue3 使用

    Vue3 使用 Vue3之toRefs的使用 作用 toRefs 可以将一个响应式的对象 转换成普通对象 但是转换后的普通对象的每一个属性值都是响应式的 这样我们可以使用es6的对象解构或者三点运算符等操作 代码
  • Web 安全漏洞之 OS 命令注入

    什么是 OS 命令注入 上周我们分享了一篇 Web 安全漏洞之 SQL 注入 其原理简单来说就是因为 SQL 是一种结构化字符串语言 攻击者利用可以随意构造语句的漏洞构造了开发者意料之外的语句 而今天要讲的 OS 命令注入其实原理和 SQL
  • 每天10个前端小知识 <Day 7>

    前端面试基础知识题 1 什么是尾调用优化和尾递归 尾调用的概念非常简单 一句话就能说清楚 就是指某个函数的最后一步是调用另一个函数 function f x return g x 上面代码中 函数f的最后一步是调用函数g 这就叫尾调用 尾调
  • 前端基础:回顾es6相关知识

    Author note 题记 ECMAscript is international standard of javascript ECMA 是 js的国际标准版语言 let and const 为什么之前用var现在需要用let cons
  • 【ES6】解构语句中的冒号(:)

    在解构赋值语法中 冒号 的作用是为提取的字段指定一个新的变量名 让我们以示例 const billCode code version route query 来说明 billCode code version 表示从 route query
  • 新手也能看懂的【前端自动化测试入门】!

    前言 最近在网上搜索前端自动化测试相关的文档 但是发现网上的文章都是偏使用 没有把一些基础概念说清楚 导致后续一口气遇到一些 karma Jasmine jest Mocha Chai BDD 等词汇的时候很容易一头雾水 这次一方面整理一下
  • HarmonyOS 基于eTS高效开发HarmonyOS课程类应用

    随着HarmonyOS 3 0 Beta版的发布 API Version 8新增了大批JS eTS API接口 相信很多开发者已经迫不及待想体验基于eTS的HamronyOS应用开发 本期Codelab 我们将基于API Version 8
  • 最新整理Java面试八股文,大厂必备神器

    在看这篇文章之前 我想我们需要先搞明白八股文是什么 明清科举考试的一种文体 也称制义 制艺 时文 八比文 八股文章就四书五经取题 内容必须用古人的语气 绝对不允许自由发挥 而句子的长短 字的繁简 声调高低等也都要相对成文 字数也有限制 八股
  • 外包干了2个月,技术倒退2年。。。

    先说一下自己的情况 本科生 20年通过校招进入深圳某软件公司 干了接近4年的 功能测试 今年国庆 感觉自己不能够在这样下去了 长时间呆在一个舒适的环境会让一个人堕落 而我已经在一个企业干了四年的功能测试 已经让我变得不思进取 谈了3年的女朋
  • 考虑光伏出力利用率的电动汽车充电站能量调度策略研究(Matlab代码实现)

    欢迎来到本博客 博主优势 博客内容尽量做到思维缜密 逻辑清晰 为了方便读者 座右铭 行百里者 半于九十 本文目录如下 目录 1 概述 2 运行结果 3 参考文献 4 Matlab代码 数据
  • 软件测试面试:还没有自动化测试项目经验,3个项目帮你走入软测职场!

    2024软件测试面试刷题 这个小程序 永久刷题 靠它快速找到工作了 刷题APP的天花板 CSDN博客 文章浏览阅读2 3k次 点赞85次 收藏11次 你知不知道有这么一个软件测试面试的刷题小程序 里面包含了面试常问的软件测试基础题 web自
  • Vue中下载不同文件常用的方式

    1 使用window open方法下载文件
  • 获取年与年之间的所有年份

    function getYearsBetween startYear endYear var years 存放结果的数组 for var year startYear year lt endYear year years push year
  • 如何在 Python 脚本中使用 Google OAuth2

    在使用 Python 脚本将视频上传到 YouTube 频道时 若希望将视频上传到第二个频道 需要解决 OAuth2 授权的问题 解决方案 创建新的 Google Cloud 项目 from google oauth2 import ser

随机推荐

  • LSB(Least Significant Bit)和MSB(Most Significant Bit)

    LSB Least Significant Bit 意为最低有效位 MSB Most Significant Bit 意为最高有效位 若MSB 1 则表示数据为负值 若MSB 0 则表示数据为正 MSB高位前导 LSB低位前导 谈到字节序的
  • MVC架构

    10 MVC 什么是MVC Model view Controller 模型视图控制器 10 1 以前的架构 用户可以直接访问控制层 控制层可以直接操作数据库 Servlet gt CURD gt 数据库 弊端 程序十分臃肿 不利于维护 S
  • hiveSql 重分组聚合问题

    hiveSql 重分组聚合问题 问题 分析 实现 最后 问题 将下图中A表转变为B和C 即A gt B A gt C 分析 1 首先看A gt B 可见是将name列分组 取最大组内最大id 介绍两种求解方式 1 很容易想到 开窗函数fir
  • html使用iframe包含pdf文件,HTML embedded PDF iframe

    It s downloaded probably because there is not Adobe Reader plug in installed In this case IE it doesn t matter which ver
  • 【数据架构系列-06】一文搞懂数据模型的3种类型——概念模型、逻辑模型、物理模型

    数据模型就是模拟现实世界的方法论 是通向智慧世界的基石 从现实世界发展到智慧世界 要数经历现实世界 信息世界 计算机世界 数据世界 智慧世界五个不同的世界 我们天生具有从混沌的世界抽象信息变为信息世界的能力 但是到另外几个世界需要我们懂得计
  • spring的自动装配即装配的各种模式

    Spring的自动装配 无须在Spring配置文件中描述javabean之间的依赖关系 IOC容器会自动建立JavaBean之间的关联关系 根据属性名称自动装配autowire byName 根据数据类型自动装配autowire byTyp
  • 完整安装datax-web教程

    1 安装mysql5 7 a 创建目录下载安装rpm包 mkdir p opt software cd opt software wget i c http dev mysql com get mysql57 community relea
  • 【c++复习笔记】——智能指针详细解析(智能指针的使用,原理分析)

    个人主页 努力学习的少年 版权 本文由 努力学习的少年 原创 在CSDN首发 需要转载请联系博主 如果文章对你有帮助 欢迎关注 点赞 收藏 一键三连 和订阅专栏哦 目录 一 智能指针的基本概念 二 智能指针的定义和使用 三 auto ptr
  • Pytorch-Lightning基本方法介绍

    文章目录 LIGHTNINGMODULE Minimal Example 一些基本方法 Training Training loop Validation loop Test loop Inference Inference in rese
  • Qt之再谈阴影边框

    前面就窗口阴影已经写过一篇博客 使用九宫格的思路实现的 在我看来 凡是用程序能实现的尽量不要使用图片代替 在保证效率的前提下 今天再次分享关于我的一些小见解 先看效果 窗口阴影任意调节 包括阴影像素 是否圆角等 直接上代码 void Dro
  • linux如何查看入口地址,宝塔Linux面板安全入口地址忘了(方法一)

    宝塔Linux面板安全入口地址忘了 方法一 面板 地址 入口 宝塔 所示 宝塔Linux面板安全入口地址忘了 方法一 易采站长站 站长之家为您整理了宝塔Linux面板安全入口地址忘了 方法一 的相关内容 现在新安装的宝塔 Linux 面板时
  • win10-未知的USB设备-解决自己问题的记录

    若是没有解决你的问题 再找找其他办法看看 我也是网上搜的 刚好解决了我的问题我就记录了一下而已 哈哈哈 原文链接 修复 未知的USB设备 设备描述符请求失败 在Windows 10中 1 设备管理器 gt 通用串行总线控制器 gt 未知US
  • 基于opencv的手势识别

    大家好 我是一名本科生 我的主要学习方向是计算机视觉以及人工智能 按照目前的学习进度来说 我就是一小白 在这里写下自己编写的程序 与大家分享 记录一下自己的成长 今天与大家分享的是基于OpenCv的手势识别 思路分析 获取图片 在图片中找到
  • unity添加多个相机渲染物体多个视角的图片

    添加相机 我渲染物体多视角的图片是要用到cave空间 所以添加了四个相机 并且都放在空物体下面 还有两个物体 用在cave空间要保证四个相机的位置一致 rotation互成90 前 0 0 0 右 0 90 0 左 0 270 0 下 90
  • 用matplotlib动画功能,一帧一帧的录制排序算法

    1 matplotlib绘制动画 matplotlib是python中最经典的绘图包 里面animation模块能绘制动画 首先导入小例子使用的模块 from matplotlib import pyplot as plt from mat
  • 高性能MySQL:创建高性能索引

    文章目录 前言 一 索引的语法 1 1 创建索引 1 2 删除索引 1 3 查看索引 1 4 查看查询语句使用索引的情况 二 索引的优缺点 2 1 索引的优点 2 2 索引的缺点 三 索引的类型 3 1 按照功能逻辑区分 3 2 按照数据结
  • BH1750简单介绍

    bh1750是16位数字输出型 环境光强度传感器集成电路 主要应用有移动电话 液晶电视 笔记本电脑 便携式游戏机 数码相机 数码摄像机 汽车定位系统 液晶显示器 目录 1 bh1750中文资料 2 bh1750引脚说明 3 bh1750传感
  • 算法入门 24. TSP问题(状态压缩DP)

    TSP问题 问题描述如下 假设有一个旅行商人要拜访n个城市 他必须选择所要走的路径 路径的限制是每个城市只能拜访一次 而且最后要回到原来出发的城市 路径的选择目标是要求得的路径路程为所有路径之中的最小值 include
  • warning: #940-D: missing return statement at end of non-void function “fgetc“解决方案

    问题描述 warning 940 D missing return statement at end of non void function fgetc 解决方案 解决措施 引入头文件stdio h
  • 前端面试知识点整理——项目整理

    前端面试知识点整理 项目整理 文章目录 一 华工线上黑市 安卓 二 二手闲置商场 健身管理系统 小程序 三 birthday app swift 四 给Joey的生日页面 移动端 五 开发者博客 vue 一 华工线上黑市 安卓 1 MVP架