(转)Bootstrap 之 Metronic 模板的学习之路 - (4)源码分析之脚本部分

https://segmentfault.com/a/1190000006709967

上篇我们将 body 标签主体部分进行了简单总览,下面看看最后的脚本部门。

页面结尾部分(Javascripts 脚本文件)

我们来看看代码最后的代码,摘取如下:

        <!--[if lt IE 9]>
<script src="../assets/global/plugins/respond.min.js"></script>
<script src="../assets/global/plugins/excanvas.min.js"></script>
<![endif]-->
        <!-- BEGIN CORE PLUGINS -->
        <script src="../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
        <script src="../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
        <script src="../assets/global/plugins/js.cookie.min.js" type="text/javascript"></script>
        <script src="../assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
        <script src="../assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
        <script src="../assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
        <!-- END CORE PLUGINS -->
        <!-- BEGIN THEME GLOBAL SCRIPTS -->
        <script src="../assets/global/scripts/app.min.js" type="text/javascript"></script>
        <!-- END THEME GLOBAL SCRIPTS -->
        <!-- BEGIN THEME LAYOUT SCRIPTS -->
        <script src="../assets/layouts/layout/scripts/layout.min.js" type="text/javascript"></script>
        <script src="../assets/layouts/layout/scripts/demo.min.js" type="text/javascript"></script>
        <script src="../assets/layouts/global/scripts/quick-sidebar.min.js" type="text/javascript"></script>
        <!-- END THEME LAYOUT SCRIPTS -->
    </body>

我们发现,所有脚本都在 </body> 之前,而且,源码结尾也没有</html> 标签,这主要是因为以下一些原因:

  • 为什么放在最后

HTML 文件的加载都是从上往下执行的,我们一般习惯将一些对显示效果影响不大的脚本文件放到页面的最后进行加载。这样可以减少页面的加载时间。

  • 为什么放在 </body> 之前

只所以脚本放在 </body> 之前,而不是之后,主要是因为:基于规则 %html.content "HEAD|BODY",HTML 标签的子元素只能是 HEAD BODY,如果在 </body> 后再出现 <script> 或任何元素的开始标签,都是 parse error。当然,浏览器一般均有容错机制。错误嵌套的标签、以及位置放置错误的标签都会在paser HTML 过程中尝试修复。修复后得到合法的HTML后在由布局引擎建立相应的DOM对象。在<script>标签放置于</body>标签之后时,源码被所有浏览器【泛指PC上常见的】修复为正常形式,即<script></script></body>。

  • 为什么没有 </html> 标签

这个我也忘了哈,好像为了被别的文件包含时,避免出现把文件闭合了这种情况。一下子找不到这方面的说明了,如果哪位大侠知道,麻烦告知。
当然,html5 是支持不闭合标签的。
这儿貌似有一点点说明:http://blog.teamtreehouse.com...

Metronic 所用到的插件和资源

Metronic 用了几十个插件和扩展资源,这才使得这个模板显得尤为强大。具体这些插件的描述我就不一一列述了,大家可以逐一点下下面表格的链接了解了解。

