posts - 27, comments - 0, trackbacks - 0

《自己動(dòng)手寫開源框架10》：Tiny快速入門之Web界面快速開發(fā)實(shí)踐

下面是一些常用的鏈接，供大家使用：

GIT地址(必須是OSC家的)：https://git.oschina.net/tinyframework/tiny
問(wèn)題報(bào)告：https://git.oschina.net/tinyframework/tiny/issues

官方網(wǎng)站：http://www.tinygroup.org

更多內(nèi)容，請(qǐng)看本人博客，不一樣的內(nèi)容，一樣的精彩！

本來(lái)想改改OSChina的界面，但是研究了一下，OSChina界面實(shí)在是高大上呀，不是做不出來(lái)，只是工作量比較大，因此還是做個(gè)簡(jiǎn)單的網(wǎng)站來(lái)展示一下用Tiny開發(fā)界面的過(guò)程，同時(shí)在展示過(guò)程的同時(shí)，會(huì)把相關(guān)的知識(shí)做一個(gè)充分的介紹。
一、尋找網(wǎng)站模板

要做網(wǎng)站，不能沒(méi)有模板，自己不會(huì)做網(wǎng)頁(yè)設(shè)計(jì)，咋辦？問(wèn)谷歌找百度唄，找了一陣，看到下面這個(gè)模板不錯(cuò)，就它了。

http://www.tooplate.com/zip_files/2042_the_block.zip

相仔細(xì)了解這篇文章的同學(xué)，建議把原板的下載下來(lái)，對(duì)比著看，會(huì)更有感覺(jué)。

二、開工制作
1.編寫default.layout布局文件
位置：/default.layout

 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2<html xmlns="http://www.w3.org/1999/xhtml">
 3<head>
 4    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5    <title>演示網(wǎng)站-${pageTitle}</title>
 6    <meta name="keywords" content="" />
 7    <meta name="description" content="" />
 8    <script src="${TINY_CONTEXT_PATH}/uiengine.uijs"></script>
 9    <link href="${TINY_CONTEXT_PATH}/uiengine.uicss" rel="stylesheet" />
10</head>
11<body>
12    ${pageContent}
13</body>
14</html>

這個(gè)是標(biāo)準(zhǔn)布局了，直接貼過(guò)來(lái)，唯一要改的就是標(biāo)題處加了“演示網(wǎng)站-”開頭。
里面引入的js和css是TinyUI引擎所獨(dú)有的，主要處理JS,CSS順序處理、合并、打包等相關(guān)，由于這個(gè)是框架內(nèi)部實(shí)現(xiàn)的部分，這里只是使用就不展開來(lái)敘述了。
${pageContent} 這個(gè)標(biāo)記了渲染替換的位置，一個(gè)layout文檔中必須有且只能有一個(gè)(如果沒(méi)有，你會(huì)發(fā)現(xiàn)不管怎么寫頁(yè)面，內(nèi)容都是布局的內(nèi)容；如果有多個(gè)，你會(huì)發(fā)現(xiàn)頁(yè)面中的內(nèi)容會(huì)加多次)。

2.編寫UI組件定義文件

位置：/demosite.ui.xml

 1<ui-components>
 2
 3    <ui-component name="demosite" dependencies="">
 4
 5        <css-resource>/css/jquery.lightbox-0.5.css,/css/slider_style.css,/css/tooplate_style.css</css-resource>
 6
 7        <js-resource>/js/jquery.js,/js/jquery.lightbox-0.5.js,/js/swfobject.js</js-resource>
 8
 9    </ui-component>
10
11</ui-components>

這里主要是定義用到的js和css，由于只是一個(gè)網(wǎng)站，就簡(jiǎn)單處理，只寫一個(gè)了，實(shí)際應(yīng)用當(dāng)中，要根據(jù)用途和職能不同定義為許多個(gè)UI組件包。
3.編寫通用宏定義

位置：/common.component

 1#macro a(title url)
 2
 3<a href="#link(url)">${title}</a>
 4
 5#end
 6
 7  
 8
 9#macro img(url alt)
10
11<img src=#link(url) alt="${alt}">
12
13#end
14
15  
16
17#macro link(url)#if(url.startsWith("/"))${TINY_CONTEXT_PATH}#end${url}#end
18
19  
20
21#macro pageTitle(title page)
22
23    #!set(pageTitle=title)
24
25    #!set(activePage=page)
26
27#end

