诸葛亮舌战群侏儒 發表於 2019-8-28 14:47:00

前端三大框架（Angular Vue React）

<p>前端，HTML（超文本标记语言），CSS（层叠样式表）和JavaScript（脚本语言）</p>
<p>HTML，通常说的h5，其实按标准来说，HTML4的后续版本不带编号了，并保证向前的兼容性</p>
<p>CSS的版本3，增加了translate()，能完成以前一定需要js才能做到的动画，同时增加了flex弹性盒子（响应式设计，提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间，以往使用float）</p>
<p>&nbsp;</p>
<p>前端框架</p>
<p>一、Bootstrap</p>
<p>在Bootstrap的官网介绍中，Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. 大致意思就是：Bootstrap是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的Web项目，用于开发响应式布局，是一套用于 HTML、CSS 和 JS 开发的开源工具集。</p>
<p>Bootstrap的设计以移动设备优先，在网页的 head 之中添加 viewport meta 标签</p>
<div class="cnblogs_code">
<pre>&lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;</pre>
</div>
<p>Bootstrap使用一个容器元素来包裹网站的内容，使用类.container（固定宽度并支持响应式布局的容器）和.container-fluid（用于 100% 宽度，占据全部视口（viewport）的容器），具体的就看教程吧（https://www.runoob.com/bootstrap4/bootstrap4-tutorial.html，自带部分jQuery插件，3教程之后）</p>
<p>通常说 Bootstrap是一种前端框架，个人感觉其实这种说法不是很准确，Bootstrap的框架和Angular等说的框架，此框架非彼框架，Bootstrap更多感觉是一种页面UI的布局，通过一系列定义好的CSS class和一些预定义好的jquery插件实现比如过渡、下拉、折叠、轮播的初步效果</p>
<p>或者，Bootstrap是一种UI，用于前端布局的框架，属于css框架，而不是javascript框架，但是它本身也使用javascript来完善Bootstrap框架的视觉效果</p>
<p>&nbsp;</p>
<p>二、AmazeUI、LayUI</p>
<p>个人知道还不错的两款国产前端布局UI，部分功能需要使用js才能实现，采用自身模块规范编写，模块化的组件（lay官网还能直接拖动看效果和代码），感觉很棒</p>
<div class="cnblogs_code">
<pre>https://www.layui.com
http://amazeui.org</pre>
</div>
<p>&nbsp;</p>
<p>三、jQuery</p>
<p>jQuery 是一个 JavaScript函数库，极大地简化了 JavaScript 编程。jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。</p>
<p>官网：https://jquery.com，中文手册：http://www.xgllseo.com/jq3/index-2.html，jQueryUI：http://jqueryui.com（用户界面交互、特效、小部件及主题）</p>
<p>基础语法：$(select).action()，jQuery的选择器和CSS一样，类选择器 .class，id的选择器 #id，sass写法 &gt;<strong><br></strong></p>
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://common.cnblogs.com/images/copycode.gif"></span></div>
<pre>$(document).ready(function(){
   //jQuery 入口函数
});

$("button").click(function(){
    //jQuery 点击事件
});</pre>
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://common.cnblogs.com/images/copycode.gif"></span></div>
</div>
<p>jQuery感觉是封装了一部分的函数，简化了原生js的写法，在实际使用时，jQuery对DOM树进行操控，即：首先有一个写好的html页面，再对其修改操作</p>
<p>如写按钮事件函数，点击隐藏，切换，页面跳转等</p>
<p>&nbsp;</p>
<p>四、三大框架</p>
<p>之前使用jQuery，目前处于初学框架阶段，处于选择一个框架学习的阶段，个人拙见，错望指正</p>
<p>通常说的三大框架，即：Angular Vue React</p>
<p>Angular （注：2，1的版本和2的版本简直是两种语言）是基于 TypeScript（Javascript超集）的 Javascript 框架。React&nbsp;被描述为 用于构建用户界面的 JavaScript 库，Vue 为一款用于构建直观，快速和组件化交互式界面的 MVVM 框架</p>
<div>
<p>Angular 是一个框架而不是一个库，是一个完整的解决方案。React 和 Vue 更灵活的。Angular 必须用 TypeScript，文档均是TS的</p>
<p>　　因为数据双向绑定和写法的问题，个人暂时不考虑学React。抱着对Google大大深深的爱，自己看了Angular 6的官方文档，然后，我发现我一句都看不懂，好吧，我承认我很菜，但是好歹给我个希望啊，但是相比之下，Vue官方的教程学习曲线简直不要太友好</p>
<p>&nbsp;</p>
<p>不知道自己的理解是不是对的，Angular的使用导致了不论之后进行什么修改，都需要使用Angular的写法，而Vue因为其模块化，故可以在项目的部分使用Vue，进行修改时，即使是其他框架的项目也可以使用Vue.js进行修改。</p>
<p>以前一个学长告诉我的：说轻量级的展示页面使用jQuery，管理后台使用框架。jQuery的编程思想是首先编写HTML和CSS的页面展示再操作DOM树，而框架是首先考虑页面的功能，再进行前端的展示，编程思想正好相反。（个人学习中，待之后回来验证该说法）</p>
<p>&nbsp;</p>
<p>选择哪种框架，参考说法：https://juejin.im/post/5a0d5df1f265da43062a542f</p>
<div>
<p>如果你在Google工作：<strong>Angular</strong></p>
<p>如果你喜欢 TypeScript：<strong>Angular（或React）</strong></p>
<p>如果你喜欢面向对象编程（OOP）:&nbsp;<strong>Angular</strong></p>
<p>如果你需要指导手册，架构和帮助：<strong>Angular</strong></p>
<p>如果你在Facebook工作：<strong>React</strong></p>
<p>如果你喜欢灵活性：<strong>React</strong></p>
<p>如果你喜欢大型的技术生态系统：<strong>React</strong></p>
<p>如果你喜欢在几十个软件包中进行选择：<strong>React</strong></p>
<p>如果你喜欢JS和“一切都是 Javascript 的方法”：<strong>React</strong></p>
<p>如果你喜欢真正干净的代码：<strong>Vue</strong></p>
<p>如果你想要最平缓的学习曲线：<strong>Vue</strong></p>
<p>如果你想要最轻量级的框架：<strong>Vue</strong></p>
<p>如果你想在一个文件中分离关注点：<strong>Vue</strong></p>
<p>如果你一个人工作，或者有一个小团队：<strong>Vue（或 React）</strong></p>
<p>如果你的应用程序往往变得非常大：<strong>Angular（或 React）</strong></p>
<p>如果你想用 react-native 构建一个应用程序：<strong>React</strong></p>
<p>如果你想在圈子中有很多的开发者：<strong>Angular 或 React</strong></p>
<p>如果你与设计师合作，并需要干净的 HTML 文件：<strong>Angular or Vue</strong></p>
<p>如果你喜欢 Vue 但是害怕有限的技术生态系统：<strong>React</strong></p>
<p>如果你不能决定，先学习&nbsp;<strong>React</strong>，然后&nbsp;<strong>Vue</strong>，然后&nbsp;<strong>Angular</strong></p>
</div>
</div><br><br>
来源：https://www.cnblogs.com/isAndyWu/p/11424022.html
頁: [1]
查看完整版本: 前端三大框架（Angular Vue React）