Name Description URL
jQuery Core Javascript library http://www.jquery.com
Twitter Bootstrap Sleek, intuitive, and powerful front-end framework for faster and easier web development http://getbootstrap.com
Select2 Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results http://ivaynberg.github.io/se...
Bootstrap Confirmation Socicon Social Icons. http://mistic100.github.io/Bo...
Socicon Bootstrap plugin for on-place confirm boxes using Popover. http://www.socicon.com/
Bootstrap Tagsinput Bootstrap Tags Input is a jQuery plugin providing a Twitter Bootstrap user interface for managing tags. https://github.com/timschlech...
Flow Chart Bootstrap plugin for on-place confirm boxes using Popover. http://adrai.github.io/flowch...
Autosize A small, stand-alone script to automatically adjust textarea height. http://www.jacklmoore.com/aut...
Bootstrap Summernote Super Simple WYSIWYG Editor for Bootstrap 3. Summernote is a javascript program that helps you to create WYSIWYG Editor on web. http://hackerwins.github.io/s...
Bootstrap Hover Dropdown Plugin A simple plugin to enable twitter bootstrap dropdowns to activate on hover and provide a nice user experience. https://github.com/CWSpear/bo...
Twitter Typeahead A fast and fully-featured autocomplete library. http://twitter.github.io/type...
amCharts Charting library & maps. Where all data goes visual. http://www.amcharts.com/
iCheck SUPER CUSTOMIZED CHECKBOXES AND RADIO BUTTONS FOR JQUERY & ZEPTO. http://fronteed.com/iCheck/
Bootstrap Select A custom select for @twitter Bootstrap using button dropdown. http://silviomoreto.github.io...
jQuery Notific8 jQuery Notific8 is a notification plug-in that was inspired by the notification style introduced in Windows 8. http://willsteinmetz.net/jque...
jQuery jsTree A tree view plugin for jQuery. http://www.jstree.com/
Bootstrap Maxlength This plugin integrates by default with Twitter bootstrap using badges to display the maximum length of the field where the user is inserting text. This plugin uses the HTML5 attribute "maxlength" to work. http://mimo84.github.com/boot...
Bootstrap Session Timeout After a set amount of time, a dialog is shown to the user with the option to either log out now, or stay connected. If log out now is selected, the page is redirected to a logout URL. If stay connected is selected, a keep-alive URL is requested through AJAX. If no options is selected after another set amount of time, the page is automatically redirected to a timeout URL. https://github.com/travishorn...
jQuery Idle Timeout This script allows you to detect when a user becomes idle (detection provided by Paul Irish‘s idletimer plugin) and notify the user his/her session is about to expire. Similar to the technique seen on Mint.com. Polling requests are automatically sent to the server at a configurable interval, maintaining the users session while s/he is using your application for long periods of time. http://www.erichynds.com/exam...
Bootstrap TouchSpin A mobile and touch friendly input spinner component for Bootstrap 3. It supports the mousewheel and the up/down keys. http://www.virtuosoft.eu/code...
Bootstrap Date Paginator A jQuery plugin which takes Twitter Bootstrap‘s already great pagination component and injects a bit of date based magic. In the process creating a hugely simplified and modularised way of paging date based results in your application. http://www.jonathandanielmile...
Bootbox.js Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes using Twitter’s Bootstrap modals, without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers. http://bootboxjs.com/
Bootstrap Markdown Markdown editing for Bootstrap. http://toopay.github.com/boot...
Bootstrap FuelUX Input Spinner Bootstrap FuelUX Input Spinner For App. http://exacttarget.github.io/...
Bootstrap Context Menu Context menu plugin for Twitter‘s Bootstrap framework https://github.com/sydcanem/b...
jQuery noUiSlider noUiSlider is a super tiny jQuery plugin that allows you to create range sliders. It fully supports touch, and it is way(!) less bloated than the jQueryUI library. http://refreshless.com/nouisl...
jQuery IonRange Slider Beautiful, comfortable and easily customizable range slider with skins support. Also support events and public methods, has flexible settings and can be completely modified with CSS. http://ionden.com/a/plugins/i...
Bootstrap Toastr Notifications Toastr is a Javascript library for non-blocking notifications. jQuery is required. The goal is to create a simple core library that can be customized and extended. http://codeseven.github.io/to...
Bootstrap Switch Use Radio Buttons as switches. http://www.larentis.eu/switch/
jQuery jCrop Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications. http://github.com/tapmodo/Jcrop
Bootstrap X-editable In-place editing with Twitter Bootstrap. http://vitalets.github.io/x-e...
Bootstrap Extended Modals Responsive, Stackable, AJAX and more. http://jschr.github.com/boots...
jQuery Multi Select This plugin is a drop-in replacement for the standard select element with multiple attribute activated. http://loudev.com/
jQuery Sparklines This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript. http://omnipotent.net/jquery....
jQuery Input Mask jQuery Input Mask is a jquery plugin which create an input mask. An inputmask helps the user with the input by ensuring a predefined format. This can be usefull for dates, numerics, phone numbers. http://github.com/RobinHerbot...
jQuery Easy Pie Chart Lightweight jQuery plugin to render and animate nice pie charts with the HTML5 canvas element http://rendro.github.io/easy-...
jQuery Input IP Address Control During user input field, this plugin controls the format of IPv4 or IPv6 addresses. https://code.google.com/p/jqu...
jQuery UI Sortable jQuery UI Sortable http://jqueryui.com/sortable/
Pace - Page Progress Bar n automatic web page progress bar. Pace will automatically monitor your Ajax requests, event loop lag, document ready state and elements on your page to decide on the progress. For more info check the plugin documentation. http://github.hubspot.com/pace
jQuery BlockUI The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser http://jquery.malsup.com/block/
jQuery Cookie A simple, lightweight jQuery plugin for reading, writing and deleting cookies. https://github.com/carhartl/j...
jQuery Pulsate jQuery Pulsate provides animated pulsating effect that‘s useful for focussing attention to a certain part of your webpage in a subtle way. http://kilianvalkhof.com/jque...
Respond A fast & lightweight polyfill for min/max-width and CSS3 Media Queries (for IE 6-8, and more) https://github.com/scottjehl/...
Excanvas Modern browsers like Firefox, Safari, Chrome and Opera support the HTML5 canvas tag to allow 2D command-based drawing. ExplorerCanvas brings the same functionality to Internet Explorer. To use, web developers only need to include a single script tag in their existing web pages http://excanvas.sourceforge.net/
jQuery Backstretch A simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element. http://srobbin.com/jquery-plu...
jQuery Countdown A jQuery plugin that sets a div or span to show a countdown to a given time. http://keith-wood.name/countd...
jQuery Bootpad for Bootstrap Dynamic pagination jQuery plugin. Works well with twitter bootstrap or standalone. http://botmonster.com/jquery-...
Colorpicker for Bootstrap Add color picker to field or to any other element http://www.eyecon.ro/bootstra...
Datepicker for Bootstrap Add datepicker picker to field or to any other element https://github.com/eternicode...
Bootstrap Datetimepicker This project is a fork of bootstrap-datetimepicker project which doesn‘t include Time part. Some others parts has been improved as for example the load process which now accepts the ISO-8601 format. http://www.malot.fr/bootstrap...
Date Range Picker for Bootstrap This date range picker component for Twitter Bootstrap creates a dropdown menu from which a user can select a range of dates https://github.com/dangrossma...
Bootstrap Timepicker Easily select a time for a text input using your mouse or keyboards arrow keys. http://jdewit.github.com/boot...
Clockface Timepicker Clockface is a simple timepicker for Twitter Bootstrap http://vitalets.github.com/cl...
Bootstrap Growl Pretty simple jQuery plugin that turns standard Bootstrap alerts into "Growl-like" notifications. https://github.com/ifightcrim...
Bootstrap Tabdrop Very usefull script when your tabs do not fit in a single row. This script takes the not fitting tabs and makes a new dropdown tab. In the dropdown there are all the tabs that do not fit. http://www.eyecon.ro/bootstra...
Bootstrap Select Splitter Transforms SELECT containing one or more OPTGROUP in two chained SELECT. https://github.com/xavierfauc...
jQuery MiniColors A tiny color picker built on jQuery https://github.com/claviska/j...
jQuery Tags Input Magically convert a simple text input into a cool tag list with this jQuery plugin https://github.com/xoxco/jQue...
Bootstrap WYSIWYG5 Simple WYSIWYG Editor for Bootstrap http://jhollingworth.github.c...
CKEditor CKEditor is a ready-for-use HTML text editor designed to simplify web content creation http://ckeditor.com/
DataTables DataTables for Twitter Bootstrap http://www.datatables.net/
Bootstrap File Input The file upload plugin allows you to create a visually appealing file or image upload widgets http://jasny.github.io/bootst...
FancyBox FancyBox is a tool for displaying images, html content and multi-media http://fancybox.net/
Flot Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features. http://www.flotcharts.org/
gmaps.js gmaps.js allows you to use the potential of Google Maps in a simple way. No more extensive documentation or large amount of code http://hpneo.github.com/gmaps/
FullCalendar FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar http://arshaw.com/fullcalendar/
jQuery slimScroll slimScroll is a small (3.7KB) jQuery plugin that transforms any div into a scrollable area with a nice scrollbar http://rocha.la/jQuery-slimSc...
JQVMAP JQVMap is a jQuery plugin that renders Vector Maps. It uses resizable Scalable Vector Graphics (SVG) for modern browsers like Firefox, Safari, Chrome, Opera and Internet Explorer 9. Legacy support for older versions of Internet Explorer 6-8 is provided via VML. http://jqvmap.com/
jQuery File Upload File Upload widget with multiple file selection, drag&drop support, progress bars and preview images for jQuery http://blueimp.github.com/jQu...
DropzoneJS DropzoneJS is an open source library that provides drag‘n‘drop file uploads with image previews. http://www.dropzonejs.com/
jQuery UI Touch Punch jQuery UI Touch Punch is a small hack that enables the use of touch events on sites using the jQuery UI user interface library. http://touchpunch.furf.com/
Bootstrap Form Wizard This twitter bootstrap plugin builds a wizard out of a formatter tabbable structure. It allows to build a wizard functionality using buttons to go through the different wizard steps and using events allows to hook into each step individually. https://github.com/VinceG/twi...
Nestable Drag & drop hierarchical list with mouse and touch compatibility. https://github.com/dbushell/N...
jQuery Validation Plugin The jQuery Validation Plugin provides drop-in validation for your existing forms, while making all kinds of customizations to fit your application really easy http://bassistance.de/jquery-...
FontAwesome The iconic font designed for use with Twitter Bootstrap http://fortawesome.github.com...
Simple Line Icons Simple Line Icons is 162 simple stroke icons that are great for mobile applications, websites, user interfaces, etc. All icons were converted from the same beautiful simple line icon sets released previously on GraphicBurger. http://graphicburger.com/simp...
Open Sans Metornic uses Open Sans web font from google fonts:http://fonts.googleapis.com/c... http://www.google.com/webfonts

