搜索
首页web前端html教程缩短网页应用开发的十大省时技巧(图文教程)_HTML/Xhtml_网页制作

在当今的开发环境之下,快即是好。

当今诸如“快速应用开发 ”,“敏捷软件开发 ”以及“异步JavaScript和XML “(如今我们甚至无法耐心地等待网页的重新载入)等流行词汇和术语让你见识到究竟身处于怎样一个快节奏的世界当中。

但是做事赶时间并不意味着你工作要加班加点——你工作时需要动些脑筋。此文,将为你提供缩短网页应用开发的十大省时技巧。

一、使用框架

logo of frameworks.

框架提取出了常规代码,给你编写网页应用提供了一个基本的构造和基础。

框架中一个非常典型的例子就是Rails,Rails就是Ruby编程语言的一个网页应用开发框架。通过为你提供预先编写好的代码程序包(举个例子,像用户输入验证方式)——你不仅仅节省了用Ruby编写你自己代码的时间——你也很清楚这些程序包已经受住了其他开发人员的测试以及检验,这可以在广度测试时为你减少不少麻烦,另外还可以避免一些因缺少测试而导致潜在的漏洞。

同样的好处对于使用诸如MooTools的JavaScript框架也是适用的。这些框架提供给你的一些类方法都是由核心开发者和社区提供,并在诸多浏览器下经受广泛测试的考验。客户端脚本语言框架还有jQuery,Prototype JS,以及YUI。如果你想用一些非主流的JS框架,你可以看看这个极具潜力的JavaScript框架 清单。

对于服务器端的框架,你可以考虑CakePHP ,CodeIgniter ,Zend ,或者symphony。如果你喜欢VB以及C#之类微软支持的语言,你可以考虑.Net框架 。

你甚至是可以使用像960Grid 或者BluePrint这样的CSS框架来快速编写和规范你自己风格的页面结构。

二、使用集成开发环境

IDE logos.

当然,你可以只用一个Notepad这样的文本编辑器和FTP就可创建网页应用及其页面。但是我想大多数人都认为,这并不是一个可用在开发复杂和健壮网站项目之上的明智方法。

集成开发环境 (IDE),为你准备了创建和管理大型网站项目所需要的工具集合。集成开发环境的功能一直在变,但它们都有如下一些常见的功能

1、项目管理以及团队协作功能。

2、调试以及诊断功能。

3、语法提示以及自动完成功能(IDE会猜测你想写的语法)

4、语法高亮

5、内置FTP,能同步本地和远程主机上的文件

“IDE”这个词可能有些花哨,有些人还对此不太熟悉,但是大数据人应该听说过Adobe的Dreamweaver。Dreameweaver就可以看成是一个集成开发环境。因为它含有上面提到的一些功能,帮你更快的编写代码。(他通常适用于前端的制作。但是它也支持服务器端的语言,像PHP和ASP.NET)

如今网上有大量的IDE,你所要做的就是为你自己(或者你的团队)挑选一个。像一些流行的,功能齐全的IDE,如Eclipse, Komodo IDE, NetBeans, Visual Studio, 以及Aptana Studio.

三、适当的模块化

模块化是创建易于维护和扩展复杂应用的关键之所在。本质上这意味着代码要以小的部件来编写,而不是将所有代码写成一个大文件。

模块化开头有其自身的时间成本(因为你必须在设计文件结构方面花费不少心思。)但是,当你需要变更某一部件或者想要扩展你的应用时,这会为你节省掉不少时间。

模块化也使得bug限制在模块之内,如果有地方发生问题,你会很快的找到问题所在。

但是模块化的滥用会导致代码的臃肿和太多不必要的include语句,这会极大的拖慢整个应用的运行速度。因此在模块化程度过高和过低之间,我们需要到一个好的平衡点。

一些模块化设计模式就包含MVC 和PAC模式。

四、使用浏览器工具高效排除前端疑难问题

Firebug screen shot.

没有处理比跨浏览器的兼容和解析问题更糟糕的事情了。这杆子事会使你疯掉,它给你带来的挫败感差不多让你觉得不砸掉点东西难解心头之恨。但是集成进浏览器的调试工具会使得寻找和诊断前端问题变得分为迅速和高效。

Firebug 和Web Developer 是绝对必要的省时利器,它们已经成了前端网页开发者的必备工具。Firbug可以轻松的查看DOM,以了解其原理,以及可以在运行中调整CSS/HTML/JS, 除此之外,也可以帮你调试和注释(profile)你的JavaScrpt代码,帮你弄起初究竟是什么状况导致了你的脚本运行中断。Web Developer给你提供了一系列有用的工具,像有的工具可以让你点击一个页面元素就可以看到有哪些样式声明影响了该元素,也可以使你很方便的禁用 JavaScript和CSS,让你了解在没有JavaScript或者CSS的情况下, 你的页面是如何工作的。

如果你需要在IE浏览器下调试,你可以尝试尝试IE开发者工具条 。它在功能上跟Firebug和Web Developer很相似。如果你想找更多的集成在浏览器内的IE调试工具来帮你i节省调试时间,你可以点击这个链接。

五、代码重用

如果你发现你自己老是在做重复的事情,这时候你应该反思反思你的代码结构了。考虑学习一下常见的设计模式它会帮助你创建可重用的灵活的方法,函数,以及对象。

打个比方,如果,你需要频繁的链接到数据库,你可能需要创建一个数据库的访问类,来处理数据库的链接,查询以及数据的提交。