這面主要定義了4個(gè)宏，a是超連接的，img是圖片的，link是把鏈接地址轉(zhuǎn)換成絕對(duì)地址，pageTitle用于定義頁(yè)面的標(biāo)題和當(dāng)前頁(yè)是哪個(gè)頁(yè)面的。
4.編寫業(yè)務(wù)宏

位置：/demosite.component


  1#macro header()
  2
  3<div id="tooplate_header">
  4
  5    #bodyContent
  6
  7</div>
  8
  9#end
 10
 11  
 12
 13#macro siteTitle(title))
 14
 15<div id="site_title"><h1><a href="#">${title}</a></h1></div>
 16
 17#end
 18
 19  
 20
 21#macro menu()
 22
 23<div id="tooplate_menu">
 24
 25    <ul>
 26
 27        #bodyContent
 28
 29    </ul>
 30
 31</div>
 32
 33#end
 34
 35  
 36
 37#macro menuItem(url title page)
 38
 39<li><a href="#link(url)"#if(activePage==page) class="current"#end >${title}</a></li>
 40
 41#end
 42
 43  
 44
 45#macro tooplateWrapper())
 46
 47<div id="tooplate_wrapper">
 48
 49    #bodyContent
 50
 51</div>
 52
 53#end
 54
 55  
 56
 57#macro tooplateMiddleSub()
 58
 59<div id="tooplate_middle_sub">
 60
 61    #bodyContent
 62
 63</div>
 64
 65#end
 66
 67  
 68
 69#macro tooplateMiddle()
 70
 71<div id="tooplate_middle">
 72
 73    #bodyContent
 74
 75</div>
 76
 77#end
 78
 79  
 80
 81  
 82
 83#macro flashGridSlider()
 84
 85<div id="flash_grid_slider">
 86
 87    <a rel="nofollow" href="http://www.adobe.com/go/getflashplayer">
 88
 89        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
 90
 91             alt="Get Adobe Flash player"/>
 92
 93    </a>
 94
 95</div>
 96
 97<script type="text/javascript">
 98
 99    var flashvars = {};
100
101    flashvars.xml_file = '#link("/photo_list.pagelet")';
102
103    var params = {};
104
105    params.wmode = "transparent";
106
107    var attributes = {};
108
109    attributes.id = "slider";
110
111    swfobject.embedSWF('#link(
112
113        "/flash_slider.swf")', "flash_grid_slider", "780", "210", "9.0.0", false, flashvars, params, attributes);
114
115</script>
116
117#end
118
119  
120
121#macro tooplateContent())
122
123<div id="tooplate_content">
124
125    <span class="content_top"></span>
126
127    #bodyContent
128
129    <div class="cleaner"></div>
130
131</div>
132
133#end
134
135  
136
137#macro tooplateFooter())
138
139<div id="tooplate_footer">
140
141    #bodyContent
142
143    <div class="cleaner"></div>
144
145</div>
146
147#end
148
149  
150
151#macro box220(class)
152
153<div class="box_w220 ${class}">
154
155   #bodyContent
156
157</div>
158
159#end
160
161  
162
163#macro box330(class)
164
165<div class="box_w330 ${class}">
166
167    #bodyContent
168
169</div>
170
171#end
172
173  
174
175#macro gallery()
176
177<div id="gallery">
178
179    #bodyContent
180
181</div>
182
183#end
184
185  
186
187#macro galleryBox(largeImage smallImage title alt info class)
188
189<div class="gallery_box ${class}">
190
191    <div class="gallery_img"><span></span>
192
193        <a href="#link(largeImage)" title="${title}">
194
195            <img src="#link(smallImage)" alt="${alt}"/>
196
197        </a>
198
199    </div>
200
201    <h6>${info}</h6>
202
203</div>
204
205#end
206
207  
208
209#macro postBos(comment title imageUrl imageAlt postedInList commentCount)
210
211<div class="post_box">
212
213    <div class="comment"><a href="#">${comment}</a></div>
214
215    <h2>${title}</h2>
216
217  
218
219    <div class="image_wrapper image_fl"><span></span>#img(imageUrl imageAlt)</div>
220
221    <p><span class="cat">Posted in
222
223     #for(postedIn in postedInList)
224
225        <a href="#">${postedIn}</a>
226
227     #end
228
229    </span></p>
230
231    #bodyContent
232
233    ${commentCount} comments <a class="more float_r" href="#">More</a>
234
235    <div class="cleaner"></div>
236
237</div>
238
239#end

