组织jQuery Mobile应用程序的最佳实践是什么? [英] What is the best practice organize a jQuery Mobile application?

问题描述

我发现文章对此有所了解.但是我的主要问题是每个屏幕都需要一个单独的.html文件吗?我想是的，但我希望获得一致投票.另外，这也适用于单独的JS文件吗?

I have found article that skims over this. But my main question is do I need a separate .html file for each screen? I am thinking yes but I would like an unanimous vote. Also, does that go for separate JS files too?

JQM应用程序基本上是用于管理用户和角色的.

JQM app is basically to admin users and roles.

推荐答案

我们有一个生产jQM网站，这是我们的工作方式-是的，其他人可能会不同意，但我们发现这对一个非常大的网站有用.

We have a production jQM site here's how we do things - and yes others may disagree but we found this works for a very large site.

1. 使用多个单独的HTML页面，一个大型的多页面模板会抵消jQM的ajax加载的好处，因为您一开始就加载了所有HTML(除非您的网站很小)

1. Use multiple single HTML pages, a large multi-page template defeats the benefits of jQM's ajax loading since you're loading all your HTML at the start (unless your site is small)

您肯定要使用ajax加载，jQM只提取<div data-role="page">中的代码，但这会使您的JS变得更加复杂

You definitely want to use ajax loading, jQM only pulls in the code in your <div data-role="page"> BUT this complicates your JS see below

您不需要多个JS文件，但是您确实需要在开始时加载所有JS，我们通过做两件事来做到这一点: 1. >文档根目录中的侦听器，并侦听pageinit/pageshow事件.每次加载页面时都会触发这些页面，您还可以方便地引用当前页面，并且可以在页面上使用attr来确定其所在的页面. 2..将所有JS包含在某种形式的包含物中(希望您使用的是PHP，CF或类似的东西)，然后将其放在每个页面上，无论用户浏览哪个入口点到您的移动设备上网站，他们会加载所有代码

You don't need multiple JS files, BUT you do need to load all your JS at the start, we accomplish this by doing two things: 1. we put an on listener at the document root, and listen for pageinit/pageshow events. Everytime a page is loaded these are triggered, you also have a handy reference to the current page, and you can use an attr on the page to determine what page it was. 2. Have all the JS in an include of some sort (hopefully you are using PHP, CF or something) and put this on every page, that way no matter which entry point a user browses to your mobile site with, they get all the code loaded

缺点是所有JS都是最初加载的，但是最小化后我们发现这没什么大不了的，如果真的需要关注RequireJS，那么它就使调试变得轻而易举，因为JS在那里就足够了，我们可以轻松地使用调试器并放置断点.如果在每个页面上动态加载JS，则会增加在每次页面转换时需要返回的数据，并且由于重新加载冗余JS且调试动态JS很难，因此您会感到不便.

The downside is that all the JS is loaded initially, but minified we find it's no big deal, and if it's really a concern look into RequireJS - plus it makes debugging a breeze since the JS is all there we can easily use the debugger and place breakpoints. If you load JS dynamically on each page you increase the data you need to return on each page transistion and you have ugliness because you reload redundant JS and it's hard to debug dynamic JS.

$(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(oEvent){

    var pageType = $(this).data('pagetype');

    //handle pageinit/pageshow (oEvent.type) for each pageType

这篇关于组织jQuery Mobile应用程序的最佳实践是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！