前端组件

记录一下最近项目所用到的技术React + Dva + Antd + umi ，以免忘记。之前没有用过它们其中一个，也是慢慢摸索，了解数据整个流程。 先了解下概念 React 不多说，3大框架之一； Dva 是由阿里架构师 sorrycc 带领 team 完成的一套前端框架，在作者的 github 里是这么描述它的：“dva 是 react 和 redux 的最佳实践”。现在已经有了自己的 官网 https://dvajs.com； Antd 是阿里的一套开箱即用的中台前端/设计解决方案，UI框架，官网 http://ant-design.gitee.io/index-cn； umi 是 dva 作者 sorrycc 最近整的新玩意，2018.2.26 发布的 1.0 版本。sorrycc 认为之前 dva 固然好，但还要用户自己引入 UI 工具 antd，打包工具 roadhog，路由 react-router，状态管理器 dva，这些很麻烦，所以弄了这个，官网 https://umijs.org； 在dva中主要分3层，models,services,components,其中models是最重要概念，这里放的是各种数据，与数据交互的应该都是在这里。services是请求后台接口的方法。components是组件了。 services层： export function

1、对 SPA 单页面的理解，它的优缺点分别是什么？ SPA,就是我们常常说的单页面应用 仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。 优点： 用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染； 基于上面一点，SPA 相对对服务器压力小； 前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理； 缺点： 初次加载耗时多 ：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载； 前进后退路由管理 ：由于单页应用在一个页面中显示所有的内容，所以 不能使用浏览器的前进后退功能 ，所有的页面切换需要自己建立堆栈管理； SEO 难度较大 ：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。 2、v-show 与 v-if 有什么区别？ 实现机制： v-if 通过控制dom节点的存在与否来控制元素的显示隐藏， v-show 是通过设置display样式，block为显示，none为隐藏 编译过程： v-if 切换有局部编译/卸载的过程

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 - Sublime

　　项目名称 　　 　　树洞（tree-hole） 　　 　　项目背景 　　 　　有些话不适合对任何人说，何不对着树洞发泄一下。 　　 　　树洞的想法源自于一个朋友对知己的看法，最初设计有一点像漂流瓶。不过，这样的想法有一点傻。如果要严格匹配出一个知己需要大量的用户，需要大数据支持，一个初级产品是不可能有如此的用户群。于是，我联想到了电影《解忧杂货铺》，这样就可以避开大数据，同时对不法行为也是一种拦截。当然，如果要做成一个成型的产品需要一个漫长的过程。 　　 　　这样的产品在市面上是存在的，有成功的，也有失败的。当我开始做个项目的时候也并没有要把它做完整，毕竟想法不完整，同时还需要进行一些必要的知识补救。也就是说这只是一个Demo，并不完整的东西，仅仅是为了练习一下技术。最初也想做成一个完整的项目，而且也聚集了一些朋友，不过做到后面有些不尽人意了。大家抱着不挣钱练技术的心态是建设不出好的项目来，而且我觉得主要工作在后端。另外，大家也似乎都很忙，沟通成本也太高了，只好作罢。 　　 　　所以，在这儿也就不做项目的结构介绍，等做成完整项目之后再做一个全面的输出。毕竟只有一个人弄，还要去学后端，这是又一个漫长的过程。 　　 　　技术选型 　　 　　近期主要研究的是vue，之前对比过vue-cli2和vue-cli3的差异，vue-cli3更简洁。但是之前没有研究明白，因此这次选用vue

springMVC是一个MVC模式的实现，至于具体什么是MVC大佬们写了多很详细的博文给出一些链接： 链接1 、 SpringMVC框架“简单”执行流程 1、首先用户（或浏览器）发送请求到服务端。 2、在服务端配置好的的 前端控制器DispatcherServlet 就会接受这个请求，这个前端控制器很重要，他负责把用户的请求， 有序的 送给各个springMVC的组件来执行（当然这个前端控制器也是一个springmvc的一个组件）。 3、当数据都处理好之后（比如：如果用户请求访问一个页面，而这个页面需要在后台做一些处理，比如给页面添加时间、用户信息等）， 前端控制器DispatcherServlet 会将处理好的数据传给用户（或者浏览器）。 提示：从上面看 前端控制器DispatcherServlet 是个 很厉害的类 整个springMVC的流程都有他参与。那么是不是只要有他就能完成整个springmvc的流程了呢？当然不是，上面只是介绍了最简单的流程。下面会分析下 前端控制器DispatcherServlet 到底做了什么。 SpringMVC框架“详细”执行流程 从上面的图可以看到在整个流程的几个调用（2、4、8、10、11）中都是由前端控制器来决定的，这样看来这个前端控制器更像是一个 中央控制器 ，但是不知道为什么看了好多博文都称他为前端控制器

