1.node导出模块有哪两种方式,说说它们的区别
1、module.exports
- 我们可以直接通过为 module.exports 赋值的方式来导出模块
- module.exports 可以导出单个成员
- exports 的功能 module.exports 都能实现
2、exports
- exports 变量是 node 提供的一个对 module.exports 的引用。
- exports 用添加属性的方式来导出,且只能导出一个对象。
- 如果直接将 exports 变量指向一个值,不会影响 module.exports ,但是这样等于切断了 exports 与 module.exports 的联系。
2.说一下前端渲染和后端渲染的优缺点
后端渲染(SSR):
后端渲染的情况,由后端接受请求后处理数据并生成html返回给浏览器,浏览器只进行了HTML的解析和显示。
优点:
- 对 SEO 友好
- 首屏加载快
- 不占用客户端资源
缺点:
- 对服务器压力大
- 不利于前后端分离,开发效率低
前端渲染(SPA、单页面应用):
前端渲染就是指浏览器会从后端得到信息,然后由浏览器来完成的将这些信息解析成HTML,再进行显示。
优点:
- 用户体验更好,可以无请求更新画面,更接近于原生 App
- 极大地降低服务器压力
- 前后端分离,前端专注于前端UI,后端专注于 api 开发
缺点:
- 对 SEO 不友好
- 首屏加载速度会比较慢
3.介绍一下es6中Set、Map的区别
- Map 对象是键值对集合,但是 key 不仅可以是字符串还可以是其他各种类型的值包括对象都可以成为 Map 的键
- Set 对象类似于数组,其成员的值都是唯一的,且无法通过下标取值。
- 任意两个 NaN 虽然不相等,但是在 set 和 map 中都会被视作是相等的
4.用过哪些css预处理器,有什么特性?(比如sass、less、stylus、StyledComponent)
- Sass 最早也是最成熟的一款CSS预处理器语言,可以更有效有弹性的写出CSS,支持不包含花括号和分号的方式。受Less影响,已经进化到了全面兼容 CSS 的 SCSS(SCSS 需要使用分号和花括号而不是换行和缩进)
- Less 受Sass的影响较大,但又使用CSS的语法,优点是简单和兼容CSS。
- Stylus 支持的语法要更多样性一点,可以省略花括号"{}", 冒号 “:”, 分号";",或者直接使用纯 CSS,使用灵活度更高。
- 它们都可以使用变量、常量、嵌套、混入、函数等特性。
- styled-components是针对 react 写的一个 css-in-js 类库,它也可以通过 js 赋能解决了原生 css 所不具备的能力,比如变量、循环、函数等
5.说一下react Context的使用
Context是通过组件树提供了一个传递数据的方法,从而避免了在每一个层级手动的传递 props 属性。
React.createContext(defaultValue):创建一个上下文的容器(组件), defaultValue 可以设置共享的默认数据,这个容器会提供 Provider 和 Consumer
Provider:在需要传递数据的地方用其包裹,属性 value 中提供什么,它就能向后代树传递什么。如果没有 Provider ,后代树只能获取到defaultValue
Consumer:在需要获取值的地方用 Consumer 包裹,就能通过this.context 取得值。
函数组件使用hook方法 useContext 获取context
- 优点:减少代码层层传递的复杂度
- 缺点:因为依赖祖先组件的传值,子组件的复用性降低了
6.说一下vue中路由跳转和传值的方式
跳转方式:
- router-link
- this.$router.push()
- this.$router.replace():跟 router.push 很像,唯一的不同就是,它不会向 history 添加新记录,而是它会替换掉当前的 history 记录
- this.$router.go(n):根据 history 记录进行前进后退
传值方式:
- 动态路由
- query
- params
使用路由与路径的注意事项:
- 使用 params 时是不能通过 path 跳转的
- query 会在路径中变成 参数名 = 参数值 的形式
- 动态路由和 query 属性传值页面刷新参数不会丢失,params 会丢失。
- query、params 可以传递一个也可以传递多个参数。动态路由想要传递多个值需要用/隔开,
- 动态路由和 parmas 的值可由 this.$route.params 里获取,query 的值在this.$route.query 里获取
- 动态路由可以通过路由解耦的方式获取值。在配置路由的时候添加 props 属性为 true ,在需要接受参数的组件页面通过 props 进行接受