前端基础

一、css
1.盒模型
·标准盒模型 border, padding, content, margin

image.png

·通过 box-sizing属性改变元素的盒模型

box-sizing 属性用来改变默认的 CSS盒模型 对元素宽高的计算方式。这个属性可以用于模拟那些非正确支持标准盒模型的浏览器的表现。

2、CSS中哪些属性可以继承？

1、字体系列属性 　　
font-family：字体系列 　　
font-weight：字体的粗细 　　
font-size：字体的大小 　　
font-style：字体的风格   　　
2、文本系列属性 　　
text-indent：文本缩进 　　
text-align：文本水平对齐 　　
line-height：行高 　　
word-spacing：单词之间的间距 　　
letter-spacing：中文或者字母之间的间距 　　
text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个） color：文本颜色   　　
3、元素可见性： 　　
visibility：控制元素显示隐藏   　　
4、列表布局属性： 　　
list-style：列表风格，包括list-style-type、list-style-image等   　　
5、光标属性： 　　
cursor：光标显示为何种形态

3、让一个宽、高都是100px的div，相对父容器，上下左右居中。怎么实现。

.box {
    width: 400px;
    height: 200px;
    position: relative;
   background: red;
}
.content {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
// 宽度和高度已知的
    margin-left: -50px;
    margin-top: -50px;
// 宽度和高度未知的
transform: translate(-50%, -50%);
    background: green;
}
</style>

    <div class="box">
        <div class="content"></div>
    </div>

4、清除浮动，有哪些方式。

目的：清除浮动主要是为了解决父级元素因为子级浮动引起的内部高度为0的问题。
1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）
优点：通俗易懂，方便
缺点：添加无意义标签，语义化差

2.父级添加overflow属性（父元素添加overflow:hidden）（不推荐）
优点：代码简洁
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

