前端组件

一、开发框架 　　ExtJS可以称为第一代单页应用框架的典型，它封装了各种UI组件，用户主要使用JavaScript来完成整个前端部分，甚至包括布局。随着功能逐渐增加，ExtJS的体积也逐渐增大，即使用于内部系统的开发，有时候也显得笨重了，更不用说开发以上这类运行在互联网上的系统。 　　jQuery由于偏重DOM操作，它的插件体系又比较松散，所以比ExtJS这个体系更适合开发在公网运行的单页系统，整个解决方案会相对比较轻量、灵活。 　　但由于jQuery主要面向上层操作，它对代码的组织是缺乏约束的。如何在代码急剧膨胀的情况下控制每个模块的内聚性，并且适当在模块之间产生数据传递与共享，就成为了一种有挑战的事情。 　　为了解决单页应用规模增大时候的代码逻辑问题，出现了不少MV*框架，他们的基本思路都是在JS层创建模块分层和通信机制。有的是MVC，有的是MVP，有的是MVVM，而且，它们几乎都在这些模式上产生了变异，以适应前端开发的特点。 　　这类框架包括Backbone，Knockout，AngularJS，Avalon等。 二、 组件化 　　这些在前端做分层的框架推动了代码的组件化，所谓组件化，在传统的Web产品中，更多的指UI组件，但其实组件是一个广泛概念，传统Web产品中UI组件占比高的原因是它的厚度不足，随着客户端代码比例的增加，相当一部分的业务逻辑也前端化

前端组件化这个主题相关的内容已经火了很久很久，angular 刚出来时的 Directive 到 angular2 的 components ，还有 React 的 components 等等，无一不是前端组件化的一种实现和探索，但是提上议程的 Web Components 标准是个怎样的东西，相关的一些框架或者类库，如 React，Angular2，甚至是 x-tag，polymer 现在实现的组件化的东西和 Web Components 标准差别在哪里？我花时间努力地把现有的 W3C Web Components 文档看了下，然后坚强地写下这些记录。 首先我们需要知道，Web Components 包括了四个部分： Custom Elements HTML Imports HTML Templates Shadow DOM 这四部分有机地组合在一起，才是 Web Components。 可以用自定义的标签来引入组件是前端组件化的基础，在页面引用 HTML 文件和 HTML 模板是用于支撑编写组件视图和组件资源管理，而 Shadow DOM 则是隔离组件间代码的冲突和影响。 下边分别是每一部分的笔记内容。 Custom Elements 概述 Custom Elements 顾名思义，是提供一种方式让开发者可以自定义 HTML 元素，包括特定的组成，样式和行为。支持 Web

1组件化开发 组件分开发是非常重要的工程优手段。也是react开发必备技能。前端光有JS/CSS的模块化还是不够的。对于UI组件同样迫切的需求 前端组件化开发理念： 如上图所示这就是前端组件开发理念，下面我们来总结一下 1、页面上的每个独立的可视。可交互区域视为作一个组件; 2、每个组件对应一个工程目录，组件所需的各种资源(JS、Image、CSS)都在这个目录下就近维护; 3、由于组件具有独立性，因此组件与组件之间可以，自由组合; 4、页面只不过是组件的容器，负责组合组件形成功能完整的界面; 5、当不需要某个组件或者想要替换组件时，可以整个目录删除/替换 注：每二项中就近维护原则是工程化的体现。每个开发者都清楚知道，自己所开发维护的功能模块。因为代码必须存在于对应的组件目录，当前目录包函 CSS、JS、HTML、Image 根据上述描述我们将构造一个项目的基本流程 项目初期前端静态页面只包函CSS、HTML 目录名称：frontEnd less文件结构对应生成css文件 来源： https://www.cnblogs.com/pink-chen/p/11064733.html

一：MVVM框架 MVVM框架的应用场景： 1、针对具有复杂交互逻辑的前端应用 　　　　　　　　　　　　2、提供基础的架构抽象 　　　　　　　　　　　　3、提供ajax数据持久化，保证前端用户体验 二：vue.js的核心思想 （一）：数据驱动 （二）：数据响应原理 （三）：组件化 （四）组件设计原则 　　1：页面上每个独立的可视/可交互区域视为一个组件 　　2：每个组件对应一个工程目录，组件所需要的各种资源在这个目录下就近维护 　　3：页面只不过是组件的容器，组件可以嵌套自由组合形成完整的页面 来源： https://www.cnblogs.com/momozjm/p/6237326.html

前端优化的主要方面就是减少页面的DOM操作，减少重排和重绘，React在这方面做了优化，采用了所谓的虚拟DOM，其实我们平时也会遇到虚拟DOM，只是你没有注意罢了，请听我娓娓道来。 所谓的虚拟DOM就是JavaScript对象，就是在没有真实渲染DOM之前做的操作，给你举几个例子来看看： （1）createElement（'Button'） 这就创建了一个虚拟的button，为啥？因为没有插入到实际页面中去，这就是虚拟DOM！ （2）DocumentFragment（文档碎片 ） 创建虚拟的节点，一次性插入页面结构 方法:使用DocumentFragment=====>>>>>>是一个占位符，把它插入节点的时候是插入它所有的子节点，本身不会插入 举个例子来说： var frag=document.createDocumentFragment(); for(var i=0;i<10;i++){ var l=document.createElement("li"); l.innerHTML="ss"; frag.appendChild(l); } document.getElementById("list").appendChild(frag); React的一个突出特点是拥有极速地渲染性能。该功能依靠的就是facebook研发团队弄出的虚拟dom机制以及其独特的diff算法

