# 第一次面试问题详解

最新推荐文章于 2024-11-17 22:31:08 发布

码农凯

最新推荐文章于 2024-11-17 22:31:08 发布

阅读量330

点赞数

分类专栏：面试文章标签：前端

本文链接：https://blog.csdn.net/weixin_46692492/article/details/108192629

版权

面试专栏收录该内容

9 篇文章 0 订阅

订阅专栏

第一次面试问题详解

建立一个自己的本地仓库，学会上传文件
介绍文件时提前做好一个测试用例，并突出自己的特色以及思路，数据可以特殊化，避免漏洞
表单验证需要有

正则表达式
失去焦点事件
必填事件
提示框

数据选择选择年级时选择到月份
管理员以及超级管理员还有用户的权限问题
从用户的角度思考问题可以分布操作如果一个页面放不下
介绍内容是先拿出需求说明在拿出测试用例最后展示代码（工具要熟练使用）
Echarts 图在什么时候使用？

https://jingyan.baidu.com/article/1876c8524cc3d2890a137667.html

JAVA Web 的前端框架与代码库的区别
框架就是提供前端项目整体解决方案，库就是自己组合来实现项目。
框架里包含了各种类，然后我的代码可以调用类，框架调用我的代码。类库更地段，他把算法写好，我需要实现一个功能，不需要再去实现算法，只需要调用这个方法，而这个功能很单一。框架一般是一个流程，框架里流程已经写好，我只需要调用它提供的接口，传入参数就可以实现这个方法，他是一个骨架，也就是他的功能并不单一。
框架向开发使用者提供整套服务，比如 MVC 一整套，库则专注于某一点，比如专注于dom操作或异步请求

框架与库之间本质区别在于控制股权：
库：库更多的是一个封装好的特定的集合，提供给开发者使用，而且是特定于某一方面的集合（方法和函数），库没有控制权，控制权在使用者手中，在库中查询需要的功能在自己的应用中使用，我们可以从封装的角度理解库；
框架：框架顾名思义就是一整套架构，会基于自身的特点向用户提供一套相当于叫完整的解决方案，而且控制权的框架本身，使用者要找框架所规定的某种规范进行开发
像 angular、React、vue就属于框架
而 jQuery、bootstrap 就是库

前端优秀的框架UI

