入门
开发指南
- 模块
- 控件基础知识
- 控件树
- 选择器 API
- 布局
- 手势和触摸事件
- W3C APIs 兼容
- Cordova 插件支持
- EcmaScript 6,TypeScript 和 JSX
- Windows 10 支持说明
- 构建 Tabris.js App
- Tabris.js App 补丁
API 参考文档
- app
- device
- fs
- localStorage
- ui
- ActionSheet(操作列表)
- AlertDialog(对话框)
- CanvasContext
- InactivityTimer(闲置定时器)
- NativeObject
- Popup(弹出窗)
- Timer(计时器)
- WidgetCollection
控件
- Action
- ActivityIndicator
- Button
- Canvas
- CheckBox
- CollectionView
- Composite
- Drawer
- ImageView
- NavigationBar
- NavigationView
- Page
- Picker
- ProgressBar
- RadioButton
- ScrollView
- SearchAction
- Slider
- StatusBar
- Switch
- Tab
- TabFolder
- TextInput
- TextView
- ToggleButton
- Video
- WebView
- Widget
自定义控件
模块
Tabris.js项目中的所有JavaScript文件(包括入口脚本)都是模块。 如果你熟悉Node.js模块系统(“CommonJS”),Tabris.js模块系统与其完全一样。
这意味着:
- 模块文件被require之前,该文件中的代码不会被解析和执行。
- 模块文件具有隐式的局部作用域。用
var
声明的变量永远不会是全局变量。 应该避免全局变量的使用。 - 有三个预定义的局部变量:
require
、module
和exports
。这些变量允许你从/向其他模块导入/导出数据。
当应用程序启动时,它会加载项目的package.json
中main
字段定义的入口模块。例如::
{
"name": "my-app",
"version": "1.0",
"main": "my-main-script.js"
}
入口模块通常会导入应用程序的其他模块,这些模块又可能导入另外的模块。
本文只介绍用原生JavaScript语法导入和导出模块。如果你创建了一个TypeScript app,应该使用TypeScript手册中说明的语法。
导入模块
局部的require
函数用于加载和导入另一个模块。它接受模块标识符字符串作为参数,并返回该模块导出的任何内容。最常见的是,标识符字符串是相对于当前脚本文件的模块(没有文件扩展名)的路径。
模块可以是.js
文件、.json
文件或者文件夹。require
函数会按照这个顺序查找这些类型的模块。因此要导入与当前脚本同文件夹下的mymodule.js
,可以这样写:
const myModule = require('./mymodule');
如果require的模块是文件夹,你还可以包括文件扩展名或反斜杠。通常,它被省略了。
开头的点号是必须的。没有点号,会到其它地方查找模块(参考 npm Support)。
模块也可能位于不同的文件夹中:
const module1 = require('./subfolder/module1');
const module2 = require('../sibling_folder/module2');
无论导入多少次,每个模块只会加载一次。 因此:
require('./mymodule') === require('./mymodule')
当使用不同的标识符字符串(即有或没有扩展名)或从不同的脚本导入模块时也是如此。
模块导出
模块应导出函数、类或其他数据来供其他模块使用的。不应该使用全局JavaScript作用域来导出这些数据。实际上,你实现模块时,应该忽略全局作用域的存在。
由于每个模块只加载一次,无论导入多少次,模块的加载不应有任何副作用。特别地,模块不应该在加载时改变app的状态(例如通过向UI添加控件来改变app状态),而是导出执行此操作的函数。但很显然,入口模块是个例外。
脚本模块
任何JavaScript文件都是一个模块,可以由其他模块导入。默认情况下,模块的出口是一个普通的空对象。该对象在模块脚本中是一个名为exports
的局部变量。模块可以添加任何字段到exports
对象,例如:
exports.PI = 3.1416;
exports.circumference = (r) => 2 * 3.1416 * r;
要导出另一个对象(或任何其他类型的数据),可以通过为module.exports
赋值来覆盖exports
对象。 例如:
module.exports = class Circle {
};
导入此模块的require
函数会返回此类:
const Circle = require('./circle');
let circle = new Circle();
入口模块不能导出任何有用的东西。入口模块中是存在module
和exports
对象的,但会被忽略。
JSON模块
当.json
文件作为模块导入时,将解析该文件,并且该模块会导出其JSON内容。例如:
{
"foo": 1,
"bar": 2
}
在另一个模块中导入该.json
文件:
const data = require('./myjson');
console.log(data.foo === 1);
console.log(data.bar === 2);
文件夹模块
如果文件夹包含以下文件之一,则可将该文件夹作为模块来使用:
- 一个用
main
字段指向一个入口.js
或.json
文件的package.json
。 - 一个
index.js
- 一个
index.json
文件夹模块可能包含多个内部文件模块,但只能从上述列表中找到的第一个文件导出。
npm支持
Tabris.js支持加载npm 模块,但模块的兼容性取决于它所需的API。
使用npm命令行界面将任何Tabris.js兼容的模块安装到项目文件夹中。
Tabris.js不支持全局安装的npm模块,只支持本地安装在项目
node_modules
文件夹中的模块。
要加载本地安装的npm模块,直接使用其名称作为标识符字符串,不带开头的点号。例如:
const _ = require('underscore');
已经使用Tabris.js测试的模块被标记为GitHub issues。如果确认模块有效,问题会被关闭。请随时将你测试过的模块添加到issues。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论