六、 在线协作以及追踪项目状态

Basecamp screen shot.

实际上——你工作并不孤单。无论你是为一个开发团队工作或是为某人工作(这个人可能是你上司或者你的客户),你都应该充分享受在线协作和追踪项目状态说给你带来的好处。

你在行政性任务上花费的时间越少,或者在在无穷无尽的会议上花费的时间越少(或者,更糟的,是那种需要出差的面对面会议)——你在代码上花费的时间就越多。

像Basecamp, Lighthouse, 和activeCollab 这类工具就给你提供了一站式团队协作服务,让你随时追踪项目的状态,你也可以设置项目的目标和里程碑(milestones)——这样所有人就可以自动同步,为你省下频繁回复电子邮件的时间,你也无需在进度确认会议上花费大量无用时间。

这些工具l另外会帮助你区分事情轻重,确保了所有的事情都在一个集中的地方组织和记录下来。

七、代码的自动格式化和标准化

你需要将你的所有代码格式标准化,这样做不仅仅这是一个很好的习惯,而且日后你一旦需要回来看这些代码,这会帮你很快的理解这些代码。

代码的自动格式化可以让你一键格式化你所有的代码,而不是一行一行来做这事,这也确保了代码编写的一致性。自动的格式化也减少了手动修改产生错误的风险、

我们有许多工具来帮助我们做这事,很多是网络版的工具 。对于CSS而言,一个流行的开源解决方案就是CSSTidy (Clean CSS is an CSSTidy的在线版本)。对于HTML我们有HTML Tidy。

对于脚本,我们有PHP Source Code Formatter, Ruby Script Beautifier, 和Code Beautifier Plus (这个工具是用来格式化 C#, ActionScript, and Java).

八、在需求收集和规划阶段多花时间

预防远胜过补救。或许某些思想学派的人物强调不要在计划上浪费时间——确保你已经收集到了你需要知道的所有信息,在做功课方面花费必要时间依然是必要的。如果在需求收集方面没做足功课会导致功能泛滥(feature Creep) ,原因就是各种未曾预料到的功能需求

九、使用已经编写好的代码

PHP Classes Repository Screen shot.

古人以及帮我们发明了车轱辘,所以我们也没必要亲自再捣鼓出车轱辘来。如果在某个地方看到某个感兴趣的功能,其他人极有可能已经为你写好了代码(嗯,不仅仅是为你,而是为我们大家。)对于PHP而言, PHP Classes Repository为你提供了大批的类和脚本供你下载和使用。Hot Scripts则提供了其他语言的各种脚本。如果你只是想要一些小的代码段,你可以去devSnippets 上面淘淘宝。

注意:只有当你具备充足的经验,能分辨出好代码和差代码,上面的这个办法才会真正帮你大忙。否则你会发现你最终成品中代码bug丛生,书写混乱。

十、精简功能

你必须对网页应用的某些功能做一个评估,以判断在这个功能上面的时间投入是否值得。

你的用户真的需要一个并不经常更新的内容管理系统为每一个类别的文章提供一个自定义的RSS输出吗?你真的需要一个网站样式转换器来帮你检测到用户地理位置哪里,然后将网站呈现不同的风格。

编写网站功能就是一场艰苦的战斗 ,不要在对终端用户无用的功能上耗费开发时间,况且这些功能而且会使用户界面复杂化。

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
< datalist>的目的是什么。 元素?< datalist>的目的是什么。 元素?Mar 21, 2025 pm 12:33 PM

本文讨论了html< datalist>元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

> gt;的目的是什么 元素?> gt;的目的是什么 元素?Mar 21, 2025 pm 12:34 PM

本文讨论了HTML< Progress>元素,其目的,样式和与< meter>元素。主要重点是使用< progress>为了完成任务和LT;仪表>对于stati

< meter>的目的是什么。 元素?< meter>的目的是什么。 元素?Mar 21, 2025 pm 12:35 PM

本文讨论了HTML< meter>元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了< meter>从< progress>和前

< iframe>的目的是什么。 标签?使用时的安全考虑是什么?< iframe>的目的是什么。 标签?使用时的安全考虑是什么?Mar 20, 2025 pm 06:05 PM

本文讨论了< iframe>将外部内容嵌入网页,其常见用途,安全风险以及诸如对象标签和API等替代方案的目的。

视口元标签是什么?为什么对响应式设计很重要?视口元标签是什么?为什么对响应式设计很重要?Mar 20, 2025 pm 05:56 PM

本文讨论了视口元标签,这对于移动设备上的响应式Web设计至关重要。它解释了如何正确使用确保最佳的内容缩放和用户交互,而滥用可能会导致设计和可访问性问题。

如何使用HTML5表单验证属性来验证用户输入?如何使用HTML5表单验证属性来验证用户输入?Mar 17, 2025 pm 12:27 PM

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

HTML5中跨浏览器兼容性的最佳实践是什么?HTML5中跨浏览器兼容性的最佳实践是什么?Mar 17, 2025 pm 12:20 PM

文章讨论了确保HTML5跨浏览器兼容性的最佳实践,重点是特征检测,进行性增强和测试方法。

我如何使用html5< time> 元素以语义表示日期和时间?我如何使用html5< time> 元素以语义表示日期和时间?Mar 12, 2025 pm 04:05 PM

本文解释了HTML5< time>语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
2 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具