响应式Javascript文件? [英] Responsive Javascript Files?

问题描述

我已经使用jQuery Mobile UI构建了移动网站，但现在我意识到我需要一些功能使其与桌面网站有所不同(日期选择器在桌面网站上的日期应该更长，等等).

I've built my mobile site using the jQuery Mobile UI but I now realize that I need some functionality to be different between it and my desktop site (datepicker dates should be longer on the desktop site, etc).

我已经研究了Modernizr和matchMedia来帮助我加载单独的js文件，但是我想不出一个好的方法来使其响应地工作. Modernizr仅在初始加载时有效(除非我错过了文档中的内容)，并且在matchMedia超过最小/最大宽度阈值时，多次执行matchMedia时会遇到问题.有时它可以工作，但麻烦在于添加/删除单独的js文件.最重要的是(但不是很大的问题-我不认为)，当将脚本从另一个脚本加载到DOM中时，Chrome会触发错误.

I've looked into Modernizr and matchMedia to help me load separate js files but I can't figure out a nice way for it to work responsively. Modernizr only works (unless I missed something in the doc) on the initial load and I'm having problems with matchMedia executing multiple times as it crosses the min/max-width threshold. It works sometimes but the trouble is in adding/removing the separate js files. On top of that (but not a huge issue - I don't think), Chrome fires off an error when loading scripts into the DOM from another script.

最好的方法是编写一个js文件，然后在主体的宽度上添加诸如$.mobile.media("screen and (min-width: XXXpx)")之类的侦听器，从而更改所需的值?

Would the best thing be to write one js file and then add a listener such as $.mobile.media("screen and (min-width: XXXpx)") to the body's width, changing my needed values?

我可能对自己来说太难了，或者因为我试图使HTTP请求和站点大小尽可能小而遗漏了一些明显的东西，但是我想不出一个好的解决方案.

I may be making this too hard for myself, or missing something obvious because I'm trying to keep HTTP requests and site size as small as possible, but I can't figure out a good solution for this.

谢谢！

闪电回合奖励问题:切换到桌面站点后，保留所有jQuery Mobile样式(data-role data-id data-theme)是否是一种好习惯/正确的做法?对于只在大屏幕上观看的人来说，这真是太糟糕了.

Lightning Round Bonus Question: Is it good practice/proper to keep all of the jQuery Mobile styling (data-role data-id data-theme) after switching to the desktop site? It looks awfully .. awful for someone only viewing it on a larger screen.

推荐答案

恕我直言，最好的方法是在JavaScript中引入几个标志，例如"isMobile"，"isTablet"或"isDesktop"，在附加到您Webapp的"pageinit"事件的方法中进行设置.稍后，您可以检查标志，以使其在代码的特定部分中具有正确的版本.

IMHO, the best approach would be to introduce a couple of flags in your javascript, like "isMobile", "isTablet" or "isDesktop", that would be set within a method attached to the "pageinit" event of your webapp. Later on, you could check that flags to act accordingly with the proper version in the specific parts of your code.

检查标志的方式取决于您的体系结构.在我现在正在工作的项目中，我从后端在页面正文中附加的类中提取了该信息，但这是因为我们拥有该信息.您可以尝试使用 Harvey 之类的库来观察将触发的媒体查询，并进行设置相应地标记.我认为您的选择到这里还没有结束，但是恐怕我不能为您提供更多帮助！

The way you can check that flags depends on your architecture. In the project I am working right now, I extract that information from a class attached by the back-end on the body of the page, but that's because we have that info. You could try to use a library like Harvey to observe the media-queries that would be trigger, and set the flags accordingly. I don't think that your options ends here, but I am afraid I can't help you more!

这篇关于响应式Javascript文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！