HBuilder对比Dreamweaver

admin管理员组

文章数量:1532656

2024年1月20日发(作者：)

HBuilder、Dreamweaver开发工具比较

摘要：Hbuilder、Dreamweaver都是提供给开发的代码编辑器，其目的都是为了节约开发时间及成本，笔者就此两款开发工具的优势，缺点等方面进行比较。

一、软件背景

1、HBuilder

HBuilder是Dcloud（数字天堂）推出一款支持HTML5的Web开发IDE。“快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块及很多配套，HBuilder能大幅提升HTML、js、css的开发效率。

2、Adobe Dreamweaver

Adobe Dreamweaver，简称“DW”，中文名称 "梦想编织者"，是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，DW是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器器限制的充满动感的网页。

Macromedia公司成立于1992年，2005年被Adobe公司收购。

Adobe Dreamweaver使用所见即所得的接口，亦有HTML（标准通用标记语言HTML）编辑的功能。它有Mac和Windows系统的版本。随Macromedia被Adobe收购后，Adobe也开始计划开发Linux版本的Dreamweaver了。 Dreamweaver自MX版本开始，使用了Oprea的排版引擎"Presto" 作为网页预览。

二、软件对比

1、Adobe Dreamweaver

1.1 优点



Dreamweaver可以用最快速的方式将Fireworks，FreeHand，或Photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。除此之外，只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。



使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称，Dreamweaver 会自动更新所有链接。使用支援文字、HTML码、HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。



当你正在Dreamweaver开发的时候，不需要调用外部浏览器即可对整个项目进行快速预览，只需要点击面板中的实时视图即可。还可以使用工具自带的设计器快速完成对网页的布局，当你对你的布局满意的时候，点击源码，将源码保存即可。

1.2 缺点



难以精确达到与浏览器完全一致的显示效果也就是说您在所见即所得网页编辑器中制作的网页放到浏览器中是很难完全达到您真正想要的效果，这一点在结构复杂一些的网页（如分帧结构、动态网页结构）中可以体现出来。



页面原始代码的难以控制性，比如您在所见即所得编辑器中制作一张表格也要几分钟，但您要它完全符合您要求可能需要几十分钟，甚至更多时间。而相比之下，非所见所得的网页编辑器，就不存在这个问题，因为所有的HTML代码 都在您的监控下产生，但是由于非所见所得编辑器的先天条件就注定了它的工作低效率。



在笔者实际使用中，在工具没有工作的时候，发现在windows下cpu占用率达到了33%。

2、HBuilder

2.1 优点



启动速度快，此编辑器构成项目和eclipse一样，从而开发者使用此编辑器可能会更遂心应手，同时还支持代码块提示，简洁，方便，美观，更新频率快。



最全的浏览器兼容性数据、开发手机App，以“快”为核心的HBuilder，引入了“快捷键语法”的概念，巧妙地解决了困扰许多开发者的快捷键过多而记不住的问题。



同时也支持边看边改、插件安装、App打包平台开放、代码块自定义开放。

2.2 缺点



对与一款编辑器而言，似乎太多的功能反而略显得臃肿，而很多功能对于前端开发人员来说，根本用不到。



在使用中，对电脑的内存占用相对dreamweaver而言，相对会高处很多。

三、实际体验与实际操作

1、体验篇

HBuilder：下图为HBuilder启动界面，此款编辑器免费，可是需要开发人登录，如果点击暂不登录，也可以使用编辑器，但是在每次启动时，都会弹出这个界面，这对于开发人员来说，是一个繁琐的事情。

HBuilder

点击了暂不登录，进入到编辑主界面，可以看到编辑器已经给使用者提高了一个Demo（案例），此案例中提高了编辑器的一些快捷操作，开发人员可以通过这个Demo，快速的了解到编辑器的一些快捷键及用法。

同时编辑器使用柔绿背景，官方说法是“绿柔下工作能减少眼球充血，舒缓眼部肌肉，降低脑电波疲劳值。”这个给使用者感觉很贴心。而工作界面和eclipse基本一样，所以对于JAVA程序员来说，很容易上手，但对于一个前端工程师而言，那就花需要时间去熟悉此编辑器了。