bootstrap
Bootstrap 最大的优势就是它非常流行，流行就代表你有问题就有很多人帮你解决问题，界面比较和谐，容易上手，劣势是 class 命名不够语义化，并且各种缩写
2.AUI
是最近刚起来的AUI，虽然作者声称是专为APICloud开发者设计的一套UI框架，但实际它还是解决了很多移动前端开发的普遍问题，是主要面向混合开发的 CSS 框架。看起来作者比较猖狂，各种高级 CSS3 遍地使用，这让我也不得不去查查这些个 CSS3 的兼容性。不负众望果然选的都是兼容不错的属性，哈哈了一顿激动从前辈手上大胆认识了几个好东西，并且框架还提供了聊天界面、计数列表等组件，解决了很多复杂的让我骂娘的布局，现在可以直接拿走就用。
Github：https://github.com/liulangnan/aui
官网：http://www.auicss.com/
3.Amaze UI
按照官方的话说就是 “基于社区开源项目构建的一个跨屏前端框架，以移动优先，从小屏到大屏，最终实现所有屏幕适配，适应移动互联潮流” 。但其实我就是看中它能解决国内浏览器存在的跨屏适配和兼容性问题。
官网：http://amazeui.org/
Github：https://github.com/amazeui/amazeui
4.Frozen UI
QQ 客服端也用了混合开发，其中QQ会员前端用的是 Frozen UI，并且这套框架开源，欣喜若狂耐不住心里的寂寞直接上手试了一遍，初体验感觉基础样式效果简单色调清爽，有个比较活跃的社区所以组件什么的也比较丰富。
Github：https://github.com/frozenui/frozenui
官网：http://frozenui.github.io/
如果拿 Frozen UI 配合一些如 APICloud 用来做混合 APP 感觉就太酷了，或者原生的火鸡们拿去嵌套在应用中做前端开发，这个框架对 android 2.3 +、ios 4.0 + 做了兼容，或者拿来做 Web App 也是极好的选择，劣势的话从 UI 层面就可以看到了
WeUIi
WeUI和同 FrozenUI都属于差不多的 WeUi了，也是一个比较专一的框架，WeUI应该说比FrozenUI前者更专一，话说连个官网都不搞，所有答疑都在 gitHub Issues 解决了，这个框架极其简单，体积当然就不用说了，模块也就 7 个左右，不过体量虽然小做的却不错，口碑看 star 就够了，框架从 16/1/23 发版至今 github star 超过 7K,不过也不排除用户没地方发泄所以都跑到 git 上来，哈哈。
Github：https://github.com/weui/weui
DEMO：http://weui.github.io/weui/
SUI
“SUI 是一套基于bootstrap开发的前端组件库，同时它她也是一套设计规范。通过SUI，可以非常方便的设计和实现精美的页面”。如果你之前用过 Bootstrap，那么可以轻松转向 SUI
Github：https://github.com/sdc-alibaba/sui
官网：http://sui.taobao.org/sui/docs/index.html
7.AUI
第六个是最近刚起来的最近刚起来的 AUI，虽然作者声称是专为APICloud开发者设计的一套UI框架，但实际它还是解决了很多移动前端开发的普遍问题，是它主要面向混合开发的 CSS 框架。，所以看起来作者比较猖狂，各种高级 CSS3 遍地使用，这也使得我不得不去查查这些个 CSS3 的兼容性。不负众望果然选的都是兼容不错的属性，哈哈了一顿激动从前辈手上大胆认识了几个好东西，并且框架还提供了聊天界面、计数列表等组件，解决了很多复杂的让我骂娘的布局，现在可以直接拿走就用。
Github：https://github.com/liulangnan/aui
官网：http://www.auicss.com/
8.MUI
曾经一直使用 Android 系统的我，后来见到 IOS，果断移情别恋了，不知道为什么苹果每次调整系统我都特别喜欢，后来一段时间因为缺设计我专门模仿 IOS 系统做 UI，但始终不能够做到很好，无意间就发现了 MUI 这个框架，这个框架给我的吸引之处就是它的 UI 是以 IOS 为主体设计的，当然它也补充了android特有UI样式。并且MUI官方声称用来开发深入以后发现拿它做 APP 还能够提高用户使用流畅度，然后便试着更深入的了解和使用一段时间。
官网：http://dev.dcloud.net.cn/mui/
Github：https://github.com/dcloudio/mui
9.Foundation
Foundation 算是框架界的元老啦，都说框架去的早，而这个框架一直到现在依然这么的热门，如果你比较介意 Bootstrap 开发撞脸的尴尬事情，那么你可以考虑使用 Foundation 。即使你使用预定义的 UI 元素, 也不会与其他网站太像，就像官方说的给开发者更灵活的框架体验。
官网：http://foundation.zurb.com/
Github：https://github.com/zurb/foundation-sites
10.UiKit
UIkit是YOOtheme团队开发的，在许多WordPress主题中都有应用(也就是如果你是个 WordPress 爱好者，那么这个框架应该比较适合深究)，并且框架能够通过GUI编辑器和手动编辑，所以它提供了一个灵活、强大的自定义机制。框架借助LESS、jQuery、normalize.css及FontAwesome开源项目的独有特点，整合成了这么一款轻量级、模块化的前端框架。
官网：http://www.getuikit.com/
Github：https://github.com/uikit/uikit
layu.use是什么意思
layui有很多个模块。如果不是引入layui.all.js，那么在使用模块的时候就需要使用layui.use来加载模块。
如要加载mod1和mod2 两个模块。

  layui.use(['mod1', 'mod2'], function(args){
  var mod = layui.mod1;
  //...
});

