Web开发ABC

Web开发经常会是非常复杂的事情。今天，针对初学者，我希望向你介绍26个概念和技术，每个都对应英文字母的一个字母。听起来很奇怪吧，那让我们开始吧。

A——AJAX

AJAX是异步JavaScript和XML的意思，它是近些年你使用的所有流畅的Web应用背后的主要驱动力。AJAX作为一项技术来说，使用已经很普遍了。Gmail，Flickr等，你甚至还可以在WordPress的管理员面板里找到它。那么它到底是什么以及它如何实现的呢？

说到底它的核心是XMLHttpRequest，这允许在页面完全渲染之后发送请求并接收返回，而无需关联页面其它部分。这意味着web程序不需要为每一个操作而刷新整个页面。这提供了非常流畅，动感的类似桌面应用的用户体验。

相关阅读

How to Make AJAX Requests With Raw Javascript

24 Best Practices for AJAX Implementations

Submit A Form Without Page Refresh using jQuery

B——Browser（浏览器）

浏览器是能理解你的网站或应用杰作的结构的东西。它不仅仅可以用来上网，现代的浏览器还是一个多任务的平台。比如我安装的，带有IRC，FTP和同步信息到每个设备的功能。你可能已经知道，浏览器及时宝贵的开发工具，又会带来很多麻烦。每个必须保证他们的作品在每个浏览器下都看起来很完美的开发者应该很能理解这个痛苦。

相关阅读

13 Ways to Browser Test and Validate Your Work

Top 5 Ways to Browser-Test your Website

9 Most Common IE Bugs and How to Fix Them

C——CSS

CSS是前端开发的一把利剑。CSS是层叠样式表单的缩写，它是一门可以定义网页如何显示的语言。在Web开发最恐怖的年代，开发者经常把样式代码写到HTML源代码中去。CSS则非常好地将样式从内容中分离出来。

相关阅读

The 30 CSS Selectors you Must Memorize

30 CSS Best Practices for Beginners

Understanding CSS Specificity

CSS: Noob to Ninja – The Complete Video Series

D——DOM

DOM是文档对象模型的缩写，这是与HTML或XML文档交互的公认的约定。DOM API提供了用程序遍历和操作文档的功能。“DOM为分析后的HTML文档创建了一个相符的层级结构。子元素叫做节点或DOM节点”。如果你听到人家谈论DOM，其实他们是在说DOM脚本。这以前是描述通过JavaScript访问和操作DOM的术语。这是大多数你现在看到的现代网站和应用背后的技术。

相关阅读

JavaScript and the DOM Series: Lesson 1

Javascript and the DOM: Lesson 2

The Dom is a Mess – Lecture by John Resig

E——Events（事件）

现代Web应用是深层事件驱动的。那么什么是事件呢？你在网页上做的大多数事情都组成一个事件。鼠标放在链接上，点击按钮，按下Tab键等都是有效的事件。事件处理指的是当某个事件发生时执行一段指定的代码。这也是你必须掌握的现代web开发背后的基本概念。

相关阅读

JavaScript from Null: Chapter 5 – Events

JavaScript Events from the Ground Up

JavaScript from Null: Cross-Browser Event Binding

JavaScript Event Delegation in 4 Minutes

F——Firebug

工欲善其事，必先利其器。Web开发者也一样。一个很强大的工具就是Firebug。Firebug是一个可以贯穿你的工作的firefox扩展。它让你在运行中编辑和监控一个页面的方方面面。这里不能详细说它的特性，所以点击下面的链接吧。

相关阅读

10 Reasons Why You Should Be Using Firebug

How to Theme any CMS Using Firebug

Firebug: White to Black Belt

G——Grid（网格）

网格是页面结构化的可视化框架。它从一度发达的印刷工业移植过来，网格是当前Web开发中必不可少的一部分。有很多CSS框架可以用来创建基于网格的布局，对于非常大数量的页面和布局需要高强度的练习。

相关阅读

A Detailed Look at the 960 CSS Framework

A Closer Look At the Blueprint CSS Framework

Crash Course: YUI Grids CSS

Mastering the 960 Grid System

H——HTML

如果你现在在阅读这篇文章，你可能对它的概念有一些模糊的认识了。如果你被这个链接欺骗了，请继续阅读。顺便欢迎大家访问rockux，我们提供很多有关web开发的文章。HTML是超文本标记语言的缩写，是网页语言事实上的标准。HTML由几个组件或元素组成：标签，标签属性和标签中包含的内容。HTML标准的最新版本，HTML5，给我们带来了很多新特性，并解决了一些兼容性问题。