業(yè)務(wù)宏的定義，就是根據(jù)情況從美工制作的頁(yè)面文件中抽取一些具有共性的內(nèi)容，定義成一個(gè)宏，這樣以后使用的時(shí)候，就只要使用有意義的宏而不是原來(lái)一堆一堆的Html標(biāo)記。
5.定義演示網(wǎng)站布局文件

分析一下幾個(gè)頁(yè)面，都有頁(yè)頭，頁(yè)腳，菜單，因此可以把這些共性的文件放在演示網(wǎng)站布局文件中：

位置：/page/default.layout

 1#@tooplateWrapper()
 2
 3    #@header()
 4
 5        #siteTitle("The Block")
 6
 7        #@menu()
 8
 9            #menuItem("index.page" "Home" "Home")
10
11            #menuItem("about.page" "About Us" "About")
12
13            #menuItem("blog.page" "Blog" "Blog")
14
15            #menuItem("gallery.page" "Gallery" "Gallery")
16
17            #menuItem("contact.page" "Contact" "Contact")
18
19        #end
20
21    #end
22
23  
24
25    ${pageContent}
26
27  
28
29    #@tooplateFooter()
30
31    Copyright © 2048 <a href="#">Company Name</a> - Design: <a href="http://www.tooplate.com">tooplate</a>
32
33  
34
35    #end
36
37  
38
39#end 
40
41<script type="text/javascript">
42
43    $('#gallery a').lightBox();
44
45</script>
46
47<script type="text/javascript">
48
49    $('#map a').lightBox();
50
51</script>

上面代碼的函義是：
在整個(gè)頁(yè)面中，上面放置Header，下面旋轉(zhuǎn)Footer，中間放置內(nèi)容

最后兩段js，是說(shuō)：對(duì)某指定選擇器中的圖片用lightbox去進(jìn)行處理。

這里就把所有的通用的部分都抽取到布局文件中了。

6.定義相關(guān)頁(yè)面

首頁(yè)：

 1#pageTitle("Home" "Home")
 2
 3  
 4
 5#@tooplateMiddle()
 6
 7  #flashGridSlider()
 8
 9#end
10
11  
12
13#@tooplateContent()
14
15  
16
17    <h2>Welcome To The Block!</h2>
18
19  
20
21    <div class="image_wrapper image_fl"><span></span>
22
23        #img("/images/tooplate_image_01.jpg" "image")
24
25    </div>
26
27    <p><em>The Block is a <a rel="nofollow" href="http://www.tooplate.com">free website template</a> from <a
28
29            rel="nofollow" href="http://www.tooplate.com">Tooplate</a>. Credit goes to <a rel="nofollow"
30
31                                                                                          href="http://www.photovaco.com">Free
32
33        Photos</a> for photos used in this template.</em></p>
34
35  
36
37    <p align="justify">Aliquam et augue et odio luctus posuere sit amet et nisi. Maecenas convallis, est sit amet
38
39        convallis consectetur, elementum lacus, ut fermentum elit sem. Duis eu elit tortor, sed condimentum nulla.
40
41        Phasellus varius posuere adipiscing. Mauris sodales dictum ullamcorper. Validate <a
42
43                href="http://validator.w3.org/check?uri=referer" rel="nofollow"><strong>XHTML</strong></a> and <a
44
45                href="http://jigsaw.w3.org/css-validator/check/referer" rel="nofollow"><strong>CSS</strong></a>.</p>
46
47  
48
49    <div class="cleaner h40"></div>
50
51    #@box220()
52
53        <h4>pharetra id turpis<span>Lorem Ipsum Dolor</span></h4>
54
55  
56
57        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta adi Piscing libero, eget elem
58
59            ntum lectus varius sed.</p>
60
61        <a href="#" class="more">more</a>
62
63    #end
64
65    #@box220()
66
67        <h4>semper nisl ac nibh<span>Donec Tincidunt Varius</span></h4>
68
69  
70
71        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
72
73            eu mauris id neque porttitor.</p>
74
75        <a href="#" class="more">more</a>
76
77    #end
78
79    #@box220("rmb")
80
81        <h4>consect adipiscing elit<span>Etiam Gravida Sagittis</span></h4>
82
83  
84
85        <p>Cras eu egestas sem. Aenean mollis feugiat massa, eget pharetra nunc interdum non. Etiam euismod sem ac
86
87            sem tincidunt adipiscin.</p>
88
89        <a href="#" class="more">more</a>
90
91    #end
92
93#end

