前端组件

基本思路 1. 为什么要做组件化？ 无论前端也好，后端也好，都是整个软件体系的一部分。软件产品也是产品，它的研发过程也必然是有其目的。绝大多数软件产品是追逐利润的，在产品目标确定的情况下，成本有两个途径来优化：减少部署成本，提高开发效率。 减少部署成本的方面，业界研究得非常多，比如近几年很流行的“去IOE”，就是很典型的，从一些费用较高的高性能产品迁移到开源的易替换的产品集群，又比如使用Linux + Mono来部署.net应用，避开Windows Server的费用。 提高开发效率这方面，业界研究得更多，主要途径有两点：加快开发速度，减少变更代价。怎样才能加快开发速度呢？如果我们的开发不是重新造轮子，而是 每一次做新产品都可以利用已有的东西，那就会好很多。怎样才能减少变更代价呢？如果我们能够理清模块之间的关系，合理分层，每次变更只需要修改其中某个部 分，甚至不需要修改代码，仅仅是改变配置就可以，那就更好了。 我们先不看软件行业，来看一下制造行业，比如汽车制造业，他们是怎么造汽车的呢？造汽车之前，先设计，把整个汽车分解为不同部件，比如轮子，引擎，车门， 座椅等等，分别生产，最后再组装，所以它的制造过程可以较快。如果一辆汽车轮胎被扎破了，需要送去维修，维修的人也没有在每个地方都修一下，而是只把轮胎 拆下来修修就好了，这个轮胎要是实在坏得厉害，就干脆换上个新的，整个过程不需要很多时间。

监听组件的生命周期 方法一：比如有父组件 Parent 和子组件 Child，如果父组件监听到子组件挂载 mounted 就做一些逻辑处理，常规的写法可能如下： // Parent.vue <Child @mounted="doSomething"/> // Child.vue mounted() { this.$emit("mounted"); } 方法二、有一种特别简单的方式，子组件不需要任何处理，只需要在父组件引用的时候通过@hook 来监听即可，代码如下： <Child @hook:mounted="doSomething" /> <Child @hook:updated="doSomething" /> 当然这里不仅仅是可以监听 mounted，其它的生命周期事件，例如：created，updated 等都可以。 来源： CSDN 作者： 高级前端工程师Vue方向 链接： https://blog.csdn.net/weixin_43837268/article/details/104746887

content | 过滤器, vue中没有提供相关内置过滤器，可以自定义过滤器 过滤器有2中，分别是组件内过滤器和全局过滤器 组件内的过滤器就是options中的一个filters属性（一个对象） 两者区别： 全局的范围大，如果出现同名，权力小 组件内的出现同名时，权力大，范围小 来源： CSDN 作者： 前端黎姿 链接： https://blog.csdn.net/weixin_45622540/article/details/104728345

UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量级的基本UI组件合集 vue-material - 通过Vue Material和Vue 2建立精美的app应用 muse-ui - 三端样式一致的响应式 UI 库 vuetify - 为移动而生的Vue JS 2组件框架 vonic - 快速构建移动端单页应用 eme - 优雅的Markdown编辑器 vue-multiselect - Vue.js选择框解决方案 vue-table - 简化数据表格 VueCircleMenu - 漂亮的vue圆环菜单 vue-chat - vuejs和vuex及webpack的聊天示例 radon-ui - 快速开发产品的Vue组件库 vue-waterfall - Vue.js的瀑布布局组件 vue-carbon - 基于 vue 开发MD风格的移动端 vue-beauty - 由vue和ant design创建的优美UI组件 vue-blu - 帮助你轻松创建web应用 vueAdmin - 基于vuejs2和element的简单的管理员模板 vue-syntax-highlight -

为什么要持续学习呢？ 大学之道，在明明德，在亲民，在止于至善。知止而后有定，定而后能静，静而后能安，安而后能虑，虑而后能得。物有本末，事有终始，知所先后，则近道矣。 男人的极大幸运在于，他，不论在成年还是在小时候，必须踏上一条极为艰苦的道路，不过这是一条最可靠的道路；女人的不幸则在于被几乎不可抗拒的诱惑包围着；她不被要求奋发向上，只被鼓励滑下去到达极乐。当她发觉自己被海市蜃楼愚弄时，已经为时太晚，她的力量在失败的冒险中已被耗尽。 关于小程序配置 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab [底部或顶部菜单]等。 app.json中不能添加任何注释，key和value必须用双引号引起来，否则会报错。 pages 接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【**路径+目录名+文件名(不包含后缀名)】**信息，数组的第一项代表小程序的初始页面(首页)。小程序中新增/减少页面，都需要对 pages 数组进行修改。 注：数组的第一项为小程序初始页面 概述 从事过网页编程的人知道，网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。 同样道理

