简体   繁体   English

向网站添加Javascript

[英]Adding Javascript to a website

I have been making websites by myself for a few months now and although I understand the concept of how to add Javascript to a site, I am really struggling with how to best go about it and would have liked some experienced developers opinions/advice. 我已经独自制作网站几个月了,尽管我了解如何向网站添加Javascript的概念,但我确实在竭力寻求最佳解决方案,并且希望获得一些有经验的开发人员的意见/建议。

I have read countless times on SO that it is best practice to build a plain site first and then go about adding Javascript. 我已经阅读了无数次关于SO的最佳实践,即最好的方法是先构建一个纯站点,然后再添加Javascript。 That way the site will work pretty much no matter what. 这样一来,无论如何,该网站都可以正常工作。 It's a great idea for stuff like animations, basically, Javascript which acts on the page. 对于动画之类的东西,基本上就是作用在页面上的Javascript,这是个好主意。

But, if you have a site with server generated content. 但是,如果您的站点包含服务器生成的内容。 And say, that to shorten load time on your pages you would like to then have part of your content loaded via ajax calls. 并说,为了缩短页面上的加载时间,您希望通过ajax调用来加载部分内容。 How do you go about adding that to the site? 您如何将其添加到网站?

As far as I understand you cannot know at the server whether your client has Javascript enabled or disabled when the page refreshes... so you can't leave content out at the server. 据我了解,您无法在服务器上知道页面刷新时客户端是启用还是禁用了Java脚本...因此您无法将内容留在服务器上。 But if you send all of it to the client then you don't need an ajax on the page anymore. 但是,如果将所有内容发送给客户端,则页面上不再需要ajax。

How do you normally go about it in this case? 在这种情况下,您通常如何处理? Do you make links for and versions and signal the server which version to load that way? 您是否为和版本建立链接,并向服务器发出信号以那种方式加载哪个版本? But that still doesn't tell you whether or not the user will have scripts enabled at refresh or not... 但这仍然不能告诉您用户是否在刷新时启用了脚本...

Or do you just do like facebook and ebay and ignore users with scripts disabled? 还是您只是喜欢facebook和ebay并忽略禁用了脚本的用户?

Technology is moving away from people without javascript, so this may be an eventuality to ignore them. 技术正在远离没有javascript的人们,因此忽略它们可能是一种偶然。

But if you must support those types of users it is a popular practice to 'intercept' html links/buttons when clicked and load through ajax. 但是,如果必须支持这些类型的用户,那么一种流行的做法是在单击并通过ajax加载时“拦截” html链接/按钮。 If the user doesnt have javascript, the link/button will act as normal. 如果用户没有javascript,则链接/按钮将正常运行。

This type of 'interception' concept is covered in progressive enhancement concepts. 渐进增强概念涵盖了这种“拦截”概念。

Visually at least it always seems that AJAX-loading will feel slower (from the technical side this makes sense as it uses another GET request). 至少从视觉上看,似乎总是感觉AJAX加载会变慢(从技术角度讲,这是合理的,因为它使用另一个GET请求)。

Javascript should be reserved for interactive loading of content not pre-loading all your content. 应该保留Java脚本,以供交互式加载内容,而不是预加载所有内容。

If you really want to I can only recommend pre-loading images, but not content for other "pages" 如果您确实愿意,我只能推荐预加载图像,而不能推荐其他“页面”的内容

JavaScript adds so much potential that it is sometimes unwise to focus so much effort into creating a site that works perfectly for the few users who have it disabled. JavaScript增添了巨大的潜力,以至于有时花这么大的精力来创建一个网站,该网站对禁用它的少数用户来说是完美的,这是不明智的。

Generally during the planning stages of a site, I determine what features are needs and what features are simply enhancements, like animation or dynamic content loading. 通常,在网站的规划阶段,我确定需要哪些功能以及哪些功能仅仅是增强功能,例如动画或动态内容加载。 I put failsafes in place to accomodate needs , while restricting the rest of the content to visitors with JS enabled. 我设置了故障保险柜以适应需求 ,同时将其余内容限制为启用了JS的访问者。

