文章目录
  1. 1. Javascript 模块化
    1. 1.1. 前言
    2. 1.2. 模块模式(非 es6 场合常用)
    3. 1.3. 文件结构

Javascript 模块化

前言

此篇文章研究怎样合理组织代码结构,如写业务代码,写原生组件等,与设计模式章节有部分重合。

模块模式(非 es6 场合常用)

使用 jquerygetJSON 方法来获取 github repoList 数据列表,未加 loading …

1
<div id="root"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
var Module = {
init: function() {
var y = this;
y.id = "root";
y.error = null;
y.fetchOrderList(); // 若有可以扩展添加结束处理的逻辑
},
fetchOrderList: function() {
var y = this;
$.getJSON(
"https://api.github.com/search/repositories?q=javascript&sort=stars"
).then(
value => {
y.render(value);
},
error => {
y.error = error; // 错误标记
y._fetchDataFailed(error);
}
);
},
render: function(data) {
var y = this;
let html;
if (y.error === null) {
html = this._resolveData(data);
} else {
html = data;
}
document.getElementById(y.id).innerHTML = html;
},

// 需要时格式化处理
_resolveData: function(data) {
var repos = data.items;
var repoList = repos.map(function(repo, index) {
return `<li> <a href=${
repo.html_url
}>${repo.name}</a> (${repo.stargazers_count} stars) <br /> ${repo.description}</li>`;
});
return `<main>
<h1>Most Popular JavaScript Projects in Github</h1>
<ol> ${repoList.join("")}</ol>
</main> `;
},
// 错误处理
_fetchDataFailed: function(error) {
let errorHtml = `<span>Error: ${error.message}</span>`;
this.render(errorHtml);
}
};
Module.init();

文件结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
assets      # 静态资源
api # 接口地址
environment # 环境切换
mock # 本地模拟数据
components # 组件库
layouts # 布局库
styles # 全局公共分类样式
views # 页面
utils # 方法

# 可以省略
libs # 第三方SDK
routes # 路由管理
store # 状态管理
文章目录
  1. 1. Javascript 模块化
    1. 1.1. 前言
    2. 1.2. 模块模式(非 es6 场合常用)
    3. 1.3. 文件结构