前端组件

使用 React 开发应用，给予了前端工程师无限“组合拼装”快感。但在此基础上，组件如何划分，数据如何流转等应用设计都决定了代码层面的美感和强健性。 同时，在 React 世界里提到 curry 化，也许很多开发者会第一时间反应出 React-redux 库的 connect 方法。然而，如果仅仅机械化地停留于此，而没有更多灵活地应用，是非常可惜的。 这篇文章以一个真实场景为基础，从细节出发，分析 curry 化如何化简为繁，更优雅地实现需求。 场景介绍 需求场景为一个卖食品的电商网站，左侧部分为商品筛选栏目，用户可以根据：价格区间、商品年限、商品品牌进行过滤。右侧展现对应产品。如下图： 作为 React 开发者，我们知道 React 是组件化的，第一步将考虑根据 UE 图，进行组件拆分。这个过程比较简单直观，我们对拆分结果用下图表示： 对应代码为： <Products> <Filters> <PriceFilter/> <AgeFilter/> <BrandFilter/> </Filters> <ProductResults/> </Products> 初级实现 React 是基于数据状态的，紧接着第二步就要考虑应用状态。商品展现结果数据我们暂时不需要关心。这里主要考虑应用最重要的状态，即 过滤条件信息 。 我们使用命名为 filterSelections 的

人生苦短，我用Python（目录） 目录 一、计算机基础 二、Python基础 三、函数 四、常用模块 五、模块和包 六、面向对象 七、网络编程socket 八、数据库 九、前端 十、Python Web框架 十一、版本控制--GIT 十二、爬虫 十三、前端框架之VUE 十四、量化投资与Python 十五、算法 十六、设计模式 十七、restful framework 十八、linux基础 十九、权限管理 一、计算机基础 计算机基础知识 计算机的发展史及多道技术 计算机网路知识的简单介绍 二、Python基础 Python学习【第0篇】：window环境下安装Python2和Python3　　 Python学习【第1篇】：Python简介以及入门 Python学习【第2篇】：Python之数据类型 Python学习【补充篇】：Python之字符串切片 Python学习【第3篇】：Python之运算符 Python学习【第4篇】：Python之可变数据类型与不可变数据类型 Python学习【第5篇】：Python之字符编码问题 Python学习【第6篇】：Python之文件操作 Python学习【补充篇】：map函数和reduce函数的区别 三、Python之函数 Python学习【第7篇】：Python之函数（自定义函数，内置函数，装饰器，迭代器，生成器） Python学习【第7篇

H5 新特性 新增标签 本地存储 webStorage websocket webworkers 新增地理位置 对css3的支持 canvas 多媒体标签 新增表单元素类型 结构标签：header nav article aside footer 表单标签：email url range date 媒体标签：video audio navigator.geolocation.getCurrentPosition(success,error,option); css3 新特性 圆角 阴影 背景渐变 弹性盒布局 过渡 动画 2D/3D转换 媒体查询 border-image background: linear-gradient(direction, color1, color2 [stop], color3...); background: radial-gradient(shape size at position, start-color, ..., color [stop] ..., last-color); transition 需要触发条件，而且只有开始和结束之间的过渡。 animation：不需要触发，中间可以插入无数关键帧。 transform: translate3d(0px,0px,400px); webstorage 和cookie的区别 容量 cookie 4k

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

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: '

如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富。 要做WEB前端，就需要知道前端到底是什么，需要学习那些知识；前端至少要懂的三个部分：HTML，CSS，JavaScript（简称JS），那首先先明确这三个概念： HTML负责结构，网页想要表达的内容由html书写。 CSS负责样式，网页的美与丑由它来控制 JS负责交互，用户和网页产生的互动由它来控制。 web前端发展至今，演变出了无数的库和框架；说到库第一时间想到的是不是jquery？在小编刚接触库的时候也是从jQuery开始的；今天我们就来说说前端发展到现在都有哪些好用的库框架。 2016年开始应该是互联网飞速发展的几年，同时也是Web前端开发非常火爆的一年，Web 前端技术发展速度让人感觉几乎不是继承式的迭代，而是一次次的变革和创造。这一年中有很多热门的前端开发框架，下面源码时代web小编为大家总结2016年至今最受欢迎的几款前端框架。 在这互联网飞速发展的信息时代，技术的更新迭代也在加快。目前看来，火了十几年的Java技术现在仍然是棵常青树。回想两年前初来咋到，也是想好好当一名java程序员，五年计划都行想好了，最后还是阴差阳错搞了前端。前端目前来看还是非常火的，随着IT技术的百花齐放，新的前端框架不断推出，但大多都还在狂吼的阶段