I build my sites in a way that all of the essential content is still accessible to everyone in one way or another, but when it comes to "extras" that require JavaScript, I'm not going to waste my valuable time catering to the less than 1% my of visitors. 我建立我的方式,所有的基本内容是在这种或那种方式还是给大家访问网站,但是当涉及需要JavaScript来“临时演员”,我不会给我的宝贵时间浪费饮食要少超过我访客的1%

I would heed Mike Samuel's advice, as StackOverflow probably is not the best place to ask this kind of question. 我会听从Mike Samuel的建议,因为StackOverflow可能不是问此类问题的最佳地点。

First, you should ask yourself what the nature of your website will be like. 首先,您应该问自己自己网站的性质如何。 Relying on Javascript is rarely a good idea, since you will shut out some of your potential viewers (fortunately, less every day). 依靠Javascript很少是一个好主意,因为您将拒收一些潜在的观众(幸运的是,每天都会减少)。 On web apps such as Gmail, this makes sense, but you should never require your viewers to enable Javascript to do something essential to the site's function. 在Gmail等网络应用上,这样做是有道理的,但您永远不应要求查看器启用Javascript来执行网站功能所必需的操作。

It is also important to know the different technologies available and their place in website development. 了解不同的可用技术及其在网站开发中的地位也很重要。 Of course, the big 3 are: 当然,三大要素是:

  • HTML: Content HTML:内容
  • CSS: Presentation (this is probably where you would want to use animation (unless it's essential), not Javascript) CSS:演示(可能是您要使用动画的地方(除非是必不可少的),而不是Javascript)
  • Javascript: Interaction Javascript:互动

Though seldom practiced, I would advice making your website fully functional without using CSS, Javascript, or anything, and then go about adding those technologies. 尽管很少练习,但我建议您不使用CSS,Javascript或其他任何方法使您的网站完全正常运行,然后再添加这些技术。 That is a near-surefire way to make sure everyone can at least view your content. 这是确保每个人都至少可以查看您的内容的保证方式。

1) Personally I would ignore people without javascript. 1)就个人而言,我会忽略没有javascript的人。

2) Loading web parts is a personal flavour, so up to you if you want hardcore mode, however loading different web parts will potentially have variable/id/class name clashes, so be careful with them. 2)加载Web部件是个人喜好,因此,如果要使用硬核模式,则由您决定,但是加载不同的Web部件可能会导致变量/ ID /类名冲突,因此请小心使用它们。

Count on your users having javascript enabled, however do not allow security holes to be opened by those who would disable javascript. 指望您的用户启用了javascript, 但是不允许禁用javascript的用户打开安全漏洞。 Edit per @Hawken : Also, do not make content that would normally be visible to the user unreachable if javascript is disabled. 按@Hawken编辑 :另外,如果禁用了javascript,请不要使通常不会对用户可见的内容不可用。

Javascript is very versatile, and as such it is used in many different ways. Javascript非常通用,因此有许多不同的用法。 Javascript can be used to preload images into the client cache in order to have a more fluid interaction. 可以使用Javascript将图像预加载到客户端缓存中,以便进行更流畅的交互。

Javascript can be used to facilitate dynamic content replacing or overlapping other content on the page. Javascript可用于促进动态内容替换或重叠页面上的其他内容。

AJAX is great when you want to query the server and get data back without refreshing the whole page. 当您要查询服务器并获取数据而无需刷新整个页面时,AJAX非常有用。 There are other ways to do this, but they usually involve frameworks. 还有其他方法可以执行此操作,但是它们通常涉及框架。

AJAX is also good for when you want to dynamically load scripts or other data such as page sections from remote locations (same domain or from other domains - other domains can become complex.) 当您要从远程位置(同一域或其他域-其他域可能变得很复杂)动态加载脚本或其他数据(例如页面节)时,AJAX也非常有用。

As a rule of thumb, use javascript to enhance client side browsing . 根据经验,请使用javascript增强客户端浏览

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM