前端三方库零碎（持续更新）

本文主要记录开发实践过程中遇到的前端库，做个记录总结，以备不时之需

一、UI相关

1、jQuery EasyUI

jQuery EasyUI 是一个基于 jQuery 的开源用户界面库，专注于提供易于使用和功能丰富的用户界面组件，适用于 Web 应用程序的开发。
主要特性和组件：

• Panel：面板布局，用于容纳和组织其他组件。
• Accordion：手风琴布局，展示多个折叠面板，只展开一个面板。

2. 表单组件：

• Form：表单布局和处理，包括验证和提交。
• Textbox：文本框输入控件。
• Combo：下拉框组件，支持单选和多选。
• Datebox：日期选择框，支持日期和时间选择。

3. 数据网格：

• DataGrid：数据表格，支持排序、分页、编辑和自定义布局。
• TreeGrid：树形数据表格，支持展开和折叠行。

4. 对话框和窗口：

• Dialog：模态对话框，用于显示消息、表单或自定义内容。
• Window：可移动和可调整大小的窗口组件。

5. 其他组件：

• Menu：菜单组件，支持横向和纵向的菜单。
• Tabs：选项卡组件，支持动态添加和关闭选项卡。
• Tooltip：工具提示组件，显示鼠标悬停时的提示信息。

示例

1. 初始化一个data-grid

<table id="dg"></table>

<script>
$(function(){
    $('#dg').datagrid({
        url: 'get_data.php', // 加载数据的远程 URL
        columns:[[
            {field:'id', title:'ID', width:100},
            {field:'name', title:'Name', width:100},
            {field:'price', title:'Price', width:100, align:'right'}
        ]]
    });
});
</script>

2. 初始化一个 Dialog

<div id="dlg" class="easyui-dialog" style="width:400px;height:200px;padding:10px;"
        closed="true" buttons="#dlg-buttons">
    <form id="fm" method="post" novalidate>
        <div style="margin-bottom:10px">
            <input name="name" class="easyui-textbox" required="true" label="Name:" style="width:100%">
        </div>
        <div style="margin-bottom:10px">
            <input name="email" class="easyui-textbox" required="true" validType="email" label="Email:" style="width:100%">
        </div>
    </form>
</div>

<div id="dlg-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="$('#dlg').dialog('close')">Cancel</a>
</div>

<script>
function saveUser(){
    $('#fm').form('submit',{
        url: 'save_user.php',
        onSubmit: function(){
            return $(this).form('validate');
        },
        success: function(result){
            var data = JSON.parse(result);
            if (data.success){
                $('#dlg').dialog('close'); // 关闭对话框
                $('#dg').datagrid('reload'); // 重新加载数据表格
            } else {
                $.messager.show({
                    title: 'Error',
                    msg: data.message
                });
            }
        }
    });
}
</script>

2、jQuery UI

jQuery UI 是一个基于 jQuery JavaScript 库的插件集合，它提供了丰富的用户界面组件和交互效果，使得在网页应用程序中创建交互式和美观的用户界面变得更加容易。
主要特性和组件：

1. 交互组件：

• 拖放（Draggable）：使元素可以被拖动到指定的位置。
• 可调整大小（Resizable）：允许用户通过调整边界改变元素的大小。
• 选择（Selectable）：允许用户选择一组元素。
• 排序（Sortable）：允许用户通过拖放重新排序元素。

2. 界面组件：

• 对话框（Dialog）：创建模态对话框，用于显示重要信息或进行用户输入。
• 按钮（Button）：增强和定制化按钮的外观和行为。
• 进度条（Progressbar）：显示任务进度的动态条形图。
• 日期选择器（Datepicker）：提供交互式的日期选择功能。

3. 效果组件：

• 动画（Animation）：通过预定义的动画效果增强页面元素的交互性。
• 效果（Effect）：提供了各种元素显示和隐藏的效果。

4. 工具：

• 小部件工厂（Widget Factory）：支持创建自定义小部件，并提供了面向对象的方式来扩展和组织代码。
  示例

1. 初始化一个对话框

//初始化一个对话框
// HTML
<div id="dialog" title="Basic dialog">
  <p>This is an example dialog.</p>
</div>
$(document).ready(function() {
  $("#dialog").dialog({
    autoOpen: false, // 初始时不自动打开
    width: 400, // 设置宽度
    modal: true, // 设置为模态对话框
    buttons: {
      "OK": function() {
        $(this).dialog("close"); // 关闭对话框
      },
      "Cancel": function() {
        $(this).dialog("close"); // 关闭对话框
      }
    }
  });

  // 打开对话框的按钮点击事件
  $("#opener").on("click", function() {
    $("#dialog").dialog("open");
  });
});

2. 初始化一个时间选择器

// HTML
<input type="text" id="datepicker">

// JavaScript
$(document).ready(function() {
  $("#datepicker").datepicker({
    dateFormat: 'yy-mm-dd' // 设置日期格式
  });
});

3、Dat.GUI

Dat.GUI 是一个用于在网页上创建和管理简单用户界面的 JavaScript 库。它通常用于调试和交互式控制，特别是用于调整参数和选项的场景。
主要特点和用途：

• 轻量级和易于集成
  Dat.GUI 轻量级且易于集成到现有的网页项目中。它不需要复杂的依赖项或配置，只需简单的 JavaScript 引入即可开始使用。
• 创建控件：
  Dat.GUI 允许你创建各种控件，如滑块、颜色选择器、复选框等，用于调整和控制参数的值。
• 实时更新：
  控件的值在用户调整时会实时更新，这使得它非常适合于调试和交互式调整。
• 跨浏览器兼容性：
  Dat.GUI 兼容多种现代浏览器，并提供一致的用户体验。
• 简单的 API：
  Dat.GUI 提供了简单且易于理解的 API，使得开发者可以快速创建和定制控件。
  示例：

// 创建 GUI 实例
const gui = new dat.GUI();

// 定义参数对象：创建一个 parameters 对象，包含要控制的参数，如背景颜色、宽度和高度。
const parameters = {
  backgroundColor: '#ffffff', // 初始背景颜色为白色
  width: 100, // 初始宽度为100
  height: 100 // 初始高度为100
};

// 添加颜色选择器
gui.addColor(parameters, 'backgroundColor').onChange(function(value) {
  document.getElementById('elementToStyle').style.backgroundColor = value; // 更新背景颜色
});

// 添加滑块控件用于调整宽度
gui.add(parameters, 'width', 50, 300).onChange(function(value) {
  document.getElementById('elementToStyle').style.width = value + 'px'; // 更新宽度
});

// 添加滑块控件用于调整高度
gui.add(parameters, 'height', 50, 300).onChange(function(value) {
  document.getElementById('elementToStyle').style.height = value + 'px'; // 更新高度
});

// 初始设置页面元素的样式
const elementToStyle = document.getElementById('elementToStyle');
elementToStyle.style.backgroundColor = parameters.backgroundColor;
elementToStyle.style.width = parameters.width + 'px';
elementToStyle.style.height = parameters.height + 'px';

二、工具相关

js-yaml

js-yaml 是一个 JavaScript 库，用于解析和序列化 YAML（YAML Ain’t Markup Language）格式的数据。
YAML 是一种人类友好的数据序列化标准，通常用于配置文件、数据序列化、或者在应用程序和服务之间传递结构化数据。