- 浏览: 305684 次
- 性别:
- 来自: 长沙
文章分类
最新评论
-
完善自我:
支持一下!
揭秘IT人才特点:中美印日四国程序员比较 -
悲剧了:
好文,看玩thinking in java的提到的异常处理,看 ...
高效的Java异常处理框架(转) -
yin_bp:
开源框架bbossgroups页支持组件异步方法调用哦,详情请 ...
Spring 3中异步方法调用 -
flyjava:
sun的悲哀
Apache怒了,威胁说要离开JCP
Thursday 11 November, 2010 by justinbmeyer
Earlier this week, I realized that every organizing-a-jQuery-application blog, article, and conference talk misses the most important lesson on how to organize a jQuery app.
They talk about how to organize an individual widget or piece of functionality, but not how you can break up an application into logically separate and testable components.
Separation of concerns is the bedrock of software engineering. It is the best way to achieve a quality, error free, and maintainable project.
Think about it ... If your code's logic is isolated, how much damage does making an incorrect decision do? Very little!
The secret to building large apps is NEVER build large apps. Break up your applications into small pieces. Then, assemble those testable, bite-sized pieces into your big application.
This article shows how to do this elegantly with JavaScriptMVC 3.0 (which was created with this pattern in mind). We'll use Rebecca Murphey 's Srchr app as an example of this pattern in practice.
Srchr
The Srchr app makes searches using multiple services and saves the searches between page loads.
Install Srchr
To install our srchr app:
-
Download And Unzip JavaScriptMVC
-
Install Srchr
./js steal/g etjs srchr
Note: window's users do
js steal\getjs srchr
Open srchr/srchr.html to see something like:
Note: this won't work in Chrome on the filesystem b/c of it's insane cross domain policy .
Srchr's Sweetness
Srchr was built the 'JavaScriptMVC' way (i.e. competently). It has a folder/file structure where:
- Code is logically separated and tested
- Code is easily assembled into higher-order functionality.
- Higher order functionality is tested.
- We are able to regression test.
Logically Separate and Test
We've broken up Srchr into the following components:
- Disabler - Listens for search messages and disables tab buttons. demo test
- History - A cookie saved list of items. demo test
- Search - Creates a search message when a search happens. demo test
- Search Result - Seaches for results and displays them. demo test
- Tabs - A Basic Tabs widget. demo test
Note: For the test pages, make sure you have popup blocker off!
The following shows the srchr folder's contents:
Each of Srchr's sub components has its own folder, demo page, tests, and test page. For example, srchr/search looks like:
This makes it extremely easy to develop a component in isolation. Lets look at the Srchr.History and Srchr.Search widgets a little more in depth:
Srchr.History
Srchr.History maintains a list of items in a cookie. You can add items to the list like:
$("#history
").srchr_history
("add", search);
You can also listen to when items in the list are selected like:
$("#history"
).bind("selected"
, function
(ev, item)
{
});
The srchr/history
folder has the following files to make developing and
testing the history widget independently easy:
- history.js - Loads Srchr.History's dependencies then defines its functionality.
- history.html - A demo page for Srchr.History.
- funcunit/history_test.js - Srchr.History's tests.
- funcunit.html - Runs Srchr.History's tests.
Srchr.Search
Search maintains a form that creates search events. You can listen to search events like:
$("#searchArea"
).bind("search"
, function
(ev, item)
{
});
You can also set the search form by passing it a 'search' object like:
$("#searchArea
").srchr_search
("val", search);
The srchr/search
folder has the following files to make developing and
testing independently easy:
- search.js - Loads Srchr.Search's dependencies then defines it's functionality.
- search.html - A demo page for Srchr.Search.
- funcunit/search_test.js - Srchr.Search's tests.
- funcunit.html - Runs Srchr.Search's tests.
Assemble Higher-Order Functionality
Now that we've built and tested each of our widgets, it's time to assemble them into the final application. We do this in srchr/srchr.js
This file pulls in all the widgets and models we will need with steal:
steal.plugins('srchr/search'
,
'srchr/history'
,
'srchr/search_result'
,
'srchr/tabs'
,
'srchr/disabler'
)
.models('flickr'
,'yahoo'
,'upcoming'
,'twitter'
)
.then(function
($)
{
And then assembles them.
The following code makes Srchr.History and Srchr.Search work together:
// when a search happens, add to history
$("#searchArea"
).bind("search"
, function
(ev, search)
{
$("#history"
).srchr_history("add"
, search);
});
// when a history item is selected, update search
$("#history"
).bind("selected"
, function
(ev, search)
{
$("#searchArea"
).srchr_search("val"
, search);
});
Pretty nifty. It's like we're hooking up big legos. It's almost like it was engineered that way !
Now lets test the app as a whole.
Higher Order Testing
Srchr has the same file structure as our widgets for testing:
- test/funcunit/srchr_test.js - Srchr's tests.
- funcunit.html - Runs Srchr's tests.
When you run the test page (funcunit.html ), you'll notice that it runs all the widget's tests before running the Srchr tests. This is regression testing! You just have to open up Srchr's funcunit page and it will test all the other widgets before testing the application itself. This is a great way to find low-level bugs. And, the lower you can find a bug, the more easy you can solve it.
P.S. Unit Testing!
Srchr also tests connecting to the various search services. The test page is at srchr/qunit.html and the tests are at srchr/test/qunit/srchr_test.js
Conclusion
We've pretty easily accomplished our goal of splitting the application up into reusable components that are individually testable and testable as a whole.
This type of development isn't really possible without solid dependency management. Srchr.js just has to include its submodule, view, and model files. It doesn't have to worry about their individual dependencies.
If we need to make a change, we can work in the submodule folder, test it, make changes, then regression test the whole application.
This is why JavaScriptMVC is simply the best way to develop large applications - it makes the process straightforward and repeatable.
There are multiple (and probably better) ways to break up Srchr's components. How you divide up your app is up to you. But hopefully we've shown that you CAN break up your applications easily and it's a damn good idea.
From:http://jupiterjs.com/news/organizing-a-jquery-application#news/organizing-a-jquery-application
发表评论
-
Web编程是函数式编程
2010-11-30 13:44 1031任何一位在两个领域里 ... -
如何开发Web应用程序
2010-11-30 13:41 1066这是一个经常被问到的 ... -
设计Web应用程序时要注意可伸缩性
2010-11-26 09:19 878Max Indelicato是一位软件 ... -
Web 2.0应用客户端性能问题十大根源
2010-11-25 20:19 995Web 2.0应用的推广为用户带来了全新的体验,同时也让开 ... -
HTML压缩(JSP的GZIP实现)
2010-11-24 22:31 4900HTTP 压缩可以大大提高浏览网站的速度,它的 ... -
浏览器加载和渲染html的顺序
2010-11-22 09:45 25101.浏览器加载和渲染html的顺序 1、IE下载的顺序是从上到 ... -
在服务端合并和压缩JavaScript和CSS文件
2010-11-22 09:16 1093Web性能优化最佳实践中最重要的一条是减少HTTP请求 ... -
用 YUI Compressor 压缩和混淆 JS 和 CSS
2010-11-22 09:05 2303一、简介: 目前开发Web应用Javas ... -
如何缓存DWR生成的JS文件
2010-11-18 17:37 1933DWR provides a convenient mec ... -
HTTP状态一览
2010-11-17 22:43 741在网站建设的实际应用中,容易出现很多小小的失误,就像m ... -
两款HTTP流量分析工具的比较:HTTP Watch,Fiddler
2010-11-17 17:26 0做Web开发或者Web分析经常需要查看Http通讯的过程, ... -
了解CSS的查找匹配原理,让CSS更简洁、高效
2010-11-17 16:49 0用了这么多年的CSS,现在才明白CSS的真正匹配原理,不知 ... -
高性能WEB开发 - flush让页面分块,逐步呈现
2010-11-17 16:47 0在处理比较耗时的请求的时候,我们总希望先让用户先 ... -
WEB高性能开发 - 疯狂的HTML压缩
2010-11-17 16:46 0前言: ... -
该如何加载google-analytics(或其他第三方)的JS
2010-11-17 16:44 0很多网站为了获取用户访问网站的统计信息,使用了go ... -
高性能WEB开发 - 页面呈现、重绘、回流。
2010-11-17 15:57 0页面呈现流程 在讨论页面重绘、回流之前。需要 ... -
高性能WEB开发 - JS、CSS的合并、压缩、缓存管理
2010-11-17 15:54 0本篇文章主要讨论下目前JS,CSS 合并、压缩、缓存 ... -
高性能WEB开发- 减少请求,响应的数据量
2010-11-17 15:49 0上一篇中我们说 ... -
高性能WEB开发 - 为什么要减少请求数,如何减少请求数!
2010-11-17 15:42 0http请求头的数据量 我们先分析下 ... -
高性能web开发 - 如何加载JS,JS应该放在什么位置?
2010-11-17 15:39 0外部JS的阻塞下载 所有浏览器在下载JS的时候, ...
相关推荐
Organizing Application Navigation with Activities and Intents 110 Working with Services 110 Receiving and Broadcasting Intents 111 Summary 112 Quiz Questions 112 Exercises 112 References and More ...
Incremental semi-supervised kernel construction with self-organizing incremental neural network and application in intrusion detection
Instant Flask Web Development takes you beyond the quick start in the Flask documentation and shows you a bottom-up approach to organizing your Flask application. It shows you how to build a small ...
self-organizing map 最清晰简要的介绍
DSOM a novel self_organizing model based.pdf
A brief description on Self-Organizing Map
self-organizing-maps Teuvo Kohonen 2001 第三版 扫描版
Hierarchical Clustering And Structuring Of Data With Self-Organizing
ricoh_SP_200_Smart_Organizing_Monitor_1.00.zip
Cloud Chamber A Self-Organizing Facility to Create, and Examine Software as a Service TenantsExercise
Goods: Organizing Google’s Datasets,Goods: Organizing Google’s Datasets
Organizing Business Knowledge The MIT Process Handbook 业务建模方面的很好的资料.
<br>The topics covered include: <br>Dividing an enterprise application into layers The major approaches to organizing business logic An in-depth treatment of mapping between objects ...
这是对Palubicki2009的主要观点的C++实现。为了帮助有兴趣的读者更好地理解该论文的实现方式,代码被记录下来。其结果在结构上与原始论文中的结果相当。然而,从视觉上看,其结果要差一些。这是因为渲染是通过OpenGL...
自生长自组织映射 最经典的论文 没有之一。伪代码
Abstract—The self-organizingmap (SOM) is an ... It projects input space on prototypes of a low-dimensional regular grid that can be effectively utilized to visualize and explore properties of the data.
开源项目-Riturajcse-Self-Organizing-List.zip,Go中的自组织列表实现
前端项目-jquery-bracket,Library for organizing single and double elimination tournaments
这是关于智能计算的电子书,高清,最新版本,经典著作,英文版