前端，不止于前端

一个项目通常会分拆分为前端和后端两部分。前端技术的成果，多会在前台用户面前展示。但前端能做的事远不止于此，网易云小程序，表情包博物馆，甚至给女朋友发天气预报短信，前端都能做！！我们今天不仅会带来这3个案例如何制作（放到了后面），还包含JQuery框架五大选择器详解、如何利用Vue、React、Angular框架开发分页组件、如何利用插件快速定位网站性能问题的内容等等，建议你收藏后慢慢品尝~

 

前端技术框架相关

在JQuery框架下，包含基本选择器、层级选择器、属性选择器、过滤选择器、表单过滤选择器5种选择器。选择器使用的基本操作可以分为3步：

1. 事件绑定
2. 入口函数
3. 样式控制

选择器的使用需要进行事件的绑定，一般来说我们可以将事件绑定到一个按钮上去，通过按钮的点击来触发相应的事件响应。

同时在jQuery中，这样的事件绑定是需要写在一个入口函数中去的。当我们对选择器的事件进行了绑定之后，我们就可以通过选择器进行相应元素的样式控制了，在这里通常的表现是css方法，通过css方法来对相应的元素样式进行修改。jQuery框架下的五种选择器的使用方法具体实例是什么样的，我们可以通过【JQuery框架】五大选择器“全家桶”详解！！！【WEB前端大作战】（作者@灰小猿） 这篇文章来一起探究。

你有没有想过，利用三大框架（Vue、React、Angular）做同一件事，他们会有什么不同？经过实践得出，我们发现它们在通讯编程范式、列表渲染、条件渲染、事件绑定、内部状态、插槽定义方式、计算属性等方面都有所不同，那么具体有什么差别呢，下面的系列文章用三大框架做了Pagination分页组件，文章里将给你确切答案。

手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件（上）丨【WEB前端大作战】(作者@DevUI)

手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件（中）丨【WEB前端大作战】（作者@DevUI）

手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件（下）丨【WEB前端大作战】（作者@DevUI）

如何快速定位网站性能问题

网站性能问题一直是前端开发者重点关注的问题之一，解决这方面的问题，善用工具就总能事半功倍。比如利用Chrome开发者工具的Performance性能面板就能迅速查找。这个工具拥有3个非常有用的性能分析利器，分别是详情饼图、请求瀑布图和主线程火焰图。 那么如何利用这3个分析利器分析各种类型任务的耗时占比，分析性能瓶颈在哪里？ 在瀑布下用火焰烤饼：三步法助你快速定位网站性能问题丨【WEB前端大作战】（作者@DevUI）这篇文章将给你答案。

 

前端用到的一些重要组件

Angular 是一款能够跨 Web、移动 Web、移动应用、原生应用和桌面原生应用多个平台的前端框架，经过数十年的发展，已形成了一个庞大的生态，基于Angular的组件库也是多如牛毛。

如果你想尝试 Angular 框架，以下7个 Angular前端组件库或许是不错的选择Material Design for Angular、NG/NGX Bootstrap、NG Zorro、Nebular、PrimeNG、Clarity、DevUI，至于为什么推荐它们几个，它们分别有什么特性请看2021 年最值得推荐的 7 个 Angular 前端组件库 - DevUI丨【WEB前端大作战】（作者@DevUI）

前端能做出哪些有趣的应用实例

前端技术不仅能做出炫酷的页面出来，还能利用node接口制作出网易云音乐这样的五脏俱全的小程序。网易云音乐小程序开发模式是MVVM模式。简单的讲就是页面绑定的值改变，页面就发生改变；页面改变，页面的绑定的值改变。这样的话，列表式渲染就十分好用。只用写一个通用的骨架，然后使用列表渲染生成页面，这样非常省时间省力气。所以这个项目，大量充斥着列表渲染。

选歌很需要解决的一点就是怎么才知道选择的是哪一首歌，歌单是哪一个歌单。一个页面获取到其他页面想传递过来的数据的方式有很多。

其一、可以通过url跳转的时候，传参跳转，再通过跳转页面中onload事件添加options参数获得。

其二、可以通过点击事件改变全局属性globalData的某项的值，然后再跳转页面中得到globalData中相应的值，便能知道页面跳转中想传递的值。

这个项目使用了这两种方式，url传参获取播放第几首歌曲，全局属性globalData传递歌单。具体实现请看：基于Node接口的网易云小程序实战心得(作者@运气男孩)

下面这个表情包博物馆小项目一样趣味十足，而且在Github 上获得了超过8.8K stars。该表情包项目采用H5构建，通过固定的网址打开，开发者对所有表情包进行了人工标注，并将标注数据导出为json文件，作为表情包工具的前端数据库。具体实现请看：用Web前端技术打造Github最有毒的8.8K老哥Star的表情包博物馆（作者@zhaoolee）

还有没有花样更多的玩法？有。当我们开发了移动H5，如果想利用网页直接生成一个app，可以选择使用APICloud 输入入口地址后，直接“套壳”编译生成。具体实现请看：前端：我们是大前端，我们可以做一切【WEB前端大作战】（作者@代码哈士奇）

在大型的ToB的中后台企业级应用开发场景下，微前端模式会扮演越来越重要的角色。对于微前端概念来讲，其本质还是web应用的复用与集成，尤其是当单页面应用出现后，每个团队不能按照以前那种服务端路由直出套模板的模式去开发页面了，整个路由都是被前端接管，所以最重要的两个问题就是web应用如何集成以及在哪个阶段集成，对应不同选择最终的实现方案也会有很大差异，这取决于你的业务场景，但是对于大多数团队，考虑微前端这种架构模式通常的诉求都是下面这样的：

• 独立开发，独立部署，增量更新；技术栈无关

• 运行时隔离与共享

• 单页面应用的良好体验

具体实现可以看这两篇文章：

微前端在企业级应用中的实践（上）丨【WEB前端大作战】（作者@DevUI）

微前端在企业级应用中的实践（下）丨【WEB前端大作战】(作者@DevUI)

 

今天的Tech实验室就到这里啦，希望大家可以看得尽兴。