简介
fundament-npm 是一个简单易用的npm包，主要是为Jquery或Zepto设计的UI框架，它提供了常用UI元素、表单验证和一些工具函数等。这个包被广泛运用在Web前端开发中，它在开发中提供了很大的便利性，让我们对于前端开发有了更深入的理解和应用。
安装和引入
安装和引入非常简单，只需要在项目的根目录输入以下命令即可完成安装：
npm install fundament-npm --save
安装后，可以在项目中通过以下方式引入：
var $ = require('jquery');
var Fundament = require('fundament-npm')(window,$);使用
常用UI元素
fundament-npm 提供了许多常用UI元素，如 buttons, forms, cards, modal and tooltips 等等。这里将展示如何使用其中的一些元素。
Buttons
button元素是Web前端开发中经常会用的元素，使用fundament-npm 中的button元素十分方便。使用时，只需要在HTML中添加以下标签：
<button class="button">My button</button>
注意：在使用前，需要确认样式表已经引入到了HTML页面中。
Forms
form元素也是Web前端开发中十分重要的元素。使用fundament-npm 中的form元素非常方便。使用时，只需要在HTML中添加以下标签：
-- -------------------- ---- -------
------
---- ------------------
------ ----------- ------------------ ------
------
---- ------------------
------ ----------- ----------------- ------
------
---- ------------------
------ ----------- --------------------
------
---- ---------
------- ------------- -------------------------------
------
-------Cards
card元素是一个包含文本块和图片等的盒子，与其他元素相比具有更好的视觉效果。使用fundament-npm 中的card元素非常方便。使用时，只需要在HTML中添加以下标签：
-- -------------------- ---- -------
---- -------------
---- ---------
---- ------------------------------------------------------------------------------ ------------- -------
------
---- ---------
--- -------------------- ---- -------------
-- ---------------------- ------- --- ---- -- --- -------- -- ----- ---- ---- ------- -------- -- ----- ------ -- --- ---- -- --- ----------
------
------表单验证
表单验证是Web前端开发中一个重要的环节。fundament-npm 中也提供了一些表单验证相关的功能。下面将介绍如何使用其中的一些功能。
Email验证
使用Email验证时，只需要在HTML中添加以下标签：
<div class="form-item">
<input type="email" placeholder="Email" data-validation="email">
</div>Required验证
使用Required验证时，只需要在HTML中添加以下标签：
<div class="form-item"> <input type="text" placeholder="Name" data-validation="required"> </div>
MinMax验证
使用MinMax验证时，只需要在HTML中添加以下标签：
<div class="form-item"> <input type="number" placeholder="Age" data-validation="range min=18 max=99"> </div>
工具函数
fundament-npm 中还提供了一些工具函数，下面将介绍其中的一些函数。
格式化日期
var date = Fundament.Functions.formatDate("2022-01-01 12:10:15","YYYY-MM-DD HH:mm:ss");
console.log(date);输出结果为：
"2022-01-01 12:10:15"
取得URL参数
var params = Fundament.Functions.getUrlParams(); console.log(params);
输出结果为：
{
id: "12",
name: "Alice"
}总结
在本文中，我们对fundament-npm进行了详细的介绍和使用教程。它为Web前端开发带来了很大的便利性，让我们在开发中体验到了更好的效果。虽然我们只是介绍了其中的一些元素和功能，但日后的学习中，将有更多的元素和功能的使用。希望本文对于前端开发人员有所帮助，谢谢。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562f681e8991b448e0c0c