-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwebDevelop.html
149 lines (137 loc) · 6.94 KB
/
webDevelop.html
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="" href="css/reset.css">
<link rel="stylesheet" type="" href="css/bootstrap.css">
<link rel="stylesheet" type="" href="css/common.css">
</head>
<body class='home-template'>
<header class="main-header" style="background-image: url(http://image.golaravel.com/5/c9/44e1c4e50d55159c65da6a41bc07e.jpg)">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1> WEB 前端框架</h1>
</div>
</div>
</div>
</header>
<nav class="main-navigation">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="navbar-header"><span class="nav-toggle-button collapsed" data-toggle="collapse" data-target="#main-menu"><span class="sr-only">Toggle navigation</span>
<i class="fa fa-bars"></i>
</span>
</div>
<div class="collapse navbar-collapse" id="main-menu">
<ul class="menu">
<li role="presentation"><a href="index.html" title="首页">首页</a>
</li>
<li role="presentation"><a href="webDevelop.html">前端开发文档</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<section class="content-wrap">
<div class="container">
<div class="row">
<main class="col-md-8 main-content">
<article class="post">
<div class="post-head">
<h1 class="post-title">
<a href="###">
前端开发文档
</a>
</h1>
</div>
<div class="post-content">
<h3>目录结构</h3>
<pre>
<code>
├── README.md
├── css-modules #公用CSS目录，字体文件
├── js-modules #公用js库
├── lib #mod.js
├── plugin #编译后端模板插件
├── site #网站页面
├── test #测试数据存放处
├── widget #页面组件存放处
├── fis-conf.js #fis3配置文件(可以按照自己的需求配置)
├── server.conf #本地测试的URL转发规则配置文件
└── smarty.conf #本地测试的 Smarty 引擎的配置文件
</code>
</pre>
<h3>模块化开发</h3>
<div class="p-wrap">
<p><strong>同名依赖</strong><br>当一个模板，js、css （包括less、scss等）如果跟模板同名，那么就会给模板添加对同名js、css的依赖。同样如果一个
UI 组件，css 和 js 同名，也会给 js 添加同名 css 的依赖。(PS:以上依赖都是同步依赖，所以当确定某个 js 要异步引入的时候，请不要跟模板同名。)</p>
<p><strong>组件脚本加载</strong><br>对于 UI组件，包含 js 的组件，通过前端模版化框架提供的接口进行调用。</p>
<pre>
<code>
require('./a.js'); // 相对路径
require('/widget/cs/a.js'); // 相对于模板根目录的绝对路径。
require('project:widget/cs/a.js'); // 使用 ID 进行调用，默认ID为project
</code>
</pre>
<p><strong>require</strong><br>此接口可以加载任意资源，不需要非得是组件化资源，但只是告诉后端框架你需要加载哪些资源，最终的结果是资源只会被加载，包括其依赖。如果是
js 组件，并不会由于调用这个接口直接触发执行组件逻辑(支持相对路径和绝对路径，使用请参照demo)</p>
<p><strong>URL模拟转发</strong><br>模块目录下的 server.conf 文件为配置 rewrite 规则的配置文件，包含规则</p>
<pre>
<code>
rewrite 把一个匹配链接定向到某个文件或者 php 逻辑方便处理
redirect 跳转
template 某个匹配 URL 解析某个 .tpl 文件
//例子
rewrite ^\/ajax.* /test/project/cs.json(可用于模拟ajax请求)
redirect ^\/?$ /project/site/index/index（默认打开页面，可安需求自行配置）
template ^\/xxxx A/page/index.tpl
PS:
rewrite 和 redirect 规则配置的文件相对于 www 目录（fis3 server open 打开此目录）
template 相对于 www/template 目录
</code>
</pre>
<p><strong>数据模拟</strong><br>页面对应规则,可以参照demo的title</p>
<pre>
<code>
##页面对应规则##
/site/index/index.tpl
/test/site/index/index.php
</code>
</pre>
<p><strong>ES6</strong><br>ES6语法需要JS文件名改为es6即可使用。对于 UI组件，包含 es6 的组件，通过前端模版化框架提供的接口进行调用。</p>
<pre>
<code>
require('./a.es6'); // 相对路径
require('/widget/cs/a.es6'); // 相对于模板根目录的绝对路径。
require('project:widget/cs/a.es6'); // 使用 ID 进行调用，默认ID为project
</code>
</pre>
</div>
</div>
<footer class="post-footer clearfix"></footer>
</article>
</main>
<aside class="col-md-4 sidebar">
<div class="widget">
<h4 class="title">BUG反馈</h4>
<div class="content community">
<p>QQ：984504727</p>
<p>
<a href="https://github.com/AMIBAFE/fis3-smarty/issues" title="issues" target="_blank">有问题可以在这里提</a>
</p>
</div>
</div>
</aside>
</div>
</div>
</section>
<script src="js/jq.js"></script>
<script src="js/common.js"></script>
</body>
</html>