3.使用after伪元素清除浮动（推荐使用）
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
   content: "";
   display: block;
   height: 0;
   clear:both;
   visibility: hidden;
}
.clearfix{
   *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
优点：符合闭合浮动思想，结构语义化正确
缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.


4.使用before和after双伪元素清除浮动
.clearfix:after,.clearfix:before{
    content: "";
    display: table;
 }
.clearfix:after{
    clear: both;
}
.clearfix{
    *zoom: 1;
}

5、说一说flex布局。

使用弹性布局可以有效的分配一个容器的空间 
即使我们的容器元素尺寸改变 
它内部的元素也可以调整它的尺寸来适应空间 
设置了flex布局后，子元素的float、clear和vertical-align属性就会失效

二、js
1、引用数据类型(对象)，浅拷贝和深拷贝有什么区别。浅拷贝怎么实现，深拷贝怎么实现。

浅拷贝
直接赋值赋值的是内存地址，赋值之后两个变量使用的相同内容,
两个变量中存储的是相同的内存地址，一个操作,另一个也会改变。

深拷贝
循环遍历,获取引用数据类型中,存储的每一个数据信息赋值到新的变量中，赋值之后 两个变量,没有任何关系。

2、数组去重，有哪些方法。

1. 遍历去重
function unique(arr) {
    const res=[]
    arr.forEach(item => { //数组遍历
       if (res.indexOf(item) < 0) { //数组遍历
           res.push(item)
       }
    });
    return res
}
unique([20, 30, 30, 50, 4, 4]) //[20, 30, 50, 4]


2. ES6：Set
function unique(arr){
    return [...new Set(arr)]
}
console.log(unique([20, 30, 30, 50, 4, 4]))

3、一个一维数组，成员是对象，根据对象id进行排序，怎么排序。

let arr = [
        {id: 1, name: 'aaa'},
        {id: 4, name: 'ddd'},
        {id: 2, name: 'bbb'},
        {id: 3, name: 'ccc'}
]
 arr.sort((a, b) => {
    return (a.id + '') > (b.id + '')? 1 : -1;
 })
console.log(arr) // 得到的即为通过id排序好的




// 排序方法1 （封装了，可对任何属性进行排序）
function compare(property) {
    return function (value1, value2) {
        let v1 = value1[property];
        let v2 = value2[property];
        return v1 - v2
    }
}
 
console.log(a.sort(compare('id')));

4、事件委托，什么时候用。jquery如何用事件委托方式，给ul里面的每个li实现事件委托。

js中事件冒泡我们知道，子元素身上的事件会冒泡到父元素身上。
事件代理就是，本来加在子元素身上的事件，加在了其父级身上。

事件委托就是通过事件冒泡的原理，利用父级去触发子级的事件（即事件绑定在父节点上）

那就产生了问题：父级那么多子元素，怎么区分事件本应该是哪个子元素的？

答案是：event对象里记录的有“事件源”，它就是发生事件的子元素。
$("#oul").click(function(e){
    //e对象在jquery里面做了兼容处理
    //target目标元素，el即是你点击的对象
    var el = e.target;
    //el是js对象,如果要用jquery请用$(el)
    //el.tagName 对象的标签名，一定要大写
    if(el.tagName === "LI"){
        //你要执行的代码
        console.log(el.innerHTML);
    }
})

5、有时候我们要把A页面的数据，带到B页面。有哪些方法

方法一：使用HTML5本地化存储(localStorage) 组件
（本地最大能存储5M数据）localStorage是本地永久存储数据，是cookie的优化

方法二：使用cookie将数据存放在客户的浏览器 （最大存储2M数据）

方法三：使用url传参 （将要传递的数据保存为一个存储变量，然后传给url）

方法四：使用query传值--地址栏可见
方法五：使用params传值--地址栏不可见
方法六： router-link
<router-link :to="{path:'/test',query: {userid: id}}">跳转</router-link>

6、ajax请求再次封装。做了哪些处理

function resetAjax(opt) {
  opt = Object.assgin({}, {
      root: 'http://xiangmu/',
     //  其他默认参数...
  }, opt)

  let options = {
    url: opt.root + opt.url,
    data: JSON.stringify(opt.data),
    // 告诉服务器，发送给你的数据格式，是JSON字符串；
   // 否则 服务器不知道怎么解析收到的数据
    contentType: 'application/json; charset=UTF-8',
    // 跨域允许浏览器发送cookie到服务器
    xhrFields: {
      withCredentials: true
    },
    success(res) {
      // 登录过期判断
      if (res.code === 'AUTH_EXPIRE') {
        // 跳转到登录
      }
      // 请求数据成功
      if (res.code === '200') {
        // 处理数据，这里才是每个请求不一样，要处理的地方！！！！！！
        opt.success(res);
      } else {
        // 其他状态，需要弹窗提示错误信息
        alert(res.message);
      }
    }
  }
  $.ajax(options);
}

7、跨域请求，有哪些实现方式

vue框架的跨域

  node + vue + webpack + webpack-dev-server搭建的项目，
跨域请求接口，直接修改webpack.config.js配置。
开发环境下，vue渲染服务和接口代理服务都是webpack-dev-server同一个，
所以页面与代理接口之间不再跨域。

8、ES6新增加的字符串方法。

1、indexOf()方法和lastIndexOf()方法。
能接收2个参数，第一个参数为要寻找的字符串，第二个为开始位置，
如果不写开始位置，会在全局找，无论从哪个位置开始找，
返回的都是第一次出现的位置的下标。

2.includes()方法
同样能接收2个参数，填写一个参数在全局找，
填写第二个参数，则从填写的位置往后找。
如果找到返回true，没找到返回false。

3.startsWith()方法
查询是否以什么什么开头，同样能接收2个参数，
1个参数的话在全局找，2个参数的话则从填写的位置往后找，
找到返回true，没找到返回false。

4.endsWith()方法
用法与第3个一样，如果填写第二个参数的话，则是从填写的位置往前找。

5.repeat()方法
能将原字符串重复几次，并返回一个新的字符串
注意：如果输入的是小数则会被向下取整，NaN会被当做0，输入其他的则会报错。

三、vue
1、单页相对于原来的多页开发，有什么优点和缺点。

单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，
浏览器一开始要加载所有必须的 html, js, css。
所有的页面内容都包含在这个所谓的主页面中。
但在写的时候，还是会分开写（页面片段），
然后在交互的时候由路由程序动态载入，单页面的页面跳转，
仅刷新局部资源。多应用于pc端。

　　

　　多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新

单页面的优点：

1，用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小

2，前后端分离

3，页面效果会比较炫酷（比如切换页面内容时的专场动画）

单页面缺点：

1，不利于seo

2，导航不可用，如果一定要导航需要自行实现前进、后退。
（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）

3，初次加载时耗时多

4，页面复杂度提高很多

2、一个vue组件，数据如何下发和上报

父组件传递数据给子组件——props
子组件传递数据给父组件   方式二：自定义事件

3、sync 修饰符，有没有用过。实现原理是什么

一个组件上只能定义一个v-model，如果其他prop也要实现双向绑定的效果该怎么办呢？ 简单的方法是子组件向父组件发送一个事件，父组件监听该事件，然后更新prop。具体如下：
上述写法太麻烦了，通过.sync可以简化上面代码，只需要修两个地方：

组件内触发的事件名称以“update:myPropName”命名，相应的上述info组件改为 update:value
父组件v-bind:value 加上.sync修饰符，即 v-bind:value.sync
这样父组件就不用再手动绑定@update:value事件了。

4、插槽有没有用过，干什么用的。

插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。

四、vue-router
1、路由跳转拦截怎么实现

// main.js
router.beforeEach((to, from, next) => {
  if (to.matched.some(res => res.meta.requireAuth)) { // 验证是否需要登陆
    if (sessionStorage.getItem('sid')) { // 查询本地存储信息是否已经登陆
      next();
    } else {
      next({
        path: '/login', // 未登录则跳转至login页面
        query: {redirect: to.fullPath} // 登陆成功后回到当前页面，这里传值给login页面，to.fullPath为当前点击的页面
        });
    }
  } else {
    next();
  }
});

2、后台管理系统，页面权限控制怎么实现。

image.png

五、vuex
1、vuex是干什么用的

vuex是基于vue框架的一个状态管理库。
可以管理复杂应用的数据状态，比如兄弟组件的通信、多层嵌套的组件的传值等等。

vuex有这么几个核心概念——State、Getter、Mutation、Action、Module。

2、如何在vue组件中引入vuex里的state和mutation

利用vuex的mapState方法来获取vuex的state对象中属性，它有两种写法：

写法1（mapState中用对象的形式获取）：

首先在组件中引入vuex的mapState方法：

import { mapState } from 'vuex'

然后在computed中这样写：

        computed:{
            ...mapState({
                count:state => state.count   //使用ES6的箭头函数来给count赋值
            })

        }

六、说一说webpack打包基本配置