时间: 2024-10-08 03:05:43

(转)Bootstrap 之 Metronic 模板的学习之路 - (4)源码分析之脚本部分的相关文章

(转)Bootstrap 之 Metronic 模板的学习之路 - (7)GULP 前端自动化工具

https://segmentfault.com/a/1190000006738327 初步了解 Metronic 的结构和应用后,我们就可以在项目中应用起来了.考虑到实际项目应用时,会有很多文件需要修改调整并压缩处理,这时候我们就会用到我们的<前端自动化神器 (Gulp)>,鉴于 gulp 的内容比较多,为了不打乱 Metronic 系列,就单独列了一篇<初探前端自动化神器 (Gulp)>.本文不对 gulp 进行详细阐述,只保留和 Metronic 相关部分. Gulp is

(转)Bootstrap 之 Metronic 模板的学习之路 - (3)源码分析之 body 部分

https://segmentfault.com/a/1190000006697252 body 的组成结构 body 部分包含了 HEADER.CONTAINER.FOOTER,其中 CONTAINER 部分又包含了 SIDEBAR.CONTENT.QUICK SIDEBAR 几个部分.body部分源码折叠后截图如下: Header 页面顶部 Header contains of logo and top menu bar and it used in all pages. 页面顶部(或头部)

u-boot学习(三):u-boot源码分析

