用js给Loader方法编写一个load属性,load属性也是一个方法。load属性具有dom与apps两个参数。dom是HTML节点,apps是一个数组,内部是许多对象。 编写load方法,首先将apps中的对象根据name属性建立一个名为“app_map”类型为Map的属性,使得后续可以通过name找到相应的app。 其次获得dom参数(HTML中的DOM节点)之后遍历dom节点,如果遇到通用的HTML标签则使用MakeApp方法(无参数)创建一个app实例, 如果遇到的是自定义的HTML标签则在app_map中查找到相应的app_message,然后使用MakeApp方法(参数为app_message)创建一个app实例, 如果未在app_map中找到相应的app_message则报错。 创建完成app实例之后将其father属性设置为app_tem,如果app_tem为空则设置为undefined。 然后将app加入app_tem的children数组,设置完之后将app_tem设置为刚才创建的app。并继续遍历dom直到遍历完成全部的dom
时间: 2024-01-21 11:20:08 浏览: 36
节点。最后返回app_tem作为load方法的返回值。
具体代码如下:
```javascript
function Loader() {
this.app_map = new Map();
this.MakeApp = function(app_message) {
// 创建app实例
}
this.load = function(dom, apps) {
// 创建app_tem作为根节点
var app_tem = {
children: []
};
// 建立名为“app_map”类型为Map的属性
for (var i = 0; i < apps.length; i++) {
this.app_map.set(apps[i].name, apps[i]);
}
// 遍历dom节点
var nodes = dom.querySelectorAll('*');
for (var i = 0; i < nodes.length; i++) {
// 判断是否为自定义的HTML标签
var app_message = this.app_map.get(nodes[i].nodeName.toLowerCase());
if (!app_message) {
// 未找到相应的app_message则报错
throw new Error('Cannot find app message for node ' + nodes[i].nodeName);
}
// 创建app实例
var app = this.MakeApp(app_message);
// 设置father属性和加入children数组
if (app_tem.children.length !== 0) {
app.father = app_tem;
app_tem.children.push(app);
}
// 用当前创建的app实例替换app_tem
app_tem = app;
}
return app_tem;
};
}
// 使用方法
var loader = new Loader();
var dom = document.querySelector('body'); // 假设要加载的dom节点是body
var apps = [{name: 'my-app', ...}, {name: 'another-app', ...}]; // 假设有两个自定义HTML标签
var root_app = loader.load(dom, apps);
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)