Sugar.js 简介与安装

在本文中，我们将尝试理解与名为Sugar-JS的库相关的所有细节。Sugar是一个开源JavaScript实用程序库，用于处理原生对象。用户可以定义方法或使用插件来处理特定的使用情况。

使用Sugar-JS的目的：

使用Sugar-JS的主要目的是该库提供了处理原生对象（如数组，字符串，日期，范围，对象等）的实用函数。
Sugar 实际上是交互的主要点（即全局对象），通过该对象，任何用户都可以使用此库中可用的预定义方法。
Sugar定义了有用的实用方法，可以通过Sugar全局对象调用静态函数。

安装： 使用以下命令（在命令提示符中输入）在本地系统中安装Sugar-

npm install sugar --save

运行Sugar-JS： Sugar的代码可以以两种不同的方式来运行：

通过浏览器的控制台（因为这里Sugar已经可用，可以轻松执行成功）
使用可用的自定义构建（在本地系统或PC上）

1. 通过浏览器的控制台： 由于浏览器的控制台已经内置安装了Sugar，因此我们可以直接使用Sugar以及它的预定义方法。

让我们看一些以下的例子，如果我们在浏览器的控制台上写下这些代码，可能会在控制台上显示一些输出（注意，这些代码片段我们必须在浏览器的控制台上运行，使用 CTRL + Shift + I，然后在那里写入或粘贴代码，按 Enter 来查看输出）-

例子1： 在这个例子中，我们将使用Sugar自身提供的内置方法来创建一个数组。

Javascript

let new_array = Sugar.Array.create("abcde"); 
console.log(new_array);

输出:

Sugar.js 简介与安装

示例2：

在这个示例中，我们将看到Sugar提供的一些既是Array又是String类型的函数。

Javascript

console.log(Sugar.Array.isEqual(['a','b'], ['a','b'])); 
console.log(Sugar.String.isEmpty('')); 
console.log(Sugar.String.reverse('GeeksforGeeks')); 
console.log(Sugar.String.shift('a', 7));

输出：

Sugar.js 简介与安装

2. 使用可用的自定义构建（在本地系统或PC中）：

您需要首先遵循以下步骤，在本地系统或PC中使自定义构建可用-

第一步： 转到以下链接（向前提及）： https://sugarjs.com/download/

第二步： 向下滚动，直到“Custom Build”部分可见。

第三步： 屏幕右下角有两个选项（如下图所示，下载Dev和构建缩小版），然后点击“构建缩小版”按钮。

Sugar.js 简介与安装

第四步： 点击“构建压缩按钮”后，自定义构建开始构建自己，如果在构建成功后停止，它将输出如下图所示的内容

Sugar.js 简介与安装

第五步： 点击“Download Min”后，将下载一个自定义构建文件，将其粘贴到本地系统或PC的任何特定位置，因为它将在后面的部分中使用（也就是在编写代码片段时使用）。

第六步： 为了使用在上一步中下载的JavaScript文件，还需要创建一个文件（一个.html文件），在该文件中，我们需要使用以下标签导入（或引用）JavaScript文件-

<script src = "<path_to_file\sugar-custom.min.js"></script>

示例 3: 在这个例子中，我们将在“.html”文件中实现Sugar方法，并在成功运行文件后在浏览器上查看结果。

HTML

<!DOCTYPE html> 
<html lang="en"> 
    
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <title>Sugar.js</title> 
    <script src = "..\\sugar-custom.min.js"></script> 
</head> 
    
<body> 
    <p id="print"></p> 
  
    <p id ="print2"></p> 
  
    <script> 
        let array = Sugar.Array.construct(5, (i) => { 
             return (i * i) 
        }); 
        document.getElementById("print").innerHTML = array; 
        let string_creation = Sugar.String.reverse('GeeksforGeeks'); 
        document.getElementById("print2").innerHTML = string_creation; 
    </script> 
</body> 
    
</html>

输出:

Sugar.js 简介与安装