相关阅读

“HTML5 and You” Course

30 HTML Best Practices for Beginners

28 HTML5 Features, Tips, and Techniques you Must Know

The 10 HTML Tags Beginners Aren’t Using

I —— IE

呃，Internet Explore。这个名字唤起敬畏和愤怒。曾经它是一个英雄，带来了四个令人兴奋的新功能，推动了整个工业的向前发展，它也结束了浏览器停滞不前的历史。直到今天，它依然引领着前端开发者。经过十年的战争，IE的最后版本是9，它重新走向了正确的创新方向。不管你对IE的态度如何，它始终是Web开发过程逃脱不掉的。

相关阅读

The Things Internet Explorer Got Right

9 Most Common IE Bugs and How to Fix Them

Did Internet Explorer get the Box Model Right?

J —— JavaScript

JavaScript是基本web开发三件套中的最后一个成员。JavaScript，不是Java，是Web的脚本语言。有几十亿的网页在使用它，更重要的是网站支撑了这个说法。你通过JavaScript定义行为，管理事件，处理DOM并与服务器交互。归功于不可思议的类库的使用，如jQuery，对JavaScript的理解和知识逐年增长。我觉得可以很合适地说JavaScript是每个现代web开发者绝对必备的。

相关阅读

24 JavaScript Best Practices for Beginners

JavaScript from Null: Video Series

33 Developers you MUST Subscribe to as a JavaScript Junkie

K —— Keyword Optimization（关键词优化）

SEO只与Web开发有关系，但是即使是这样，web开发者掌握一些什么是SEO以及它能做什么之类的基本知识是非常重要的。关键词优化指的是为你的网站选择正确的关键词并且优化它们以使你的访客可以找到你的网站。而当你涉足所有SEO的原则时，记住：内容是王道。如果你拥有非常棒的SEO但是内容很差劲，用户可能会找到你但是很快就会离开。如果你有好的内容，用户会找到你并留下来。

相关阅读

The Only SEO Tools You’ll Ever Need

L —— Less

Less是一门带刺玫瑰式的样式语言。它们的网站描述到LESS扩展了CSS的动态行为，例如变量，混合类型，操作符和函数，我也倾向于赞成这种做法。LESS是CSS合成类固醇。是的它对于我来说听起来更好一些，但是你知道它是什么意思。它将动态语言的特性带到CSS中，因此使得样式表更加强大和容易管理。

相关阅读

How to Squeeze the Most out of LESS

You Need to Check out LESS.js

Never Type a Vendor Prefix Again

M —— MVC

模型视图控制模式，更为人所知的是MVC模式，是web开发中用得最多的模式之一。这是一个架构模式，它将web应用的每一部分分割到逻辑的大块以方便维护—— 模型处理数据，视图处理展现而控制器负责这两部分之间的数据流。

如果你使用现代web开发框架，你就使用了MVC。Ruby on Rails，Code Igniter和Zend Framework都使用这种模式。

相关阅读

MVC for Noobs

Create your First Tiny MVC Boilerplate with PHP

ASP.NET from Scratch: MVC

N —— node.JS

node.JS引领Web开发走进了一个新的时代。它使在非常快的VM（V8）引擎上运行JavaScript成为可能。这个思考模式的转移的结果可能不会马上就显现出来，但是过一段时间就会明显展现出它的优势了。
惊人的速度以及管理成千上万的并发IO事件是全世界JavaScript开发者主要的谈论点。

相关阅读

Learning Server-Side JavaScript with Node.js

Node.JS Official Site

O —— Object

面向对象编程因为它的灵活性已经被编程社区广泛接受。使用OOP你可以写很少行的代码，使得它更干净因此也更容易维护。但是究竟什么是对象呢？很难用一两句话去解释清楚，看下面的链接吧。

相关阅读

Object-Oriented PHP for Beginners

The Basics of Object-Oriented JavaScript

Wikipedia link

P —— PHP

PHP无疑是最流行的服务器端语言—— 它支撑着上百万，可能是几十亿的网页和应用。

虽然面对一系列的更新的，争论说更好的选择来写web应用程序，PHP不但生存下来了，而且来兴旺繁荣起来。WordPress，Joomla，Drupal，MediaWiki都使用PHP作为后端语言。一个主要的原因是部署容易并且你相对容易找到支持PHP的主机。

相关阅读

30+ PHP Best Practices for Beginners

Why You’re a Bad PHP Programmer

9 Useful PHP Functions and Features You Need to Know

Q —— Query（查询）

