从jQuery、Bootstrap到React、Semantic的体验
来源:互联网 发布:用友nc mac客户端下载 编辑:程序博客网 时间:2024/06/05 11:36
我被迫成为了React使用者,熟练级,Semantic使用者,入门级。
由于为了组件间的通信,异步刷新Dom元素等等需求,不得已熟悉了React的state,publish,subscribe(PubJS)等子、父,同级组件通信内容,事实是,除了React Dom渲染实在慢,其他都很漂亮,代码也很简洁。
虽然有点对不起John Resig,但是我还是要说,相比于JQuery的自定义插件,React的创建Dom组件(Class)更为方便,更为美观。虽然两者目的相同,都是将Dom元素分离封装,使其变得可管理,但是还是React后来居上。
组件状态,属性等概念,也将Dom编写向面向对象靠近了一大步,大大提高了代码的可扩展性,使得庞大的代码也可以有结构有条理的编写 。虽然JSX很烦,但是的确比JQuery的String拼接要快的多,也更贴近Html5开发。
当然,使用React并非不使用JQuery,我只是在Dom元素操作已经页面动态变更时使用React来维护Dom元素。
但在数据传输时,仍然选择了经典的$.ajax
关于样式,Bootstrap在整体页面布局和风格设置上十分优秀,不愧于扁平化艺术风格布局的创始作。
但Semantic吸引我的是其炫酷,色彩斑斓的而又简洁的小组件,无数颜色绚丽的按钮,Demo中布局完善的评论模块,标签、进度条、遮罩框、弹出框,尤其是其纯CSS实现的动态效果,一个class就可以添加。实在是非常方便。值得一提的是同级的类名布置,相比Bootstrap的父子级类名嵌套更为自由。
更能让使用者发挥出最大的想象力,无限的自由组合,无限的创意。
如果说缺点,那就是不够复杂了吧。没有Bootstrap的庞大的用户开发的插件库,官方提供的功能可以让用户设计出一些漂亮的新的组件,但是不及Bootstrap的海量已经由其他开发者做好的组件。
第二个缺点可能是名字吧,对于我来说太难拼了,音节复杂,到现在我还不能完全打出这个单词。
Bootstrap与Semantic的兼容性就不像JS插件那样可兼容了,他们的样式冲突还待解决,所以在同一页面,恐怕要做出抉择,选择是使用Semantic还是Bootstrap。
尤其要说的一点是文档问题,Semantic的中文文档是个假的文档,除了名字全是英文。相比之下,Bootstrap就有人去详细的翻译出中文文档,不过看样式的时候语言倒是无法阻碍复制粘贴。完全看不懂英文的人也可以看懂他的文档 (笑。
后记:
Semantic有完整的中文文档,很全面。https://semantic-ui.qyears.com
React 组件通信及异步加载Dom元素有一篇很好的文章,我很庆幸找到了这篇文章。http://www.tuicool.com/articles/AzQzEbq
ReactDom渲染实在是,太慢了!!!
所以异步成了必须要做的事情!!!
PS:Semantic和React有合作,React推出了支持 Semantic的一个版本。
- 从jQuery、Bootstrap到React、Semantic的体验
- Bootstrap、Semantic、JQuery的cdn加速
- 在 2016 年学 JavaScript 是一种什么样的体验?(React从入门到放弃)
- React-BootStrap框架快速体验上手
- 从 React到React Native
- semantic取代bootstrap
- [项目][准备5] Bootstrap&jQuery插件体验
- 从jQuery到AngularJS,再到React,前端必须走在最前端
- react项目实战(权限模块开发六)semantic-ui-react 加入到开发环境中
- bootstrap从入门到精通
- bootstrap从2.*到3.0的一些class变化
- bootstrap从2.*到3.0的一些class变化
- Bootstrap Tree View从前端到后台的例子
- bootstrap的js插件体验
- React-Native从开始到发布的10个要点
- 关于React Native 火热的话题,从入门到原理
- react从入门到深入的教程、工具
- 从0到0.1:最简单的React项目搭建
- BZOJ1816: [Cqoi2010]扑克牌
- 1044. 火星数字(20) PAT
- 输入输出重定向
- 1
- Java Server 理解与实践 —— 集成Mybatis到Spring项目
- 从jQuery、Bootstrap到React、Semantic的体验
- leetcode-82. Remove Duplicates from Sorted List II(删除有序列表中所有重复元素一个不留)
- NETCTOSS项目(二)
- Windows学习(006)--对话框交互
- (部分原创)unity项目开发中VR工程的优化(下)
- idea 自定义方法注释模板(百分百管用)
- Mybatis动态拼接sql
- vue路由+子路由+具名路由demo实例(结合animate.css动画)
- (转)2017 年最流行的 15 个数据科学 Python 库