由于這個(gè)里面的數(shù)據(jù)是具體寫的，因此就沒(méi)有再進(jìn)行抽象，如果這些數(shù)據(jù)是從數(shù)據(jù)庫(kù)來(lái)的，那可以再進(jìn)行一下抽象，就可以用for循環(huán)直接搞定了。
關(guān)于：

#pageTitle("About" "About")

  

  

#@tooplateMiddleSub()

    <h2>About Our Company</h2>

    <p>Sed tempus nunc dolor, sit amet aliquet ligula. Ut euismod lectus vel ligula euismod id porttitor tortor placerat. Aenean tincidunt magna sit amet turpis auctor sagittis. Phasellus aliquet augue nec elit lacinia et faucibus massa scelerisque.</p>

#end

  

#@tooplateContent()

    <h2>Our Company Objectives</h2>

<div class="image_wrapper image_fr"><span></span>

        #img("/images/tooplate_image_01.jpg" "image")

    </div>

    <p><em>Morbi congue lorem sit amet odio iaculis tincidunt. Donec nibh, molestie nec pellentesque non, in diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra.</em></p>

    <p>Aliquam et augue et odio luctus posuere sit amet et nisi. Maecenas, est sit amet convallis consectetur, lacus ligula elementum lacus, ut fermentum elit sem et nisi. Duis eu elit tortor, sed condimentum nulla. Phasellus varius posuere adipiscing. Mauris sodales ullamcorper. Validate <a href="http://validator.w3.org/check?uri=referer" rel="nofollow"><strong>XHTML</strong></a> and <a href="http://jigsaw.w3.org/css-validator/check/referer" rel="nofollow"><strong>CSS</strong></a>.</p>

    <div class="cleaner h40"></div>

    #@box330("float_l")

        <h4>what our customers say<span>Testimonial</span></h4>

        <blockquote>

        <p>Fusce nec felis id lacus sollicitudin vulputate. Sed vitae elit at diam vestibulum ullamcorper et nec quam. Aenean eit ut luctus sit amet, elementum quis enim. Proin tincidunt, arcu id pellentesque accumsan, neque dolor imperdiet ligula, quis viverra tellus nulla a odio. Curabitur vitae enim risus, at placerat turpis. Mauris feugiat suscipit tempus fringilla, felis in velit.</p>

  

        <cite>Harry - <span>Senior Webmaster</span></cite>

        </blockquote>

        <a href="#" class="more">more</a>

    #end

    #@box330("float_r")

        <h4>what we do<span>Services</span></h4>

        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit eget elementum lectus varius sed.</p>

        <ul class="tooplate_list">

            <li>Morbi quis lorem risus</li>

            <li>Suspendisse cursus</li>

            <li>Donec at viverra</li>

            <li>Proin eget purus ante</li>

        </ul>

        <a href="#" class="more">more</a>

    #end

#end

日志：

 1#pageTitle("Blog" "Blog")
 2
 3  
 4
 5  
 6
 7#@tooplateMiddleSub()
 8
 9<h2>Our Blog Posts</h2>