在我们文章中查询可以代表很多东西。查询语言用于向外部系统获取数据的接口。SQL是一个很好的例子，它从关系型数据库中获取信息。

另一方面，查询字符串是作为URL一部分传递给web应用的一块。这个数据可能是用户要访问验证ID或交易的页面中的任何东西。查询字符串被格式化为键值对。

相关阅读

CodeIgniter from Scratch: Search Results without Query Strings

“Popular Posts By Comment Count” SQL Query in WordPress

R —— Regular Expressions（正则表达式）

正则表达式提供一种灵活的方式来按指定的模式匹配文本中的字符串。它以一种特定的语言书写，并有解释器解析。所有现代语言都支持正则表达式。

相关阅读

Regular Expressions for Dummies: Screencast Series

You Don’t Know Anything About Regular Expressions: A Complete Guide

Advanced Regular Expression Tips and Techniques

S —— Source Control（源码控制）

源码控制是一个团队开发过程中流行的做法，无论他们关注哪一个方面—— 任何领域的程序员都使用源码控制。但是它到底是什么呢？简单地说，源码控制让团队开发人员在一个文件集合上工作，跟踪并标识每个成员的更改。每个版本的代码都可以合来比较，合并甚至是还原。

相关阅读

Terminal, Git, and GitHub for the Rest of Us: Screencast

A Visual Introduction to Git

Easy Version Control with Git

Getting the Hang of GitHub

T —— TDD（测试驱动开发）

这又是一个所有开发者中普遍的元素。TDD是测试驱动开发的简写，指的是代码和自动这个代码的测试用例同时进行的过程。这移除了许多乏味的软件测试并且鼓励开发者更多的测试。

相关阅读

The Newbie’s Guide to Test-Driven Development

Test-Driven JavaScript Development in Practice

How to Test your JavaScript Code with QUnit

U —— Unit Testing（单元测试）

单元测试是一系列的TFF，小的代码单元被测试以确保他们是可发布的。然而单元测试经常与OPP中的方法有关，通常它意味着程序的中可以独立的测试最小单元。

相关阅读

How to Test your JavaScript Code with QUnit

V —— VIM

VIM是一个非常极端的文本编辑器。Vim是免费，开源的，有无数的功能包可以选择。另一方面，它的学习曲线几乎是难以忍受的陡峭，如果没有好的资源，你可能会很长一段时间会迷失。点击下面的链接查看为什么它值得你去投靠。

相关阅读

25 Vim Tutorials, Screencasts, and Resources

Top 10 Pitfalls When Switching to Vim

Venturing into Vim

使用VIM的十大理由（以及系列教程）

W —— WordPress

WordPress以最小的博客系统为起点，但是它现在已经惊人地扩张了。它的可扩展性使得它被用作从CMS到电子商务系统等各种用途。它还拥有很多狂热爱好者和追随者，包括开发和设计人员，他们想把它做成你将来网站可以依赖的可靠平台。

相关阅读

How to Create a WordPress Theme from Scratch

Essential Plugins for Every WordPress Installation

Scaling WordPress for High-Traffic

Top 50 WordPress Tutorials

8个出色的WordPress SEO插件

X —— XSS

XSS表示跨站脚本（Cross-site scripting）。这是当你创建网站时可能需到的众多安全问题之一。XSS指的是加载带有恶意脚本的易受攻击的网站或程序，以提升权限或获取敏感信息的行为，通常是二者都有。

相关阅读

Can You Hack Your Own Site? A Look at Some Essential Security Considerations

CodeIgniter from Scratch: Security

5 Helpful Tips for Creating Secure PHP Applications

Y —— YUI

Yahoo用户界面库是一个JavaScript库，它简化了创建交互式网站就用的过程。与大多数现代的类库一样，它提供了DOM操作和立即可以使用的AJAX。虽然没有jQuery出名，YUI依然拥有非常庞大的用户基础，并且它一直在活跃的开发中。

相关阅读

An Introduction to YUI

2010 Through the Lens of YUI Theater

Z —— Z index

Z-Index是一个CSS属性，它定义了一个元素在页面上如何堆叠—— 它定义了一个元素离视口顶端有多近。数值大表明它将出现在数值小的元素的上面。然而这个属性可能相对专业，当你创建widgets或更复杂的网页设计时它立刻就会起作用。

相关阅读

Understanding CSS z-index

The Z-Index CSS Property: A Comprehensive Look

我们讲完了。希望你完整的看完了这些我收集起来的文章。 非常感谢阅读！

英文出处：net.tutsplus.com

作者：RockUX--WEB前端 （转载请注明出处链接）

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有