咕嘟咕嘟+ JS库+ JSON数据
我有一个单页web应用,为此我使用各种外部JS文件:通过不发货的bower
包(bower
咕嘟咕嘟+ JS库+ JSON数据
- 库即其他一些JS脚本我有本地)
- 有一些数据的JSON文件
- 我
main.js
文件,集成了所有的JS代码
现在,我试图围绕构建和发布此类应用程序的JS组件的最佳方式进行讨论。
通常我会通过index.html
中的<script></script>
标签调用这样的文件,但在Gulp中,我有点迷失在实际上是最好的方式。
我应该将每个JS文件捆绑到一个文件中加上JSON吗?
如果不是,通过gulp包含JSON文件的最佳方式是什么?
你在问正确的问题,但是吞咽本身并不能解决你的问题(只是给你提供了这样的工具)。你正在寻找的是一个模块系统。最常见的两种模块是AMD和CommonJS。
例如,如果您正在使用Webpack,你会被认为是进入点(这是通过<script src='/js/entry.build.js'>
加载单个脚本一个脚本文件。
你entry.js
可能看起来像这个被“建”之前:
var $ = require('bower_components/jQuery');
var jsonData = require('js/json-data.js');
$(function() {
// do something with jsonData
})
而且在entry.js运行的WebPack后,它会输出具有捆绑到它所有的依赖关系一个js文件。
您可能还需要寻找到RequireJS或Browserify实现类似的功能。
感谢Jonathan Dumaine,正如我在之前的评论中所说的,Browserify看起来像一个很好的组合。我会尽量把头围住它。 – c1c1c1 2015-02-23 15:16:32
如果你的数据是静态的,那么把它和你的脚本一起使用可能是一个好主意,因为这会节省一个额外的请求。如果这些数据很大,并且你不需要它,那么包含它可能是一个坏主意。
对于这种情况的数据是静态的,使用的所有,你可以做这样的事情,但要奖励,这时候只是说明你如何能做到这一点,但是这不是一个好的代码):
datastorage.js
/*
some simple data storage with a defined interface to register and retrive data
*/
var dataStorage = {};
function registerData(key, value) {
dataStorage[key] = value;
}
function data(key) {
return dataStorage[key];
}
data1.js
registerData('data1', {
"propertyA" : "valueA"
/* some more data */
});
个main.js
/** a part of your code where you access this data **/
console.log(data('data1').propertyA);
你应该寻找一个AMD,RequireJS,CommonJS的,ES和谐你开始实现数据存储,使用装载/登记数据的常用技术之前。
谢谢@ t.niese为您解答。我将深入学习CommonJS和Browserify。 – c1c1c1 2015-02-23 15:14:31
我正在经历捆绑不同事物的同样头痛。我做了一些研究,并想出了一种将所有内容捆绑到一个HTML页面的方法。包括图像和字体。它还缩小和优化每个文件。所以你的整个单页应用程序可以真正在一个单一的HTML页面。你所要做的就是传入开始页面(例如Index.html)我刚刚在Git Hub上发布了我的项目并将它称为SPAFramework/SpaBundler,你可以试试它,并且还有助于进一步开发它,因为它实际上只是一个工作粗略草案。
Glup只是一个自动化工作流程的工具。如果你应该把所有的js文件连接到一个文件或者只是某些文件,取决于你的用例。 – 2015-02-23 14:53:36
对不起,我写了很差的问题。现在我编辑了它。我的意思是:我是否应该将JSON也包含在所有其他js文件中?这是一个很好的做法吗? – c1c1c1 2015-02-23 14:55:23
什么是JSON?配置您的应用程序,REST服务的临时存根数据等? – sma 2015-02-23 14:56:12