Premonish 开源项目教程

方蕾嫒Falcon

于 2024-08-26 09:22:47 发布

阅读量290

点赞数 5

本文链接：https://blog.csdn.net/gitblog_00490/article/details/141551939

版权

Premonish 开源项目教程

premonishPredict which DOM element a user will interact with next.项目地址:https://gitcode.com/gh_mirrors/pr/premonish

1. 项目的目录结构及介绍

Premonish 项目的目录结构相对简单，主要包含以下几个部分：

premonish/
├── demo/
│   ├── index.html
│   └── style.css
├── dist/
│   └── premonish.js
├── src/
│   └── premonish.js
├── .gitignore
├── LICENSE
├── README.md
└── package.json

demo/：包含项目的演示页面和样式文件。
- index.html：演示页面的 HTML 文件。
- style.css：演示页面的样式文件。
dist/：包含编译后的 JavaScript 文件。
- premonish.js：编译后的主要 JavaScript 文件。
src/：包含项目的源代码。
- premonish.js：项目的源代码文件。
.gitignore：Git 忽略文件配置。
LICENSE：项目的开源许可证。
README.md：项目的说明文档。
package.json：项目的依赖和脚本配置文件。

2. 项目的启动文件介绍

项目的启动文件位于 demo/index.html，这是一个简单的 HTML 页面，用于演示 Premonish 的功能。页面中引用了 dist/premonish.js 文件，并在 JavaScript 代码中初始化 Premonish。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Premonish Demo</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="box" data-hover="First Box">First Box</div>
    <div class="box" data-hover="Second Box">Second Box</div>
    <div class="box" data-hover="Third Box">Third Box</div>
  </div>
  <script src="../dist/premonish.js"></script>
  <script>
    var premonish = new Premonish({
      selectors: ['a', '.box'],
      elements: []
    });

    premonish.on('predict', function(elements) {
      elements.forEach(function(element) {
        element.style.outline = '1px solid red';
      });
    });

    premonish.on('predict:correct', function(element) {
      element.style.outline = '';
    });
  </script>
</body>
</html>

3. 项目的配置文件介绍

项目的配置文件主要是 package.json，它包含了项目的依赖、脚本和其他元数据。

{
  "name": "premonish",
  "version": "1.0.0",
  "description": "Predict which element a user will interact with next.",
  "main": "dist/premonish.js",
  "scripts": {
    "build": "babel src/premonish.js --out-file dist/premonish.js --presets=es2015",
    "watch": "babel src/premonish.js --out-file dist/premonish.js --watch --presets=es2015"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/mathisonian/premonish.git"
  },
  "keywords": [
    "predict",
    "hover",
    "interaction"
  ],
  "author": "Matthew Conlen",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/mathisonian/premonish/issues"
  },
  "homepage": "https://github.com/mathisonian/premonish#readme",
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-preset-es2015": "^6.24.1"
  }
}