简单的日历组件 import React, { Component } from "react"; import * as _ from "lodash"; const l = console.log; const weeks = ["日", "一", "二", "三", "四", "五", "六"]; class Test e

前言 接上文:谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo 上次写完博客后,有朋友反应第一内容有点深,看着迷迷糊糊:第二是感觉没什么使用场景,太过业务化,还不如直接写Vue&react的源码分析,我感觉这里有必要说下我的认识. 首先,要写源码分析很难,第一是他本来就很难,所以一般我们是想了解他实现的思路而不是代码: 第二每个开发者有自己发风格,所以你要彻底读懂一个人的代码不容易,除非你是带着当时作者同样的问题不断的寻找解决方案,不断的重构,才可能理解用户的意图. 我们

前言 前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ...... 每个频道有独立的团队去维护这些代码,具体到某一个频道的话有会由数十个不等的页面组成,在各个页面开发过程中,会产生很多重复的功能,比如弹出层提示框,像这种纯粹非业务的UI,便成了我们所谓的UI组件,最初的前端组件也就仅仅指的是UI组件. 而由于移动端的兴起,前端页面的逻辑已经变得很重了,一个页面的

转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014年2月开源的一个前端开发库,通过简洁的 API 提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在 GitHub上已经有5000+的star.本文将从各方面对Vue.js做一个深入的介绍. 开发初衷 2013年末,我还在Google Creativ

React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用了同样的UI,同样的框架,实现方式确实有差异,这其实就是工程化的问题. 回到React中父组件与子组件之间的数据传递的问题上来. 父组件与子组件之间的数据传递的实现方式大致可以分为2种情况: 1.子组件用flux环传递数据,父组件监听子组件的Store来获得数据流. 我个人认为这种方式的优点的是 数

目录:   1. 架构选型     2. 架构目录介绍     3. 架构说明     4. 招聘消息 目前如果要说比较流行的前端架构哪家强,屈指可数:reactjs.angularjs.emberjs.avalonjs.vuejs. 我个人接触使用过:avalonjs.angularjs.vuejs.因为工作以及前端团队能力的问题,所以在不同的公司,在开发工作中选用了不同的前端架构. 以下仅仅是代表我个人选用架构的一些看法和理由,如下: angular: 我觉得angularjs的学习上手周期

前端组件化Polymer入门教程目录: 前端组件化Polymer入门教程(1)--初识&&安装 前端组件化Polymer入门教程(2)--快速入门 前端组件化Polymer入门教程(3)--自定义元素 前端组件化Polymer入门教程(4)--生命周期 前端组件化Polymer入门教程(5)--监听属性值变化 前端组件化Polymer入门教程(6)--Local DOM 前端组件化Polymer入门教程(7)--事件 前端组件化Polymer深入篇(1) 一说到组件化,你可能就想到了Rea

智能组件 VS 木偶组件 在 React + Redux 结合作为前端框架的时候,提出了一个将组件分为“智能”和“木偶”两种 智能组件:它是数据的所有者,它拥有数据.且拥有操作数据的action,但是它不实现任何具体功能.它会将数据和操作action传递给子组件,让子组件来完成UI或者功能.这就是智能组件,也就是项目中的各个页面. 木偶组件:它就是一个工具,不拥有任何数据.及操作数据的action,给它什么数据它就显示什么数据,给它什么方法,它就调用什么方法,比较傻.这就是木偶组件,即项目中的各

组件就是页面上的一部分.如图,左边是一个网页.右边是对应的一个组件图.我们可以把一个大的网页拆分成很多小的部分.比如标题部分,对应一个组件,就是标题组件.搜索部分,对应的组件就是搜索组件.而这个搜索组件我们可以进一步的拆分,是由input框和button组成的.所以还可以继续把搜索组件拆分成小的组件.一个是input组件,一个是button组件.页面上很多区域也可以拆分成组件,所以页面就被拆分成了很多个组件.一个页面很复杂,有时候很难编写,但当我们把他拆分成组件的时候,再来维护这些小组件的时候就

之前讲了很多关于项目工程化.前端架构.前端构建等方面的技术,这次说说怎么写一个完美的第三方库. 1. 选择合适的规范来写代码 js 模块化的发展大致有这样一个过程 iife => commonjs/amd => es6,而在这几个规范中: iife: js 原生支持,但一般不会直接使用这种规范写代码 amd: requirejs 定义的加载规范,但随着构建工具的出现,便一般不会用这种规范写代码 commonjs: node 的模块加载规范,一般会用这种规范写 node 程序 es6: ECMA

Vue.js中父子组件数据传递:Props Down ,  Events Up Angular中父子组件数据传递:Props Down,  Events  Up React中父子组件数据传递:Props  Down,Props  Up 一.React中父子组件数据传递 父 => 子:父亲通过子组件的自定义属性,把自己的数据传递下去 Parent.js: <Child      myNameInChild={this.state.myNameParent}/> Child.js: <

