关于javascript:项目开发之前端

前后端的拆散是经验了很长一段的历史的（具体看此博客），最后的前端页面是由后端退出数据渲染结束后再发送至前端，而前端的一些数据的变动带来的也常常是整个页面的跳转和刷新，在代码的编写和页面的加载上都带来了极大的不便；

直到起初有了 ajax（Asynchronous JavaScript And XML）这一理念，这一问题才得以缓解，起初这一理念被发扬光大，使得前后端的交互只剩下最根底的业务逻辑相干的——数据（能够看出，数据才是一个工程的灵魂）；

示例代码

<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h1>XMLHttpRequest 对象 </h1>
<button type="button" onclick="loadDoc()"> 批改内容 </button>
</div>
<script>
function loadDoc() {var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {// 申请胜利后响应
      document.getElementById("demo").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "/demo/js/ajax_info.txt", true);// 申请地址
  xhttp.send();}
</script>
</body>
</html>

只管已步入前后端拆散时代，模板后盾渲染这一理念依然在宽泛应用，因为若前端页面加载逻辑较为简单，客户端算力或带宽有余，便可能呈现首屏白屏的问题，通常这种状况下，在后端将退出了数据渲染好的页面间接发送来是一种高效的解决方案；此文只以前后端拆散的理念解说

在开始之前先介绍下 webpack 的开发方式，将 commonJS 或 es6 层层援用的代码，打包压缩成一两个浏览器能够精确执行但人类看不懂的 es5 代码；这种开发方式的劣势在于

能够更好的模块化前端的开发，并不便了对外部依赖的援用，突破传统的 <script> 式低效低可读性的援用，能够像开发 nodejs 后端一样到处调用好心人写的轮子（除了一些波及到本地文件读取的轮子，不过这些只能用于后端，前端个别也用不上）
代码的自动化的美化（uglify）/ 压缩 / 编译，最大限度将本我的项目以及援用的内部我的项目压缩成所有浏览器可能辨认的 es5 规范乱码，可放慢向前端发送的速度以及窃密一些要害的代码逻辑
若放心代码被美化后影响前端的调试工作，还能够通过特定指令生成乱码的 map 文件，在乱码中还原开发时的代码，并一样高效调试；

前端有着许多优良的框架，例如广为人知的 jQuery，最后附带了 ajax 理念的框架，同时集成了前端所须要的简直全副的性能，只须要简短的几行 <script> 引入，即可将一个动态 html 页面写的风生水起；

但随着目前前端的倒退，前端的开发所须要的曾经不仅仅是系统的办法库了，而是一个更高层面上页面的架构、模型、状态等的治理，但这并不代表 jQuery 曾经退出了历史舞台，jQuery 依然是前端弱小的调用库，只是在仅仅须要其中的 几个性能 时要审慎引入，因为与专门实现那 几个性能 的框架相比，jQuery 曾经属于重量级框架了，援用它会使客户端加载过多不必要的资源

一个优良的前端框架，应能做到

首先提供一种高可读性的开发格调或开发方式（即可能易于开发易于保护）
其中的理念或 api 应尽量贴合大部分开发者的开发观点（即尽可能易于了解和学习）
应有着尽可能高的运行效率，体积小、运行快
应有着良好的社区生态，遇到 bug 有中央问，须要轮子一找一大把（总的来说就是用的人多）

在开发开始前，前端开发框架的抉择也是一个重要环节，要把握好每个框架的劣势和劣势，来依据本人我的项目的特点做抉择、制订开发计划（尽管各个框架间有方法兼容，然而放弃一种框架更有利于我的项目的保护），此处仅介绍几个目前广为人知的开发框架

开发上 ：能够用纯原生 js 的语法来治理整个前端页面的逻辑，有着all-in-js 的高自由度开发理念；
运行上 ：采纳 虚构 dom的模式，即脱离浏览器自身的 dom，应用 react 定义 dom 来治理组件状态，尽管还是能够采纳原生 dom 来解决问题，然而 react 无意让开发者齐全摈弃原生 dom 的理念；

