前言
11.4下午4点微盟前端二面
文章目录
问题总结
什么叫前后端分离？一个项目如何实施前后端分离？
前后端分离是：软件技术和业务发展到一定程度，在项目管理工作上必须进行的一种升级，他是一个必然而不是一个偶然！说白了，就是公司部门架构的一种调整。
轻松理解前后端分离（通俗易懂）
包工头都能听明白的前后端分离！
node.js
JavaScript 和 Node.js 的历史：
- Netscape 浏览器衍生出了 JavaScript 脚本，赋予网页编程能力；
- Chrome 浏览器衍生了 V8 引擎，提高了 JavaScript 性能；
- V8 引擎构建了 Node.js，拓展了 JavaScript 的编程能力；（Node.js是一个基于Chrome V8引擎的JavaScript运行环境，在没有node.js之前，我们的js只能运行在浏览器环境中，有了node我们就可以运行在浏览器之外，也就是操作系统之上。）
- Node.js 衍生了 Libuv 库，给网络开发增加了一款优秀的工具。
前端安全性的了解？
前端工程化的理解？
前端工程化的特点
前端工程化可以分成四个方面来说，分别为模块化、组件化、规范化和自动化。
模块化
模块化是指将一个文件拆分成多个相互依赖的文件，最后进行统一的打包和加载，这样能够很好的保证高效的多人协作。其中包含
- JS 模块化：CommonJS、AMD、CMD 以及 ES6 Module。
- CSS 模块化：Sass、Less、Stylus、BEM、CSS Modules 等。其中预处理器和 BEM 都会有的一个问题就是样式覆盖。而 CSS Modules 则是通过 JS 来管理依赖，最大化的结合了 JS 模块化和 CSS 生态，比如 Vue 中的 style scoped。
- 资源模块化：任何资源都能以模块的形式进行加载，目前大部分项目中的文件、CSS、图片等都能直接通过 JS 做统一的依赖关系处理。
组件化
不同于模块化，模块化是对文件、对代码和资源拆分，而组件化则是对 UI 层面的拆分。
通常，我们会需要对页面进行拆分，将其拆分成一个一个的零件，然后分别去实现这一个个零件，最后再进行组装。 在我们的实际业务开发中，对于组件的拆分我们需要做不同程度的考量，其中主要包括细粒度和通用性这两块的考虑。 对于业务组件，你更多需要考量的是针对你负责业务线的一个适用度，即你设计的业务组件是否成为你当前业务的 “通用” 组件。
规范化
正所谓无规矩不成方圆，一些好的规范则能很好的帮助我们对项目进行良好的开发管理。规范化指的是我们在工程开发初期以及开发期间制定的系列规范，其中又包含了
- 项目目录结构
- 编码规范：对于编码这块的约束，一般我们都会采用一些强制措施，比如 ESLint、StyleLint 等。
- 联调规范
- 文件命名规范
- 样式管理规范：目前流行的样式管理有 BEM、Sass、Less、Stylus、CSS Modules 等方式。
- git flow 工作流：其中包含分支命名规范、代码合并规范等。
- 定期 code review … 等等
自动化
从最早先的 grunt、gulp 等，再到目前的 webpack、parcel。这些自动化工具在自动化合并、构建、打包都能为我们节省很多工作。而这些只是前端自动化其中的一部分，前端自动化还包含了持续集成、自动化测试等方方面面。
v-for？
v-for指令的四种使用方式
- 循环普通数组
<ul>
<!-- v-for 可以循环数据 item 是数组 list 的单元项, index 是单元项对应的下标 -->
<li v-for='(item, index) in list' :key="index">{
{
item}}</li>
</ul>
data: {
list: [ '第一课的内容', '第二课的内容' ]
}
- 循环对象数组
<ul>
<li v-for='(item, index) in list' :key="index"> {
{
item.name }} ----- {
{
item.id }} ----- {
{
index }}</li>
</ul>
data: {
list: [
{
id: 1, name: "张三" },
{
id: 2, name: "李四" },
{
id: 3, name: "王五" }
]
}
- 循环对象
<ul>
<!--总结：数组和对象的 index 和 key 永远都放在小括号里的第二位，item 和 value 放在第一位-->
<!--注意： 在遍历对象身上的键值对时，除了有 value, key, 在第三个位置还有 一个索引-->
<li v-for="(value, key, index) in obj" :key="index">值是： {
{
value }} ----- 键是 {
{
key }} ---- 索引是{
{
index }}</li>
</ul>
data: {
obj: {
id: 1,
name: "田女士",
gender: "女"
}
}
- 循环数字
<ul>
<!-- in 后面我们放过 普通数组，对象数组，对象，还可以放数字 -->
<!-- 注意：如果使用v-for迭代数字的话，前面的count 值从1开始 -->
<li v-for="count in 10" :key="count">这是第 {
{
count }} 次循环</li>
</ul>
<!-- 在 v-for 循环时，每一个循环项上最好都加上一个 key 值，提高性能：-->
1. key 属性的值只能使用 number 或者 string 类型；（不推荐使用 index 作为唯一的 key 值，推荐使用 item.id (后台数据里的id)）；
2. key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值；
3. 当在组件中使用 v-for 时， key 是必须的：
<TodoItem v-for="(item, index) in list"
:item="item"
:index="index"
:key="item.id"
>
</TodoItem>
4. 任何数据都不会自动传递到组件里面，因为组件有自己独立的作用域。
如果要传递数据到组件，需要用 props。
v-if和v-for的优先级？怎么解决？如果两个同时出现，应该怎么优化得到更好的性能？
- v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染
- v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组或者对象，而 item 则是被迭代的数组元素的别名
在 v-for 的时候，建议设置key值，并且保证每个key值是独一无二的，这便于diff算法进行优化
- 优先级
- 在vue2中，v-for的优先级高于v-if
- 在vue3中，v-if的优先级高于v-for
注意事项
- 永远不要把 v-if 和 v-for 同时用在同一个元素上，带来性能方面的浪费（每次渲染都会先循环再进行条件判断）
- 如果避免出现这种情况，则在外层嵌套template（页面渲染不生成dom节点），在这一层进行v-if判断，然后在内部进行v-for循环
<template v-if="isShow">
<p v-for="item in items">
</template>
- 如果条件出现在循环内部，可通过计算属性computed提前过滤掉那些不需要显示的项
computed: {
items: function() {
return this.list.filter(function (item) {
return item.isShow
})
}
}
JS实时监听input框输入值，校验
原生JS中可以使用oninput,onpropertychange,onchange
oninput，onpropertychange，onchange的用法
1） onchange 触发事件必须满足两个条件：
a）当前对象属性改变，并且是由键盘或鼠标事件激发的（脚本触发无效）
b）当前对象失去焦点(onblur)；
2） onpropertychange ，只要当前对象属性发生改变，都会触发事件，但是它是IE专属的；
3） oninput 是onpropertychange的非IE浏览器版本，支持firefox和opera等浏览器，但有一点不同，它绑定于对象时，并非该对象所有属性改变都能触发事件，它只在对象value值发生改变时奏效。
<body>
请输入字符：<input type="text" id='input' />
<hr /> 你是输入的字符为:
<div id='test'></div>
<script>
var input = document.getElementById('input');
var div = document.getElementById('test');
input.oninput = function() {
div.innerHTML = input.value;
}
</script>
</body>