********JS大法的一些记录********-优快云博客

流传的什么语法糖啊，弱语言啊

jquery 是JS的一个框架
JS是网页的脚本语言
AJAX是指一种创建交互式网页应用的网页开发技术
ajax包括了xml css js 3个技术
jquery 中也集成了ajax 用他做不用考虑浏览器的不兼容性封装了一些麻烦的东西
AJAX和PHP结合起来就和做到页面不用刷新和服务器交互
VUE使用异步请求的话
异步查询数据，自然是通过ajax查询，但jQuery与MVVM的思想不吻合，而且ajax只是jQuery的一小部分。因此不可能为了发起ajax请求而去引用这么大的一个库，所以使用Vue官方推荐的ajax请求框架：axios。

网上的一些手机端混合开发感想：

1️⃣公司开始是用mui+h5+h5+开发的混合app使用mui+h5开发web app，不过折腾了半年发现app几个版本都不尽人意。主要体现在：性能跟不上、mui官方各种bug出来没人修复，社区越来越不活跃、有很多三方的插件官方集成难度太大。

2️⃣慢慢的意识到问题之后就寻求新的解决方案，开头我花了两三个星期学习vue.js，并且使用vue搭建app和公司后台，他两的路由框架全部配置好了。那时候觉得vue数据处理起来非常方便，单页面应用性能很不错，代码也很简洁、编写难度不大。不过随着app功能的深入，发现遇到难题了，用它跟原生层交互，必须使用h5+或者Cordova，这就很郁闷了，那时候用的版本1.*，vue更新速度非常快，对于我们这种小公司来说，它开发app难度有些大，并且它开发app的生态还不够完善，相对那时的我来说太过耗时间。

3️⃣于是看到了阿里的weex，花了几天了解，开头看他的文档感觉一脸懵逼，不知道他讲的是什么，后面慢慢才有些明白了。看了他的思路和他们做的产品，性能确实能够与原生媲美了，不过可惜的是：文档不够完善、组件也不够丰富、因为涉及到很多原生层面代码所以需要有一定的android和ios原生功底，不然到时候遇到bug都不知如何下手了、还有就是社区不活跃。所以还是不采这个坑。

4️⃣最后面接触到的是React-Native，第一感觉就是他就是我想要的东西了。它性能挺不错、生态完善、社区活跃（github有6w+ star）、组件丰富（官方插件组件很丰富、三方插件只有你想不到的没有做不到的、基本形成三方插件和官方插件互补的形式）、最重要的是原生功底没有硬性要求，一份代码能够兼容多端，这样就能够大大提升开发速度了、大部分与原生代码交互直接使用三方插件配置即可。

对比一下市面上面常用的nodejs,reactjs,AngularJS

Vue与react.js的区别
相同点：
vue和react是两个不像相同的框架，但是他们之间也是用共同特点的，所有的前端框架都有一些相同的特点，
vue和react之间关键的相同之处在于，它们在被设计出来时所用的理念是一样的，
比如：1、都用到了component组件，props参数传递，组件之间的通信，state状态管理器，lifecircle声明周期等等，
似乎现在的前端框架都已经成为了mvc或则mvvc的样子，虽然还有一部分前端开发还是传统模式，
但是必然会被node+webpack+vue /react---之类的自动化逐渐替代。
2、使用 Virtual DOM
提供了响应式（Reactive）和组件化（Composable）的视图组件。
保持注意力集中在核心库，伴随于此，有配套的路由和负责处理全局状态管理的库。
不同点：
vue和react.js最大不同之处在于它们对DOM的渲染方式不同，vue可以直接在vue文件中使用html标签，
数据绑定时类似angular，可以进行条件渲染，
而react.js则采用了jsx语法，运用虚拟DOM 的概念进行，DOM对页面元素进行渲染，
获取页面元素需要用ref来获取。

细说：
性能简介
到目前为止，在现实的测试中，Vue 是优于 React 的（通常至少快20%-50%，尽管在某些情况下还要更快）。

渲染性能
在渲染用户界面的时候，DOM的操作是最昂贵，不幸的是没有库可以让这些原始操作变得更快。
我们能做的最好的就是：

尽量减少DOM操作。Vue 和 React 都使用虚拟DOM来实现，并且两者工作一样好。
尽量减少除DOM操作以外的其他操作。这是 Vue 和 React的一个不同的地方。

更新性能
在React中，你需要在每个地方去实现 shouldComponentUpdate 。
在 Vue 中，组件的依赖被自动追踪，所以当这些依赖项变动时，它才会更新。
在长列表中，有时候需要进一步优化的话，只需要在每项上添加 key 属性。
这意味着，由于Vue内改进过的渲染性能，更新未经优化的Vue会比未经优化的React要快的多。
甚至全面优化过的React通常也会慢于未加处理的Vue。

开发中
用 Vue 和 React 开发大多数应用的速度都是足够快的。

然而，当你要开发一个对性能要求比较高的数据可视化或者动画的应用时，这将会很有用。

在开发中， Vue 每秒最高处理10帧，而 React 每秒最高处理不到1帧。

