%20(2).svg)
项目简介
本项目是基于nodom框架的单页应用开发系统。nodom是一款数据驱动的web MVVM框架，内置路由，具备数据管理功能，支持模块化开发，可在不依赖第三方工具的情况下独立开发完整的单页应用。
项目的主要特性和功能
- 模块化构建：以模块为单位构建应用，包含模板、模型、方法和事件，便于代码组织管理。
- 模板与数据绑定：通过模板字符串和数据对象实现视图与数据绑定，数据变化时视图自动更新。
- 指令系统：提供多种指令，支持自定义指令扩展功能。
- 表达式支持：使用
{{}}包裹表达式，可进行数据运算和调用模块方法。 - 事件处理：支持在模板中定义事件，有事件修饰符控制事件行为。
- 路由功能：内置路由，可实现模块切换，支持路由传值和路由事件。
- 数据管理：通过
Model管理模块数据，支持数据劫持和监听，有GlobalCache管理共享数据。 - 插槽机制：以指令和自定义元素方式实现，增加模板灵活度，支持匿名和命名插槽。
- CSS支持：模板中可直接使用
<style>标签，支持表达式返回样式等，可限定样式作用域。 - 自定义元素：允许继承
DefineElement类创建，增强应用扩展性。
安装使用步骤
前提条件
假设用户已下载本项目的源码文件，且已安装Node.js和npm。
安装依赖
在项目根目录下，运行以下命令安装依赖：
bash
npm i
具体依赖包可参考package.json文件中的“devDependencies”配置项。
编译项目
安装完依赖后，执行以下命令进行编译：
bash
npm run build
编译结果将存放在/dist目录中。
运行示例
以VSCode为例，使用Live Server插件启动./examples目录下的index.html文件，即可查看示例。
开发自己的应用
- 引入框架：可通过下载引入或CDN方式引入
nodom.esm.js或nodom.esm.min.js文件。- 下载引入示例： ```html
- CDN引入示例：js
import {Nodom, Module} from "https://unpkg.com/nodom3"
2. 创建模块：定义模块类，继承`Module`，实现`template`和`data`方法。javascript
import {Nodom, Module} from '/dist/nodom.esm.js'
class MyModule extends Module {
template() {
return <div>
Hello, {{name}}
</div>;
}
data() {
return {
name: 'Nodom'
}
}
}
3. 启动应用：使用`Nodom.app`方法将模块渲染到指定元素。javascript
Nodom.app(MyModule);
4. 配置路由（可选）：若需要使用路由功能，先引入路由模块并初始化，再创建路由。javascript
import {Nodom, Router} from '/dist/nodom.esm.js'
// 初始化路由
Nodom.use(Router, ['/router', function(mdl, path) {
console.log('enter', mdl, path)
}, function(mdl, path) {
console.log('leave', mdl, path)
}]);
// 创建路由
Nodom.createRoute({
path: '/hello',
module: HelloModule
});
```
调试与国际化
- 调试模式：使用
Nodom.debug()启动调试模式，会输出表达式的异常信息。javascript import {Nodom} from '/dist/nodom.esm.js' Nodom.debug(); - 国际化：使用
Nodom.setLang(language)设置语言，支持中文（zh）和英文（en）。javascript import {Nodom} from '/dist/nodom.esm.js' Nodom.setLang('en');
编译与发布
开发完成后，再次执行npm run build进行编译，将/dist目录下的文件用于生产环境。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】