web开发105错误
This article is part of a web development series from Microsoft. Thank you for supporting the partners who make SitePoint possible.
本文是Microsoft的Web开发系列的一部分。 感谢您支持使SitePoint成为可能的合作伙伴。
There seems to be endless choices regarding how to accomplish the same task – to develop a website that works in today’s modern web. Web developers have to choose a web hosting platform and underlying data storage, which tools to write HTML, CSS, and JavaScript in, how design will be implemented, and what potential JavaScript libraries/frameworks to include. Once choices are narrowed down, the online world is filled with articles, forums, and samples that provide tips for making a better web experience. Yet no matter which path is taken, all developers are susceptible to mistakes. Although some mistakes will be related to a specific approach, there are challenges shared among all web developers. So through research, experience, and recent observations, I thought I would share a list I compiled of ten common mistakes I see web developers make – and how to avoid them.
关于如何完成相同的任务，似乎有无数的选择–开发可以在当今现代网络中运行的网站。 Web开发人员必须选择一个Web托管平台和基础数据存储，使用哪种工具编写HTML，CSS和JavaScript，如何实现设计以及要包括哪些潜在JavaScript库/框架。 缩小选择范围后，在线世界将充满文章，论坛和示例，这些文章提供了改善网络体验的提示。 但是，无论走哪条路，所有开发人员都容易出错。 尽管某些错误与特定方法有关，但所有Web开发人员都面临着共同的挑战。 因此，通过研究，经验和最近的观察，我想我会分享一份清单，其中列出了我看到的Web开发人员常犯的十个常见错误以及如何避免这些错误。
The following list is in no particular order.
以下列表没有特殊顺序。
1)编写Old School HTML (1) Writing Old School HTML)
Mistake : The early days of the internet had much less options for markup than we do today. However, old habits die hard, and many still write their HTML as if we were still in the 20th century. Examples here are using <table> elements for layout, <span> or <div> elements when other semantic-specific tags would be more appropriate, or using tags that are not supported in current HTML standard such as <center> or <font>, or spacing items on a page with a large number of entities.
错误 ：互联网的早期标记选项比今天少得多。 但是， 旧习惯很难改掉 ，许多习惯仍然像在20世纪一样写HTML。 这里的示例使用<table>元素进行布局，使用<span>或<div>元素(如果其他特定于语义的标签更合适)，或者使用当前HTML标准不支持的标签(例如<center>或<font> ，或在页面上用大量 分隔项目 实体。
Impact : Writing last decade’s HTML can result in over-complicated markup that will behave inconsistently across multiple browsers. And it’s not necessary in more recent modern browsers like Microsoft Edge and even past versions of Internet Explorer (11, 10, 9).
影响 ：编写近十年HTML可能会导致标记过于复杂，从而在多个浏览器中的行为会不一致。 而且，在较新的现代浏览器(例如Microsoft Edge)甚至Internet Explorer的早期版本(11、10、9)中，都没有必要。
How to avoid : Stop using the <table> element for layout of content, and limit usage for it to displaying tabular data. Get acquainted with the current markup options available such as seen at whatwg.org. Use HTML to describe what the content is, not how it will be displayed. To display your content correctly, use CSS ( https://www.w3.org/Style/CSS/).
如何避免 ：停止将<table>元素用于内容布局，并将其用法限制为显示表格数据。 熟悉当前可用的标记选项，例如在whatwg.org上看到的。 使用HTML描述内容是什么，而不是如何显示。 要正确显示您的内容，请使用CSS( https://www.w3.org/Style/CSS/ )。
2)“它可以在我的浏览器中工作……” (2) “It Works in My Browser…”)
Mistake : A developer may be fond of a particular browser or really despise one, and might primarily test web pages with that bias in-view. It is also possible that code samples found online may be written without factoring how it would render in other browsers. Also, some browsers have different default values for styles.
错误 ：开发人员可能会喜欢某个特定的浏览器，或者实际上是鄙视一个浏览器，并且可能主要在这种偏见的情况下测试网页。 在不考虑其在其他浏览器中的呈现方式的情况下，也可以编写在线找到的代码示例。 此外，某些浏览器的样式默认值也不同。
Impact : Writing a browser-centric site will likely result in very poor quality when displayed in other browsers.
影响 ：在其他浏览器中显示时，编写以浏览器为中心的网站可能会导致质量很差。
How to avoid : It would not be practical to test web pages in every browser & version during development. However, having a regular interval of checking how your site will appear in multiple browsers is a good approach. Nowadays free tools to help are readily available regardless of your preferred platform: free VMs, site scanners. Sites such as http://browsershots.org/ or https://www.browserstack.com/show snapshots of how a given page would render over multiple browsers/versions/platforms. Tools such as Visual Studio can also invoke multiple browsers to display a single page you are working on. When designing with CSS, consider “resetting” all the defaults as shown at meyerweb.com.
如何避免 ：在开发过程中在每个浏览器和版本中测试网页都是不切实际的。 但是，定期检查您的网站在多种浏览器中的显示方式是一个很好的方法。 如今，无论您喜欢哪种平台，都可以使用免费的帮助工具： 免费的VM ， 站点扫描仪 。 诸如http://browsershots.org/或https://www.browserstack.com/之类的网站显示了给定页面如何在多个浏览器/版本/平台上呈现的快照。 诸如Visual Studio之类的工具还可以调用多个浏览器来显示您正在处理的单个页面。 使用CSS进行设计时，请考虑“重置”所有默认值，如meyerweb.com所示。
If your site is using any CSS features created specific for a browser, be cautious as to how you will approach vendor prefixes such as -webkit-, -moz-, or -ms-. For guidance on industry trends in this regard, it would be worth your time to examine the following references:
如果您的站点使用为浏览器创建的任何CSS功能，请谨慎对待如何使用供应商前缀，例如-webkit- ，- -moz-或-ms- 。 对于这方面的行业趋势指导，值得您花时间研究以下参考资料：
Microsoft Edge Dev Blog: A break from the past, part 2: Saying goodbye to ActiveX, VBScript, attachEvent
Microsoft Edge开发博客： 摆脱过去，第2部分：向ActiveX，VBScript，attachEvent告别
QuirksMode.org: CSS vendor prefixes considered harmful
QuirksMode.org：CSS 供应商前缀被认为是有害的
Bruce Lawson: On Internet Explorer supporting -webkit- vendor prefixes
布鲁斯·劳森(Bruce Lawson)： 在支持-webkit-供应商前缀的Internet Explorer上
While the above references explain a movement away from vendor prefixes and why, this site provides practical suggestions on how to work through this today.
尽管以上参考文献解释了偏离供应商前缀的原因以及原因， 但是本站点提供了有关如何解决此问题的实用建议。
3)格式错误 (3) Bad Form)
Mistake : Prompting a user to provide any information (especially when entered into a text field) and assuming the data will be received as intended.
错误 ：提示用户提供任何信息(尤其是在输入文本字段时)，并假定将按预期接收数据。
Impact : Many things can (and likely will) go wrong when user entry is trusted. Pages may fail if required data is not provided, or data received is not compatible with an underlying data scheme. Even more serious is the intentional violation of the site’s database, perhaps through Injection attacks (see OWASP: Top 10 2013-A1-Injections).
影响 ：当信任用户输入时，很多事情都会(而且很可能会出错)。 如果未提供所需的数据，或者接收到的数据与基础数据方案不兼容，则页面可能会失败。 更严重的是可能是通过注入攻击故意破坏了站点的数据库(请参阅OWASP：2013-A1-Injections排名前10位)。
How to avoid : The first bit of advice here is to make sure it is clear to the user what type of data you are looking for. These days, asking for an address could result in either a business, home, or even email address! In addition to be specific, take advantage of data validation techniques available in today’s HTML as seen at this article. No matter how data is validated on the browser side, be sure it is always validated on the server-side as well. Never allow a concatenated T-SQL statement to use data from user entry without confirmation the each field is the type of data it should be.
如何避免 ：这里的第一点建议是确保用户清楚所要查找的数据类型。 如今，要求提供地址可能会导致公司，家庭甚至是电子邮件地址！ 除了具体说明之外，还可以利用本文中所见的当今HTML中可用的数据验证技术。 无论在浏览器端如何验证数据，请确保始终也在服务器端验证数据。 在未确认每个字段均为应为数据类型的情况下，切勿允许串联的T-SQL语句使用用户输入中的数据。
4)肿胀的React (4) Bloated Responses)
Mistake : The page is filled with many high quality graphics and/or pictures, scaled down with use of img element height and width attributes. Files linked from the page such as CSS and JavaScript are large. The source HTML markup may also be unnecessarily complex and extensive.
错误 ：页面上填充了许多高质量的图形和/或图片，并使用img元素的height和width属性按比例缩小。 从页面链接的文件(例如CSS和JavaScript)很大。 源HTML标记也可能不必要地复杂和广泛。
Impact: The time to have a page completely render becomes long enough for some users to give up or even impatiently re-request the whole page again. In some cases, errors will occur if page processing is waiting too long.
影响：页面完全呈现的时间变得足够长，以至于某些用户放弃甚至不耐烦地再次请求整个页面。 在某些情况下，如果页面处理等待时间过长，则会发生错误。
How to avoid : Don’t adopt the mindset that access to the internet is getting faster and faster – thus allowing for bloated scenarios. Instead, consider everything going back and forth from the browser to your site as a cost. A major offender in page bloat is images. To minimize the cost of images that slow down page loads, try these three tips:
避免方法 ：不要采用这样的心态，即互联网的访问越来越快，因此出现了ated肿的情况。 取而代之的是，考虑从浏览器到您的站点的往返费用。 页面膨胀的主要罪犯是图像。 为了使降低页面加载速度的图像成本降至最低，请尝试以下三个技巧：
Ask yourself: “Are all my graphics absolutely necessary?” If not, remove unneeded images. You can scan your site here for suggestion on which images to compress.
问问自己：“我的所有图形都绝对必要吗？” 如果不是，请删除不需要的图像。 您可以在此处扫描您的网站，以获取有关压缩哪些图像的建议。
Minimize the file size of your images with tools such as Shrink O’Matic or RIOT.
使用Shrink O'Matic或RIOT之类的工具最小化图像的文件大小。
Preload images. This will not improve the cost on initial download, but can make other pages on site that use the images load much faster. For tips on this, see this article.
预加载图像。 这不会提高初始下载的成本，但会使站点上使用该图像的其他页面加载得更快。 有关此方面的提示，请参阅本文 。
Another way to reduce cost is to minify linked CSS and JavaScript files. There are plenty of tools out there to assist in this endeavor such as Minify CSS and Minify JS.
降低成本的另一种方法是最小化链接CSS和JavaScript文件。 有很多工具可以帮助完成此任务，例如Minify CSS和Minify JS 。
Before we leave this topic, strive to be current with HTML (see mistake #1) and use good judgment when using <style> or <script> tags in HTML.
在我们离开本主题之前，请努力与HTML保持同步(请参阅错误＃1)，并在HTML中使用< style>或< script>标记时使用良好的判断力。
5)创建应该起作用的代码 (5) Creating Code That Should Work)
Mistake : Whether it is JavaScript or code running on the server, a developer has tested and confirmed that it works, thereby concluding it should still work once deployed. The code executes without error trapping, because it worked when it was tested by developer.
错误 ：无论是JavaScript还是服务器上运行的代码，开发人员都进行了测试并确认它可以工作，因此得出结论，一旦部署，它仍然可以工作。 该代码的执行没有错误陷阱，因为它是在开发人员测试时起作用的。
Impact : Sites without proper error checking may reveal the errors to the end users in an ugly way. Not only can the user experience be dramatically impacted, the type of error message content could provide clues to a hacker as to how to infiltrate a site.
影响 ：没有适当错误检查的网站可能会以丑陋的方式向最终用户显示错误。 错误消息内容的类型不仅会极大地影响用户体验，而且还可以为黑客提供有关如何渗透网站的线索。
How to avoid : To err is human, so bring that philosophy to coding. With JavaScript, be sure to implement good techniques to prevent errors as well as catch them. Although this article addresses JavaScript coding for Windows Apps, the majority of the topics apply to web development too, and it is full of good tips! Another aid to help create solid code that can hold up well to future changes in code is unit testing (see this Wikipedia article).
如何避免 ：犯错是人的，所以将这种哲学带入编码中。 使用JavaScript，请确保实施好的技术来防止错误并捕获错误。 尽管本文讨论了Windows AppsJavaScript编码，但是大多数主题也适用于Web开发，并且其中包含许多不错的技巧！ 有助于创建可靠的代码以应对未来代码更改的另一项帮助是单元测试(请参阅Wikipedia文章 )。
Failures in server-side code should be caught without the user seeing any of the nerdy details. Reveal only what is necessary, and be sure to set up friendly error pages for things like HTTP 404s (see this Wikipedia article).
服务器端代码中的错误应该在用户没有看到任何讨厌的细节的情况下被发现。 仅显示必要的内容，并确保为HTTP 404之类的内容设置友好的错误页面(请参阅此Wikipedia文章 )。
6)编写分叉代码 (6) Writing Forking Code)
Mistake : With the noble notion of supporting all browsers and versions, a developer creates code to respond to each possible scenario. The code becomes a heap of if statements, forking in all sorts of direction.
错误 ：开发人员支持所有浏览器和所有版本，这是崇高的观念，开发人员创建了代码以响应每种可能的情况。 该代码成为if语句的堆，在各种方向上分叉。
Impact : As new versions of browsers update, management of code files become bulky and difficult to manage. And as mentioned in #1, it’s increasingly unnecessary.
影响 ：随着新版本浏览器的更新，代码文件的管理变得庞大且难以管理。 就像＃1中提到的那样，它变得越来越不必要 。
How to avoid : Implement feature detection in code versus browser/version detection. Feature detection techniques not only dramatically reduce the amount of code, it is much easier to read and manage. Consider using a library such as Modernizr which not only helps with feature detection, it also automatically helps provide fallback support for older browsers not up to speed with HTML5 or CSS3.
避免方法 ： 在代码中实现功能检测，而不是浏览器/版本检测。 特征检测技术不仅大大减少了代码量，而且更易于阅读和管理。 考虑使用诸如Modernizr之类的库，它不仅可以帮助进行功能检测，而且还可以自动为不支持HTML5或CSS3的旧版浏览器提供后备支持。
7)无响应的设计 (7) Designing Unresponsively)
Mistake : Site development assumes viewing in the same size monitor as the developer/designer.
错误 ：网站开发假定在与开发人员/设计人员相同的大小的监视器中进行查看。
Impact : When viewing the site in mobile devices or very large screens, the user experience suffers with either not being able to see important aspects of the page or even preventing navigation to other pages.
影响 ：在移动设备或超大屏幕上查看网站时，用户体验会因无法查看页面的重要方面甚至阻止导航到其他页面而受到影响。
How to avoid : Think responsively. Use responsive design ( Wikipedia) or ( A List Apart article) in your sites. Here are some practical tutorials on it including responsive images. A very popular library ready to serve in this area is Bootstrap.
如何避免 ：React敏捷。 在您的网站中使用响应式设计( Wikipedia )或( A List Apart文章 )。 这里有一些实用的 教程 ，其中包括响应式图像 。 Bootstrap是准备在此区域中使用的非常受欢迎的库。
8)制作毫无意义的页面 (8) Making Meaningless Pages)
Mistake : Producing public facing pages with content that might be very useful, but not providing any hints to search engines. Accessibility features are not implemented.
错误 ：制作面向公众的网页，其内容可能非常有用，但没有向搜索引擎提供任何提示。 辅助功能未实现。
Impact : Pages are not as discoverable through search engines and therefore may receive little or no visits. The page content may be very cryptic to users with impaired vision.
影响 ：无法通过搜索引擎发现页面，因此页面访问很少或没有访问。 页面内容对于视力障碍的用户可能非常隐秘。
How to avoid : Use SEO (search engine optimizations) and support accessibility in HTML. Regarding SEO, be sure to add tags to provide meaning to a page with keywords and description. A good write up on that is found at About Tech. To enable a better accessibility experience, be determined to provide an alt="your image description" attribute in each of your img or area tags. Of course, there is more to do and further suggestions can be investigated at About Tech. You can also test a public web page at Cynthia Says to see if it is compliant with Section 508.
避免方法 ：使用SEO(搜索引擎优化)并支持HTML中的辅助功能。 关于SEO，请确保添加标签以为具有关键字和描述的页面提供含义。 关于技术可以找到很好的文章。 为了提供更好的可访问性体验，请确定在每个img或area标签中提供alt="your image description"属性。 当然，还有更多事情要做，可以在About Tech上调查更多建议。 您也可以在Cynthia Says上测试公共网页，以查看其是否符合508节的规定 。
9)生产站点太刷新 (9) Producing Sites That Are Too Refreshing)
Mistake : Creating a site that requires full refreshes of a page for each interaction.
错误 ：创建一个网站，每次互动都需要刷新页面。
Impact : Similar to bloated pages (see mistake #4), performance of page loading time is affected. The user experience lacks fluidity, and each interaction could cause a brief (or long) resetting of the page.
影响 ：类似于肿的页面( 请参见错误＃4 )，页面加载时间的性能会受到影响。 用户体验缺乏流畅性，每次交互都可能导致页面短暂(或长时间)重置。
How to avoid : One quick way to avoid this is by determining if posting back to the server is truly required. For example, client-side script can be used to provide immediate results when there is no dependency for server-side resources. You can also embrace AJAX techniques ( Wikipedia) or go further with a single-page application “SPA” ( Wikipedia) approach. Popular JavaScript libraries/frameworks are available to make adoption of these methods much easier, such as JQuery, KnockoutJS, and AngularJS.
避免方法 ：一种避免这种情况的快速方法是确定是否确实需要发回服务器。 例如，当不依赖服务器端资源时，可以使用客户端脚本提供即时结果。 您还可以采用AJAX技术( Wikipedia )或使用单页应用程序“ SPA”( Wikipedia )进行更进一步的处理。 可以使用流行JavaScript库/框架来简化这些方法的采用，例如JQuery ， KnockoutJS和AngularJS 。
10)工作太多 (10) Working Too Much)
Mistake : A developer spends a long time creating web content. Time might be spent doing repetitive tasks, or simply typing a lot.
错误 ：开发人员花费大量时间来创建Web内容。 可能会花费时间来执行重复的任务，或者只是打字很多。
Impact: Time for initial web site launch or subsequent updates is too lengthy. Value of the developer diminishes when it appears other developers are doing comparable work in less time and with less effort. Manual labor is prone to mistakes, and troubleshooting mistakes takes even more time.
影响：初始网站启动或后续更新的时间太长。 当其他开发人员似乎在更少的时间和更少的精力下进行可比的工作时，开发人员的价值就会降低。 体力劳动容易出错，而对错误进行故障排除会花费更多时间。
How to avoid : Explore your options. Consider using new tools or new process techniques for every stage of development. For example, how does your current code editor compare to Sublime Text or Visual Studio? Regardless of what code editor you are using, have you recently dived into its features? Perhaps a small investment of your time perusing the documentation could unveil a new way to do something that could save hours & hours of time later. For example, note how an extension to Visual Studio can increase productivity for web developers as seen in this post.
如何避免 ：探索您的选择。 考虑在开发的每个阶段使用新工具或新Craft.io技术。 例如，您当前的代码编辑器与Sublime Text或Visual Studio相比如何？ 无论您使用什么代码编辑器，您最近是否都沉迷于其功能？ 也许您花费很少的时间仔细阅读文档，可能会发现一种新的方法来完成某项工作，从而可以节省数小时的时间。 例如，请注意这篇文章中对Visual Studio的扩展如何提高Web开发人员的生产力。
Don’t miss out on tools available on the web to help! For example, check out the tools at dev.modern.ie to simplify testing (across multiple platforms and devices) and troubleshooting.
不要错过网上可用的工具！ 例如，在dev.modern.ie上签出工具以简化测试(跨多个平台和设备)和故障排除。
You can also help reduce time and mistakes by automating processes. An example of this is using a tool like Grunt that can automate things such as the minifying of files (see mistake #4). Another example is Bower which can help manage libraries/frameworks (see mistake #9).
您还可以通过自动化流程来帮助减少时间和错误。 一个例子是使用诸如Grunt之类的工具，该工具可以使诸如文件缩小之类的事情自动化( 请参见错误＃4 )。 另一个例子是Bower ，它可以帮助管理库/框架( 请参见错误9 )。
How about the web server itself? With the help of services such as Microsoft Azure Web Apps, you can quickly create a site for virtually any development scenario that can easily scale with your business!
Web服务器本身如何？ 借助Microsoft Azure Web Apps等服务 ，您可以为几乎可以轻松随您的业务扩展的几乎所有开发方案快速创建一个网站！
摘要 (Summary)
By identifying common mistakes, web developers can eliminate much frustration that others have already endured. Not only is it important to acknowledge, but when we understand the impact of a mistake and take measures to avoid it, we can create a development process catered to our preferences – and do so with confidence!
通过识别常见错误，Web开发人员可以消除其他人已经忍受的挫败感。 承认不仅重要，而且当我们了解错误的影响并采取措施避免错误时，我们可以创建适合我们偏好的开发流程，并充满信心地做到这一点！
JavaScript的更多动手实践 (More Hands-on with JavaScript)
This article is part of the web development series from Microsoft tech evangelists on practical JavaScript learning, open source projects, and interoperability best practices including Microsoft Edge browser and the new EdgeHTML rendering engine.
本文是Microsoft技术传播者开发的Web开发系列文章的一部分，内容涉及实用JavaScript学习，开源项目以及互操作性最佳实践，包括Microsoft Edge浏览器和新的EdgeHTML呈现引擎 。
We encourage you to test across browsers and devices including Microsoft Edge – the default browser for Windows 10 – with free tools on dev.modern.IE:
我们鼓励您使用dev.modern.IE上的免费工具跨浏览器和设备进行测试，包括Microsoft Edge(Windows 10的默认浏览器)：
Scan your site for out-of-date libraries, layout issues, and accessibility
Coding Lab on GitHub: Cross-browser testing and best practices
In-depth tech learning on Microsoft Edge and the Web Platform from our engineers and evangelists:
我们的工程师和宣传人员在Microsoft Edge和Web平台上进行了深入的技术学习：
Microsoft Edge Web Summit 2015 (what to expect with the new browser, new supported web platform standards, and guest speakers from the JavaScript community)
Microsoft Edge Web Summit 2015 (新浏览器，新支持的网络平台标准以及来自JavaScript社区的嘉宾演讲者会期待什么)
Woah, I can test Edge & IE on a Mac & Linux! (from Rey Bango)
哇，我可以在Mac和Linux上测试Edge和IE！ (来自Rey Bango)
Advancing JavaScript without Breaking the Web (from Christian Heilmann)
在不中断网络的情况下推进JavaScript (来自Christian Heilmann)
The Edge Rendering Engine that makes the Web just work (from Jacob Rossi)
使Web正常工作的Edge渲染引擎 (来自Jacob Rossi)
Unleash 3D rendering with WebGL (from David Catuhe including the vorlon.JS and babylonJS projects)
使用WebGL释放3D渲染 (来自David Catuhe，包括vorlon.JS和babylonJS项目)
Hosted web apps and web platform innovations (from Kevin Hill and Kiril Seksenov including the manifold.JS project)
托管的Web应用程序和Web平台创新 (来自Kevin Hill和Kiril Seksenov，包括歧管 .JS项目)
Web平台的更多免费跨平台工具和资源： (More free cross-platform tools and resources for the Web Platform:)
翻译自: https://www.sitepoint.com/10-common-mistakes-web-developers-make/
web开发105错误
1049
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
