- 博客(29)
- 收藏
- 关注
RSS订阅原创 实现一个Promise-polyfill
PromisePromise是ES6标准提供的一个异步操作的很好的语法糖，对于原本的回调函数模式进行了封装，实现了对于异步操作的链式调用。并且配上generator以及async语法糖来使用更加方便。虽然Promise当前在很多浏览器上都已经得到了支持，但是在看Promise的时候，发现对于Promise的很多地方仍然不是很了解。包括其内部的实现机制，写这个代码的目的也是在于对Promise的使用更
2017-08-12 22:45:13
7914
原创 script标签的defer和async属性
defer & async前提在说defer和async两个script标签的属性之前，要先说一下浏览器对于页面进行加载的流程，浏览器渲染页面是基于两棵树进行的，分别是DOM树和render树，DOM树由HTML决定，HTML元素会被解析为一个个节点，自上而下形成一棵树；而render树是由CSS和DOM树决定的，每个节点在接收了CSS之后，会根据其所占据的空间，形成一棵render树，render
2017-08-01 22:12:01
857
原创 TypeScript + React环境构建和demo
下面的示例项目可以从我的github上获取为什么用TypeScriptTypeScript为JavaScript这个弱类型语言添加了基本的类型检测以及对于ES6甚至ES7的一些高级语法的转移，在一定程度上相当于增强功能版的babel，现在的很多开源项目为了得到更好的项目管理和维护性能，使用了TypeScript或者Flow来为JavaScript添加强类型。 TypeScript添加了很多强类型语
2017-07-27 10:17:15
6286
原创 React兄弟、父子元素之前的通信
React元素之间的通信主要由下面几种方式 1、 Redux 2、 EventEmitter 3、 通过props进行通信（需要有嵌套关系）这里面先记下来比较简单的第三种，因为最近刚刚用到。子元素到父元素父子元素之间的通信主要靠props，这个方法既简单，又好用，所以可以使用这种方法的时候就直接用好了。 首先有这样的一个React DOM结构：<div className="passage"
2016-11-28 20:00:11
5007
原创 使用less的loop（循环）方法根据类名生成元素
less是一个功能强大的css超集，可以方便我们进行css代码的书写，less具有很多现代语言的特性，而不是简单的标记语言，包括分支和循环，这里我们使用循环来进行元素的自动化生成。下面的代码需要一些less知识：less中文网有时我们需要生成这样一个元素： <div class="item introduction"> <div class="s
2016-11-25 21:06:30
14688
原创 HTML、CSS产品主页注意事项
构建项目第一件事–设计页面架构在使用HTML&CSS在构建现在很流行的扁平化风格的页面的时候（或者其它所有的静态页面的时候），第一件事就是需要进行页面结构的设计，不要一上来就手撸代码，有时候重新架构一个项目的难度远远大于从头开始写这个项目。 需要语义化的使用各种HTML标签，不要将所有的标签都用<div>来设置，这样会使后面的维护变得越来越困难。 下面是简书的一个页面的部分HTML标签：可以看到
2016-11-25 20:52:22
795
原创 CSS transform的rotate，内部元素旋转到背后仍会显示。
在写代码的时候出现了一个问题，当使用了CSS3的transform的时候，对下面这个元素进行旋转：//DOM元素的结构<figure class="img-figure"> <img src="/assets/97aa04cee801bdd3b8762057267d0767.jpg" alt="This is a beauty"> <figcaption> <h2
2016-11-09 16:50:05
6890
翻译 React--引用（refs and the DOM）
Refs and the DOM在标准的React数据流中，props是在父组件和其子组件中唯一的交流手段。为了修改一个子，你需要通过新的props重新渲染。然而，在很小一部分情况下，需要强制修改标准数据流外部的一些数据。子组件需要被修改成一个立即React元素，或者一个DOM元素，React为这两种情况提供了一个问题解决方案。The ref Callback AttributeReact支持一个可
2016-11-03 15:54:45
1894
翻译 React：JSX进阶
JSX In Depth最根本上，JSX仅仅提供React.createElement(component,props, ...children)函数这样的语法糖，JSX代码：//JSX代码<MyButton color="blue" shadowSize={2}> Click Me</MyButton>//编译之后的JavaScript代码React.createElement(
2016-11-03 11:05:51
4614
翻译 React官方文档--Composition vs Inheritance
Composition vs InheritanceReact有一个强大的结构模型，我们建议使用结构来代替继承来实现组件之间的重用。 我们将要考虑一些问题，这些问题是可以用结构来代替继承解决问题。包含一些组件并不知道他们的子元素到底是什么情况，像Sidebar或者Dialog一样都继承自boxes是很正常的一件事情。 我们建议一些组件使用特殊的children属性来传递子元素直接到他的输出。fu
2016-11-01 15:02:52
1196
翻译 React官方文档--Lifting State Up
Lifting State Up如果，几个组件需要同时影响并且修改同一个数据，我们建议将这个共享状态进行提升，给他们最近的共同祖先。 在这个部分，我们将要创建一个温度计算器来判断水会不会在给定温度下沸腾。 我们将从一个叫做BoilingVerdict的组件开始，这个组件接收celsius温度作为属性，然后打印是否足够让水沸腾。 然后我们创建一个组件叫做Calculator，这个组件渲染一个<i
2016-11-01 15:01:27
1491
翻译 React官方文档--Forms
Forms表单组件，比如：<input>，<textarea>和<option>和基本的组件不同，因为表单组件是需要用户进行交互的。这些组件提供了接口，用来更容易的管理表单来响应用户的交互。 有两种形式的表单组件 1. Controlled Components 2. Uncontrolled ComponentsControlled Components一个受控表单组件提供一个value属性
2016-11-01 15:00:08
2425
翻译 React官方文档--Lists and Keys
Lists and Keys下面是JavaScript使用map()历一个数组，在React中可以使用元素列表来实现相同操作。//javascript take an array and double themconst numbers = [1,2,3,4,5];const doubled = numbers.map((number) => number * 2);console.log(d
2016-11-01 14:59:31
2211
翻译 React官方文档--Conditional Rendering
Conditional Rendering在React中，你可以创建不同的组件，并且渲染其中的一部分，这取决于你应用的状态。 状态渲染和JavaScript中的分支运算符有一样的效果，使用JavaScript中的类似if运算符来创建元素来代表当前状态，然后让React更新UI去匹配。 我们创建了一个Greeting组件去显示，显示的结果取决于用户是否登录。//two componentsfun
2016-11-01 14:58:31
1008
翻译 React官方文档--Handling Events
Handling EventsReact元素的事件处理非常类似于对DOM元素添加事件处理，但有一部分的语法不同。 1. React事件使用camelCase来进行命名，而不是小写字母 2. JSX需要传递一个函数作为事件处理函数，而不是一个字符串。//DOM元素的事件处理函数<button onclick="activateLaser()"> Activate Lasers</but
2016-11-01 14:57:53
388
翻译 React官方文档--State and Lifecycle
state and leftcycle使用class来定义组件通过五个步骤来创建一个自动刷新的时钟： 1. 创建一个ES6 class 并且 extends React.Component 2. 添加一个空方法叫做render 3. 将函数体移动到render方法里面 4. 在render内部，使用this.props来取代props 5. 删除之前的函数声明和定义class Clock
2016-11-01 14:57:20
728
翻译 React官方文档--Rendering Elements
Rendering Elements元素是React app里面的最小的一个模块，而且React中的DOM元素都是一些基本的元素，很容易进行创建，虚拟的DOM对象创建起来成本很低。将一个元素渲染到DOM中创建一个<div>标签在HTML文件当中，现在可以通过ReactDOM将这些节点添加到这个标签中，将一个虚拟的React元素渲染到DOM中，可以使用ReactDOM.render()方法const
2016-11-01 14:56:13
592
翻译 React官方文档--Introducing JSX
Introducing JSXJSX中插入表达式function formatName(user) { return user.firstName+' '+user.lastName;}const user = { firstName: 'Harper', lastName: 'Perez'}const element = (<h1> Hello, {for
2016-11-01 14:55:04
468
原创 Webpack+React+Typescript开发环境
Webpack+React+Typescript开发环境WebpackFaceBook的Instagram团队开发的一个前端打包工具，比起之前的一些前端自动化构建工具，比如Gulp和Grunt来说，Webpack是基于依赖来进行代码整合的。也就是必须要有一个入口文件，这个入口文件中会引入其他的脚本文件，之后webpack通过这些依赖关系将所有的文件打包，并且可以自动生成sourcemap来方便调试。
2016-10-20 15:13:29
2762
原创 在Ubuntu14.04上安装和配置Mongodb
系统版本：Ubuntu 14.04 64bit Mongodb版本：Mongodb3.2.7 for Linux Mongodb下载地址：Mongodb一、安装 首先配置Mongodb的安装目录：# mkdir /usr/local/mongodb# cd /usr/local/mongodb//解压缩# tar -xvf mongodb-linux-x86_64-ubuntu1404-
2016-06-28 21:44:43
586
原创 几种相册图片布局方式
先上github地址：插件源码百度前端在几个月前发布了一个针对前端技术培训的任务：IFE（百度前端技术学院）。和几个小伙伴一起完成了部分任务，第四阶段是三个综合性的任务，博主先完成了其中的相册布局任务。写的并不是很完善，博主技术有限，大家就随便看看吧。瀑布流布局布局方式顾名思义，瀑布流布局就是相册中图片像瀑布一样，从高到低按顺序插入到相册中。如下图，一直保证下一张图片会被插入到当前最短的一道图片流
2016-06-02 13:30:08
25543
原创 CSS过渡 && bootstrap transition
bootstrap插件自带的动画都是用CSS3的过渡实现的，transition动画相比jQuery自带的动画有许多优点，这些动画比较平滑，使用起来比较方便和灵活，并且对资源的消耗比较少，但是也有缺点，比如动画完成时间等等。既然bootstrap插件采用了transition来进行动画效果修改，那么这样的方法还是很值得去学习一下的。CSS transitionCSS transition是CSS样式
2016-01-12 16:49:44
2787
原创 Bootstrap源码分析
bootstrap是twitter公司基于HTML5、CSS3和jQuery创建的一种前端框架，是现在使用范围比较广泛的一种前端框架，其源码对于学习前端的一些技术非常有帮助。bootstrap源码可以从bootstrap中文网（http://www.bootcss.com/）上面下载，但是安装源码需要配置Nodejs环境，安装方法可以自行百度。这个网站上面也可以下载到用于生产的精简源码。bootst
2016-01-12 15:28:25
2159
原创 CSS中的几种图片覆盖文本的方法
CSS CookBook中有几种图片覆盖文本的方法，整理出来备用：Gilder/Levin image replacement technique:<h1> <span></span> Replacement Text Is Here.</h1>h1 { width:200px; height:100px; position:relative;}h1 span {
2015-12-25 11:01:31
5668
原创 DOM元素点击失效问题
在为DOM添加事件处理函数的时候，出现了一个DOM元素无法点击的问题， 虽然class=”share”的元素的img类型的子孙元素中的第一个元素已经设置了鼠标点击的事件处理函数，但是这个事件处理函数并不能被触发，也就是点击这个图片的时候没有反应。 第一个原因：由于需要注册事件处理函数的img元素是放在header标签里面的，但是header标签如果不进行手动设置height，那么head
2015-12-22 16:30:15
3651
原创 Web页面中在窗口顶部出现白色横条
在刚开始编辑窗口的时候，使用body { height:100%}div { height:100%}希望可以保证div中的背景图片填满整个窗口，在未设置HTML5严格模式的时候，图片可以占满整个窗口，但是后来再加上标签的时候，发现页面上出现了这样的白条，也就是背景并未占满窗口。就像左边和上边这样的空白，后来通过firebug查看元素后发现，这个空白是
2015-12-17 15:00:46
7333
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人