前端开发时常⽤的第三⽅⼯具库
前端开发时常⽤的第三⽅⼯具库
JavaScript 实⽤⼯具库⼀、lodash **
1、官⽅⽂档
2、简介及使⽤场景
Lodash 是⼀个⼀致性、模块化、⾼性能的 JavaScript 实⽤⼯具库。（个⼈经验：实⽤性极⾼）
Lodash 通过降低 array、number、objects、string 等等的使⽤难度从⽽让 JavaScript 变得更简单。 Lodash 的模块化⽅法 ⾮常适⽤于：遍历 array、object 和 string 对值进⾏操作和检测
创建符合功能的函数
⽽且，lodash 不仅能⽤在浏览器端，也可以⽤在 NodeJS 的开发中。所以说，掌握了 lodash ，也能提升 NodeJS 的开发效率。
3、安装
1）浏览器环境
<script src="lodash.js"></script>
2）通过npm
3）Node.js
4、使⽤案例
本⽂只举例其中的⼏个应⽤场景，更多请查看官⽅⽂档
1）使⽤keyBy ，将数组快速转换成对象
lodash 提供了⼤量操作数据结构的⼯具函数，其中 keyBy 是最常⽤的⽅法之⼀。通常来说，我们从 API 会拿到数组存储的⼀组数据，为了对数据进⾏操作，我们⼀般需要根据数据的某个属性，快速到数组元素，⽽ keyBy 可以帮助我们快速做到这⼀点。⽐如，对于如下的数据结构：$ npm i -g npm $ npm i --save lodash
1
2// Load the full build.var _ = require ('lodash');// Load the core build.var _ = require ('lodash/core');// Load the FP build for immutable auto-curried iteratee-first data-last methods.var fp = require ('lodash/fp'); // Load method categories.var array = require ('lodash/array');var object = require ('lodash/fp/object'); // Cherry-pick methods for smaller browserify/rollup/webpack bundles.var at = require ('lodash/at');var curryN = require ('lodash/fp/curryN');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
如果要将其变成⼀个以 name 为 key 的 map 结构，那么只要⽤如下的代码就能完成。
2）使⽤debounce 函数，实现输⼊防抖
在带有搜索框的页⾯⾥，我们通常会将搜索框的⽤户输⼊，保存为 searchKey 这样⼀个 state，当 searchKey 发⽣变化的时候去刷新搜索结果。但是，如果每次⽤户敲击⼀下键盘都去刷新搜索，其实是没有必要的，因为⽤户很可能还没有输⼊完关键字。⽽且，多余的搜索，还有可能会引起输⼊过程的卡顿。为了解决这个问题，我们通常会使⽤防抖机制，也就是只有在⽤户停⽌输⼊后⼀个很短的时
间内才进⾏搜索，⽐如说 300 毫秒，以保证更好的⽤户体验。⽽ lodash 就专门提供了 debouce 这样的⼀个函数。它的⽤法如下：
（在这⾥我们使⽤了 lodash 的 debounce ⽅法封装了 handleSearch 这个事件处理函数，这样的话，就只有在停⽌输⼊ 300 毫秒之后，才真正去执⾏搜索这个动作。）const data = [ { id : "1", name : "Kennedy", job : "Chief Mobility Orchestrator", city : "North Alec", }, { id : "2", name : "Lucius", job : "Internal Research Manager", city : "Littleland", }, { id : "3", name : "Carlos", job : "Lead Configuration Analyst", city : "South Lillian", },]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21import _ from 'lodash';const byName = _.keyBy (data , 'name');
1
2
3）使⽤ _.template ，实现简单的模板引擎
lodash 提供了⼀个简单的模板引擎，可以⾮常⽅便地让你去实现⼀些复杂的字符串⽣成。
_.template 通过⼀定的开始和结束标记，让你能够在其中使⽤条件判断、循环等功能。这在我们需要去⽣成类似 HTML、Markdown 等⼤段的⽂档时，就会⾮常有⽤。此外，将它作为⼀些样本代码的⽣成器，也是⾮常好⽤的。
5、更多lodash 常⽤⽅法
UI 库
⼀、Ant Design （React 框架）/ Ant Design of Vue （Vue 框架）
国内蚂蚁⾦服开源的组件库，主打企业级应⽤的场景。（以下简称 AntD）
Ant Design 在国内有很⾼的普及率，它使⽤ TypeScript 开发，提供了完整的类型系统；样式则是使⽤ Less 去实现。⽽且它的单元测试覆盖率超过 99%，因此功能⾮常稳定，这也是它能够得以普及的⼀个重要原因。
AntD 的强⼤之处主要在于提供了各种⾼级组件，可以满⾜企业级的复杂交互应⽤场景。import React, { useMemo } from "react";import _ from "lodash";import { useSearchParam } from "react-use";function SearchBox({ data }) { const searchKey = useSearchParam("key") || ""; const filtered = useMemo(() => { return data.filter((item) => LowerCase().LowerCase()), ); }, [searchKey, data]); // 使⽤ _.debounce 处理⽤户输⼊，300ms 后才执⾏ const handleSearch = _.debounce((evt) => { window.history.pushState( {}, "", `${window.location.pathname}?key=${evt.target.value}`, ); }, 300); return ( <div className="08-filter-list"> <h2>Movies (Debounced Search)</h2> <input defaultValue={searchKey} placeholder="" onChange={handleSearch}
/> <ul style={{ marginTop: 20 }}> {filtered.map((item) => ( <li key={item.id}>{item.title}</li> ))} </ul> </div> );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36var compiled = _.template('<% _.forEach(users, function(user) { %><li><%- user %></li><% }); %>');compiled({ 'users': ['fred', 'barney'] });// => '<li>fred</li><li>barney</li>'
1
2
3
⼆、Material UI （React 框架）
采⽤了 Google 的 Material Design 的设计语⾔，提供了丰富的 UI 组件库。（以下简称 MUI）
它提供了⾮常灵活的主题定制功能，这也是区别于 Ant Design 的⼀⼤特⾊。这就意味着基于 MUI 有⼀个庞⼤的主题市场，你可以从中选择⾃⼰需要的主题。
AntD 和 MUI 对⽐：
虽然 MUI 很酷炫，但它也有⼀个很⼤的缺点：组件库中缺少⼀些⾼级的功能。⽐如复杂的 Table、Tree 等，通常都需要依赖第三⽅来实现，⽽不是 MUI ⾃⾝就包含的。我们都知道，Table 和 Tree 是企业级应⽤最常⽤的组件。如果要依赖第三⽅，那质量和稳定性就参差不齐了。那到底该使⽤ MUI 还是 AntD 呢？我的⼀个标准是：要看你的应⽤是 To C 还是 To B。如果是 To C，就⽤ MUI，因为个性化的外观很重要。⽽如果是 To B，那就建议使⽤接下来要介绍的 AntD，因为它就是⾯向企业级应⽤设计的，风格以极简为主，组件库更丰富，功能也更强⼤。
三、Vant （Vue 框架）
Vant 是有赞前端团队维护的⼀套基于Vue 2.0
的***移动端组件库***，提供了⼀整套 UI 基础组件和业务组件。
React Hooks 常⽤⼯具Hooks 库⼀、react-use
1、相关⽂档
2、使⽤案例⼆、ahooks
阿⾥维护的 React Hooks 库//1、⽤于获取URL 中的查询字符串const searchKey = useSearchParam ("key")//2、绑定监听原⽣事件useEvent ('keydown', onKeyDown );//在页⾯上监听键盘按键的事件，⽽⽆需关⼼该在何时绑定监听，以及何时取消监听。//3、读取、操作 浏览器中Cookie 值const [value , updateCookie , deleteCookie ] = useCookie ("my-cookie");//需要注意的是，这⾥的 Hook 的作⽤域仅限于当前组件。如果 Cookie 是在组件外部被修//4、获取某个 State 的上⼀个值。有时我们需要⽐较前后值的变化，这时我们就能感受到 usePrevious 这个 Hook 的好⽤了。const [count , setCount ] = React .useState (0);const prevCount = usePrevious (count );// 获取 cound 的上⼀个值。
1
2
3
4
5
6
7
8
9
10
11
12
class 库⼀、classnames
1、简介及使⽤场景
适⽤于React框架，⼀个简单的 JavaScript 实⽤程序，⽤于有条件地将 classNames 连接在⼀起。（
我们有的时候需要使⽤js来动态判断是否为组件添加class（类名），这⾥我们就可以使⽤classnames ）
2、官⽅⽂档
3、安装及使⽤
处理时间⽇期库⼀、moment.js
mui框架常用组件有哪些简介：是⼀个 JavaScript ⽇期处理类库，⽤于解析、检验、操作、以及显⽰⽇期⼆、fecha
简介：轻量级⽇期格式化和解析 (~2KB)。旨在替换 moment.js 的解析和格式化功能。使⽤：npm install fecha --save 三、Day.js
简介：是⼀个极简的轻量级JavaScript库(~2KB)，可以解析、验证、操作和显⽰⽇期和时间。可应⽤于浏览器、Node.js中四、date-fns //安装npm install classnames --save //引⽤import classnames from ‘classnames’;//使⽤案例<Button className ={classnames ({ //这⾥可以根据各属性动态添加，如果属性值为true 则为其添加该类名，如果值为false ，则不添加。这样达到了动态添加class 的⽬的 base : true , inProgress : this .props .store .submissionInProgress , error : this .props .store .errorOccurred , disabled : this .props .form .valid , })}><Button />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论