什么是 yoghurt
yoghurt 是一个轻量级的前端基础库，包含了常用的 DOM 操作、事件绑定、模版解析、异步请求等功能，且支持 AMD/CMD 模块化规范。它的目标是提高前端开发效率，减少代码量，使开发者更聚焦于业务逻辑的实现。
安装和使用
安装
yoghurt 的安装非常简单，只需要在终端中运行以下命令即可：
npm install yoghurt --save
引入
在需要使用的地方引入 yoghurt 即可：
import yog from 'yoghurt';
使用
以下将为您介绍 yoghurt 的主要功能及用法：
DOM 操作
使用 yoghurt 操作 DOM 非常简单，以下是一些常用 API：
yog.$(selector)：选择符，返回第一个匹配到的元素yog.$$(selector)：选择符，返回所有匹配到的元素yog.createEl(tagName, attrs, props)：创建新元素yog.addChildren(el, children)：在指定元素中添加子元素yog.rmChildren(el)：移除指定元素的所有子元素yog.append(el, child)：在指定元素中添加子元素yog.prepend(el, child)：在指定元素开头添加子元素yog.before(el, target)：在指定元素之前添加兄弟元素yog.after(el, target)：在指定元素之后添加兄弟元素yog.hasClass(el, className)：判断元素是否有指定的 classyog.addClass(el, className)：给指定元素添加 classyog.removeClass(el, className)：给指定元素移除 classyog.toggleClass(el, className)：给指定元素添加或移除 classyog.css(el, prop, val)：获取或设置元素的样式yog.attr(el, name, value)：获取或设置元素的属性yog.prop(el, name, value)：获取或设置元素的属性（Boolean 类型）
事件绑定
使用 yoghurt 绑定事件同样非常简单，常用 API 如下：
yog.on(el, eventType, listener)：绑定事件yog.off(el, eventType, listener)：解绑事件yog.once(el, eventType, listener)：一次性绑定事件
模版解析
yoghurt 采用 Mustache 语法对模版进行解析，可通过以下 API 实现渲染：
yog.template(str, data)：解析模版
异步请求
yoghurt 提供了简单易用的异步请求 API：
yog.request(options)：发送请求yog.get(url, data)：GET 请求yog.post(url, data)：POST 请求
示例
下面是一个使用 yoghurt 的简单示例，用于向服务端发送 GET 请求，并将返回的数据渲染到模版中：
-- -------------------- ---- -------
------ --- ---- ----------
--------------------------
-------- -- -
--- ---- - ---------------------
--- -------- - ---------------------------------------
--- ---- - ---------------------- ------
----------------------- - -----
--
----- -- -
---------------------
-
--结语
yoghurt 的使用非常简单，但它的功能却十分强大，可以使前端开发变得轻松愉快。希望本篇文章能够对您有所启示，并帮助您更好地使用 yoghurt。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65188