表达面试题

Posted 2021-02-17 iwishicould

1成都道引科技有限公司==》

1.画图描诉盒子模型
2.js原型链与闭包
3.用flex实现九宫格布局
4.在使用vue全家桶时，简述，登录和注册的操作，
5.购物车的数据结构

 

2成都超网有限公司

技术问题:

1vue生命周期    2==》闭包的作用

3==》如何实现一个盒子水平垂直居中     4vue双向绑定原理      5常用的vue指令

 

6==》vue和react的区别

他们的区别并不是特别的大

1==》（vue）是一个轻量级的框架  react是以及重量级的框架

 2==》react是类式的写法，api很少，  而vue是声明式的写法，api多

3==》模板渲染方式的不同   

React 是通过JSX渲染模板     而Vue是通过一种拓展的html语法进行渲染

10==》v-if和v-show的区别，以及应用场景

应用的场景==》如果某个元素经常的显示或者吟唱起来，建议使用v-show;  

如果某个元素创建出来之后，以后可能在也会在使用了，使用v-if

 

11==》箭头函数和普通function函数的区别）

1==》箭头函数是匿名函数，不能作为构造函数，因此不能够使用new

2==》箭头函数不能绑定arguments

3==》箭头函数没有原型属性

4==》箭头函数的 this 永远指向其上下文的  this ，任何方法都改变不了其指向，如 call() ,  bind() ,  apply()

普通函数的this指向调用它的那个对象

 

12==》vue嵌套路由

嵌套路由就是路由里面嵌套他的子路由    子路由关键属性children

<router-link to="/父路由的地址名字/要去的子路由的名字"></router-link>

13==》vue路由的原理

1.一种是# hash   ,    在地址中加入#以欺骗浏览器，地址的改变是由于正在进行页内导航 

通过改变浏览器地址URL，在不重新请求页面的情况下，更新页面视图

 

有两种方式:（了解）

2.一种是h5的history  ,     使用URL的Hash来模拟一个完整的URL

 

 

 

 

14==》怎么处理兼容问题

(1)通过hask的方式   

Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式，让不同的浏览器的也可以表现为一致性。                            【罗 么 lai 热】

 

15==》浅谈前端安全以及如何防范？

 

XSS是一种web应用中的计算机安全漏洞，它允许恶意web用户将代码植 入，XSS攻击的危害有：主要是盗取用户的信息，先网站发起攻击。如何解决：

XSS攻击的具体表现：1、javascript代码注入

 

1==》采用的模式匹配，“javascript”这个关键字进行检索，一旦发现提交信息中包含“javascript”，就认定为XSS攻击。

 

2==》对所有用户提交内容进行可靠的输入验证，

16==》$route和$router的区别

$route对表示当前的路由信息，包含了当前 URL

$router为VueRouter实例，主要是使用路由的跳转使用。

 

<script>

       for(var i=0;i<3;i++){

           setTimeout(function(){

               console.log(i);

           },0);

           console.log(i);

       }

     </script>

 

0   1    2    然后是3个3

 

   

图片懒加载

 

17==》Px和rem和em的区别

1=》px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的

 

2=》em是相对长度单位。相对于当前对象内文本的字体尺寸

1. em的值并不是固定的；   2. em会继承父级元素的字体大小。

默认它相对的是浏览器默认的字体尺寸（16px）。

 

3=》rem是CSS3新增的一个相对单位；仍然是相对大小，但相对的只是HTML根元素。

 

项目如何优化

（较少图片的体积） 图片较多的情况下使用懒加载    使用雪碧精灵图

 

 

18第五题： JS中检测变量为string类型的方法

var aa = "hello world";

         function stringCheck (str) {

         if(typeof str =="string" || str.constructor == String) {

         return true;

         } else {

         return false;

         }

         }

         console.log(stringCheck(aa)) ;

 

 

 

 

18.第一次页面加载会触发哪几个钩子？
答：会触发 下面这几个beforeCreate, created, beforeMount, mounted 。

