前端组件

1. 测试类型 单元测试：指的是以原件的单元为单位，对软件进行测试。单元可以是一个函数，也可以是一个模块或一个组件，基本特征就是只要输入不变，必定返回同样的输出。一个软件越容易些单元测试，就表明它的模块化结构越好，给模块之间的耦合越弱。React的组件化和函数式编程，天生适合进行单元测试 功能测试：相当于是黑盒测试，测试者不了解程序的内部情况，不需要具备编程语言的专门知识，只知道程序的输入、输出和功能，从用户的角度针对软件界面、功能和外部结构进行测试，不考虑内部的逻辑 集成测试：在单元测试的基础上，将所有模块按照设计要求组装成子系统或者系统，进行测试 冒烟测试：在正式全面的测试之前，对主要功能进行的与测试，确认主要功能是否满足需要，软件是否能正常运行 2. 开发模式 TDD: 测试驱动开发，英文为Testing Driven Development，强调的是一种开发方式，以测试来驱动整个项目，即先根据接口完成测试编写，然后在完成功能是要不断通过测试，最终目的是通过所有测试 BDD: 行为驱动测试，英文为Behavior Driven Development，强调的是写测试的风格，即测试要写的像自然语言，让项目的各个成员甚至产品都能看懂测试，甚至编写测试 TDD和BDD有各自的使用场景，BDD一般偏向于系统功能和业务逻辑的自动化测试设计

个人认为：前端发展的导向是前端工程化，智能化，模块化，组件化，层次化。 一个项目的开发逐渐在人工智能+物联网的时代，走向以下的五化 原因: Web前端页面的开发必然与DOM进行交互操作，前端框架的一次次更新，是从满足目前的业务需求到提升效率的阶段，慢慢走向改善性能的阶段（开发和部署环境优化，代码优化，网站性能优化，数据优化，页面优化等等）。 1.前端工程化。 前端工程化指的是将软件工程的方法和原理运用在前端开发中, 目的是实现 高效协同，质量开发。 具体是： a.Node服务，提供数据代理，路由，服务器渲染。 b.Web应用开发，专注于web交互体验。 c.前端运维：构建，测试，部署，监控。 2.前端模块化(页面模块化开发+基础模块化)。 （1）基础模块化： A. CommonJS————同步加载、服务器端的模块化规范，采用案列：Node.js 实现原理： 一个单独的文件就是一个模块； 加载模块采用同步方式，加载完成后才能执行后面的操作； 加载模块使用require方法，该方法读取一个文件并执行，最后返回内部的exports对象； 特点： 比较适合运用于服务器的编程，加载模块文件通常都存在本地磁盘，加载过程无延迟，无需异步加载 B. AMD————异步加载，采用案例：require.js 实现原理： 异步模块定义，通过一个函数封装所有所需要、所依赖的模块/方法/对象/属性；

element-ui中的backtop返回顶部组件的使用 最近写的项目中用到了vue和element-ui实现前端页面，在最后写到返回顶部的时候，看到有自带的组件就直接使用了，但是在copy代码进去之后发现没生效。 找了不少文章，有些是直接copy了官方的文档，有的是给出了 解决方案，但是没有说明，有点看不懂到底要怎么弄。 最后的最后，我差点就自己写原生。 最终因为懒就没有自己写。 所以我仔细观察了下官方文档的使用方法之后，得出结论，需要自己写个内容区。 < div class = " content-area " > < el-backtop target = " content-area " > </ el-backtop > <!-- 内容区代码 --? </ div > /* 我自己写的时候是scss */ .content-area { /* 这里高度减60像素减的是顶部导航条的高度。避免出现浏览器自带的滚动条 */ height : calc ( 100vh - 60px ) ; /* 溢出高度自动显示滚动条 */ overflow : auto ; } 来源： CSDN 作者： 林深鹿 链接： https://blog.csdn.net/qq_35117063/article/details/103587438

一、router路由发展的几个阶段 1、后端路由阶段 后端渲染：前端只有html和css，后端通过jsp等技术渲染页面，再交给前端。 后端路由：后端处理url和页面映射之间的关系。后端通过正则匹配url，controller控制器来处理匹配的页面，把html返回给前端。 2、前后端分离阶段 后端负责数据， 前端渲染：网页中的内容大部分是由前端写的js在浏览器中执行，后端负责提供API和数据 3、前端路由阶段（SPA单页面富应用阶段） 整个网页只有一个html页面（包含html+css+js），当用户点击时，从url1–>url2，通过前端路由，加载url2的内容（在vue中就是加载一个组件。） 改变url页面不整体刷新，两种实现方式： （1）改变url的hash，location.hash=‘aaa’ （2）html5中的history模式pushState,history.pushState({},’’,‘home’)三个参数为data title url。 history.pushState入栈 history.go(-1)=history.back()出栈 history.forward()=history.go(1) 二、基础知识0 1、懒加载 build打包时，appxxx.js文件变得很大，使用懒加载更高效。 router懒加载：用到的时候再加载

后台管理UI的选择 目录 一、EasyUI 二、DWZ JUI 三、HUI 四、BUI 五、Ace Admin 六、Metronic 七、H+ UI 八、Admin LTE 九、INSPINIA 十、LigerUI 十一、FineUI 十二、其它UI 十三、总结 最近要做一个企业的OA系统，以前一直使用EasyUI，一切都好，但感觉有点土了，想换成现在流行的Bootstrap为基础的后台UI风格，想满足的条件应该达到如下几个： 1、美观、大方、简洁 2、兼容IE8、不考虑兼容IE6/IE7，因为现在还有很多公司在使用Win7系统，系统内置了IE8 3、能通过选项卡打开多个页面，不想做单页，iframe也没关系 4、性能好，不要太笨重 5、最好以Bootstrap为基础 6、还希望在以后别的系统中能够复用。 一次次反复纠结的选择开始了，给大家介绍下我考虑过的UI，也给大家一个参考。 一、EasyUI easyui是一种基于jQuery的用户界面插件集合。 easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。 使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。 easyui是个完美支持HTML5网页的完整框架。 easyui节省您网页开发的时间和规模。 easyui很简单但功能强大的。 优点：轻量、功能强大、免费

