2024年Web前端最全一步步教你用taro封装一个公司库的下拉组件(2)，毕业一年萌新的Web前端大厂面经

最后

全网独播-价值千万金融项目前端架构实战

从两道网易面试题-分析JavaScript底层机制

RESTful架构在Nodejs下的最佳实践

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

一线互联网企业如何初始化项目-做一个自己的vue-cli

思维无价，看我用Nodejs实现MVC

代码优雅的秘诀-用观察者模式深度解耦模块

前端高级实战，如何封装属于自己的JS库

VUE组件库级组件封装-高复用弹窗组件

实现思路介绍（如何控制事件的冒泡）

总结6

实现效果

---

前言

–

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷

前言

–

歌谣 歌谣 如何封装一个公司库的一个组件

需求介绍

---

首先要实现的是

1第一步 需要在一个input框中输入字符 当字符发生变化的时候进行接口的调用

2超过两个字符开始渲染页面

3将页面的值返回出去

核心代码部分

---

import Taro, { Component } from “@tarojs/taro”;

import { View, Text, Input, Form, ScrollView } from “@tarojs/components”;

import { AtList, AtListItem, AtAccordion } from “taro-ui”;

import { searchCompanyLibrary } from “@/services/user”;

import “./index.scss”;

/********

• @param placeholder String 默认请输入

• @param title String 输入框名字【required】

• @param clear Boolean 是否显示清楚按钮

• @param searchCompanyLibrary Function 获取列表数据 [required] 接口请求

• @param searchCompanyLibraryList 回调传值 第一个参数为外层需要的文本值

第二个参数为控制外面元素是不是存在的值

• @param companyName 用于编辑回显使用 外层传入

• @param ScrollView 滚动取值

• ****************** */

