面试时间（2020.09.01-2020.11.15） 公司：郎森特
先自我介绍下
前端怎么解决跨域，jsonp怎么解决跨域
js的数据类型有哪些
es6写的多吗 用过哪些
ea6和es5的区别
es6和es5的this的区别
css3用的多吗
css3的transform和css2用margain实现动画的区别
css的优先级
sass的预编译用过吗 常用的语法有哪些
bootstrap用过哪些 响应式布局的原理
vue路由有几种模式 两个的区别 看过源码怎么实现的吗
微信小程序的适配是怎么实现的 看过源码吗
开发中有没有遇到过兼容性问题
你有什么问题要问的
公司：触宝
2020.10.29
广告营销公司 主要做小程序 属于外包公司
笔试题
写出数组的快排代码
冒泡排序
将数组中紧挨着的两个元素进行比较（比如：第0个和第1个进行比对），如果前一个元素比后一个元素大，那么这两个元素就调换位置，大的在后面，小的在前面；然后再将下一组数据（比如：第1个和第二个进行比对）执行相同的操作。
var _arr = [2,6,0,3,9,2];
function bubbleSort(arr){
for(var i = 0; i < arr.length; i++){//第一层循环次数控制 等于数组长度
for(var j = 0; j < arr.length-i-1; j++){//第二层循环 两个相邻元素进行比较 每一轮循环找到最大值
if(arr[j] > arr[j+1]){
var temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
//代码优化 es6 解构赋值
//[arr[j],arr[j+1]] = [arr[j+1],arr[j]]
}
}
}
return arr
}
console.log(bubbleSort(_arr))
快速排序
首先获取数组的中间数，然后将数组中比中间数小的值，放到数组left中，比中间数大的值放到right数组中，然后对left和right数组执行相同的操作，直到数组只有一个元素时，将所有数组和中间数合并。
var _arr = [2,6,0,3,9,2];
function quickSort(arr){
if(arr.length <= 1){
return arr
}
var _index = Math.floor(arr.length/2);
var temp = arr.splice(_index,1)[0];//数组 获取值
var left = [];
var right = [];
for(var i = 0; i < arr.length; i++){
if(temp > arr[i]){
left.push(arr[i])
}else{
right.push(arr[i])
}
}
return quickSort(left).concat(temp,quickSort(right))
}
console.log(quickSort(_arr))
写出找到html页面的标签种类
var arr = Array.from(document.querySelectorAll('*')).map(function(item){
return item.nodeName
})
[...new Set(arr)]
vue的计算属性是什么 有什么好处
computed
简化模板里面的复杂逻辑
有缓存性
通过属性计算而得来的属性 不需要在data里面定义
watch和computed的区别
watch 监听数据 一条数据影响多条数据 输入框
conputed 一个属性受多个属性影响
区别：
1、功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。
2、是否调用缓存：computed中的函数所依赖的属性没有发生变化，那么调用当前的函数的时候会从缓存中读取，而watch在每次监听的值发生变化的时候都会执行回调。
3、是否调用return：computed中的函数必须要用return返回，watch中的函数不是必须要用return。
4、使用场景：computed----当一个属性受多个属性影响的时候，使用computed-------购物车商品结算。watch----当一条数据影响多条数据的时候，使用watch-------搜索框。
watch: {
//要放在watch属性中 监听哪个数据就直接写哪个数据当做方法名 其中第一个参数为改变后的新值 第二个为旧的数据
msg(newVal, oldVal) {//{{msg}} msg需要定义
console.log(newVal, oldVal)
},
computed: {
getCurrentSongSrc() {//模板里面直接用 {{getCurrentSongSrc}} getCurrentSongSrc不需要定义
//与watch不同 这里必须要返回一个值 因为是计算属性 你可以理解为计算要返回计算结果
return this.MusicData[this.currentIndex].songSrc
},
},
面试
你知道有多少种快排方式
- 冒泡排序
- 快速排序
微信小程序怎么找到dom元素？
const query = wx.createSelectorQuery() // 创建节点查询器 query
query.select('#productServe') //找到id = productServe 的元素
es6用的多吗 举例
用的多
用过哪些
let const
模板字符串
箭头函数
解构赋值
扩展运算符 ...
await
es6数组 对象 字符串 新增的方法有用过吗
es6 对象 数组新增的方法
Array.form() 转化为数组
[1, 2, 3].includes(2); // true
webpack的配置你会哪些
1.配置别名 用一个字符代替一个路径 简化书写
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
.set('_c', resolve('src/components'))
},
2.配置代理服务 解决跨域问题
devServer: {
//不能用正式服
// proxy: 'https://alpha.huichenghuijia.com'
proxy: 'http://easy.fujuhaofang.com'
// proxy: 'http://beta.fujuhaofang.com'
}
3.配置打包的文件夹名称
outputDir: 'dist',
webpack中常用的loader
babel-loader：把 ES6 转换成 ES5
less-loader：处理less
style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS。
eslint-loader：通过 ESLint 检查 JavaScript 代码
npm install less --save-dev
npm install less-loader --save-dev
h5新增的内容
新的语义元素 有利于seo footer header nav section video audio
项目难点
为什么要用动态路由？ 参照资料 数据转换要自己写 www.baidu.com/s?ie=UTF-8&… 在后台管理系统中 常常因为不同的角色 显示不同的菜单 还有菜单的名字 位置可以改变 针对这两种情况就会用到动态路由 菜单的数据的更改和列表的角色权限控制 动态路由 就是根据后台返回的菜单数据 转换成对应的路由模板的数据格式 利用router.addRoutes(arr)方法 动态添加路由
先自我介绍下
你好 我叫... 来贵公司面试前端岗位。自己独立开发过微信小程序，微信公众号，pc管理系统。微信小程序的开发有用过uniapp进行开发，也用过原生开发。目前正在做的项目是憓家后台管理系统，是用的vue进行开发。这个项目目前还在进行迭代开发以及日常维护。
什么是跨域
受到同源策略的影响，被请求的url和当前的url的协议 域名 端口号任意一个不一致就会产生跨域。
跨域的方式
jsonp跨域 动态创建
实现步骤： 客户端动态生成script标签,在src里面写入请求的服务端地址并且定义回调函数名称，服务端将返回的数据放在这个回调函数的参数里面传给前端。jsonp只适合get请求。
代码实现
客户端：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jsonp demo</title>
<script type="text/javascript">
// 跨域发送HTTP请求，从服务端获取字符串"Hello World"
function getHello() {
var script = document.createElement('script');
script.setAttribute('src', 'http://localhost:8546/Service.ashx?callback=handler');//callback指定回调函数名称
document.querySelector("head").appendChild(script);
}
// 处理函数
function handler(data) {
alert(data);
// our code here...
}
</script>
</head>
<body>
<input type="button" value="发送跨域HTTP请求，获取Hello World" onclick="getHello()" />
</body>
</html>
服务端：
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
// 前端指定的回调函数名称
var callbackFuncName = context.Request.QueryString["callback"];
var responseData = "Hello World";
// 回调脚本，形如：handler('responseData');
var scriptContent = string.Format("{0}('{1}');", callbackFuncName, responseData);
context.Response.Write(scriptContent);
}
代码实现：
cors跨域资源共享
通过设置响应头参数：Access-Control-Allow-Origin：‘*’。该响应头用来记录可以访问该资源的域。在接收到服务端响应后，浏览器将会查看响应中是否包含Access-Control-Allow-Origin响应头。如果该响应头存在，那么浏览器会分析该响应头中所标示的内容。如果其包含了当前页面所在的域，那么浏览器就将知道这是一个被允许的跨域访问，从而不再根据Same-origin Policy来限制用户对该数据的访问。
客户端：
function getHello() {
var xhr = new XMLHttpRequest();
xhr.open("post", "http://b.example.com/Test.ashx", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// 声明请求源 一般前端不需要处理 浏览器会有默认值
xhr.setRequestHeader("Origin", "http://a.example.com");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var responseText = xhr.responseText;
console.info(responseText);
}
}
xhr.send();
}
服务端：
public class Test : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
// 声明接受所有域的请求 设置响应头的参数
context.Response.AddHeader("Access-Control-Allow-Origin", "*");
context.Response.Write("Hello World");
}
public bool IsReusable
{
get
{
return false;
}
}
}
vue项目中跨域 服务代理
vue.config.js文件里相关设置
proxy: 'http://beta.fujuhaofang.com'
js的数据类型有哪些
Number、String、Boolean、Null、undefined、object
es6写的多吗 用过哪些
ea6和es5的区别
谈谈你对this的理解
css3用的多吗
还行 圆角 border-radius 阴影 box-shadow 外阴影增加立体型 一些过度效果 transform translate
css的优先级
!imporant>行内样式>id>class>标签选择器>*
sass的预编译用过吗 常用的语法有哪些
（用过less 变量 嵌套 混入 运算）
@myColor:red;
a {
color: @myColor;//变量
}
@charset "UTF-8";
.w50() {
width: 50%;
}
.lwhb {
.w50();//混合
}
嵌套
运算
bootstrap用过哪些 响应式布局的原理
弹窗组件 分页组件 表格组件
百分比
vue路由有几种模式 两个的区别 看过源码怎么实现的吗
hash原理：onhashchange事件，可以在windows对象上监听这个事件 history路由：切换历史状态 back、forward、go 修改历史状态 pushState、replaceState
微信小程序的适配是怎么实现的 看过源码吗
开发中有没有遇到过兼容性问题
1，不同浏览器的标签默认padding和margain值不一样 可以用通配符重置样式
2，ios 点击事件没有反应 加上css样式cusor:pointer
3,图片之间会有缝隙 使用float
4，ios微信打开网页 输入框输入后内容键盘弹起后页面会被顶上去，键盘收起，页面没有回到原来的位置
input blur滚动页面
$("input").blur(function () {
$("html,body").animate({scrollTop: document.documentElement.clientHeight},500);
});
5,移动端1px问题 css设置1px实际看起来会大很多
解决方案：
对于老项目伪元素+transform是比较完美的方法了。
伪元素+transform实现
原理是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新做的 border 绝对定位。
单条border样式设置：
.scale-1px{ position: relative; border:none; }
.scale-1px:after{
content: '';
position: absolute; bottom: 0;
background: #000;
width: 100%; height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
触宝+希奥股份+第一财经数据 面试总结
你有什么问题要问的
你们正在做什么类型的项目 技术栈 团队有多少人
有没有写过好的组件
select和input结合的搜索下拉组件 用于精确搜索 图片容错处理组件
项目中遇到的难点
打印合同详情 动态新增iframe 打印ifame里面内容
