前言
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>