绪言A：前端性能的重要性 性能黄金法则：只有10%~20%的最终用户响应时间花在了下载HTML文档上，其余80%~90%时间花在了下载页面中的所有组件上。 规则1：减少HTTP请求 图片地图 图片地图允许在一个图片上关联多个URL，目标URL的选择取决于用户点击了图片上的哪个位置。 图片地图有两种类型 服务器端图片地图：将用户点击提交到服务端，并向其传递用户点击的x、y坐标。Web应用程序将x、y映射为适当的操作。 客户端图片地图：通过HTML的MAP标签实现。 CSS Sprites 任何支持背景图片的HTML元素都能CSS Sprites，通过background-image和background-position来实现。 内联图片 通过使用data:URL模式可以在Web页面中包含图片但无需任何额外的HTTP请求。 data:[<mediatype>][;base64],<data> 由于data:URL是内联在页面中的，在跨越不同页面时不会被缓存 合并脚本和样式表 规则2：使用内容发布网络（CDN） 如果应用程序Web服务器离用户更近，则一个HTTP请求响应时间将缩短。另一方面，如果组件Web服务器离用户更近，则多个HTTP请求的响应时间将缩短。 内容发布网络 内容发布网络是一组分布在多个不同地理位置的Web服务器，用于更加有效地向用户发布内容。 优点： 缩短响应时间

一、简介： React 是一个用于构建用户界面的 JAVASCRIPT 库。 React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。 React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。 React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。 1.1、React 特点 1.声明式设计 −React采用声明范式，可以轻松描述应用。 2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。 3.灵活 −React可以与已知的库或框架很好地配合。 4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。 5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。 6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。 1.2、为什么使用 React? React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。很人多认为 React 是 MVC 中的 V （视图）。 我们创造 React 是为了解决一个问题：

　　很久就期待学习react了，惰性，一直都没有去翻阅react的资料，最近抽空，简单的了解了一下react，先记录一下，后续慢慢的学习。 一、ReactJS简介 　　React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。 　　ReactJS官网地址：http://facebook.github.io/react/ 　　Github地址：https://github.com/facebook/react 二、ReactJS特点 　　React 的核心思想是：封装组件。 　　各个组件维护自己的状态和 UI，当状态变更，自动重新渲染整个组件。 　　基于这种方式的一个直观感受就是我们不再需要不厌其烦地来回查找某个 DOM 元素，然后操作 DOM 去更改 UI。基于这些概念：组件，JSX，Virtual DOM，Data Flow 　　 组件 　　React 应用都是构建在组件之上。 　　上面的 HelloMessage 就是一个 React 构建的组件，最后一句 render 会把这个组件显示到页面上的某个元素 mountNode 里面，显示的内容就是 <div>Hello John</div>。 props

对Vue进一步理解 1、Vue的特点（数据的双向绑定和组件化） A.响应式：可以实现数据和视图层的双向绑定，可以只关心数据，试图会自动同步，减少了DOM 操作 B.组件化、模块化：将大片的代码拆分成若干个小的模块，增强了代码的复用性和可读性，便于管理 2、vue与后台交互的方法 Get post put delete Get：将提交的数据放在URL中，即以明文的方式传递参数数据（以？分割URL地址和数据，参数间以&相连接）； 因为受URL长度限制，传递的数据量较小，最大不超过2kB; 会产生一个TCP数据包，会把header和data一并发出去，服务器响应200并传回相应的数据 Post：将提交的数据放在请求体中； 传递的数据量较大，一般不受限制，（大小取决于服务器的处理能力）； 会产生两个TCP数据包，浏览器会先把header发出去，浏览器响应100（continue）后，浏览器再发送data，服务器响应200，并回传相应的数据 get在浏览器回退的时候是无害的，而post会再次提交请求；get请求参数会被完整的保留在浏览器的历史记录中，而post不会；对于参数的数据类型，Get只接收ASCII字符，而post没有限制；get参数通过URL传递，post放在request body中 Post和get本质上是没有区别的；GET和POST是HTTP协议中两种发送请求的方法

Serverless 是当下炙手可热的技术，被认为是云计算发展的未来方向，拥有免运维、降低开发成本、按需自动扩展等诸多优点。尤其是在前端研发领域，使用 Node 开发云函数，可以让前端工程师更加专注于业务逻辑，实现全栈工程师的角色转变。但现有的开发模式、工具、脚手架已经标准化、流程化，存量业务正在线上稳定运行，如何将 Serverless 融入到现有开发模式和工具中？如何将 Serverless 和当前的业务进行结合落地？本文将尝试给出解答。 本文内容整理自腾讯 Serverless 技术专家王俊杰在 GMTC 2019 深圳站的演讲。 前端与 Serverless 的不解之缘 目前很多前端同学都在学习 Serverless，很多文章和教程对 Serverless 都有不同方式的解读，今天我们首先来回顾三个问题： 究竟什么是 Serverless？ Serverless 是否等于 FaaS 加 BaaS？ 我们所说的 FaaS 是什么？ 加州大学伯克利分校 2019 年 3 月份发表过一篇论文，名为《Cloud Programming Simplified: A Berkeley View on Serverless Computing》，文中对“Serverless 是什么”进行了一些描述： Put simply,serverless computing = FaaS +