网页前端:JQuery和Bootstrap

作者 作者 谷菲 心理学院
2017-2-2 18:46:57

前言

虽然我并没有打算在iGEM比赛中承担做Wiki的任务,但是由于这学期的实验心理学实验课接触了太多软件和代码,是我感觉到用代码实现自己想法的控制感还是很不错的,再加上寒假的时间还是比较充裕的,所以我就大致看了一下HTML、CSS、JavaScript、JQuery、Bootstrap等。因为只是简单的看了一遍,除了一些例子之外没有什么实践的经验,所以在完成这个作业的时候还是遇到了很多麻烦的,不过好在有参考的实例(不过532那个恐怕就没有了……)。所以其实我还只是一个很不熟练的初学者,我对JQuery和Bootstrap的“哲学”的认识也并不深入,只能算是我的一些感受。

JQuery

特点

JQuery是一个JavaScript库,所以JavaScript是它的基础。虽然我也看了一些JavaScript的内容,但是因为在真正实践的时候并没有怎么用到(正如师兄当时培训的时候说的),所以我对JavaScript没有深入的认识,不过感觉要实现一些动态的交互效果它还是必不可少的。不过虽然没有自己动手使用JavaScript,但事实上在几乎每次实践之中都会间接用到它,这大概就是JQuery的功劳了(应该也有Bootstrap的功劳)。

在我看来JQuery就是简化增强的JavaScript,它已经将常用的效果写成了一些函数,只要简单的用toggle、fade之类的就可以实现不错的动画效果。另外,JQuery优化了对元素的选择和对事件的处理,使用JQuery可以像CSS一样对元素进行选择,不用再用繁琐的getElementBy之类的了,处理事件好像也只用.click之类就行了,不用addEventListener或者标签内的onclick之类的了(我的印象,可能有误)。这与一本书中介绍JQuery中所说的用最少的代码做最少的事十分符合。

问题

因为没有对比,并且我也没有什么经验,所以在我看来JQuery并没有什么实际的缺点。不过就像所有的现成的框架,虽然它们让我们可以省去很多麻烦,可以偷懒,但在想要做出个性化的修改的时候会麻烦一些,很可能会牵一发而动全身,特别是像我这样并没有深入的理解的初学者。另外我还觉得用JQuery的时候各种小括号和大括号有些多,虽然有匹配的提示,但还是让我有些混乱,经常找不到后来的部分应该加在哪里……(这显然不是JQuery的问题……HTML的标签有时候也让我很混乱)

Bootstrap

特点

JQuery可以说是JavaScript的增强版,而与之相比Bootstrap则包含了更加丰富的内容,主要内容应该是CSS文件中的,包括的各种部件样式,甚至还有一套Glyphicons字体(在fonts文件夹中),当然也有js文件中的依赖于JQuery(间接就是依赖JavaScript)的内容,这里面主要应该是下拉菜单、弹出框之类所需的内容。我感觉制作网页的过程就像搭积木,将一个一个部件修饰好,并按照合适的方式搭起来就好,最重要和最困难的是把每个部件放在合适的位置,并且在不同设备和浏览器上看起来都比较美观,而不像编程序解决问题的时候主要需要思考解决问题的方法。而Bootstrap中的这些现成的框架给了我们更多漂亮的积木,设置一些已经搭起来的半成品。另外,Bootstrap还有现成的响应式布局来应对不同的设备,这都是已经写好的,因此在使用一些部件的时候已经不用考虑不同设备的呈现问题了,即使有的部件没有现成的响应式的功能,也可以通过Bootstrap提供的每行12列的表格以及内置的不同设备的分界点来控制不同屏幕的呈现效果,这省去了不少的麻烦,这种响应式的布局好像也是Bootstrap的哲学所在(不过没怎么看其他的几个前端框架)。

问题

要实现Bootstrap提供的效果,需要把相应的部件归为相应的类,有的甚至需要叠加好几个不同的类,这些类的名称虽然有相应的意义,但还是难以记住(可能是我实践的太少),需要经常查询,而且稍有不慎写错了一个字母都会出现问题,而且比较难发现(特别是对于像我这样的初学者)。另外正如在JQuery的问题中提到的,现成的积木想要按自己的想法修饰相对要困难很多,在Bootstrap中更是如此,因为JQuery更多的是简化和增强的JavaScript,只是对一些语句做了改变,没有提供很多现成的样式,而Bootstrap则不同,提供了大量的样式,所以想要修改这些样式要相对困难许多(CSS的优先级的问题就在这里涉及到了)。而且涉及的内容越多也越容易出现各种各样的问题,导致不能正常的呈现。比如右下角返回顶部按钮的弹出框(tooltip)在我开始使用的时候总是不能正常弹出,而我是直接复制的样例的代码,这让我大惑不解,后来仔细看手册(手册的介绍还是十分详细的,而且有很不错的实例)的相应的介绍的内容才发现需要手动添加一段JQuery的语句进行初始化(就是下面这样,之后我发现手册中的这个部分的介绍在遇到问题的时候真的十分有用)。

Opt-in functionality

For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.

One way to initialize all tooltips on a page would be to select them by their data-toggle attribute:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})