10
11<p>Vestibulum eleifend consequat laoreet. Pellentesque vel orci sapien. Duis lacus ipsum, pretium ut accumsan in, tempor
12
13    nec mauris. Aenean accumsan placerat elit, sit amet faucibus ante commodo a. In et neque nibh, ac tristique
14
15    dui. </p>
16
17#end
18
19  
20
21#@tooplateContent()
22
23    #@postBos("20" "Lorem ipsum dolor sit amet" "/images/tooplate_image_02.jpg" "Image 02" ["Templates","Freebie"] "148")
24
25  
26
27        <p>Vestibulum adipiscing tempus elit eu condimentum. Fusce at mi felis. Etiam sed velit nibh. Nunc bibendum
28
29            justo elementum auctor. Donec at magna eu neque. Vestibulum ante ipsum primis in faucibus orci luctus et
30
31            ultrices posuere cubilia. </p>
32
33    #end
34
35  
36
37    #@postBos("17" "Etiam gravida sagittis lacus" "/images/tooplate_image_03.jpg" "Image 03" ["CSS Templates","Web Design"] "128")
38
39  
40
41    <p>Ellentesque vitae velit eu lectus rhoncus tincidunt. Phasellus dictum dignissim sapien et dapibus. Sed
42
43        egestas consequat mauris, orci tincidunt sit amet. Donec pharetra porta ultrices. Sed sit amet lectus
44
45        libero, at porttitor odio. Validate <a href="http://validator.w3.org/check?uri=referer"
46
47                                               rel="nofollow"><strong>XHTML</strong></a> and <a
48
49                href="http://jigsaw.w3.org/css-validator/check/referer" rel="nofollow"><strong>CSS</strong></a>.</p>
50
51    #end
52
53  
54
55    #@postBos("10" "Aenean vitae velit eget" "/images/tooplate_image_04.jpg" "Image 04" ["Illustrations","Graphics"] "208")
56
57  
58
59    <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin gravida
60
61        ornare mauris ac lobortis. Praesent elit neque, lacinia eget interdum eu. Phasellus posuere nisl et odio
62
63        egestas ac tristique justo ultrices. </p>
64
65    #end
66
67#end

畫廊：

 1#pageTitle("Gallery" "Gallery")
 2
 3  
 4
 5#@tooplateMiddleSub()
 6
 7<h2>Our Gallery</h2>
 8
 9<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta adipiscing libero, eget elementum lectus
10
11    varius sed. Aliquam metus urna, dignissim quis posuere at, posuere eget mauris. Vestibulum laoreet sodales tellus
12
13    nec mollis. Validate <a href="http://validator.w3.org/check?uri=referer" rel="nofollow"><strong>XHTML</strong></a>
14
15    and <a href="http://jigsaw.w3.org/css-validator/check/referer" rel="nofollow"><strong>CSS</strong></a>.</p>
16
17#end
18
19  
20
21#@tooplateContent()
22
23    #@gallery()
24
25    #galleryBox("/images/gallery/image_01_l.jpg" "/images/gallery/image_01_s.jpg" "Nunc et tellus id risus ultrices" "Image 01" "Nunc et tellus id risus ultrices")
26
27    #galleryBox("/images/gallery/image_02_l.jpg" "/images/gallery/image_02_s.jpg" "Nunc et tellus id risus ultrices" "Image 02" "Nunc et tellus id risus ultrices")
28
29    #galleryBox("/images/gallery/image_03_l.jpg" "/images/gallery/image_03_s.jpg" "Nunc et tellus id risus ultrices" "Image 03" "Nunc et tellus id risus ultrices" "gb_rmb")
30
31    #galleryBox("/images/gallery/image_04_l.jpg" "/images/gallery/image_04_s.jpg" "Nunc et tellus id risus ultrices" "Image 04" "Nunc et tellus id risus ultrices")
32
33    #galleryBox("/images/gallery/image_05_l.jpg" "/images/gallery/image_05_s.jpg" "Nunc et tellus id risus ultrices" "Image 05" "Nunc et tellus id risus ultrices")
34
35    #galleryBox("/images/gallery/image_06_l.jpg" "/images/gallery/image_06_s.jpg" "Nunc et tellus id risus ultrices" "Image 06" "Nunc et tellus id risus ultrices" "gb_rmb")
36
37    #end
38
39#end

三、運(yùn)行

首頁(yè)

關(guān)于

日志

畫廊

聯(lián)系我們

四、總結(jié)

上面的完整示例展現(xiàn)了采用Tiny框架開發(fā)頁(yè)面的完整過(guò)程，下面總結(jié)一下需要說(shuō)明的一些內(nèi)容：

