npm 包 doesangue 使用教程

阅读时长 5 分钟读完

概述

npm 是 Node.js 的包管理器,可以很方便地安装各种第三方模块,提高开发效率。doesangue 是一个针对前端开发的 npm 包,它提供了一些常用的 CSS 样式和 JavaScript 函数,可以让前端开发人员更快捷地开发 Web 应用程序。

安装

使用 npm 安装 doesangue 很简单,只需要在控制台中输入以下命令:

npm install doesangue

安装之后可以在项目中直接使用这个包,引入样式或者函数即可。

提供的样式

doesangue 提供了一些常用的 CSS 样式,这些样式可以帮助我们更快捷地开发 Web 页面。

文字样式

  • .text-center:文字居中。
  • .text-left:文字左对齐。
  • .text-right:文字右对齐。
  • .text-justify:文字两端对齐。
  • .text-uppercase:将文字转换为大写。
  • .text-lowercase:将文字转换为小写。
  • .text-capitalize:将每个单词的第一个字母转换为大写。

边框样式

  • .border:带有默认颜色的边框。
  • .border-top:带有默认颜色的上边框。
  • .border-right:带有默认颜色的右边框。
  • .border-bottom:带有默认颜色的下边框。
  • .border-left:带有默认颜色的左边框。
  • .border-radius:带有默认圆角的边框。

按钮样式

  • .btn-default:带有默认样式的按钮。
  • .btn-primary:带有主要样式的按钮。
  • .btn-success:带有成功样式的按钮。
  • .btn-info:带有信息样式的按钮。
  • .btn-warning:带有警告样式的按钮。
  • .btn-danger:带有危险样式的按钮。

提供的函数

doesangue 也提供了一些常用的 JavaScript 函数,这些函数可以帮助我们更快捷地编写 JavaScript 代码。

循环函数

  • each(arr, callback):遍历数组或者对象。
  • map(arr, callback):遍历数组或者对象,返回一个新的数组。
  • filter(arr, callback):遍历数组或者对象,返回符合条件的元素组成的新数组。

格式化函数

  • formatNumber(num, [decimals]):格式化数字,可以设置小数位数。

操作函数

  • hasClass(el, className):判断元素是否有某个样式。
  • addClass(el, className):为元素添加样式。
  • removeClass(el, className):为元素移除样式。
  • toggleClass(el, className):为元素开关样式。

示例代码

-- -------------------- ---- -------
--------- -----
------
------
------ ----------------
----------------- ------------
------ ---------------- --------------- -----------------------------------------------------
-------- ---------------------- ------------------------------------------------------------
-------
------

---- -------------------------- ---------------

----- ---------------
-----------------------
-------

-------- --------------------------------

-----
-------------
-------------
-------------
------

-------- -----------------------
---- ----
----- ------ - ------ ----- ------
------------------------ -------- ------- ----- -
-------------------- - -- - - ------
-----

---- -----
----- --- - -----------
-------------------------------------------
----------------------------------------- ----

---- -----------
----- --- - ----------------------------------
---- ------------------------ ---------- -
---------------------------------
---

---- ----------
------------------------- --------------
---------------------------- ----------
----------

-------
-------

结束语

doesangue 的样式和函数不是很多,但是也足以满足日常开发的需求。不过,如果你需要更多的样式和函数,可以考虑其他更强大的前端框架,如 Bootstrap、Vue.js 等。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60056ce781e8991b448e69c1

纠错
反馈