如何建立一个基于 jquery 的大型网站?
我想开始一个新项目,一个大型 jquery 应用程序/网站。我希望该网站的功能与 twitter 或 github 非常相似,非常动态,非常流畅/流畅,等等......
我的问题是我不知道从哪里开始。我读过无数的博客文章,研究了许多 JS 框架/模板和框架。 MVC 类型系统。
当我编写 JS 代码时,我应该将所有内容都放在一个文件中吗?或者我应该将我编写的每个插件分解为单独的文件,然后使用像 Respond.JS 这样的 JS 加载器?
我认为我需要一个模板系统来让主题标签导航正常工作,所以我正在考虑 Backbone.JS 或 Mustache/Handlebars.JS
有人有这个起点吗?也许我可以遵循一个样板解决方案/开发模式?
谢谢!
I want to start a new project, a large jquery application/website. I want the site to function a lot like twitter or github, very dynamic, very fluid/smooth, etc...
My problem is I don't know where to start. I've read countless blog posts, investigated many JS frameworks / templating & MVC type systems.
When I write JS code, should I put everything into a single file? Or should I breakout each plugin I write into separate files and then use a JS loader like Respond.JS?
I think I need a templating system though to get the hashtag navigation to work, so I'm looking at either Backbone.JS or Mustache/Handlebars.JS
Does anyone have a starting point for this? Perhaps a boilerplate solution / development pattern that I can follow?
Thanks!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
这在很大程度上取决于您对“大型”的定义以及您正在部署的组件类型。我发现我们是否能够充分了解您的环境来告诉您该做什么,但我可以给您一些一般性建议:
如果您需要页面上的组件(例如,交互式可视化)数据)尝试找到一个现成的插件。
如果没有现成的插件,则以插件的形式编写组件。这与 jQuery 的设计很好地结合在一起,并确保了高度的可重用性。
尝试将 Javascript 与 HTML 分开。通常,您的 HTML 是一个充满 id 或类的页面,可以用作 Javascript 链接到的“挂载点”。 Javascript 文件通常如下所示:
$(文档).ready(function() {
// 开始进行 AJAX 调用,设置页面
// 元素,以及您需要的任何其他内容。
});
鉴于 Javascript 与页面相关,请尝试减少页面数量,同时为每个页面提供自己的 Javascript 文件。如果页面特别复杂或使用可重用的包含文件,请将 Javascript 分成仅控制页面的一部分的较小文件。您可以根据需要进行任意数量的 $(document).ready() 调用。
祝你好运!
It depends very heavily on your definition of "large" and what kinds of components you are deploying. I find it highly doubtful that we'd be able to know your environment well enough to tell you what to do, but I can give you some general advice:
If you need a component on the page (e.g. an interactive visualization of data) try to find an off-the-shelf plugin.
If an off-the-shelf plugin is unavailable, write the component in the form of a plugin. This ties in well with jQuery's design and ensures a high degree of reusability.
Try to separate the Javascript from the HTML. Typically your HTML is a page full of ids or classes that can be used as "mount points" for the Javascript to link into. The Javascript file would typically look like this:
$(document).ready(function() {
// Start making AJAX calls, setting up page
// elements, and whatever else you need.
});
Given that the Javascript is tied to the page, try to keep the number of pages down while giving each page its own Javascript file. If a page is particularly complicated or makes use of reusable include files, separate the Javascript into smaller files that control only a portion of the page. There can be as many $(document).ready() calls as you need.
Good luck!
一旦你的 JS 完成,在生产中将其缩小:
http://jscompress.com/
另外,如果你使用多个jquery 插件(例如 jquery UI)将它们全部保存在同一文件下以获得更快的性能。
Once your JS is completed, in production have it minified:
http://jscompress.com/
Also, if you use multiple jquery addons such as jquery UI, keep them all under the same file for faster performance.