At.js 开源项目使用教程

At.js 开源项目使用教程

At.jsAdd Github like mentions autocomplete to your application.项目地址:https://gitcode.com/gh_mirrors/at/At.js

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

At.js 项目的目录结构如下：

At.js/
├── dist/
│   ├── at.js
│   └── at.min.js
├── src/
│   ├── at.coffee
│   └── ...
├── examples/
│   ├── basic.html
│   └── ...
├── Gruntfile.coffee
├── package.json
└── README.md

• dist/：包含编译后的 JavaScript 文件，包括压缩版和非压缩版。
• src/：包含项目的源代码，主要使用 CoffeeScript 编写。
• examples/：包含一些示例文件，展示如何使用 At.js。
• Gruntfile.coffee：Grunt 任务配置文件，用于自动化构建。
• package.json：项目的依赖和元数据信息。
• README.md：项目的介绍和使用说明。

2. 项目的启动文件介绍

At.js 的启动文件主要是 dist/at.js 或 dist/at.min.js。这两个文件是编译后的 JavaScript 文件，可以直接在 HTML 中引用。

<script src="path/to/at.js"></script>

在 HTML 文件中引入 at.js 后，可以通过以下方式初始化 At.js：

$(document).ready(function() {
  $('textarea').atwho({
    at: "@",
    data: ["Alice", "Bob", "Charlie"]
  });
});

3. 项目的配置文件介绍

At.js 的配置文件主要是 Gruntfile.coffee 和 package.json。

Gruntfile.coffee

Gruntfile.coffee 是 Grunt 任务配置文件，用于自动化构建。它定义了如何编译 CoffeeScript 文件、如何压缩 JavaScript 文件等任务。

package.json

package.json 包含了项目的依赖和元数据信息。以下是一些关键字段：

{
  "name": "At.js",
  "version": "1.5.4",
  "description": "Add Github like mentions autocomplete to your application.",
  "main": "dist/at.js",
  "scripts": {
    "test": "grunt test"
  },
  "dependencies": {
    "jquery": ">=1.7.0"
  },
  "devDependencies": {
    "grunt": "^1.0.1",
    "grunt-contrib-coffee": "^1.0.0",
    "grunt-contrib-concat": "^1.0.1",
    "grunt-contrib-uglify": "^2.0.0",
    "grunt-contrib-watch": "^1.0.0"
  }
}

• name：项目名称。
• version：项目版本。
• description：项目描述。
• main：入口文件。
• scripts：定义了一些脚本命令，如 test。
• dependencies：项目运行时依赖的库，如 jQuery。
• devDependencies：开发时依赖的库，如 Grunt 相关插件。

通过这些配置文件，可以了解项目的构建和运行方式，以及如何进行开发和测试。

At.jsAdd Github like mentions autocomplete to your application.项目地址:https://gitcode.com/gh_mirrors/at/At.js