Bootstrap VS jQuery Mobile 对比！

Posted 2023-05-01

参考技术A 很多新手纠结这个问题？两个框架都能够支持做手机网页，那么它们的区别是什么呢，适用场景是什么呢？下面我们从这几个方面比较这两个框架：解决问题、功能、适用场景。
<h1>解决问题</h1>

1.跨设备的网页响应式布局问题。随着手机、平板、各分辨率屏幕的出现，如何能够一套前端在所有设备上自由适应？
2.多人合作的前端布局和样式的规范问题
3.常用前端css组件，如按钮、连接、表单、表格、分页组件、下拉菜单、导航栏、ICON等等
4.常用JS前端组件（需要扩展js支持），如表单验证、Tips、Popup等等

<h1>jQuery Mobile是移动前端框架</h1>
jQuery Mobile是移动前端框架，包含js、html、css，提供一套完整的移动前端开发组件，可以比喻成android开发框架，尽可能提供移动APP所具有的所有功能，针对解决的问题有：
1.移动网页APP所常用的组件，例如：手机导航栏、选项卡、底部菜单、列表、表单等各种组件，而这些与Bootstrap提供的组件有很大区别，jQuery Mobile提供的是类似手机APP的组件，只用于移动网页，而Bootstrap提供的是面向所有设备的组件，并没有对移动设备专门考虑，与移动APP的组件体验不一样。
2.网页页面之间转换效果
3.异步数据加载
<h1>功能</h1>
　Bootstrap其核心主要是一个css样式框架，基于css 的Media Query功能实现了响应式布局，能够帮助前端开发人员快速布局、快速开发、合作开发。它必须借助jQuery类似的js框架来实现Ajax数据交互。
　　jQuery Mobile其核心是一个完整的WebAPP框架，加入了一个轻量级的jQuery可以实现Dom操作，在jQuery的基础上提供了一系列类似移动APP的Widget（视图组件），提供了一套不错的页面转场效果，可通过Ajax实现与后端数据交互。
<h1>适用场景</h1>
　Bootstrap通常用于：展示网站的响应式布局开发，使得网站可以在不同设备上方便浏览；以及网站后台管理系统的前端CSS框架。
　　jQuery Mobile通常用于：期望接近移动APP体验的WebAPP，项目只运行在手机端，不用于电脑设备展示（虽然是可以展示的，但是效果不好）。
<h1>总结</h1>
　如果做跨设备响应式前端，选择Boostrap；如果仅作移动端，期望得到近似APP的WebAPP，使用jQuery Mobile。
　　如果做一个产品级的WebAPP，当前jQuery Mobile的能力并不能让你满意，自己开发响应式布局框架和WebApp组件是必然要走的路。
<h1>最后</h1>
希望初学者可以掌握这两种框架，还有推荐一个js库，zepto.js,这个框架在开发移动端的时候，很便利，和jQ很像，但又有所不同，但是zepto.js更小，更便捷，zepto.js还提供了手机端的touch的api，真心很棒！

requirejs jquery和bootstrap加载顺序

您好我有关于加载bootstrap和js的问题：

我有这个代码：

<script>
 var config = {
   paths: {
        "bootstrap": "plugins/bootstrap/js/bootstrap.min"
   },
   'shim': {
        'bootstrap': {
                deps: ['jquery']
        }
    },
 };
 require.config(config);
 require([
    'jquery',
    'bootstrap'
 ], function ($) {  
    $('#accordion-about').collapse();   
 });
</script>

它正确加载文件，但顺序不正确。它在jquery之前加载bootstrap并导致错误：错误：Bootstrap的JavaScript需要jQuery

答案

shim部分不接受来自paths的路径，因此它必须是文件的完整路径：

<script>
 var config = {
   paths: {
        "bootstrap": "plugins/bootstrap/js/bootstrap.min"
   },
   'shim': {
        'plugins/bootstrap/js/bootstrap.min': {
                deps: ['jquery']
        }
    },
 };
 require.config(config);
 require([
    'jquery',
    'bootstrap'
 ], function ($) {  
    $('#accordion-about').collapse();   
 });
</script>