blog
blog copied to clipboard
ybning
ninyb's blog
我最近和一个做后端开发的朋友讨论我在工作之余花了多长的时间去写码和学习写码。他给我看了Uncle Bob的《Clean Code》这本书中的一段话，它将音乐家们为准备音乐会而花费的时间与开发者让代码正确执行所用的练习时间进行了比较。 我喜欢这个类比，但是我不认为我完全认同它；首先这种想法会导致疲劳。我认为如果你想进一步磨练你的技术并扩大你的技能集，那么这是很好的，但是要一天中每个小时都这样做是很难持续的。 前端疲劳是非常真实的。 我看到过一些关于JavaScript疲劳的文章，但我认为问题远不止于这种特定的语言。 先澄清一下，这篇文章不是在抱怨前端疲劳如何糟糕，以及技术发展太快—— 我喜欢技术迅速发展。同样的，我可以感受到它是如何的势不可挡，也会时不时地感觉自己要落伍了。 据我所知，这是一把双刃剑。 首先作为一个前端开发者，你认为你的技能树里应当有以下所有的技能: HTML (整洁代码，语义化标签) CSS (模块化，可伸缩) CSS 方法 (BEM, SMACSS, OOCSS) CSS 预处理器 (像LESS, SCSS, PostCSS) 现代 CSS (Flexbox, Grid) JS 现代...
在编写 React 应用程序时候，我发现有一个简单模式非常有用。如果你已经用过 React 一段时间，可能你已经发现它了。有篇文章已经很好地解释了它，但是我还是想加点东西。 如果你将组件分为两类，你会发现组件更容易重用和推理。我称它们为容器（Container）组件和展示性（Presentational）组件，但是我也听说过 Fat 和 Skinny 、 Smart 和 Dumb 、 Stateful 和 Pure 、 Screens 和 Components ，等等。这些叫法并非完全一样，但是核心思想却相似。 展示性组件： 关心的是组件的外观。 内部可能会既包含有展示性组件，也包含有容器组件，并且它自身通常会有一些 DOM 标记和样式。 经常通过 this.props.children 来允许包含。...
> > function validate(){ > var reg = new RegExp("^[0-9]_$"); > var obj = document.getElementById("name"); > if(!reg.test(obj.value)){ > alert("请输入数字!"); > } > if(!/^[0-9]_$/.test(obj.value)){ > alert("请输入数字!"); > } > } >...
变量的解构赋值用途很多。 #### 1、交换变量的值 ``` let x = 1; let y = 2; [x, y] = [y, x]; ``` > 上面代码交换变量x和y的值，这样的写法不仅简洁，而且易读，语义非常清晰。 #### 2、从函数返回多个值 > 函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。 ``` // 返回一个数组 function example() {...
性价比绝不是去挑“便宜的买”，而是“按需购买”， 即"不需要用的功能不买"， 离开需求去谈性价比无意义。 比如，有多少人需要用"双显卡"?很多人买的大板上不仅有双显卡插槽，另外还有2-3根PCI插槽，而99%的人，当电脑报废了，都没见这些插槽用上了（除一个显卡外），为了表面上的豪华去多花几百元完全不值得。 ......
## ReactJS的生命周期 ReactJS的生命周期可以分为三个阶段来看：实例化、存在期、销毁期 ### 实例化 首次实例化 - getDefaultProps - getInitialState - componentWillMount - render - componentDidMount 实例化之后更新，这一过程和上面一样，但没有getDefaultProps这个过程 简单记忆：props => state => mount => render => mounted ### 存在期 组件已经存在，状态发生改变时 -...
## Higher-order Components 高阶组件 ```javascript import { Component } from "React" ; export const Enhance = (ComposedComponent) => class extends Component { constructor() { this.state = { data: null };...
我从用git就一直用`rebase`，但是新的公司用到merge命令，我不是很明白，所以查了一些资料，总结了下面的内容，如果有什么不妥的地方，还望指正，我一定虚心学习。 ### `merge`和`rebase` 标题上的两个命令：`merge`和`rebase`都是用来合并分支的。 这里不解释`rebase`命令，以及两个命令的原理，详细解释参考这里。 下面的内容主要说的是两者在实际操作中的区别。 ### 什么是分支 分支就是便于多人在同一项目中的协作开发。比方说：每个人开发不同的功能，在各自的分支开发过程中互不影响，完成后都提交到develop分支。极大的提高了开发的效率。 ### 合并分支 每个人创建一个分支进行开发，当开发完成，需要合并到develop分支的时候，就需要用到合并的命令。 ### 什么是冲突 合并的时候，有可能会产生冲突。 冲突的产生是因为在合并的时候，不同分支修改了相同的位置。所以在合并的时候git不知道那个到底是你想保留的，所以就提出疑问（冲突提醒）让你自己手动选择想要保留的内容，从而解决冲突。 ### `merge`和`rebase`的区别 采用`merge`和`rebase`后，`git log`的区别，`merge`命令不会保留`merge`的分支的`commit`：  ### 处理冲突的方式： （一股脑）使用`merge`命令合并分支，解决完冲突，执行`git add` .和`git commit -m'fix conflict'`。这个时候会产生一个`commit`。 （交互式）使用`rebase`命令合并分支，解决完冲突，执行`git...
[原文：http://benmccormick.org/2016/05/02/digging-into-react-choosing-component-styles/](http://benmccormick.org/2016/05/02/digging-into-react-choosing-component-styles/) 过去几个月，我一直在建立我的第一个使用了react的生产应用。我注意到的第一件事是在一个新的react应用中可以有很多选择。很多是围绕react的系统环境问题（用webpack还是Browserify？Redux还是Relay？我需要用css模块或者Immutable.js么？）但是这众多的选择只是这个生态库中的一部分，得找到最好的或者至少是一个稳定一致的做事方法。 一个选择就是你选择使用的定义组件的语法。在React中，你至少可以用3种方式定义组件：React.createClass，ES6 class, 纯函数式1。每一种都有一些优点和缺点： ### React.createClass React.createClass是定义React组件中原始的方式，也一直是React官方文档首选方式。 下面是看起来像这种方式的一个假设的SaveButton组件。这是一个简单的组件，监听click事件，然后用了一个单独的分发器来发送一个在页面上保存数据的请求。在点击这个按钮后，就会显示一些指定的saved text或者是“saved”。 ``` import React from ‘react’; import {dispatcher} from ‘./lib/dispatcher’; export const SaveButton = React.createClass({ propTypes: { //text to show after...
#### 伤脑筋的日子 > 有多少人一直被 [```art-template include```](https://aui.github.io/art-template/docs/syntax.html#子模板)，这匪夷的描述所思考许久  #### 终于解惑了 > demo1对于的是 ```{{include template_name}}```的用法 ``` {{each contents}} {{$value.content}} {{/each}} {{each list}} {{$value.title}} {{include 'temp2' $value.a}} {{/each}} $(function(){ var data =...