JS 框架,我认为大体上可以分为两种。一种是类似 jQuery/ d3 那样的,通过修改 html 的 DOM 结构来渲染 UI 的库。
还有一种则是类似于 AngularJS/ReactJS 那样的,采用 MVC 分层的,通过 Model 来渲染 View UI 框架。
jQuery 实现了一系列的按类 / ID / 元素名查找元素的引擎。
- var wrapper = document.getElementById('wrapper')
- //按ID名
- var $wrapper = $('#wrapper')
- //按类名
- var $wrapper = $('.article-title')
所以后来的 jQuery 版本就开始直接使用这些接口,所以基本上元素选择和更新都是使用浏览器原生的接口,这些操作几乎都没有性能损耗。所以说 jQuery 操作 DOM 的性能还是比较好的。
- //查找单个元素
- var wrapper = document.querySelector('#wrapper')
- //查找多个元素
- var articleTitles = document.querySelectorAll('.article-title')
- <div id="app">
- {{ message }}
- </div>
- var app = new Vue({
- el: '#app',
- data: {
- message: 'Hello Vue!'
- }
- })
总结:jQuery 从后台返回的数据要渲染到前端上需要通过手动更新 DOM,但是手动改 DOM 一般比 MVC 渲染的性能好。但开发效率和代码规范不如 NG/ReactJS。
目前总体来说基于 jQuery 的前端组件库最多,而 Angular/React 的还比较少。
这个基本上就不用说明了,一个前端 CSS 框架,基于 jQuery,但是很多复杂的控件没有,像 datagrid/ dialog/ tree/ charts 之类的,不过基于 bootstrap 的组件库也比较多,可以自己去找找。
类似 Bootstrap https://foundation.zurb.com/
前端框架,不过组件也比较少 https://github.com/Semantic-Org/Semantic-UI
kendoui.com 传统的各种 datagrid/charts/dialog 库,分开源和商业两种版本,使用比较复杂的控件要购买商业版。
另一个前端响应式 web 框架 https://github.com/Dogfalo/materialize
http://demos.jquerymobile.com/1.4.5/slider/jQuery Mobile 一些组件库(而非 jquery 的移动版本)。jQuery Mobile 是一款基于 HTML5 的用户界面系统,
以前叫 Ext,注意它不是基于 jQuery 的,是基于另外一种元素选择器构建起来的前端组件库。
另外还有一些 Amazeui/ jQuery EasyUI/ materialize/ weex 之类的,有兴趣也可以研究一下。
来源: http://ourjs.com/detail/5a33cebd3506837194998bb0