什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁,比如react-router 中的 withRouter 以及 react-redux 中 connect 等许多 API 都是以这样的方式来实现的. 使用 React 高阶组件的好处 在工作中,我们经常会有很多功能相似,组件代码重复的页面需求,通常我们可以通过完全复制一遍代码的方式实现功能,但是这

封装 React Native 原生组件(iOS / Android) 在 React Native中,有很多种丰富的组件了,例如 ScrollView.FlatList.SectionList.Button.Text.Image等: 常用的组件已经可以帮助我们实现并满足日常开发中所遇到的功能需求: 但是产品经理突发奇想还是会提出各种"新奇"的功能: 一些复杂的界面实现,在RN层面变得异常棘手,所以需要我们从原生层去组建View,在RN中完成渲染: https://github.com

前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所偏差,在学习中如果有错会及时修改内容,也欢迎万能的朋友们批评指出,谢谢 文章第一版出自简书,如果出现图片或页面显示问题,烦请转至 简书 查看 也希望喜欢的朋友可以点赞,谢谢 React Native组件化介绍 React Native的核心思想就是组件化,相当于MVC的view,因此开发应用的最佳方

为什么会有WUI前端组件,我们接触的UI组件如:YUI.EXTjs.EasyUI,这些组件虽然提供了丰富的UI,并且一定程度上缩短了开始时间,单这些组件提供的页面风格是统一的,我们的产品风格不可能像这些UI组件提供的风格,而且像ExtJs组件规模较大,也会影响效率. 所以我开发了WUI组件(属于UI组件类型),他的特点: 1.每个功能组件都是单独的JS文件,再开发过程中,用到那个功能就引入哪个js文件. 2.每个功能组件代码小,不影响加载速度. 3.每个功能组件的class丰富,开发这可以根据组

有忙于它事,故延迟了,但在坚持! 1.Tip jQuery   2.给span加display: inline-block; 怎样能对齐? 解决方法:vertical-align: bottom:   3.前端组件库   4.欢拍砖的 小http 代理程序   5.字体确定或选择? 解决方法:字体寻找或ps   6.文本框输入按钮就亮,为空就是灰色的.开始是灰色的,你输入文字它会变亮,再删掉又变灰色.有判断输入框是否输入的事件,怎么实现呢? 解决方法:oninput onpropertychan

目前较为流行的react确实有很多优点,例如虚拟dom,单向数据流状态机的思想.还有可复用组件化的思想等等.加上搭配jsx语法和es6,适应之后开发确实快捷很多,值得大家去一试.其实组件化的思想一直在提,原来的开发中也会抽一些公共的模块出来.但是react带来的思想冲击是革命性的,套用一句可能不太合适的话来,描述:万事万物皆组件,在这种思想的影响下,不管什么框架都可以抽一些公共的模块出来,应该秉持一种心态:任何代码都尽量不要重复写两遍,如果存在那么就可以考虑封装起来作为组件.当然不是一味的提倡盲

React Native的组件ListView类似于iOS中的UITableView和UICollectionView,也就是说React Native的组件ListView既可以实现UITableView也可以实现UICollectionView. ListView的使用方法: 1.首先创建一个ListView.DataSource数据源,然后向他传递一个普通的数据源数组. 2.使用该数据源实例化一个ListView组件,定义一个renderRow回调函数,这个函数会接收数组中的每个数据作为参

React Native交互组件之Touchable:只要在组件外面包一个Touchable组件就可以实现点击交互. TouchableHighlight:高亮触摸 当点击时,组件的透明度会改变,可以看到点击效果,TouchableHighlight只可以进行嵌套一层.其常用属性如下: activeOpacity  点击时,组件的透明度.0-1 onHideUnderlay       当底层被隐藏时调用 onShowUnderlay 当底层显示时调用 style   风格 underlayCo

eleme写的基于vue2.0的前端组件库: http://element.eleme.io 我在平时使用过程中,遇到的问题. 自定义表单验证出坑: 1: validate/resetFields 未定义. 原因: 1:要验证的DOM,还没有加载出来. 2:有可能this.$refs[ruleForm].validate() 方式不识别.需要使用: this.$refs.ruleForm.validate(); 解决方法 1: 要验证的DOM,还没有加载出来. this.ticketDialog

项目背景 项目背景是外包类建站公司里,设计环节沉淀了大量可复用组件,设计师往往只需要微调组件就拼凑出页面,交付给前端,理论上这些组件在前端也可以复用,但实际上前端每次都要重新实现整个页面,浪费很多人力. 功能需求 这个项目的思路是,将所有组件开发出来,统一录入到一个平台上管理,设计师可以到平台上挑选组件,并实时预览和调整组件,整个过程所见即所得,平台会将调整结果生成一串代码,只要将代码交给前端,就可以用这串代码在平台上重现设计师修改后的组件,并能一键复制组件的html/css/js代码,快速应用