19vue实现数据双向绑定原理：

采用数据劫持 结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调

它是一个导航钩子

20beforeEach主要有3个参数to，from，next：

to：route即将进入的目标路由对象，  from：route当前导航正要离开的路由next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。

4.vue.js的两个核心是什么？
答：数据驱动、组件系统

 

6.vue常用的修饰符？
答：.prevent: 提交事件不再重载页面；.stop: 阻止单击事件冒泡；.self: 当事件发生在该元素本身而不是子元素的时候会触发；

 7.v-on 可以绑定多个方法吗？
答：可以

 

21什么是盒模型 

把所有的网页元素都看成一个盒子，它具有：content，padding，border，margin四个属性，这就是盒子模型

盒子模型有两种形式：标准盒子模型，怪异盒子模型

 

22css有哪些定位

Relative

相对定位方式，相对于自己原来的位置进行移动。

 

Absolute

绝对定位方式，脱离文档流，不会占用页面空间。

以最近的非static定位的父级元素作为参考进行定位，

如果其所有的父级元素都是static定位，那么此元素最终则是以当前窗口作为参考进行定位

 

3.fixed

固定定位，固定盒子不随网页滑动而移动

固定定位盒子也脱标

 

23如何实现元素垂直水平居中

第13题==》让元素水平 垂直居中的三种方式

/* 第一种方式 绝对定位 距离石中玉为0 最后margin:auto 兼容性：,IE7及之前版本不支持 这种方式的兼容性是最好的了*/

         div {

            width: 200px;

            height: 200px;

            background: green;

            position: absolute;

            left: 0;

            top: 0;

            bottom: 0;

            right: 0;

            margin: auto;

        }

 

 

        /* 第二种方式 div绝对定位   【margin 负间距】*/

        /* div {

            width: 200px;

            height: 200px;

            background: green;

 

            position: absolute;

            left: 50%;

            top: 50%;

            margin-left: -100px;

            margin-top: -100px;

        } */

 

 

        /* 第三种方式 用了css3的知识 div绝对定位水平垂直居中【Transforms 变形】  IE8不支持*/

        div {

            width: 200px;

            height: 200px;

            background: green;

            position: absolute;

            left: 50%;

            top: 50%;

            transform: translate(-50%, -50%);

 

 

Jq的选择器

一、基本选择器

二、层次选择器  ul li   parent > child    prev + next     prev ~ siblings

三、属性选择器  [attribute]   [attribute=value]  [attribute!=value]    [attribute^=value]

四、 表单选器

 

在php中null  “”  ‘’ 0 都会转化为false

 

 

 

 

 

 

2.3s后进行渐变哦

  div {

            width: 200px;

            height: 200px;

            background: #000;

            transition: all 2.3s;

        }

 

        div:hover {

            background: #fff;

        }

 

 

 

 

 

 

 

 

 

 

 

人事问题

 

未来几年规划

想成为全栈工程师

 

上家公司部门结构

产品部  技术部  美术部  测试部

 

工作中和同事意见不和怎么解决

 

出差的看法

看看具体的情况，是不是经常的出差， 看看是不是经常出差，

 

 

上家公司为何离职

过了年之后，老板就不想做了，好像是家里面有事情，

 

 

工作中遇到的问题，怎么解决

 看看是什么类型的问题，如果是技术问题，可以和同事之间互相的商讨一下，或者是将问题放在社区，如果是非技术问题，我觉得沟通是最好的方式了。

 

 

我的问题：

《1》     现在公司主要用的什么技术栈，js框架是jq还是vue

《2》     Ui框架是elementui 还是其他呢

《3》     工作最近做的是什么类型的项目

《4》     公司是工作时间是996还是？

《5》     公司现在有几个前端？

《6》     公司的后端是用什么类型的语言呢

《7》     公司有福利待遇

《8》     公司会出差吗,最近?

《9》     部门组成呢？

《10》