是由于 React 有大量的检查机制，这能让它提供许多有用的警告和错误提示信息。

我们同意那些很重要的，但在我们实现这些检查时候，也更加密切地关注着性能。

HTML & CSS
在React中，所有的都是 JavaScript，听起来十分简单和优雅。不幸的事实是，JavaScript 内的 HTML 和 CSS 会引起很多痛苦。

在 Vue 中我们采用的 Web 技术并在其上面扩展。接下来将通过一些实例向你展示这所意味的是什么。

在 React 中，所有的组件的渲染功能使用的都是JSX；

JSX的渲染功能有一些优势：

你可以使用的完整的编程语言JavaScript来构建你的视图页面。
工具对JSX的支持相比于现有可用的其他Vue模板还是比较先进的（比如，linting、类型检查、编辑器的自动完成）

vue中的Templates（Vue拥抱HTML，而不是用JavaScript重塑它）
优势如下：

在写模板的过程中，样式风格已确定和更少地涉及业务逻辑。
一个模板总是被声明的。
模板中任何 HTML 都是有效的。
阅读起来更像英语（比如，for each item in items）。
高级版本的 JavaScript 增加可读性。

React 生态也有一个项目允许你写模板，但是有一些缺点：

功能远没有 Vue 模板系统的丰富。
需要从组件文件中分离出HTML代码。
这是个第三方库，而非官方支持，可能未来核心库更新就不再支持。
规模
扩大：
Vue和React都提供了强大的路由来应对对于大型应用。

React社区在状态管理方面非常有创新精神（比如Flux、Redux），而这些状态管理模式甚至 Redux本身也是非常容易能够集成在Vue应用中的。

实际上，Vue更进一步地采用了这种模式（Vuex），把Vuex集成进Vue能带来更好的开发体验。

两者另一个重要差异是，

Vue伴随的路由库和状态管理库都是由官方支持维护且和核心库同步更新的。

React 生态更成熟，选择是把这些问题交给社区维护。

最后，Vue 提供了一个Vue-cli 脚手架，能让你非常容易地构建项目，可以包含 Webpack, Browserify, 或者 no build system。

React在这方面也提供了create-react-app，

缩小：

React学习曲线陡峭，在你开始学 React 前，你需要知道 JSX 和 ES2015，因为许多示例用的是这些语法。

Vue样扩大后就像React，缩小后就像 Jquery。

vue与AngularJS的区别
相同点：
都支持指令：内置指令和自定义指令。
都支持过滤器：内置过滤器和自定义过滤器。
都支持双向数据绑定。
都不支持低端浏览器。

不同的：
1.AngularJS的学习成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比较简单、直观。
2.在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢。
Vue.js使用基于依赖追踪的观察并且使用异步队列更新。所有的数据都是独立触发的。
对于庞大的应用来说，这个优化差异还是比较明显的。

复杂性
在 API 与设计两方面上 Vue.js 都比 Angular 1 简单得多，因此你可以快速地掌握它的全部特性并投入开发。

灵活性和模块化
Vue.js 是一个更加灵活开放的解决方案。它允许你以希望的方式组织应用程序，

而不是在任何时候都必须遵循 Angular 1 制定的规则，这使让Vue能适用于各种项目。

数据绑定
Angular 1 使用双向绑定，Vue在不同组件间强制适用单向数据流。这使应用中的数据流清晰易懂。

指令与组件
在 Vue 中指令和组件分得更清晰。指令只封装 DOM 操作，而组件代表一个自给自足的独立单元 —— 有自己的视图和数据逻辑。在 Angular 中两者有不少相混的地方。

性能
Vue.js 有更好的性能，并且非常非常容易优化，因为它不使用脏检查。

在Angular 1中，当 watcher 越来越多时会变得越来越慢，因为作用域内的每一次变化，所有 watcher 都要重新计算。

并且，如果一些 watcher 触发另一个更新，脏检查循环（digest cycle）可能要运行多次。

Angular 用户常常要使用深奥的技术，以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。

Vue.js 则根本没有这个问题，因为它使用基于依赖追踪的观察系统并且异步列队更新，所有的数据变化都是独立地触发，

除非它们之间有明确的依赖关系。

Ajax

2019年是ajax诞生的20周年。可以说，XMLHttpRequest的第一次实现是在1999年作为IE5.0 ActiveX组件发布。

在此之前，曾经有一些方法可以在不刷新页面的情况下从服务器获取数据，但是他们通常依赖笨拙的技术，例如<script>注入或第三方插件。微软开发了XMLHttpRequest初始版本, 用于替代Outlook基于浏览器的电子邮件客户端。

XMLHttpRequest直到2006年才成为Web标准，但在此之前已在大多数浏览器中被实现。由于它在Gmail和Google Maps中的采用，Jesse James Garrett在2005年发表了一篇文章：AJAX: A New Approach to Web Applications.这个新术语吸引了开发人员的关注。

从AJAX到Ajax

AJAX是Asynchronous JavaScript and XML的简称。"Asynchronous"一词很明显，但是：