class FuzzyQuery extends Component {

state = {

applicantName: this.props.companyName || “”,

popLeft: 0,

popWidth: 0,

open: false,

dataSource: [1, 2, 3],

popTop: 0,

selectItem: {},

isSelectCompany: false,

pageIndex: 1,

pageSize: 10

};

componentDidMount() {

this.props.onRef && this.props.onRef(this);

setTimeout(() => {

this.handleGetDom();

}, 100);

// this.handleGetDom();

}

handleGetDom = () => {

let _this = this;

Taro.createSelectorQuery()

.select(“.fuzzy-query .weui-input”)

.boundingClientRect(function(rect) {

// rect.id; // 节点的ID

// rect.dataset; // 节点的dataset

// rect.left; // 节点的左边界坐标

// rect.right; // 节点的右边界坐标

// rect.top; // 节点的上边界坐标

// rect.bottom; // 节点的下边界坐标

// rect.width; // 节点的宽度

// rect.height; // 节点的高度

_this.setState({

popLeft: rect.left,

popWidth: rect.width,

popTop: rect.height

});

})

.exec();

};

//选中某一项时触发

handleClick = (e, item) => {

console.log(e, “e”);

e.stopPropagation();

e.preventDefault();

this.setState(

{

open: false,

applicantName: item.name,

selectItem: item

},

() => {

const { open } = this.state;

this.props.searchCompanyLibraryList &&

this.props.searchCompanyLibraryList(item.name, open);

}

);

};

//当输入框发生变化时

handleChange = async keyWord => {

var company = keyWord.detail.value;

//先编码

var value = encodeURI(keyWord.detail.value);

console.log(value, “value”);

//如果少于2个字符，是不调用接口的，此时不显示公司公司列表弹窗，且将数据清空

if (company.length < 2) {

this.setState(

{

applicantName: company,

open: false,

dataSource: [],

pageIndex: 1

},

() => {

const { open } = this.state;

this.props.searchCompanyLibraryList &&

this.props.searchCompanyLibraryList(company, open);

}

);

Taro.showToast({

title: “请输入不少于两个字符”,

icon: “none”,

mask: true

});

} else {

const { pageIndex, pageSize, dataSource, open } = this.state;

let params = { keyWord: decodeURI(value), pageSize, pageIndex };

const data = await searchCompanyLibrary(params);

this.setState(

{

open: true,

applicantName: company,

dataSource: data.data.data,

pageIndex: 1

},

() => {

const { open } = this.state;

this.props.searchCompanyLibraryList &&

this.props.searchCompanyLibraryList(company, open);

}

);

}

};

//触底函数

onScrollToUpper = async () => {

console.log(“我在触底”);

const { pageIndex, pageSize, dataSource, applicantName } = this.state;

let applicantNameList = encodeURI(applicantName);

let params = {

keyWord: decodeURI(applicantNameList),

pageSize,

pageIndex: pageIndex + 1

};

const data = await searchCompanyLibrary(params);

console.log(dataSource, “dataSource”);

console.log(data.data.data, “data”);

this.setState({

// open: true,

// applicantName: applicantName,

dataSource: […dataSource, …data.data.data],

pageIndex: pageIndex + 1

});

};

render() {

const {

applicantName,

popLeft,

popWidth,

open,

popTop,

dataSource

} = this.state;

console.log(dataSource, “dataSource”);

const scrollStyle = {

zIndex: 100,

height: “250px”

};

const { placeholder = “请输入”, title = “”, clear = false } = this.props;

return (

<View

className=“position-relative fuzzy-query”

id=“fuzzy-query”

onRef={node => (this.fuzzyWrap = node)}

{title}

<View

className={

clear && applicantName

? “search-input-show-clear”

“search-input-wrap”

}

<Input

placeholderStyle=“color:#f8f8f8”

className=“search-input”

value={applicantName}

onChange={this.handleChange}

placeholder={placeholder}

{clear && applicantName && (

className="at-input__icon "

onClick={() =>

this.setState({

applicantName: “”,

dataSource: [],

open: false

})

}

<span className="taro-text at-icon

at-icon-close-circle at-input__icon-close">

)}

<View

style={{ top: ${popTop * 2}px }}

className={

open

? “show-fuzzy-pop position-absolute fuzzy-query-pop”

“position-absolute fuzzy-query-pop”

}

<ScrollView

scrollY

style={scrollStyle}

scrollWithAnimation

onScrollToLower={this.onScrollToUpper}

// 使用箭头函数的时候 可以这样写 onScrollToUpper={this.onScrollToUpper}

<View

style={{

paddingLeft: ${popLeft - 12}px,

width: ${popWidth}px

}}

{dataSource.length > 0 &&

dataSource.map(item => {

return (

<AtListItem

title={item.name}

onClick={e => this.handleClick(e, item, “selectItem”)}

/>

);

})}

);

}

}

export default FuzzyQuery;

样式部分

---

.fuzzy-query{

.at-list::after{border-top:0;}

.fuzzy-query-pop{

// border: 1px solid #e8e8e8;

box-sizing: border-box;

z-index:100;

width: 100%;

background: #fff;

// opacity: 0;

max-height:0;

overflow: hidden;

transition:max-height 0.5s ;

.at-list__item{

padding:20px;

font-size: 28px;

}

.at-list__item::after{left:0;}

}

.show-fuzzy-pop{

max-height:800px;

ES6

• 列举常用的ES6特性：

• 箭头函数需要注意哪些地方？

• let、const、var

• 拓展：var方式定义的变量有什么样的bug？

• Set数据结构

• 拓展：数组去重的方法

• 箭头函数this的指向。

• 手写ES6 class继承。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

微信小程序

• 简单描述一下微信小程序的相关文件类型?

• 你是怎么封装微信小程序的数据请求？

• 有哪些参数传值的方法？

• 你使用过哪些方法，来提高微信小程序的应用速度？

• 小程序和原生App哪个好？

• 简述微信小程序原理？

• 分析微信小程序的优劣势

• 怎么解决小程序的异步请求问题？

其他知识点面试

• webpack的原理

• webpack的loader和plugin的区别？

• 怎么使用webpack对项目进行优化?

• 防抖、节流

• 浏览器的缓存机制

• 描述一下二叉树, 并说明二叉树的几种遍历方式?

• 项目类问题

• 笔试编程题：

最后

技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。