几款免费的图表js插件
1，ichartjs(国产)(http://www.ichartjs.com/) ===============强烈推荐
ichartjs是一款优秀的国产开源插件，作者是王鹤，英文名taylor，毕业于南昌大学软件工程专业。
ichartjs 是一款基于HTML5的图形库。使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形。 ichartjs致力于为您的应用提供简单、直观、可交互的体验级图表组件。是WEB/APP图表展示方面的解决方案。如果你正在开发HTML5的应用，ichartjs正好适合您。 ichartjs目前支持饼图、环形图、折线图、面积图、柱形图、条形图。ichartjs是基于Apache License 2.0协议的开源项目。
2，echarts(国产)(http://echarts.baidu.com/)
Echarts是百度前端团队做的基于html5-canvas的开源图表绘制组件。
几个特性如下：
拖拽重计算：拖拽重计算特性（专利）带来了数据统计图表从未有过的用户体验，允许用户对统计数据进行有效的提取、整合，甚至在多个图表间交换数据，赋予了用户对数据进行挖掘、整合的能力。
大规模数据模式：如何展现成千上百万的数据？貌似除了用专业的统计工具（如MATLAB）外别无选择？不，在拥有众多交互特性下ECharts依然可以做到直角系图表（折、柱、散点、K线）20万数据秒级出图。值域漫游：基于坐标的图表（如地图、散点图）通过色彩变化表现数值的大小能直观形象的展示数据分布。但如何聚焦到我所关心的数值上？ECharts拥有值域漫游的功能，让你可以轻松进行数值筛选
3.Chart.js(http://www.chartjs.org/)
小巧而轻便的的图表插件，缺点是支持的图形类型较少，数据交互功能也非常有限，但作者以后可能会逐渐完善。
4，HighChart.js(http://www.highcharts.com/)
5，Jqplot(http://www.jqplot.com/)
一个相当古老而“坚挺”的图表插件，支持现代浏览器和IE7，IE8（和LoongChart一样，抛弃IE6了）。
10款免费而优秀的图表JS插件

render 函数初识

这是最初看到render函数的样子，完全不明白这是怎么回事，于是乎各种查资料，
使用场景：web前端界面头布局中，可以重复使用来接收每一个级别的标题标签，在标题标签中添加相同的锚点元素。但是些都会被包裹在一个无用的 div 中，因为组件必须有根节点。虽然模板在大多数组件中都非常好用，但是在这里它就不是很简洁的了。 render 函数就派上用场了

<script>
Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // tag name 标签名称
      this.$slots.default // 子组件中的阵列
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})
</script>

createElement 参数
如何在 createElement 函数中生成模板。这里是 createElement 接受的参数:

// @returns {VNode}
createElement(
  // {String | Object | Function}
  // 一个 HTML 标签，组件设置，或一个函数
  // 必须 Return 上述其中一个
  'div',

  // {Object}
  // 一个对应属性的数据对象
  // 您可以在 template 中使用.可选项.
  {
    // (下一章，将详细说明相关细节)
  },

  // {String | Array}
  // 子节点(VNodes). 可选项.
  [
    createElement('h1', 'hello world'),
    createElement(MyComponent, {
      props: {
        someProp: 'foo'
      }
    }),
    'bar'
  ]
)

语法：
// `h` 作为 `createElement` 的别名是一个通用惯例
render:(h,params) => {
  return h(" 定义的元素 "，{ 元素的性质 }，" 元素的内容"/[元素的内容])
}
示例：
render:(h,params)=>{
    return h('div', {style:{width:'100px',height:'100px',background:'#ccc'}}, '地方')
}

函数调用之回调函数
什么是回调函数：
第一，回调函数肯定是一个函数，和普通的函数一样（个人感觉“回调”这个名字取得不好，不要被它迷惑了）；
第二，回调函数是最终还是会被你写的一个函数调用，只是这个调用过程是间接的，并不像一个普通函数的直接调用过程。间接的调用体现在：你写一个函数funA，调用了一个系统或者公司其他前辈实现的一个接口函数，这个接口函数的一个参数是一个函数指针（既然是函数指针，则这个函数指针的定义形式就已经确定了，主要包括函数参数类型、个数、返回值等），而这个函数指针所指向的函数就是传说中的回调函数，在你调用接口函数的时候，你需要把回调函数地址以参数的形式传递给接口函数，这之后，接口函数就可以在自己的实现里面调用回调函数了，这个过程就是回调函数的见解调用过程。总结一下，你定义的函数funA调用已经实现好的接口函数，然后接口函数再调用回调函数；
第三，回调函数的内容是由你实现的，但回调函数的定义形式是接口函数确定的，即你的系统或者你公司的前辈要求你必须这样实现这个函数。
js基础：作用域及作用域链
何为作用域
任何编程语言都有作用域的概念，简单来说，作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。
js的作用域是靠函数来形成的，也就是说一个函数的变量在函数外不可以访问
1全局作用域
任何地方都能访问到的对象拥有全局作用域。
1.1函数外面定义的变量拥有全局作用域

var n = 2；
function fn（）{
    var a = 1；
    return a；
}
console.log(fn());
console.log(n);
console.log(a);

1.2 未定义直接赋值的变量自动声明为拥有全局作用域

    var n = 2;
    function fn(){
        a = 1;
        return a;
    }
    console.log(fn());
    console.log(n);
    console.log(a);

3.window 对象的属性拥有全局作用
2. 局部作用域

局部作用域一般只在固定的代码片段内可访问到，最常见的例如函数内部，所以在一些地方会把这种作用域成为函数作用域
图一中，a是函数内部声明并赋值，拥有局部作用域，只能带函数fn内部使用，在fn外部使用就会报错，者就是局部作用域的特性，外部无法访问。

ES6的块级作用域

ES5只有全局作用域和函数作用域，没有块级作用域，会带来下面问题：
```
    var i = 5；
    function func（）{
        console.log(i);
        if(true){
            var i = 6;
        }
    }
    func();
```
用来计数的循环变量泄露为全局变量

```
    for(var i = 0; i < 10;i++){
            console.log(i);
    }
    console.log(i);
```
ES6引入了块级作用域，明确允许在块级作用域中声明函数，let和const命令都涉及块级作用域。
块级作用域允许声明函数只在使用大括号的情况下成立，如果未使用大括号，会报错。
if（true）{
    function func1（）{}//不报错
}
if（true）
function func2（）{}

## 作用域链
    通俗的讲，当声明一个函数时，局部作用域一级一级向上抱起来，就是作用域链
    1. 当执行函数时，总是先从函数内部找寻局部变量
    2. 如果内部找不到，则会创建函数的作用域，寻找，依次向上