2024年前端最新利用glfx，腾讯前端面试题社招

紧跟潮流

大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。

这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分

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

======================================================================

封装一个Vue图像处理组件，暂且叫做FrontProcess.vue。这个组件接收父组件待处理的图像url，当进行了图像处理操作后，携带处理后的图像url给父组件发送emit事件。父组件接收到事件后，更新图像url

首先，我们导入glfx脚本

---

import {fx} from ‘@/assets/js/glfx.js’

定义data和props

---

data(){

// 这里定义的是一些对象（保存canvas等数据）和参数值（如亮度/对比度等值）

return {

valueOfBrightness: 0,

_canvas: null,

_texture: null,

imgElement: null,

_draw: null,

originalSrc: ‘’,

valueOfContrast: 0,

isCurves: false,

isDenoise: false,

valueOfHue: 0,

valueOfSaturation: 0,

valueOfNoise: 0,

valueOfSepia: 0,

usmRadius: 0,

usmStrength: 0,

opBtn: []

}

},

props: {

imgUrl: {

required: true

}

}

将数据绑定到模板上

---

亮度

<el-slider v-model=“valueOfBrightness” :max=“100” :min=“-100” @change=“drawByParams”>

对比度

<el-slider v-model=“valueOfContrast” :max=“100” :min=“-100” @change=“drawByParams”>

色调

<el-slider v-model=“valueOfHue” :max=“100” :min=“-100” @change=“drawByParams”>

饱和度

<el-slider v-model=“valueOfSaturation” :max=“100” :min=“-100” @change=“drawByParams”>

加噪

<el-slider v-model=“valueOfNoise” :max=“100” :min=“0” @change=“drawByParams”>

深褐

<el-slider v-model=“valueOfSepia” :max=“100” :min=“0” @change=“drawByParams”>

锐化半径

<el-slider v-model=“usmRadius” :max=“200” :min=“0” @change=“drawByParams”>

锐化强度

<el-slider v-model=“usmStrength” :max=“5” :min=“0” :step=“0.01” @change=“drawByParams”>

<el-button class=“op-btn” @click=“drawByParams(‘curves’)” :class=“{active: isCurves}”>反显

<el-button class=“op-btn” @click=“drawByParams(‘denoise’)” :class=“{active: isDenoise}”>降噪

<el-button class=“op-btn” @click=“resetImg”>恢复原图

绑定方法

---

// 初始化，根据glfx的说明按顺序调用，并将这些对象保存下来。

getWebGLElements() {

if (!this._canvas) {

this._canvas = fx.canvas();

总结:

• 函数式编程其实是一种编程思想，它追求更细的粒度，将应用拆分成一组组极小的单元函数，组合调用操作数据流；

• 它提倡着 纯函数 / 函数复合 / 数据不可变， 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用；

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

Tips:

其实我们很难也不需要在面试过程中去完美地阐述出整套思想，这里也只是浅尝辄止，一些个人理解而已。博主也是初级小菜鸟，停留在表面而已，只求对大家能有所帮助，轻喷🤣；

我个人觉得: 这些编程范式之间，其实并不矛盾，各有各的 优劣势。

理解和学习它们的理念与优势，合理地 设计融合，将优秀的软件编程思想用于提升我们应用；

所有设计思想，最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用，开发更为高效和安全；