前端小测试总结

前言

好久没有更新了，最近做了一个黑马的前端测试题，也算是一个阶段测试，题虽不难，但是遇到的问题一大堆，侧面反应了自己基础知识学的还是不够扎实，需要再接再厉，查漏补缺，在这里记录一下实现过程和遇到的问题和解决的方法。

测试简介

测试主要是实现两个页面之间的切换，实现tab栏的切换，同时从后端服务器拿数据通过模板渲染到
项目要求

1. 按照效果图进行网页布局分析；
2. 根据网页布局分析+设计图进行HTML+CSS布局；
3. 使用Express搭建静态服务器；
4. 启动后端服务，提供前端所需数据接口；
5. 使用jQuery实现Tab栏功能、Ajax请求接口拿到数据；
6. 使用artTemplate模板引擎渲染数据（展示到页面）；
   效果图
   

解题过程

一、按照效果图进行网页布局分析

当然实战中这还不是第一步，真正的第一步应该是：

1. 合理的文件布局
   我的布局大概如下，我个人觉得好的布局就是一眼能过去能知道每个文件夹装的啥，并且清楚表示每个文件夹之间的对应关系，方便写代码时快速引入文件路径。
   此次测试的布局：
   

2. 管理代码
   其实这个小小测试不必用仓库管理，不过为了温习一些Git操作命令，我还是决定操作一波，初始化一个Git仓库，与Github远程仓库连接，将代码push，由于代码不多，我就没有创建分支，直接将main分支上传，也不用merge了(这样好像也温习不到啥😂)。

3. 网页布局分析
   这里就不详细讲了，主要就是根据UI图，思考一下布局，如整体布局可以分为头部，主体和底部，然后再想想头部的布局，一个大盒子包几个小盒子，用a标签还是span标签，思路清楚了写代码才能快，才能简洁明了。当然代码注释也很重要，一个模块写个说明注释，可以为后期开发带来很大的便利。

二、根据网页布局分析+设计图进行HTML+CSS布局

这里就是将思路转化成代码，我喜欢先写页面一个小模块的HTML结构，再根据UI图的尺寸写CSS代码，这里的小模块按工作量来定，但是一定要是完整的一部分。写好之后将不同格式的文件放入对应文件夹。

三、使用Express搭建静态服务器

这里需要搭建node.js的环境用npm来初始化项目并引入相关的依赖包，这次测试的服务器端文件是现成的，我只需要用npm i安装package.json中的依赖包，如express等，然后用全局中间件将前面做好的页面挂载到静态服务器中就可以了。

四、使用jQuery实现Tab栏功能、Ajax请求接口拿到数据

通过jQuery的链式调用实现tab栏切换比较容易，同时再切换的过程中还要配合内联框架iframe显示不同的页面，在这一步上我遇到了一些问题，后面专门讲。同时使用nodemon命令在终端开启后端服务器，通过写ajax接口拿到后端服务器的数据。

五、使用artTemplate模板引擎渲染数据（展示到页面）

通过引入artTemplate.js文件，调用template函数将得到的数据渲染到模板中，并通过jquery将模板加载到页面中。

总结

这是我最终实现的结果：

有些插图步骤一致我就放了一样的图，最终结果基本达到了测试的要求。但是也就是测试没规定时间，不然我早就over了，过程中遇到了很多困惑我的问题，以及忘了的知识点，然后去翻API手册、问度娘、看以前案例的代码，最终才完成了这次测试，严格意义来说不能算合格，但是问题说明就有查漏补缺的机会，下面是我总结的一些在开发过程中遇到的问题以及解决方法：

1.箭头函数和普通函数定义

一直以来我都以为箭头函数()=>等于普通函数function()，直到我用jQuery绑定事件不起效果的时候，才知道这两个函数的区别，下面是我百度的结果:
- 样式不同，箭头函数是 =>，普通函数是 function；
- 箭头函数不能作为构造函数使用，也就不能使用 new 关键字；
- 箭头函数不绑定 arguments，可以考虑用剩余参数代替；
- 箭头函数会捕获其所在上下文的 this 值，作为自己的 this 值，定义的时候就确定了；
- call、apply、bind 并不会影响 this 的指向；
- 箭头函数没有原型属性；
- 箭头函数不能当作 Generator 函数，不能使用 yield 关键字；
最关键的就是this的指向，我用jQuery代理绑定事件的时候用了箭头函数，但是由于箭头函数的this在定义的时候就固定了，导致我咋绑都没反应😅，所以在用jQuery绑定事件的时候还是乖乖用function()函数吧。

2.iframe内联框架高度自适应

iframe框架高度自适应，刚开始试了很多办法都不行，将框架宽度改为100%、将内联框架中页面的body样式改为overflow:auto，都不管用，直到在优快云中看到一位网友的方法，才知道要结合js文件让iframe框架根据页面内容自适应高度，试了一下后果然成功解决了。这是原博地址。

3.template渲染图片

在渲染图片时一定要记得先提前调好图片的样式大小，否则渲染结束之后，你会怀疑提前设置好的CSS样式是不是不起作用，因为图片原有尺寸过大，将我设置好的其他元素的样式都挤没了😂。

4.遍历数组的三种方法

下面是对遗忘知识点的一个记录，加深印象。
方法一：用for循环
方法二：for…in方法
方法三：forEach方法

5.处理字符串的三种方法

当然处理字符串的方法多了去了，这里记录一下我想用的时候却忘了的方法😂。
方法一：substr()方法
方法二：slice()方法（等价于substring()方法)
方法三：replace()方法