前言 Kubernetes的教程一直在编写，目前已经初步完成了以下内容： 1）基础理论 2）使用Minikube部署本地Kubernetes集群 3）使用Kubeadm创建集群 接下来还会逐步完善本教程，比如Helm、ELK、Windows Server容器等等。 目录 Kubernetes主体架构 1.1.主要核心组件 1.1.1. Master组件 1.1.2. 节点（Node）组件 1.1.3. 插件 1.2. 基本概念 1.2.1. 容器组（Pod） 1.2.2. 服务（Service） 1.2.3. 卷（Volume） 1.2.4. 标签（Labels）和标签选择器（Label Selector） 1.2.5. 复制控制器（Replication Controller，RC） 1.2.6. 副本集控制器（Replica Set，RS） 1.2.7. 部署控制器(Deployment) 1.2.8. StatefulSet 1.2.9. 后台支撑服务集（DaemonSet） 1.2.10. 一次性任务（Job） Kubernetes主体架构 k8s的整体架构如下图所示： C:\Users\Lys_Desktop\Documents\Tencent Files\512982554\FileRecv\思维导图1.png 1.1主要核心组件 1.1.1Master组件

为什么会有 Vuex 这个东西 ？ 红尘小说网 wap.zuxs.net 一个应用内部运行的机制， 事件 -> 状态 -> UI ，我们的前端常常会因为这两个过程而产生大量代码，从而变得难以维护。 vue的声明式渲染，解决了从 状态 和 UI 的同步问题，从而使我们不需要由于状态发生改变去写大量的命令式改变 dom 的代码。 而类似于 vuex 这类状态管理的库，则解决了 事件 -> 状态 这个过程的维护问题。这类库所做的事情就是管理从 事件源映射到状态变化 这个过程(将这个映射过程 从视图组件中剥离出来 ，组织好这一部分的代码，在组件外部进行状态的管理) Vuex与全局对象的区别 其实， vuex 与全局对象有一定的共同之处，那就是状态会被全局共享，无论是嵌套多少组件… 每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的 状态 (state) 。Vuex 和单纯的全局对象有以下两点不同： Vuex 的状态存储是 响应式 的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到 **高效更新 **。 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地 提交 (commit) mutation 。这样使得我们可以方便地

转载自： http://www.bslxx.com/m/view.php?aid=1799 1.框架和库的区别： 框架：framework 有着自己的语法特点、都有对应的各个模块 库 library 专注于一点 框架的好处： 1.提到代码的质量，开发速度 2.提高代码的复用率 3.降低模块之间的耦合度 （高内聚低耦合） UI：user interface GUI : graphical user interface CLI : command line interface API : application interface 思维模式的转换： 从操作DOM的思维模式 切换到 以数据为主 2.Vue概述 1、what 是一个渐进式的构建用户界面的js框架 2、where 小到的简单的表单处理，大到复杂的数据操作比较频繁的单页面应用程序 3、why 1.方便阅读的中文文档 2.容易上手 （学习曲线比较缓和） 3.体积小 4.基于组件化的开发方式 5.代码的可读性、可维护性得到了提高 4、how 工作方式：可以通过丰富的指令扩展模板，可以通过各种各样的插件来增强功能 搭建环境： 方式1 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project #

作者： 阮一峰 日期： 2015年3月31日 现在最热门的前端框架，毫无疑问是 React 。 上周，基于 React 的 React Native 发布，结果一天之内，就获得了 5000 颗星，受瞩目程度可见一斑。 React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架 ，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月 开源 了。 由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。 这个项目本身也越滚越大，从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目，目标更是宏伟，希望用写 Web App 的方式去写 Native App。如果能够实现，整个互联网行业都会被颠覆，因为同一组人只需要写一次 UI ，就能同时运行在服务器、浏览器和手机（参见 《也许，DOM 不是答案》 ）。 既然 React 这么热门，看上去充满希望，当然应该好好学一下。从技术角度，可以满足好奇心，提高技术水平；从职业角度，有利于求职和晋升，有利于参与潜力大的项目。但是，好的 React 教程却不容易找到

目录 Vue 渐进式 JavaScript 框架 一、走进Vue 二、Vue实例 三、 生命周期钩子 四、Vue指令 五、组件 六、Vue-CLI 项目搭建 Vue 渐进式 JavaScript 框架 通过对框架的了解与运用程度，来决定其在整个项目中的应用范围，最终可以独立以框架方式完成整个web前端项目 一、走进Vue 1、what -- 什么是Vue 可以独立完成前后端分离式web项目的JavaScript框架 2、why -- 为什么要学习Vue 三大主流框架之一：Angular React Vue 先进的前端设计模式：MVVM 可以完全脱离服务器端，以前端代码复用的方式渲染整个页面：组件化开发 3、special -- 特点 单页面web应用 数据驱动 数据的双向绑定 虚拟DOM 4、how -- 如何使用Vue 开发版本： vue.js 生产版本： vue.min.js <div id="app"> {{ }} </div> <script src="js/vue.min.js"></script> <script> new Vue({ el: '#app' }) </script> 二、Vue实例 1、el：实例 new Vue({ el: '#app' }) // 实例与页面挂载点一一对应 // 一个页面中可以出现多个实例对应多个挂载点 // 实例只操作挂载点内部内容