TOMMYHU

1.PWA 渐进式网络应用 ( Progressive Web Apps )

PWA（Progressive Web App）是全新的网页技术，让网站的离线体验变得更好，网络连接断断续续时体验也会更好，它会模拟一些原生功能，比如通知推送。在移动端利用标准化框架，让网页应用呈现和原生应用相似的体验

Google 声称世界各地各行业在在 PWA 的构建上都获得了很大的成功，星巴克在推出 PWA 网站后，日活跃用户数量增加了 2 倍，他们对广告网站进行测试，发现当一个网站切换到 PWA 时，平均转化率提高了 20%。

PWA学习文档  https://juejin.im/entry/5a1c394a5188255851326da5

LAVAS -基于 Vue.js 的 PWA 解决方案 帮助开发者快速搭建 PWA 应用，解决接入 PWA 的各种问题.

地址  https://lavas.baidu.com/

相关联的Service Worker技术

Service Worker 是近年来 Web 最大的改进之一，它是 Chrome 团队力推的一个 Web API，它将开发人员从页面的生命周期中解放出来，运行于浏览器后台，可以控制打开作用范围下的所有页面请求，使 Web 应用程序能够脱机工作。

Workbox库 https://developers.google.com/web/tools/workbox/

2. Polymer

Polymer是一个开源JS库，由Google Chrome团队内部的前端开发者发起并维护。

如你所知，Chrome浏览器对各种WEB新标准的兼容一直支持得非常好。比如：Web Components、Service Workers，以及HTTP/2。因此，Polymer认为，我们应该充分利用浏览器平台本身的能力，而不是去重复发明各种轮子。

文档 : https://www.polymer-project.org/2.0/start/

3.WebAssembly

使用WebAssembly，我们可以在浏览器中运行一些高性能、低级别的编程语言，可用它将大型的C和C++代码库比如游戏、物理引擎甚至是桌面应用程序导入Web平台。

学习地址 https://segmentfault.com/a/1190000008402872

4.Web Components

https://blog.csdn.net/powertoolsteam/article/details/17997291

5.GraphQL

GraphQL 是一个由Facebook提出的 应用层查询语言. 使用 GraphQL, 你可以基于图模式定义你的后端. 然后客户端就可以请求所需要的数据集。

各版本服务实现 http://graphql.cn/code/#javascript

1. vonic 一个基于 vue.js 和 ionic 样式的 UI 框架，用于快速构建移动端单页应用，很简约，是我喜欢的风格 star 2.3k

中文文档 在线预览

2.vux 基于WeUI和Vue(2.x)开发的移动端UI组件库 star 10k

基于webpack+vue-loader+vux可以快速开发移动端页面，配合vux-loader方便你在WeUI的基础上定制需要的样式。

中文文档 在线预览

3.Mint UI 由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库 star 8.3k

中文文档 github地址 在线预览

4.MUI  最接近原生APP体验的高性能前端框架 star 7.5k

中文文档 github地址

5.Muse-ui   基于 Vue 2.0 和 Material Design 的 UI 组件库 star 4.9k

中文文档 github地址

6.Vant是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。star 1k

中文文档 github地址

7.Cube UI star 3k

滴滴 WebApp 团队 实现的 基于 Vue.js 实现的精致移动端组件库

github地址 中文文档

特性

    
•     

  质量可靠

      

  由滴滴内部组件库精简提炼而来，经历了业务一年多的考验，并且每个组件都有充分单元测试，为后续集成提供保障。

      
    
•     

  体验极致

      

  以迅速响应、动画流畅、接近原生为目标，在交互体验方面追求极致。

      
    
•     

  标准规范

      

  遵循统一的设计交互标准，高度还原设计效果；接口标准化，统一规范使用方式，开发更加简单高效。

      
    
•     

  扩展性强

      

  支持按需引入和后编译，轻量灵活；扩展性强，可以方便地基于现有组件实现二次开发

      

学习reactjs的tutorial是看到function(){this.XX }.bind(this);不是很理解。
补充： bind的作用我懂，在这里的写法的目的不太了解
$.ajax({       url: this.props.url,       dataType: 'json',       cache: false,       success: function(data) {         this.setState({data: data});       }.bind(this),       error: function(xhr, status, err) {         console.error(this.props.url, status, err.toString());       }.bind(this)     });
传送门函数
改变this的指向，类似以前大家很喜欢写的var that = this;或者var self = this;
都是一个道理

