前端组件

一，对组件化的理解 1，组件的封装 -视图 -数据 -变化逻辑（数据驱动视图变化） 例： import React, { Component } from 'react'; import List from './list/index.js'; import Input from './input/index.js'; class Todo extends Component { constructor(props) { // 数据 super(props) this.state = {//保存当前组件的变量 list:[] } } render() { return ( // 视图 <div> <Input addTitle={this.addTitle.bind(this)}/> <List data={this.state.list} /> <List data={[1,2,3]} /> </div> ) } // 变化逻辑 addTitle(title) { const currentList = this.state.list; this.setState({ list:currentList.concat(title) }) } } export default Todo 2，组件的复用 -props传递 -复用 例： import React, { Component

Ques是一套组件化系统，解决如何定义、嵌套、扩展、使用组件。 传统开发模式的痛点 无法方便的引用一个组件，需要分别引用其 Javascript 、 Template 、 CSS 文件 我们期望能以 MV* 的方式去写代码，结果发现只有 Javascript 是 MV* UI库打包成一坨(类似 Bootstrap )，但是实际上UI库伴随产品迭代在反复变更，每次打开网站，用户依然反复下载UI库 CSS 没有命名空间导致两个组件容易冲突 组件无法嵌套或者无法扩展，所以实际上组件根本无法复用 组件无法复制后可用，在组件无法嵌套或无法扩展的情况下，连定制一个组件都困难连连 每次性能优化都将代码弄的很恶心，不好维护 UI组件 UI组件 使用来专门做UI的组件，其特点为只有模版、样式文件。系统会根据用户在页面已使用的 UI组件 动态引用其依赖的资源。注意， UI组件 的前缀必须是 ui- 。 下面是一个简单的 ui-button 的例子： 定义 CSS文件 .ui-button { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space:

目录 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' }) // 实例与页面挂载点一一对应 // 一个页面中可以出现多个实例对应多个挂载点 // 实例只操作挂载点内部内容

用webstorm打开我们的前端项目online-store，重点关注src。 api：我们请求网络的一些api，所有组件的api都是通过这个来配置的。 axios：里面是一些全局拦截。 components：是一些基础的组件。 router：是vue-router配置的一些东西。 static：是一些全局的静态文件。 store：vuex放的东西。 styles：静态的CSS样式。 views：我们所有的组件。 为了更好的理解一个Vue前端项目，我们可以在浏览器中安装一个插件——Vue Devtools（安装方法参见： https://www.cnblogs.com/yuqing6/p/7440549.html ，用该文章的方法需要先下载git，参见： https://blog.csdn.net/lonewolf521125/article/details/51093820 ），可以帮助我们更好地阅读Vue前端项目。 来源： https://blog.csdn.net/liujh_990807/article/details/86517234

（如果对SPA概念不清楚的同学可以先自行了解相关概念） 平时喜欢做点小页面来玩玩，并且一直采用单页面应用（Single Page Application）的方式来进行开发。这种开发方式是在之前一年做的一个创业项目的经验和思考，一直想写篇博客来总结一下。 个人认为单页面应用的优势相当明显： 前后端职责分离，架构清晰：前端进行交互逻辑，后端负责数据处理。 前后端单独开发、单独测试。 良好的交互体验，前端进行的是局部渲染。避免了不必要的跳转和重复渲染。 当然，SPA也有它自身的缺点，例如不利于搜索引擎优化等等，这些问题也有其相应的解决方案。 下面要介绍的这种方式可以说是一种模式或者工作流，和前端使用什么框架无关，也和后端使用什么语言、数据库无关。不能说是The Best Practice，我相信经过更多人的讨论和思考会有A Better Practice。:) 概览 下图展示了这种模式的整个前后端及各自的主要组成： 看起来有点复杂，接下来会仔细地对上面每一个部分进行解释。看完本文，就应该能理解上图中的各部件之间的交互流程。 前端架构 把上图的前端部分单独抽出来进行研究： 前端中大致分为四种类型的模块： components：前端UI组件 services：前端数据缓存和操作层 databus：封装一系列Ajax操作，和后端进行数据交互的部件 common/utils：以上组件的共用部件

优秀的程序员总是能优雅的组织自己的代码，清晰的编写思路，合理的组织结构划分，从小的功能组件，到大的模块结构，都能通过合理的巧妙的搭配，不仅能化复杂为简单，更能提升代码运行效率，提高代码的可维护性。我们作为前端开发，都应该具有这样的能力。 那么如何才能降低业务开发的复杂度呢？ 细分组件 都说模块化开发，其实在AMD，CMD这些思想规范之前就已经有模块化开发的规范了，虽然JavaScript标准从es1-es4 然后隔了n年才有了es5，在那N年基本都是‘函数式开发’，一切皆函数。之前还没有模块化加载的思想，毕竟也不需要，富客户端还是flash的天下，基本都是简单的网页嵌套一些后端的代码逻辑，然后通过后端渲染引擎渲染或者解释器解释产出html页面，什么ASP，PHP，JSP等等。 然而之前的模块化称不上是模块，为什么呢？因为没有模块加载器，主要是通过JS加载顺序来控制加载的，依赖的JS文件放在前面。模块主要是按照文件来划分，每个文件是个独立的功能模块，在自定义的命名空间下挂在需要暴露出来的函数，其他函数可以调用。当然也有一些打包工具，可以根据事先定义好的文件列表，把多个文件打包成一个bundle。 而现在，且不说你是喜欢自己编写或者用现有的模块加载器，或者直接用像Angular，React，Vue等现成的脚手架做开发，当然自带的就有了模块加载，配合Webpack、Rollup等打包工具

最近接触小程序开发，我特将本次开发过程中所使用到的相关知识点进行了总结，以作为经验的积累。希望给自己以后的开发，提供一些帮忙，同时提高解决问题的能力。如有错误，请大家指正。 github地址 ； 项目地址 ； weui：使用微信原生视觉体验样式库 认识： WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。 官网： https://weui.io/ github地址: https://github.com/weui/weui-wxss 微信推出了一套官方样式库,方便大家开发,对于一些类似的UI界面我们需要引入即可,无需重复造轮子。我们只需导入weui.wxss等即可减少大量的css布局工作. 关于本地图片资源路径（background） 小程序只有image标签支持本地图片资源路径，wxss里的background-image不支持。 如果想在css中使用背景图，解决方法： 1、将本地图片用线上地址转化成base64路径。线上转化base64的地址： http://imgbase64.duoshitong.com/ 2、url里面的图片来源必须填写外链。如下： area{ background: url('https://mirror-gold-cdn.xitu.io

什么是vue.js Vue (读音 /vjuː/，类似于 view ) 是一套用于构建用户界面的 渐进式框架 。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与 现代化的工具链 以及各种 支持类库 结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 什么是渐进式框架 使用vue，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用； 还可以用它的视图，搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念。 也可以函数式，都可以。它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。你不必一开始就用Vue所有的全家桶，根据场景，官方提供了方便的框架供你使用。 使用历程： form表单验证==》整个页面的dom 用Vue 来管理（用数据驱动DOM的变化）==》webpack vue-router控制路由，用于一整套前端开发的工程的构建==》熟悉组件之间的交流来处理数据交流和后端接口==》大型项目 从最初的只因多看你一眼而用了前端js库，一直到最后的大型项目决方案。 如上图

父子组件生命周期： 　　“生命周期”细想之下有点浪漫主义色彩，不知道是不是从lifecycle英译过来的。作为一个前端从业者，如果让我来取，可能会取成“渲染周期”之类的，毕竟是和浏览器打交道的职业，浏览器的layout使dom树具有骨架，paint则让整个页面光亮起来。 　　React 的一切都是组件，通过 React.createElement 方法来创建嵌套层级，说白了在内存中构建对象树，据此渲染到浏览器中成为dom树，这个时候一个节点是什么时候真正渲染到页面中就变得重要起来，因为只有这个时候你才能真正和浏览器环境内的对象和方法交互，同样离开的时候也需要清理监听器等防止干扰后续逻辑，因此钩子函数，也可以说是生命周期函数就有了存在的意义。 　　先上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <script crossorigin src="https://unpkg.com/react

Vue.js面试题整理 一、什么是 MVVM ？ MVVM是 Model-View-ViewModel的缩写。 MVVM是一种设计思想。 Model 层代表数据模型，也可以在 Model中定义数据修改和操作的业务逻辑； View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来， ViewModel 是一个同步 View 和 Model的对象（桥梁）。 在 MVVM架构下， View 和 Model 之间并没有直接的联系，而是通过 ViewModel进行交互， Model 和 ViewModel 之间的交互是双向的， 因此 View 数据的变化会同步到 Model中，而 Model 数据的变化也会立即反应到 View 上。 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而 View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作 DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。 二、 mvvm 和 mvc 区别？它和其它框架（ jquery ）的区别是什么？哪些场景适合？ mvc和 mvvm其实区别并不大。都是一种设计思想。主要就是 mvc中 Controller演变成 mvvm中的 viewModel。 mvvm主要解决了 mvc中大量的