贴出局部示例，具体见官网文档

class HelloMessage extends React.Component {render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render( // 此为 react 的虚构 dom 与实在 dom 对接的惟一入口
  <HelloMessage name="Taylor" />,
  document.getElementById('hello-example')
);

此为 jsx 文件，能够看出，react 以本人的格局，以本人的规范重定义出了 html 全副的一整套规范，蕴含了 html 种全副的内容，又很好的贴合了 js 的语法；

问题又来了，既然 react 有了一套本人的虚构 dom，那么岂不是更改了ReactDOM.render，就能够将 react 移植到 web 以外的平台了？是的，详见react-native，taro 的 react 反对，即通过 react，便能够开发 app，小程序，以及桌面利用（应用 electron，然而与虚构 dom 无关）

开发和保护：react 应用 all-in-js 的理念，开发格调过于自在，既是劣势，也是有余，劣势在于随便施展，有余在于格调过于自在以至于到目前为止没有一种公认的稳固的代码架构，一千个 react 开发者，一千种格调，一个问题往往有多种解决方案，难以抉择
学习老本：只有懂 js，就能够进行 react 的开发，然而想要高效的开发，须要深刻了解许多衍生概念，学习 react 全家桶（react-dom，redux，mobx，react-router，redux-saga 等），当然只理解一部分也不影响我的项目的开发，能够都理解一下，按需应用
运行效率：压缩后大小能够忽略不计，由 facebook 掌舵开发的框架，效率天然是不必放心的；一个我的项目构造的好坏对页面的运行速度影响才是最大的
生态：react 领有着全世界最高的应用人数，然而在国内确远落后于 vue，所以只有懂点英文，轮子和 bug 排除这块是齐全不必放心的

开发上：应用原生 html 模板来进行开发，并在其中提供一些 api 来加强页面的治理；但同时又能够应用 react 相似的 jsx 语法来编写页面
运行上：在 vue1.x 后，vue2、3 均应用虚构 dom 模式，所以，vue 也能够很好的用来跨平台的开发，例如国内的弱小的 uni-app 框架，taro 的 vue 反对

贴出局部示例，具体见官网文档

<div id="app-2">
  <span v-bind:title="message"><!-- 此处 v-bind 即为 vue 提供的 api 之一，意为将 span 的原生属性 title，绑定在 message 这个 data 上 -->
    鼠标悬停几秒钟查看此处动静绑定的提示信息！</span>
</div>
<script>
var app2 = new Vue({
  el: '#app-2',
  data: {message: '页面加载于' + new Date().toLocaleString()}
})
</script>

能够看出，只管应用虚构 dom 治理页面，然而开发格调还是比拟贴近原生的网页开发，十分的简略易上手

开发和保护：vue 应用局部自定义 api 来不便罕用的开发需要，对于一些关键问题 vue 曾经提供了很好的解决方案，代码架构也较为稳固、对立，对 中小型 的我的项目有着疾速的开发周期；然而自定义 api 既是劣势，也是缺点，在长期或大型我的项目中会有所体现，会导致呈现一些编辑器无奈了解的语句，无奈提供精确的提醒，会导致 debug 艰难
学习老本：只有懂原生网页开发，即可上手，了解多数概念即可，不须要学习像 react 那样繁琐的全家桶
运行效率：压缩后的大小同样能够疏忽，运行效率也是不须要放心的
生态：国内范畴内可能人数远少于 react，国内下载量远超 react，毕竟作者是中国人——尤雨溪，国内用户多，这也就使得国内 vue 相干的轮子泛滥，也就使得无论是 vue 的官网文档还是 vue 的插件还是 vue 相干的 bug 问答，都是不缺中文的，这也就极大的升高了国内的开发门槛

开发上：应用纯正的模板式页面开发，以 java（确定不是 js）的语法格调进行网页的开发（面向对象、依赖注入等）
运行上：应用 Incremental DOM 而非虚构 dom，相较于虚构 dom 来说更加节俭内存，但在代码模式上，angular 仍然抵制间接操作原生 dom；正是如此，angular 同样可用于跨平台开发，然而小程序这部分有所缺失

贴出局部示例，具体见官网文档

/* 此为 ts 语法编写 */
import {Component, OnInit} from '@angular/core';
import {Hero} from '../hero';
import {HEROES} from '../mock-heroes';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})

