JavaScript包概念的评估

时间:2011-06-17 19:17:00

标签: javascript architecture packages

我有一个针对Web应用程序的新JavaScript体系结构样式的想法,我希望这里的任何人都可以帮助我充实并思考它。

我有多个Web应用程序项目,其中JavaScript的使用量非常大 - 特别是使用jQuery,ExtJS,OpenLayers等框架。所有这些框架显然提供了一种简单的单行方式将它们包含在给定的页面中使用。

但是,我总是最终为webapp编写了大量的JavaScript。我喜欢把事情结构化。我使用的命名空间模式如下所示:

WebAppName.category.pageName.method = function() { ... }

......或类似的东西。例如,如果我正在为名为“JSMapper”的webapp的管理页面构建实用程序函数,它将如下所示:

JSMapper.util.administration.someMethod = function() { ... }

使用它可以保持结构化,但是在添加了几十个和几十个方法之后,JavaScript文件可能变得非常冗长,即使它被分成不同页面的不同文件(例如,管理.js将保存所有{{1}函数或其他东西)。

所以我想出了一个PHP脚本,它允许我将每个JavaScript方法分成它自己的文件,并使用目录结构来规定如何定义所有内容。所以从本质上讲,我可以采用这种目录结构:

JSMapper.xxx.administration

...并在JSMapper |-index.php |-scripts | |-JSMapper | | |-repository | | | |-administration | | | | |-someRepositoryMethod.js | | |-util | | | |-administration | | | | |-someMethod.js | | | | |-someOtherMethod.js | | | |-aGeneralUtilityMethod.js |-treescript | |-treescript.php 标记中包含带有参数的treescript.php文件:

<script>

PHP脚本熄灭并获取所有文件,根据目录结构定义命名空间,并向我提供所请求的所有文件的内容:

<script type='text/javascript' src='treescript/treescript.php?package=JSMapper'></script>

它也可以将子包作为参数,例如if(typeof window.JSMapper == "undefined") JSMapper = {}; if(typeof JSMapper.util == "undefined") JSMapper.util = {}; if(typeof JSMapper.util.administration == "undefined") JSMapper.util.administration = {}; JSMapper.util.admin.someMethod = function() { // do something }; JSMapper.util.admin.someOtherMethod = function() { // do something else }; JSMapper.util.aGeneralUtilityMethod = function() { // this method is not specific to the administration page }; if(typeof JSMapper.repository == "undefined") JSMapper.repository = {}; if(typeof JSMapper.repository.administration == "undefined") JSMapper.repository.administration = {}; JSMapper.repository.admin.someRepositoryMethod = function() { // do something }; ,它只会从该子包中检索方法。

我已经开始在一个项目上成功使用此方法,将我的所有JavaScript组织成包,并且每个命名空间中的所有方法都按字母顺序排列并且易于定位和管理,这很棒。


所以我的问题是:这是一种实用的方法吗?它适用于企业级Web开发吗?我忽视的任何缺点?欢迎任何想法,评论和替代解决方案。我可以根据要求提供PHP脚本文件。感谢。

1 个答案:

答案 0 :(得分:-1)

一般的想法是合理的,但滚动自己的图书馆和包装方案可能是错误的举动。你看过RequireJS了吗?它实现了CommonJS AMD规范。至少,请查看相关的CommonJS规范:ModulesPackages