HBuilder

Dreamweaver：在编辑器启动时，如下图，给开发者的感觉更为直观。但是新建项目的时候，需要在菜单栏点击 站点->新建站点，然后才能对项目结构进行设计，对于HBuilder来说，这在HBuilder就显得方便多了。

Dreamweve

下图中可以看到 “代码”，“拆分”，“设计”，“实时视图”几个选项，这样开发

者能更方便的完成对项目布局设计，能在不借助外部浏览器就能看到实时效果。Dreamweaver的菜单栏中“插入”功能也很强大，在开发者忘记了标签语法，或者不想去写标签语法的时候，可以通过“插入”功能，快速插入图像，视频，表格，几乎可以满足开发者的所有需求。

Dreamweve

2、使用篇

HBuilder：此编辑在代码提示方面做得很优秀，写代码的时候，也没感觉到卡顿，给人的感觉“轻”并且“快”。编辑器还能直接建立移动APP项目，建立的APP项目还自动给项目添加了最基础的目录结构和一些基本配置文件，编写完成后，还可以直接发布为原生安装包，此功能让移动开发者开发者在开发移动app的时候，就会节约不少的工作时间了。

在实际开发中，变量名定义、方法名定义，把方法名、变量名定义得有意义，让其他维护者能看懂代码，这对后期的代码的维护至关重要。如果开发人员英语水平不够高，对于很多程序员来说是很头疼的问题。HBuilder的模糊匹配，跳着把单词字母敲出来，编辑器就能帮你匹配到单词。

碎片化，浏览器版本兼容性也是目前开发者们最头疼的问题，HBuilder的语法库很全，开发者可以通过编辑器看到每个语法对浏览器、对各版本的兼容情况，集成了大量的常用语法功能块，让开发更快一点，更简单一点。

HBuilder

在开发者在编写代码的时候，难免被各种算法，各种问题折腾得头昏脑胀，最后连JQuery的基本语法都会想不起来，HBuilder在不借助任何第三方插件就可以对进行提示，解决了这些小、并且又是最常见的问题。

Dreamweaver：在使用中，不知道是由于编辑器自身原因还是笔者开发环境的原因，有时按下回车键，可以感觉到很明显的卡顿。在开发者的“站点”中进行代码编写的时候，相信很多开发者会和笔者一样遇到同样的问题。比如我们编写了一个CSS文件，或者JS文件，正常情况下，我们在引入文件的时候，需要手动编写代码来引入需要的文件，Dreamweaver可以更方便完成，只需要将文件拖动到页面上，编辑器就自动将代码完成了。

不得不提到的是，Dreamweaver在代码格式化方面做得不是很好，写完的代码需要开发者完成代码格式化，自动格式化需要手动配置，然而自动格式化的代码看上去也会很乱，所以这也是Dreamwaver很不方便的地方，在代码提示，自动完成方面都要显得较弱一些。

Dreamwaver

但是在布局方面，Dreamwaver将会方便，快捷很多，比如在我们需要表格的时候，我们可以直接插入表格，并且可以按照需要自定义行数，列数，还可以通过设计器来对项目进行布局进行设计、布局，这样可以为开发者节省不少的开发时间。

下面是此两款工具对比的图表：

开发工具 智能提示 移动app 代码格式化 cpu 内存 布局 使用量

Dreamweaver

Hbuilder

√（优） ×（劣）

×

√

×

√

×

√

×

√

√

×

√

×

√

×

通过以上对比，可以看出， Dreamweaver更适合前端开发人员，网站地图，实时预览，检色吸管等工具使得前端开发人员来说显得更加方便。HBuilder代码块提示，插件安装、App打包平台开放等高级工具更注重于后端开发人员，在cpu占用方面HBuilder占有很大优势，而HBuilder用户都反映编辑器内存占用过高，还调傥到“快得像个编辑器，胖得像个IDE”。

在开发中，如何取舍，那就要看开发人员实际需求，做出相应的选择了。

本文标签： 编辑器代码网页开发需要