上面展示采用的模板引擎是TinyTemplate，當(dāng)然也支持Velocity，但是推薦使用TinyTemplate，因?yàn)閳?zhí)行速度更快、功能更強(qiáng)、更容易使用
布局支持多重嵌套，上面的示例中有兩層布局，根上的解決js、css引入，標(biāo)題，網(wǎng)站圖標(biāo)等部分的內(nèi)容，/page/目錄中的解決網(wǎng)站的整體結(jié)構(gòu)部分的內(nèi)容，隨著網(wǎng)站的復(fù)雜，可以做更多層的布局，使得很多頁(yè)面共用的部分都放在布局文件中
xxx.ui.xml定義了UI組件包的內(nèi)容及其依賴關(guān)系，UI引擎會(huì)自動(dòng)根據(jù)ui組件包的定義對(duì)js及css進(jìn)行引入、整合、壓縮。
整個(gè)頁(yè)面只引入一個(gè)css和一個(gè)js文件，避免引入文件數(shù)太多導(dǎo)致的性能下降，同時(shí)提供了壓縮，提升網(wǎng)絡(luò)傳輸效率（這個(gè)例子中的文件都已壓縮，因此壓縮率不高）。
page文件是用來(lái)編寫展示內(nèi)容的頁(yè)面，在顯示.page文件時(shí)，有兩種方式，一種是.pagelet方式，一種是.page方式，區(qū)別在于用.page方式訪問(wèn)時(shí)，會(huì)渲染布局，而pagelet方式不會(huì)渲染布局，適合于Ajax方式使用。
整個(gè)網(wǎng)站在重構(gòu)完成之后，沒(méi)有一段內(nèi)容是重復(fù)的，真正做到Tiny框架所說(shuō)的DRY原則。
所有對(duì)上層布局文件的修改都會(huì)對(duì)所有下層頁(yè)面產(chǎn)生影響，真正做到Tiny框架所說(shuō)的下級(jí)服從上級(jí)原則。
越到底層的開發(fā)人員接觸的越少，真正的頁(yè)面編寫文件，只需要從控制層轉(zhuǎn)過(guò)來(lái)的數(shù)據(jù)再利用宏去顯示內(nèi)容即可，可以避免接觸js,css,html等相關(guān)內(nèi)容。(這一點(diǎn)在示例中還沒(méi)有做到，畢竟示例是一個(gè)靜態(tài)網(wǎng)站)，真正做到Tiny框架所說(shuō)的減法原則，越到下面會(huì)的技能越少。
實(shí)際上框架也支持某個(gè)頁(yè)面不服從上層布局的限制，但是我們不推薦這么做，因此這里沒(méi)有展示這種用法。

采用Tiny框架制作前臺(tái)，需要考慮好如下角色的協(xié)作：

美工：用于進(jìn)行界面設(shè)計(jì)，頁(yè)面切分
UI組件包開發(fā)工程師：根據(jù)功能特性，把具有不同功能特性的js,css,image等放在一個(gè)jar包中，并編寫對(duì)應(yīng)的xxx.ui.xml文件，并設(shè)定好依賴關(guān)系，如果需要還需要編寫公共的宏文件，用于方便別人使用，并隔離功能與具體的實(shí)現(xiàn)，使得后續(xù)的開發(fā)工程師盡量少的接觸css,js。
業(yè)務(wù)組件開發(fā)工程師：根據(jù)功能特性，把頁(yè)面中的一些比較業(yè)務(wù)化的，封裝成業(yè)務(wù)組件，最終暴露的接口是一個(gè)名字及一些數(shù)據(jù)的輸入，使得最終的界面開發(fā)工程師盡可能少的接觸原生的html。
界面開發(fā)工程師：不關(guān)心界面展現(xiàn)的具體技術(shù)，利用UI組件包及業(yè)務(wù)組件開發(fā)工程師開發(fā)的組件，再加上控制層傳過(guò)來(lái)的數(shù)據(jù)來(lái)編寫最終的展現(xiàn)頁(yè)面。

通過(guò)上面的分工，使得不同的開發(fā)人員關(guān)注于不同的技術(shù)細(xì)節(jié)，從而最大化的提升最終界面開發(fā)工程師的開發(fā)效率，同時(shí)因?yàn)橛辛艘欢ǖ姆庋b性，可以使得底層的變化不致于影響上層開發(fā)人員的工作成果。

歡迎訪問(wèn)框架論壇：http://web.j2ee.top。本例涉及的代碼和框架資料，將會(huì)在論壇分享。《自己動(dòng)手寫框架》成員QQ群：228977971，讓我們一起動(dòng)手，了解框架的奧秘！

posted on 2015-06-08 23:49 柏然閱讀(347) 評(píng)論(0) 編輯收藏

新用戶注冊(cè) 刷新評(píng)論列表


只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問(wèn) 管理

2015年6月

日

一

二

三

四

五

六

常用鏈接

留言簿

隨筆檔案

搜索

最新評(píng)論

閱讀排行榜

評(píng)論排行榜