一、 组件component 1. 什么是组件？ 组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码 组件是自定义元素（对象） 2. 定义组件的方式 方式1：先创建组件构造器，然后由组件构造器创建组件 方式2：直接创建组件 3. 组件的分类 分类：全局组件、局部组件 4. 引用模板 将组件内容放到模板<template>中并引用 5. 动态组件 <component :is="">组件 多个组件使用同一个挂载点，然后动态的在它们之间切换 <keep-alive>组件 二、 组件间数据传递 1. 父子组件 在一个组件内部定义另一个组件，称为父子组件 子组件只能在父组件内部使用 默认情况下，子组件无法访问父组件中的数据，每个组件实例的作用域是独立的 2. 组件间数据传递 （通信） 2.1 子组件访问父组件的数据 a)在调用子组件时，绑定想要获取的父组件中的数据 b)在子组件内部，使用props选项声明获取的数据，即接收来自父组件的数据 总结：父组件通过props向下传递数据给子组件 注：组件中的数据共有三种形式：data、props、computed 2.2 父组件访问子组件的数据 a)在子组件中使用vm.$emit(事件名,数据)触发一个自定义事件，事件名自定义 b)父组件在使用子组件的地方监听子组件触发的事件

前端这几年的技术发展很快，细分下来，主要可以分成四个方面： 1.开发语言技术，主要是ES6&7，coffeescript，typescript等； 2.开发框架，如Angular，React,Vue.js，Angular2等； 3.开发工具的丰富和前端工程化，像Grunt，Gulp，Webpack，npm，eslint，mocha这些技术； 4.前端开发范围的扩展，如服务端的nodejs,express,koa,meteor,GraphQL;移动端和跨平台的PhoneGap,ionic,ReactNative，Weex;计算机图形学和3维建模领域的WebGL(three.js等)；可视化与数据分析领域的d3.js等；包括浏览器不断开放的更多新特性和接口比如svg,canvas,蓝牙，电池，本地存储，service worker，Houdini等新的API能力，以及像WASM这样的底层优化技术； 就开发框架这块，Angular(1&2),React,Vue目前占据着主流地位而且会相持比较长的一段时间，所以这里对比一下这三门技术，以便之后的技术选型。 一 数据流 数据绑定 Angular 使用双向绑定即：界面的操作能实时反映到数据，数据的变更能实时展现到界面。 实现原理： $scope 变量中使用脏值检查来实现。像ember.js是基于setter，getter的观测机制，

>这篇文章将从 AngularJS ReactJS Polymer 这几个流行的框架入手，分析前端框架在这几年发展中的关键技术点，作为2015前端技术选型的参考。摘要: - 初体验 - 技术特点 - 组件化 - 应用架构 ### 总结 **1. 初体验** 拿TODO来作为引子好了.  Angular 的实现  React的实现(非flux架构)  Polymer的实现 ![](//upload-images.jianshu.io/upload

前端架构： 1.前端工程化 web应用复杂度的增加，特别是单页面应用的风靡。组件化，工程化，自动化成了前端发展的趋势。或者说一线的互联网公司就是这么做的。 每个前端团队都在打造自己的前端开发体系，这通常是一个东拼西凑，逐渐磨合的过程，在技术发展日新月异的今天，这样的过程真的是不可抽象和复制的么？本文希望能够通过系统的拆解前端开发体系为大家提供体系设计思路参考。 前端工程的3个阶段 第一阶段： 库/框架选型 Animate.css jQuery vue.js underscore.js React.js Backbone.js Bootstarp zepto.js jade normalize.css compass Angular.js 解决开发效率 第二阶段： 简单构建优化 选择构建工具，对代码进行压缩，校验，之后再以页面为单位进行简单的资源合并。 第三阶段： JS/CSS模块化开发 解决维护效率 js的模块化方案 ADM/CDM/UMD/ES6 Module css的模块化：less，sass。 第四阶段: 前端是一个技术问题较少，工程问题较多的开发领域 当我们要开发一款完整的Web应用时，前端将面临更多的工程问题，比如： - 大体量：多功能、多页面、多状态、多系统； - 大规模：多人甚至多团队合作开发； - 高性能：CDN部署、缓存控制、文件指纹、缓存复用、请求合并、按需加载

数据驱动 在Vuejs中，只需要改变数据 model，Vuejs 通过 directives 指令 对 dom 进行封装，当数据发生变化，会通知指令修改对应的dom，通过 数据驱动 dom ， dom 是数据的一种自然映射 。 Vuejs还会对操作进行监听，当我们修改视图 View 的时候，Vuejs监听这些变化，从而改变数据。 这样形成了 数据的双向绑定 。 Vue js 数据响应原理： 以下图为例，在一个Vue对象实例化的过程中，会给 a.b 这份数据，通过 es5 的 defineproperty 添加 getter setter， 通过 vuejs 会对模板做的编译，解析生成一个指令对象。每个指令对象都会关联一个Watcher。 当对指令对应的表达式 a.b 进行求值的时候，就会触发他的getter。我们就会把依赖收集到 Watcher 里面。 当我们再次改变 a.b 的时候，就会触发他的setter，就会通知到对应的 Watcher，然后 Watcher 会对 a.b 进行求值，然后对比新旧值，当发现值改变了，Watcher又会通知到指令，让指令的 Update方法执行。由于指令是对dom的封装，所以他会调用原生 Dom 的方法，去更新视图。 这样我们就完成了数据改变，到数据更新的全过程。 组件化 vuejs另一个核心思想是组件化， 组件化 的目的是 扩展HTML元素