有多种方式可以在vue中定义模板组件。我算了一下，至少有7种不同的方法：


字符串（String）
模板字符串（Template literal）
X-Templates
内联（Inline）
Render函数（Render functions）
JSX
单文件组件（Single page components）


当然，可能还有更多方法!

在这篇文章里，我们将会展示每一个方法的示例，分析其优缺点，以便你能明白在特定的情形下，哪种方式是合适的。

1. 字符串
默认情况下，在JS文件里模板会被定义为一个字符串。但是我觉得大家都会同意这种写法很难看懂，它除了有广泛的浏览器支持之外，并没有什么优势。
Vue.component('my-checkbox', {   template: '<div class="checkbox-wrapper" @click="check"><div :class="{ checkbox: true, checked: checked }"></div><div class="title">{{ title }}</div></div>',   data() {     return { checked: false, title: 'Check me' }   },   methods: {     check() { this.checked = !this.checked; }   } });


2. 模板字符串（Template literals）

render: h => h(App)

如果你一脸懵逼，看看下面的 你就开朗了
h作为createElement的别名是一个通用惯例

下面的写法也许会更白话一点
render: function (createElement) {     return createElement(App); }
或
render (createElement) {     return createElement(App); }
或
render (h){     return h(App); }
最后箭头函数缩写得到现在的样子
render: h => h(App)


其中 根据 Vue.js 作者 Even You 的回复，h 的含义如下：

作用：将一个数组转为用逗号分隔的参数序列。
//该运算符主要用于函数调用。<br/>function push(array, ...items) {   array.push(...items); } function add(x, y) {   return x + y; } var numbers = [4, 38]; add(...numbers) // 42 //扩展运算符取代apply方法的一个实际的例子，应用Math.max方法，简化求出一个数组最大元素的写法。 // ES5 的写法 Math.max.apply(null, [14, 3, 77]) // ES6 的写法 Math.max(...[14, 3, 77]) // 等同于 Math.max(14, 3, 77); //通过push函数，将一个数组添加到另一个数组的尾部 // ES5的 写法 var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; Array.prototype.push.apply(arr1, arr2); // ES6 的写法 var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; arr1.push(...arr2); //合并数组 // ES5 [1, 2].concat(more) // ES6 [1, 2, ...more] var arr1 = ['a', 'b']; var arr2 = ['c']; var arr3 = ['d', 'e']; // ES5的合并数组 arr1.concat(arr2, arr3); // [ 'a', 'b', 'c', 'd', 'e' ] // ES6的合并数组 [...arr1, ...arr2, ...arr3] // [ 'a', 'b', 'c', 'd', 'e' ] 扩展运算符将字符串转为真正的数组 [...'hello'] // [ "h", "e", "l", "l", "o" ]

1. vue-router懒加载定义
当路由被访问的时候才加载对应组件

2. vue-router懒加载作用
当构建的项目比较大的时候，懒加载可以分割代码块，提高页面的初始加载效率。

3. vue-router懒加载实现
第一种写法
const routers = [     {         path: '/',         name: 'index',         component: (resolve) => require(['./views/index.vue'], resolve)     } ]

第二种写法
const Index = () => import(/* webpackChunkName: "group-home" */  '@/views/index') const routers = [     {         path: '/',         name: 'index',         component: Index     } ]
第三种写法
const Index = r => require.ensure([], () => r(require('./views/index')), 'group-home'); const routers = [     {         path: '/',         name: 'index',         component: Index     } ]
备注
‘@/’ 和 ‘./’有异曲同工之用 ‘.vue’后缀可省略 ‘group-home’ 是把组件按组分块打包, 可以将多个组件放入这个组中

时光不会遗弃努力的人，但也不一定会带努力的人一起快乐的玩耍
好吧，说人话，我遭遇中年危机了
干着平凡枯燥没有前途的工作，拿着刚够养家糊口的薪水，感觉遇到一道瓶颈，等待突破的时刻
…………