一、什么是uni-app 1.uni-app 是一个使用vue.js开发跨平台应用的前端框架，开发者编写一套代码，可编译到ios、android、h5、小程序等多个平台。 2.uni-app 在跨端数量、扩展能力、性能体验、周边生态、学习成本、开发成本等6大关键指标上拥有极强的竞争优势。 （跨端数量更多、平台能力不受限、性能体验更优秀、周边生态更丰富、学习成本低） 规范 a. 页面组件遵循 vue 单文件组件（SFC）规范； b. 组件标签靠近微信小程序规范； c. 接口能力（JS API）靠近微信小程序规范； d. 数据绑定及事件处理靠近 vue.js 规范，同时补充了APP及页面的生命周期； e. 为兼容多端运行，建议使用flex布局进行开发； 来源： https://www.cnblogs.com/wangqian888/p/11926536.html

1、回顾 2、线上的mock http://rap2.taobao.org/ https://www.easy-mock.com/ 3、线上接口文档 Swagger https://swagger.io/ 4、react 文档 React 是一个用于构建用户界面的 JavaScript 库 4.1 元素、组件 const element = <h1>Hello, world!</h1>; // 既不是字符串也不是 HTML。被称为 JSX，是一个 JavaScript 的语法扩展 JSX 可以生成 React “元素”。 react的关注点分离：React 并没有采用将标记与逻辑进行分离到不同文件这种人为地分离方式，而是通过将二者共同存放在称之为“组件”的松散耦合单元之中，来实现关注点分离。 React 不强制要求使用 JSX，也可以使用函数 // jsx const App = ( <div className="test"> hello jsx </div> ) // 函数 const App = React.createElement('div', {className: 'test'}, 'hello jsx') // 注意：这是简化过的结构 const element = { type: 'div', props: { className: 'test',

一、简介 React-Native是Facebook开源的跨平台框架，用于实现前端和原生进行混合开发。React-Native开发可以很好的使用原生UI构建用户界面，与传统的使用WebView相比，不仅保留了原生的用户体验和流畅度，还提高了开发效率，React-Native的构建思路图如下。而React-Native是基于React设计的， 由此可见React在RN开发中是极其重要的。React的地址是Github地址： https://github.com/facebook/react 、官网地址： https://facebook.github.io/react/ 。接下来开始认识React。 二、基础 需要了解React的几个基本的特点，如下： 作为UI： React强调的是界面，只作为视图View在MVC中使用。 虚拟DOM：采用虚拟的节点，可以很好地优化视图的渲染和刷新（局部重绘），提高了性能。 数据流：单方向的数据流，比传统的数据绑定，更加灵活和快捷。 学习React需要掌握一些基本知识，如下： JSX语法知识：类似于XML语言，HTML是XML的子集，它跟HTML也很像。一种语法糖，更方便地创建虚拟DOM，需要解析器对它进行解析成JS。 ES6/7/8的知识： 遵循ECMAScript的JavaScript标准库，添加了许多新的语法特性，ES6解决了ES5的缺陷

1. v-bind和v-model的区别？ v-bind用来绑定数据和属性以及表达式，缩写为'：' v-model使用在表单中，实现双向数据绑定的，在表单元素外使用不起作用 2. Vue 中三要素的是什么？ 2.1 响应式 // 如何让实现响应式的呢？ let obj = {}; let name = 'zhangsan'; Object.defineProperties(obj, name, {get : function() { console.log('name' , name) }, set : function() { console.log('name' , name) }}) // 1. 关键是理解Object.defineProperty // 2. 将data的属性代理到vm上面的 let mv = {}; let data = { price: 100, name: 'zhangsan' }; for (let key in data) { (function (key) { Object.defineProperty(mv, key, { get: function () { console.log('get val'); return data[key]; }, set: function (val) { console.log('set val');