虽然VBScript和Flash也可以实现，但是JavaScript更合适
有效负载不必是XML，尽管在当时很流行。在今天，可以使用任何的数据格式，通常JSON是首选。

现在，我们将“Ajax”用作客户端从服务器获取数据并动态更新DOM,而无需刷新整个页面的通用术语。Ajax是大多数Web应用程序和单页应用程序（SPA）的核心技术。

XMLHttpRequest

以下JavaScript代码展示了如何使用XMLHttpRequest(通常简称为XHR)向http://domain/service发出的HTTP GET请求。

let xhr = new XMLHttpRequest();
xhr.open('GET', 'http://domain/service');

// request state change event
xhr.onreadystatechange = function() {
  // request completed?
  if (xhr.readyState !== 4) return;

  if (xhr.status === 200) {
    // request successful - show response
    console.log(xhr.responseText);
  } else {
    // request error
    console.log('HTTP error', xhr.status, xhr.statusText);
  }
};

// start request
xhr.send();

XMLHttpRequest对象有许多属性、方法和事件。例如，可以设置和监测以毫秒为单位的超时：
xhr.timeout = 3000; // 3 seconds
xhr.ontimeout = () => console.log('timeout', xhr.responseURL);

并且progress事件可以报告长时间运行的文件上传：
// upload progress
xhr.upload.onprogress = p => { console.log( Math.round((p.loaded / p.total) * 100) + '%') ; }

属性的数量可能令人困惑，而且XMLHttpRequest的早期实现在跨浏览器之间也不一致。因此，很多库和框架都提供了Ajax的封装函数，例如jQuery.ajax()方法：

// jQuery Ajax
$.ajax('http://domain/service')
  .done(data => console.log(data))
  .fail((xhr, status) => console.log('error:', status));

Fetch

Fetch API是XMLHttpRequest的现代替代方案。通用的Header，Request和Response接口提供了一致性，同时Promises允许更简单的的链式调用和不需要回调的async/await。

fetch(
    'http://domain/service',
    { method: 'GET' }
  )
  .then( response => response.json() )
  .then( json => console.log(json) )
  .catch( error => console.error('error:', error) );

Fetch简洁，优雅，易于理解，并且在PWA Service Worker中大量使用。为什么不用它替代古老的XMLHttpRequest呢？

不幸的是，Web开发从未如此明确。Fetch还不是用于Ajax的完美替代品...

浏览器支持

Fetch API在大部分浏览器中得到了很好的支持，但是不支持所有版本的IE。使用2017年之前版本的Chrome，Firefox和Safari的人可能也会遇到问题。这些用户或许只占你用户群的一小部分……也有可能是主要客户。所以编码之前，请务必确认兼容性！

此外，与成熟的XHR对象相比，Fetch API较新，并且会接收更多正在进行的更新。这些更新不太可能破坏原始代码，但预计未来几年会进行一定的维护工作。

默认无Cookie

与XMLHttpRequest不同，Fetch并不会默认发送cookie，因此应用的身份验证可能会失败。可以通过更改第二个参数中传递的初始值来解决此问题，例如：

fetch(
  'http://domain/service',
  {
    method: 'GET',
    credentials: 'same-origin'
  }
)

错误不会被拒绝

令人惊讶的是，HTTP错误（例如404 Page Not Found 或 500 Internal Server Error）不会导致Fetch返回的Promise标记为reject；.catch()也不会被执行。想要精确的判断 fetch是否成功，需要包含 promise resolved 的情况，此时再判断 response.ok是不是为 true。如下：

fetch(
    'http://domain/service', 
    { method: 'GET' }
  )
  .then( response => {
    if(response.ok) {
      return response.json();
    }
    throw new Error('Network response was not ok.');
  })
  .then( json => console.log(json) )
  .catch( error => console.error('error:', error) );

仅当请求无法完成时才触发reject，例如网络故障或请求被阻止。这会使错误捕获更加复杂。

不支持超时

Fetch不支持超时，只要浏览器允许，请求将继续。解决方法是可以将Fetch包装在一个Promise中，例如：

// fetch with a timeout
function fetchTimeout(url, init, timeout = 3000) {
  return new Promise((resolve, reject) => {
    fetch(url, init)
      .then(resolve)
      .catch(reject);
    setTimeout(reject, timeout);
  }
}

或使用Promise.race()决定fetch或timeout何时首先完成，例如：

Promise.race([
  fetch('http://url', { method: 'GET' }),
  new Promise(resolve => setTimeout(resolve, 3000))
])
  .then(response => console.log(response))

中止Fetch

通过xhr.abort()很容易结束一个XHR请求，另外也可以通过xhr.onabort函数监测事件解决。

之前一直无法中止一个Fetch请求，但是现在实现了AbortController API的浏览器可以支持它。这将触发一个信号，该信号可以传递给Fetch启动对象：

const controller = new AbortController();

fetch(
  'http://domain/service',
  {
    method: 'GET'
    signal: controller.signal
  })
  .then( response => response.json() )
  .then( json => console.log(json) )
  .catch( error => console.error('Error:', error) );

Fetch可以通过调用controller.abort()来中止。Promise被标记reject后，会调用.catch()函数。