前端组件

纯原生的组件化、模块化的一次小小的尝试，用到了如下几个新特性： shadown-DOM 对 HTML 标签结构的一个封装，真正意义上的组件，能保证 shadow-DOM 中的 DOM 元素不会被外界影响，内部也不会影响到外部的行为，变成了一个独立的模块。 custom-elements 可以在浏览器中注册自定义的标签来使用，类似这样的效果 <my-tag></my-tag> ，标签内容基于两种形式：1. 普通子元素 2. shadow-DOM custom-events 使用各种自定义事件辅助完成组件之间的通讯 ES-module 为浏览器原生支持的模块化的一种方案，直接在浏览器里使用 import 和 export 这类语法，以 module 的方式来引入 js 文件。 几个算是比较新的事物，聚集在一起确实可以做点儿好玩的东西出来。 shadow-DOM 想象有这样的一个场景，类似资料卡的东东，需要在页面中展示头像和用户的名称。 头像在左，宽高 100px ，圆形； 姓名在右，字号 16px ，垂直居中。 这算是一段很简单的 CSS 了，实现起来大概是这样的： <style> .info { display: flex; } .info-avatar { width: 100px; height: 100px; border-radius: 50%; } .info-name {

在大型软件系统中，web应用的前后端已经实现了分离，而随着REST软件架构的发展，后端服务逐步倾向于 微服务 ，简单来说就是将一个大型后端服务，拆分成多个小服务，它们分别部署，降低了开发的复杂性，而且提高了系统的可伸缩性。而前端方面，随着技术的发展，开发的复杂度也越来越高，传统开发模式总是存在着开发效率低，维护成本高等的弊端。 那么前端组件化开发都经历了哪些阶段呢？ 二、 前端组件化开发发展之路 1、交互少的静态页面时期：公共模块和CSS 这是一个很古老的时代，那时的前端页面就是一些基本的HTML标签以及JS和CSS，页面上大部分都是一些静态的文字，就在这个时期，前端JS和CSS已经出现了组件化，或许更多的应该成为模块化，即开发者把不同模块的或者公共的JS和CSS放在不同的文件中，然后在页面引入并使用，这种方式也沿用至今。 2、繁琐的早期动态页面时期：动态引入 由于静态页面不能在页面上存储数据，阅读者也不满足于基本的页面交互，更希望页面能够活起来，且能够把交互的数据存储起来，于是出现了很多服务端技术，比如ASP，JSP。这些技术的出现使得前端页面活起来了，用户可以根据自己的需求进行数据的交互。 然而这时的页面上充斥着业务逻辑，随着业务逻辑的增多，页面的内容也越来越多，越来越复杂。在这个时期前端组件化开发得到了一定的发展，开发者已经不满足于简单的将JS和CSS文件模块化

很多新手纠结这个问题？两个框架都能够支持做手机网页，那么它们的区别是什么呢，适用场景是什么呢？下面我们从这几个方面比较这两个框架：解决问题、功能、适用场景。 解决问题 Bootstrap是一个css框架，针对解决的问题有： 跨设备的网页响应式布局问题。随着手机、平板、各分辨率屏幕的出现，如何能够一套前端在所有设备上自由适应？ 多人合作的前端布局和样式的规范问题 常用前端css组件，如按钮、连接、表单、表格、分页组件、下拉菜单、导航栏、ICON等等 常用JS前端组件（需要扩展js支持），如表单验证、Tips、Popup等等 jQuery Mobile是移动前端框架，包含js、html、css，提供一套完整的移动前端开发组件，可以比喻成Android开发框架，尽可能提供移动APP所具有的所有功能，针对解决的问题有： 移动网页APP所常用的组件，例如：手机导航栏、选项卡、底部菜单、列表、表单等各种组件，而这些与Bootstrap提供的组件有很大区别，jQuery Mobile提供的是类似手机APP的组件，只用于移动网页，而Bootstrap提供的是面向所有设备的组件，并没有对移动设备专门考虑，与移动APP的组件体验不一样。 网页页面之间转换效果 异步数据加载 功能 Bootstrap其核心主要是一个css样式框架，基于css 的Media Query功能实现了响应式布局

　　2016的最后一天，多多少少都应该总结一下这一年的得失，哪里做的好，哪里需要改进，记一笔，或许将来会用到呢。 　　毕业差不多半年了，一直是一个人在负责公司项目的前端开发与维护，当时公司希望前后端分离，提高前端的开发效率和后期维护的便捷，所以自己在经过一番调查后，决定采用SPA的模式，其主要原因还是阿里中途岛的那样的东西，我们没办法搞出来。 　　项目不需要兼容IE8及以下的浏览器，所以在选型的时候果断选了Vue.js那一套的东西，因为react之前也有了解过，上手的确没Vue来的快。 　　除去旧项目的维护时间，使用vue也有三个多月了，写一写这段时间来的使用心得吧 　1. 如何划分组件和模块 　　组件化开发已经是谈了很久的东西了，在没有实战经验之前，看看民工大哥还有一些其他前辈写的博客，感觉这东西真的好牛叉，太好用了，但真当动手开始做的时候才会发现，其实并没有想象的那么简单和美好。具体的问题可以参考这篇文章 Vue.js实践 。 　　在组件的划分上，我 把比较笼统的组件（components）分成了部件（widgets）和模块（modules）两个部分，部件主要是一些功能型的东西，而模块则是通过UI样式去定义 。 　　我们从源头分析一下，一个网站是通过很多页面组成的，而每个页面有包含了不同的块，每个块则是通过不同的元素构成，这些元素我们可以把它想象成部件，也就是页面的最小构成单位

Vue的组件 前言 Vue 是构造器函数 Vue.extend() 是 vue用来扩展 vue功能（ 组件 ）的 Vue决定不进行实例化Vue.extend(),vue借鉴了react,react中组件是以标签的形式使用的，vue 决定组件要以标签的形式呈现 为了符合 html / html5的规则，所以组件的标签化使用必须注册， 注册说白了就是用来解析这个标签化的组件未html能识别的标签 组件使用前必须进行注册 --------> 非常重要 全局注册： Vue.component( 组件的名称，组件的配置项 ) Vue.extend()--------->options Vue --------------------->options 这两个options基本一致 组件必须先注册在使用（ 实例（组件） 范围内使用 ） < div id = " app " > < Father > </ Father > </ div > < div id = " root " > < Father > </ Father > </ div > // console.log( Vue ) // console.log( Vue.extend() ) var Hello = Vue . extend ( { template : '<div> 这里是father组件 </div>' } ) /

vue组件 组件(Component)是Vue.js最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。 注册及使用组件 // 注册一个组件： Vue.component('my-component', { template: '<div>A custom component!</div>' }) //使用组件 <div id="example"> <my-component></my-component> </div> ...... new Vue({ el: '#example' }) data 必须是函数 组件就是vue的实例，所有vue实例中属性和方法，组件中也可以用，但是data属性必须是一个函数，因为组件会重复使用在多个地方，为了使用在多个地方的组件数据相对独立，data属性需要用一个函数来返回值。 // 定义组件 Vue.component('simple-counter', { template: '<button v-on:click="counter += 1">{{ counter }}</button>', data: function () { return { counter: 0 } } }) // 使用组件

Poplar是一个社交主题的内容社区，但自身并不做社区，旨在提供可快速二次开发的开源基础套件。前端基于React Native与Redux构建，后端由Spring Boot、Dubbo、Zookeeper组成微服务对外提供一致的API访问。 https://github.com/lvwangbeta/Poplar 前端React Native & Redux React Native虽然提供跨平台解决方案，但并未在性能与开发效率上做出过度妥协，尤其是对于有JS与CSS基础的开发人员入手不会很难，不过JSX语法糖需要一定的适应时间，至于DOM结构与样式和JS处理写在一起是否喜欢就见仁见智了，可这也是一个强迫你去模块化解耦的比较好的方式。由于React组件的数据流是单向的，因此会引入一个很麻烦的问题，组件之间很难高效通信，尤其是两个层级很深的兄弟节点之间通信变得异常复杂，对上游所有父节点造成传递污染，维护成本极高。为此Poplar引入了Redux架构，统一管理应用状态。 模块化 APP由5个基础页面构成，分别是Feed信息流主页(MainPage)、探索发现页面(ExplorePage)、我的账户详情页(MinePage)、状态创建于发送页(NewFeed)、登录注册页面(LoginRegPage)等。页面又由基础组件组成，如Feed列表、Feed详情、评论、标签、相册等等

本文授权转自微信公众号“美团点评技术团队”。 作者简介： 明裔，美团外卖高级前端研发工程师，2014年加入美团外卖，负责Web主站开发。先后参与了外卖B端、C端、配送等全业务线系统开发后，目前主要负责商家券活动系统。 责编： 陈秋歌，关注前端开发等领域，寻求报道或投稿请发邮件至chenqg#csdn.net，或加微信：Rachel_qg。 Vuex是一个专为Vue服务，用于管理页面数据状态、提供统一数据操作的生态系统。它集中于MVC模式中的Model层，规定所有的数据操作必须通过 action - mutation - state change 的流程来进行，再结合Vue的数据视图双向绑定特性来实现页面的展示更新。统一的页面状态管理以及操作处理，可以让复杂的组件交互变得简单清晰，同时可在调试模式下进行时光机般的倒退前进操作，查看数据改变过程，使code debug更加方便。 最近在开发的项目中用到了Vuex来管理整体页面状态，遇到了很多问题。决定研究下源码，在答疑解惑之外，能深入学习其实现原理。 先将问题抛出来，使学习和研究更有针对性： 使用Vuex只需执行 Vue.use(Vuex) ，并在Vue的配置中传入一个store对象的示例，store是如何实现注入的？ state内部是如何实现支持模块配置和模块嵌套的？ 在执行dispatch触发action（commit同理）的时候

Vue 是一个轻巧、高性能、可组件化的MVVM库，API简洁明了，上手快。从Vue推出以来，得到众多Web开发者的认可。在公司的Web前端项目开发中，多个项目采用基于Vue的UI组件框架开发，并投入正式使用。开发团队在使用Vue.js框架和UI组件库以后，开发效率大大提高，自己写的代码也少了，很多界面效果组件已经封装好了。在选择Vue UI组件库的过程中，通过GitHub上根据star数量、文档丰富程度、更新的频率以及维护等因素，也收集整理了一些优秀的Vue UI组件库。 下载资源： www.yinxiangit.com 1、 iView UI组件库 iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。iView的组件还是比较齐全的，更新也很快，文档写得很详细。有公司团队维护，比较可靠的Vue UI组件框架。iView生态也做得很好，还有开源了一个iView Admin，做后台非常方便。官网上介绍，iView已经应用在TalkingData、阿里巴巴、百度、腾讯、今日头条、京东、滴滴出行、美团、新浪、联想等大型公司的产品中。 iView官网：https://www.iviewui.com/ 2、Vux UI组件库 Vux是基于WeUI和Vue2.x开发的移动端UI组件库，主要服务于微信页面。Vux的定位已经很明确了，一是

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' }) // 实例与页面挂载点一一对应 // 一个页面中可以出现多个实例对应多个挂载点 // 实例只操作挂载点内部内容 2、data：数据 <div id='app'> {{ msg }} </div> <script> var app = new Vue({ el: '