这个不要脸的 jQuery 扩充函数 - jquery-model 是在下的拙作，原本是我个人用 jQuery 在开发前端程序时所使用的，同事也拿去用了之后受到好评，应该也可以推荐给大家，它不是一个什么高大上的东西，只是让我在将 UI 上的内容兜成 JSON 对象时可以少写一些程序。 缘起 会搞这个东西有两个原因，第一个原因是“ 有时候前端的 MVVM 框架太沉重了 ”，使用 MVVM 的前端框架来开发 SPA 程序真的非常合适，只要专注在 Model 上，以及事先声明好状态与 UI 的关系，后续就交给框架来处理，相当轻松，但是当我的页面是无状态的时候，引用 MVVM 前端框架就显得有点杀鸡用牛刀的感觉。 第二个原因是“ 团队以 jQuery 为主要的前端工具 ”，我们公司的 UI 设计师强项在 HTML 跟 CSS，JavaScript 就弱了一些，所以经常会去找一些现成的 jQuery Plugin 回来自己调模式，以实现页面上一些特殊的交互功能，那么 MVVM 前端框架大都无法跟 jQuery Plugin 直接无缝接轨，运气好一点是可以找到有大大缝合好的版本，没有的话就要自己缝了。 基于这两个原因，我就在想能不能有一个简便的方法，直接将 HTML 组件的内容转成一个 JSON 对象，以及将 JSON 对象更新到 HTML 组件上？　因此 jquery-model 就诞生了。

本人于7-8月开始准备面试，过五关斩六将，最终抱得网易归，深深感受到高级前端面试的套路。以下是自己整理的面试题汇总，不敢藏私，统统贡献出来。 面试的公司分别是：阿里、网易、滴滴、今日头条、有赞、挖财、沪江、饿了么、携程、喜马拉雅、兑吧、微医、寺库、宝宝树、海康威视、蘑菇街、酷家乐、百分点和海风教育。 以下是面试题汇总，前端进阶系列会持续深入更新面试题解，共勉！ 阿里 使用过的koa2中间件 koa-body原理 介绍自己写过的中间件 有没有涉及到Cluster 介绍pm2 master挂了的话pm2怎么处理 如何和MySQL进行通信 React声明周期及自己的理解 如何配置React-Router 路由的动态加载模块 服务端渲染SSR 介绍路由的history 介绍Redux数据流的流程 Redux如何实现多个组件之间的通信，多个组件使用相同状态如何进行管理 多个组件之间如何拆分各自的state，每块小的组件有自己的状态，它们之间还有一些公共的状态需要维护，如何思考这块 使用过的Redux中间件 如何解决跨域的问题 常见Http请求头 移动端适配1px的问题 介绍flex布局 其他css方式设置垂直居中 居中为什么要使用transform（为什么不使用marginLeft/Top） 使用过webpack里面哪些plugin和loader webpack里面的插件是怎么实现的 dev

uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。 开发者通过编写 Vue.js 代码，uni-app 将其编译到iOS、Android、微信小程序、H5等多个平台，保证其正确运行并达到优秀体验。 <template> <view class="content"> </view> </template> <script> export default { data: { } } </script> methods: { openinfo() { var newsid = e.currentsTarget.dataset.newsid; uni.navigateTo({ url: '../info/info?newsid='+newsid }) } } export defaults { onLoad: function(e){ uni.request({ url: ''+e.newsid, method: 'GET', data: {}, success: res => { } fail: () => {}, complete: () => {} }) } } <template> <view class="content"> <view class="title"></view> </view> </template> <rich-text class=

为了让代码更灵活，可以写更多的组件，我们把这种模式抽象出来，放到一个 Component 类当中： class Component { setState (state) { const oldEl = this.el this.state = state this._renderDOM() if (this.onStateChange) this.onStateChange(oldEl, this.el) } _renderDOM () { this.el = createDOMFromString(this.render()) if (this.onClick) { this.el.addEventListener('click', this.onClick.bind(this), false) } return this.el } } 这个是一个组件父类 Component ，所有的组件都可以继承这个父类来构建。它定义的两个方法，一个是我们已经很熟悉的 setState ；一个是私有方法 _renderDOM 。 _renderDOM 方法会调用 this.render 来构建 DOM 元素并且监听 onClick 事件。所以，组件子类继承的时候只需要实现一个返回 HTML 字符串的 render 方法就可以了。 还有一个额外的 mount 的方法，其实就是把组件的 DOM

在软件工程中系统的架构也在随着规模不断的演进，最初的面向过程的软件开发到现在面向对象的软件开发。软件工程也逐渐进入组件化开发阶段。然而前端的组件化的发展一直滞后，传统的桌面开发早已经进入组件化开发阶段。 Web1.0时代前端主要是HTML与CSS的天下，JS则是简单的辅助工具而已。到了Web2.0时代前端开始走向以AJax技术为核心轻量级别交互，以JQuery、ExtJS、Dojo代表前端类库（后两者为框架）为导向的开发开始迅猛发展。JQuery在前端领域叱咤风云多年，人们都纷纷认为JQuery战无不胜。而ExtJS、Dojo在UI组件上做的面面俱到，对于当时的管理类Web系统来说也是福音。同时也看见前端组件化初见苗头（实现了一些初级的组件化开发模式，如：jQuery的扩展...），人们都纷纷意识到前端组件化带来的巨大好处。 到了Web2.0后半页移动互联网的迅速崛起，交互从传统的PC转到移动端。而移动端对于交互性与性能的要求也要比PC端强的多。同时浏览器的信息量也越来越大，传统的框架与类库已经不堪重负。已经无法保证前端维护性与性能。 人们就开始思考前端已经早已不是类库能解决的问题了，前端已经成为一个工程化的问题。第一代前端框架涌现出来，以Knockout.js、Ember.js、Backbone.js为代表。第二代前端框架：以Angular.js、React.js、Vue.js