export class HeroesComponent implements OnInit {

  heroes = HEROES;// 为 hero 列表数据，selectedHero?: Hero;// 以后选中的 hero

  constructor() {}

  ngOnInit() {}

  onSelect(hero: Hero): void {this.selectedHero = hero;}
}

<h2>My Heroes</h2>
<ul class="heroes">
  <li *ngFor="let hero of heroes"
    [class.selected]="hero === selectedHero"
    (click)="onSelect(hero)">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>
<div *ngIf="selectedHero">
  <h2>{{selectedHero.name | uppercase}} Details</h2>
  <div><span>id: </span>{{selectedHero.id}}</div>
  <div>
    <label for="hero-name">Hero name: </label>
    <input id="hero-name" [(ngModel)]="selectedHero.name" placeholder="name">
  </div>
</div>

能够看出，ng 框架有着更浓重的“框架味”，或者说“模板味”，将大部分页面逻辑封装成 api，应用起来未免少了些灵活性

PS：因为国内 angular 应用太少，只对 angular 略有耳闻，并未深刻理解，内容均源自查阅大量博客、文档和知乎

开发和保护：angular 因为其语言格调较受后端开发者的欢送；angular 能够说是对立了前端的代码格调，而且因为 TS 的语法，即便是老手，开发进去的内容也是规规矩矩的；然而严格的规范同时也限度了肯定的 angular 的开发自在，当然，大而全和小而美二者都有各自的优缺点，评判规范在每位开发者本人的心中；这同时也使得 angular 开发一些小我的项目如同大炮打苍蝇，杀鸡用牛刀个别

学习老本：据资深 ng 开发者形容，ng 学习曲线平缓到令人发指的境地，此时应祭出这张图，angular 的学习曲线.jpg

运行效率：作为谷歌团队开发的我的项目，angular 有着优良的运行效率，这点是毋庸置疑的，晚期的 ng 有着体积臃肿的诟病，这个问题也曾经在前期的版本中失去了解决
生态：国内乃至国内相较于 react 和 vue 都有着极少的应用人数，少到甚至难以搜寻到近两年对此框架评估的文章，但这并不代表这个框架的思维是落后的，不少的开发者对 ng 都有着较好的开发体验，高自在的开发格调最终都将走向一个对立的规范，正如天下大势，分久必合个别，而 ng 会不会是那个规范，有待进一步的张望

从以上介绍中不难看出，vue 是取 react 和 angular 二者特点所诞生的中庸之道，没有相对的自在，但又给予开发者自在的渠道；而尤雨溪自己起初也是受 angular 的启发，发明了 vue 这一框架；三者的相互比拟论战也能够演出一场精彩强烈的宫斗戏了；总之要主观的对待开发框架，框架只是一种开发工具，不是 pvp 论战的工具，再者不要过分纠结三门框架学习哪个，都去学习一点加深了解并不是好事，最初只有深刻理解了，能力晓得每个框架的优缺点以及这个我的项目真正须要应用的是哪个框架

省流助手：

英文好用 react
中小型交互简略短期保护我的项目用 vue，长线保护交互简单大我的项目用 react
程度不够不要轻易碰 angular

附图：三者下载量比拟

关于javascript:项目开发之前端

ajax

webpack

罕用前端框架

React

特点

代码示例

总体评估

Vue

特点

代码示例

总体评估

Angular

特点

代码示例

总体评估

总结

Just My Socks（注册教程内含优惠码）

关于javascript:项目开发之前端

ajax

webpack

罕用前端框架

React

特点

代码示例

总体评估

Vue

特点

代码示例

总体评估

Angular

特点

代码示例

总体评估

总结

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）