（十四）-前端-面试-项目相关
项目相关
1.组件化和模块化
为什么要组件化开发
有时候页面代码量太大，逻辑太多或者同一个功能组件在许多页面均有使用，维护起来相当复杂，这个时候，就需要组件化开发来进行功能拆分、组件封装，已达到组件通用性，增强代码可读性，维护成本也能大大降低
组件化开发的优点
很大程度上降低系统各个功能的耦合性，并且提高了功能内部的聚合性。这对前端工程化及降低代码的维护来说，是有很大的好处的，耦合性的降低，提高了系统的伸展性，降低了开发的复杂度，提升开发效率，降低开发成本
组件化开发的原则
· 专一
· 可配置性
· 标准性
· 复用性
· 可维护性
模块化
为什么要模块化
早期的javascript版本没有块级作用域、没有类、没有包、也没有模块，这样会带来一些问题，如复用、依赖、冲突、代码组织混乱等，随着前端的膨胀，模块化显得非常迫切
模块化的好处
· 避免变量污染，命名冲突
· 提高代码复用率
· 提高了可维护性
· 方便依赖关系管理
2.你如何对网站的文件和资源进行优化？
期待的解决方案包括：
\1. 文件合并
\2. 文件最小化/文件压缩
\3. 使用 CDN 托管
\4. 缓存的使用（多个域名来提供缓存）
3.请说出三种减少页面加载时间的方法
\1. 优化图片
\2. 图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）
\3. 优化 CSS（压缩合并 css，如 margin-top, margin-left...)
\4. 网址后加斜杠（如 www.campr.com/目录，会判断这个目录是什么文件类型，或者是目录。）
\5. 标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多， 浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。 当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载 后面的内容。从而加载时间快了，浏览体验也更好了）
\6. 减少 http 请求（合并文件，合并图片）
4.VUE项目中的优化
1.不要在模板里面写过多表达式
2.循环调用子组件时添加key
3.频繁切换的使用v-show，不频繁切换的使用v-if
4.尽量少用float，可以用flex
5.按需加载，可以用require或者import()按需加载需要的组件
6.路由懒加载
\7. 对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样对于页面加载性能上会有很大的提升，也提高了用户体验。我们在项目中使用 Vue 的 vue-lazyload 插件：
（1）安装插件
npm install vue-lazyload --save-dev
（2）在入口文件 man.js 中引入并使用
import VueLazyload from 'vue-lazyload'
然后再 vue 中直接使用
Vue.use(VueLazyload)
或者添加自定义选项
Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1
})
复制代码
（3）在 vue 文件中将 img 标签的 src 属性直接改为 v-lazy ，从而将图片显示方式更改为懒加载显示：
\8. Vue 会通过 Object.defineProperty 对数据进行劫持，来实现视图响应数据的变化，然而有些时候我们的组件就是纯粹的数据展示，不会有任何改变，我们就不需要 Vue 来劫持我们的数据，在大量数据展示的情况下，这能够很明显的减少组件初始化的时间，那如何禁止 Vue 劫持我们的数据呢？可以通过 Object.freeze 方法来冻结一个对象，一旦被冻结的对象就再也不能被修改了。
9减少 ES6 转为 ES5 的冗余代码
（1）首先，安装 `babel-plugin-transform-runtime` ：
npm install babel-plugin-transform-runtime --save-dev
（2）然后，修改 .babelrc 配置文件为：
"plugins": [
"transform-runtime"
]
5.用没用过git，说几个常用的命令？
git add .
git commit -m 'm'
git push
git pull
git merge
git branch
git checkout xxx
6.VUE项目路由权限
前后端分离的权限管理基本就以下两种方式：
\1. 后端生成当前用户相应的路由后由前端（用 Vue Router 提供的API）addRoutes 动态加载路由。
\2. 前端写好所有的路由，后端返回当前用户的角色，然后根据事先约定好的每个角色拥有哪些路由对角色的路由进行分配。
l 第一种，完全由后端控制路由，但这也意味着如果前端需要修改或者增减路由都需要经过后端大大的同意；
l 第二种，相对于第一种，前端相对会自由一些，但是如果角色权限发生了改变就需要前后端一起修改，而且如果某些（技术型）用户在前端修改了自己的角色权限就可以通过路由看到一些本不被允许看到的页面，虽然拿不到数据，但是有些页面还是不希望被不相关的人看到。
7.你做过的项目中有什么亮点吗？有什么让你自豪的吗
独立封装了什么什么组件，提高了代码的复用率，减少了冗余代码；
图片资源懒加载
对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样对于页面加载性能上会有很大的提升，也提高了用户体验。我们在项目中使用 Vue 的 vue-lazyload 插件：
（1）安装插件
npm install vue-lazyload --save-dev
（2）在入口文件 man.js 中引入并使用
import VueLazyload from 'vue-lazyload'
然后再 vue 中直接使用
Vue.use(VueLazyload)
**路由懒加载：**
const Foo = () => import('./Foo.vue')
const router = new VueRouter({
routes: [
{ path: '/foo', component: Foo }
]
})