建立域模型和关系数据模型有着不同的出发点: 域模型: 由程序代码组成, 通过细化持久化类的的粒度可提高代码的可重用性, 简化编程 在没有数据冗余的情况下, 应该尽可能减少表的数目, 简化表之间的参照关系, 以便提高数据的访问速度 Hibernate 把持久化类的属性分为两种: 值(value)类型: 没有 OID, 不能被单独持久化, 生命周期依赖于所属的持久化类的对象的生命周期 实体(entity)类型: 有 OID, 可以被单独持久化, 有独立的生命周期(如果实体类型包含值类型,这个值类型就

EasyUI学习总结(三)——easyloader源码分析

EasyUI学习总结(三)--easyloader源码分析 easyloader模块是用来加载jquery easyui的js和css文件的,而且它可以分析模块的依赖关系,先加载依赖项.模块加载好了会调用parse模块来解析页面.把class是easyui开头的标签都转化成easyui的控件. 先看Demo1例子,再分析源代码. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>easyloader范例</tit

EasyUI学习总结(四)——parser源码分析

EasyUI学习总结(四)--parser源码分析 parser模块是easyloader第一个加载的模块,它的主要作用,就是扫描页面上easyui开头的class标签,然后初始化成easyui控件. 1 /** 2 * parser模块主要是解析页面中easyui的控件 3 */ 4 $.parser = { 5 // 是否自动解析 6 auto: true, 7 8 // 可以被解析的控件 9 plugins:['linkbutton','menu','menubutton','splitb

memcached学习笔记——存储命令源码分析下篇

上一篇回顾:<memcached学习笔记——存储命令源码分析上篇>通过分析memcached的存储命令源码的过程,了解了memcached如何解析文本命令和mencached的内存管理机制. 本文是延续上一篇,继续分析存储命令的源码.接上一篇内存分配成功后,本文主要讲解:1.memcached存储方式:2.add和set命令的区别. memcached存储方式 哈希表(HashTable) 哈希表在实践中使用的非常广泛,例如编译器通常会维护的一个符号表来保存标记,很多高级语言中也显式的支持哈希

memcached学习笔记——存储命令源码分析上

原创文章,转载请标明,谢谢. 上一篇分析过memcached的连接模型,了解memcached是如何高效处理客户端连接,这一篇分析memcached源码中的process_update_command函数,探究memcached客户端的set命令,解读memcached是如何解析客户端文本命令,剖析memcached的内存管理,LRU算法是如何工作等等. 解析客户端文本命令 客户端向memcached server发出set操作,memcached server读取客户端的命令,客户端的连接状态

Hadoop-2.4.1学习之NameNode -format源码分析

在Hadoop-2.X中,使用hdfs namenode –format对文件系统进行格式化.虽然无论是在生产环境还是测试环境中,已经使用了该命令若干次了,也大体了解该命令就是在本地文件系统中创建几个文件夹,但具体是如何执行的则需要通过阅读源代码来了解了. 要想看到该命令的源代码,需要看看hdfs脚本中是如何执行相应的java类的.在hdfs脚本中,下面的语句说明了实际执行的java类和参数,其中类为org.apache.hadoop.hdfs.server.namenode.NameNode,

Hadoop-2.4.1学习之Map任务源码分析(下)

在Map任务源码分析(上)中,对MAP阶段的代码进行了学习,这篇文章文章将学习Map任务的SORT阶段.如果Reducer的数量不为0,则还需要进行SORT阶段,但从上面的学习中并未发现与MAP阶段执行完毕调用mapPhase.complete()类似的在SORT阶段执行完毕调用sortPhase.complete()的源码,那SORT阶段是在什么时候启动的?对于Map任务来说,有输入就有输出,输入由RecordReader负责,输出则由RecordWriter负责,当Reducer的数量不为0