发表于   |   分类于

在如今前端框架发展的今天，单页面应用越来越比较常见了，随之而来也将面对权限的管理。针对VUE主要说说以下方面：

  • 接口级权限
  • 页面级权限

接口级权限

接口的权限一般和UI库关系不是很大，这里用axios举例来说明。常用在管理后台这些需要获取用户登录信息的接口。这里使用axios的拦截器就能很方便的实现。

举个小例子：后台好多接口发ajax请求获取数据的时候后端（前端判断用户是否登录的手段比较少，cookie？）都会需要获取用户是否登录，并在登录的情况反馈到前端，前端跳转到登录页面。这个就可以使用这个拦截器来实现。

阅读全文 »

发表于   |   分类于

Redux is a predictable state container for JavaScript apps. —— Redux
Simple, scalable state management. —— Mobx

从 Redux 和 Mobx 官方的介绍很容易可以看出，它们都是用来管理应用的 state。但是它们有什么区别呢？刚好最近把之前使用 Reudx 做的 React 项目使用 Mobx 重构了，那么就来总结一下吧。

Redux

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。

redux

阅读全文 »

发表于   |   分类于

A new image format for the Web. ——Google

想必对 Webp 格式的图片已经有过很多的了解，都知道它可以降低图片的体积，但兼容性不好等等。今天，我就从具体的项目中来说说 Webp 。

使用背景

外界因素

并非所有浏览器都支持 WebP，但是还要使用，所以很重要的是你得清楚哪些浏览器是支持的，这可能会影响你做决定，是否在你的网站或项目中采用 WebP 图片。下面是所有主流浏览器及其 WebP支持程度（截止 2017 年 12月）。

浏览器兼容

从图片可以看出，市面上的浏览器已经达到 72.85% 的支持率，这已经是个不低的数据了。

阅读全文 »

发表于   |   分类于

微信小程序出来也有一段时间了，之前也陆续做过demo练练手，毕竟自己的demo还是比较简单的，如今参与公司的项目也是一路踩坑而来。

认识小程序

语言及开发工具

首先，小程序类Web，但不同于我所认识的HTML，他有属于自己的开发语言及工具：

  • JavaScript: 微信小程序的 JavaScript 运行环境即不是 Browser 也不是 Node.js。它运行在微信 App 的上下文中，不能操作 Browser context 下的 DOM，也不能通过 Node.js 相关接口访问操作系统 API。
  • WXML: 作为微信小程序的展示层，并不是使用 Html，而是自己发明的基于 XML 语法。
  • WXSS: 用来修饰展示层的样式。官方的描述是 “ WXSS (WeiXin Style Sheets) 是一套样式语言，用于描述 WXML 的组件样式。WXSS 用来决定 WXML 的组件应该怎么显示。”
  • 小程序开发工具，开发者可以完成小程序的 API 和页面的开发调试、代码查看和编辑、小程序预览和发布等功能。
    阅读全文 »

发表于   |   分类于

准备工作

安装必要的软件，这里就不详细说了，具体可参考官方文档

  • 安装React-Native Cli npm install -g create-react-native-app

  • Xcode 安装升级到 8+

  • 初始化RN项目 react-native init rnHelloWord，可能会比较慢，要耐心等到

启动项目

  • 进入项目并启动

    1
    2
    cd rnHelloWord
    npm start

    也可以使用Xcode启动项目，点击ios/AwesomeProject.xcodeproj，再点击右上角的Run即可跑起来。

阅读全文 »

发表于   |   分类于

最近终于有时间静下心来学学node相关的知识了，那么来做一个什么东西呢？想来想去还是来做一个简单的bolg吧～～。接下来就介绍一下具体的历程。

技术栈

  • node
  • express（web应用框架）
  • mongoose（数据库）
  • pm2（应用进程管理）
  • swagger（API功能调试）

项目介绍

本文章将用具体的项来介绍 node-app：https://github.com/Hancoson/node-app

文件结构

  • app.js：入口文件
  • package.json：工程信息及包管理
  • node_moudules：依赖模块
  • public：静态资源（css、js、images）
  • routes：路由管理
  • view：模版文件
  • models：数据模型
  • config：项目配置文件
  • app：存放控制器、公用方法等
  • bin：项目配置脚本
阅读全文 »

发表于   |   分类于

如何做好项目管理是目前大多数公司会面临的一个问题，那么我们今天就来讨论一下如何更好的管理项目代码仓库。

首先来看看会用到的一些关键技术或名词：

  • Git：分布式版本控制系统，目前被普遍的接受
  • gitlab／Bitbucket：是一个用于仓库管理系统的开源项目，当然这里为什么不去用github或者codding等自己可以去想想

接下来说说我司目前使用的管理方式，可能不是最好，但是基本可以解决多人协作开发并不相互覆盖的需求。

git workflow

流程

  1. 先从主仓库拉去不同的分枝，分别是master（主干分枝），pre（灰度分枝），daily（测试分枝）
  2. 开发新功能的时候都是从master上拉取最新的分枝（如f分枝）
  3. 然后在f分枝上进行开发（个人开发的话不要推送到远端）
  4. 开发完功能，要提测时就合并到daily上交给测试进行测试，测试过程中修复的bug继续在f分枝进行，然后再合并到daily，以此直到测试环境通过
  5. 测试环境通过后将f分枝合并到灰度pre分枝，并进行测试，测试过程中修复的bug继续在f分枝进行，然后在合并到daily测试完成后在合并到pre分枝（测过程也可直接合并到pre分枝测试，但需要把最终的f分支合并到daily分支），以此直到灰度环境通过
  6. 灰度环境通过测试后，pre分枝打包发部署到线上，稳定后将本地f分枝合并到master分枝，并删除f分枝

说明

以上过程中可能会有一些问题产生，具体解决方法为：

  1. 每次新功能和修复bug分枝都必须从master上拉取
  2. 避免多人同时修改同一个模块（同一块代码）

写在最后

这样可能会有人问：在pre分枝上提交了多个项目a、b、c，但是到发布的时候只有a发，b和c还在测试，这样会把b和c的代码发布到线上，怎么办？

不要着急，每个功能页面引用的静态资源都是带版本号的，即使发布到线上不去改他的引用版本号也是无关紧要哈～～

发表于   |   分类于

算法技能如今越来越被看重，今天开始把平时记录的一些关于JS算法的题目做一下记录，弥补自己在这一项的缺陷。

数组去重

  • 先来说说比较容易想到的方法：
1
2
3
4
5
6
7
8
9
function unique(arr){
  var newArr = [];
  for(var i = 0;i<arr.length;i++){
    if(newArr.indexOf(arr[i]) === -1){
      newArr.push(arr[i])
    }
  }
  return newArr
}

该方中的indexOf兼容性需要考虑;

  • 利用Object中key的唯一性，利用key来进行筛选:
1
2
3
4
5
6
7
8
9
10
11
function unique(arr){
  var obj = {}
  var data = []
    for(var i in arr){
      if(!obj[arr[i]]){
        obj[arr[i]] = true;
        data.push(arr[i]);
      }
    }
  return data;
}
  • 排序后去重：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function unique(arr){
  var newArr = [];
  arr.sort();
	for(var i=0;i<arr.length;i++){
    if(i===0){
      newArr.push(arr[i])
    }
    else{
      if(arr[i]!==arr[i-1]){
        newArr.push(arr[i])
      }
    }
  }
  return newArr;
}

该方法会打乱原有数组的顺序；

阅读全文 »

发表于

在React中的组件可以分为presentational components即UI（演示）组件和container components即容器组件。今天就来说说他们两个的区别以及这样的好处。

区别

我的演示组件：

  • 它只关心事物的样子。
  • 内部可以包含容器组件，通常有一些自己的DOM标记和样式。
  • 通常可以通过this.props.children进行控制。
  • 对应用程序的其余部分没有依赖关系，例如Flux的action和stores。
  • 不需要指定数据的加载或变异。
  • 通过props接受和会掉数据。
  • 很少有自己的状态。
  • 被编写为功能组件，除非它们需要状态，生命周期或性能优化。
  • 示例：页面，边栏，故事，用户信息，列表。

我的容器组件：

  • 关心事情如何运作
  • 可能包含容器组件，但通常没有自己的任何DOM标记，除了一些包装div，并且没有任何样式。
  • 向演示组件或其他容器组件提供数据和行为。
  • 调用Flux／redux操作，并将其作为回调给演示组件。
  • 通常是有状态的，因为它们往往作为数据源。
  • 通常使用更高阶的组件（如来自Reat Redux的connect（）），来自Relay的createContainer（）或来自Flux Utils的Container.create（）生成的，而不是用手写。
  • 示例：UserPage，FollowersSidebar，StoryContainer，FollowedUserList。

好处

  • 更好的分离问题。通过以这种方式编写组件，您可以更好地理解您的应用程序和UI。
  • 更好的可重用性。您可以使用完全不同的状态源的相同的演示组件，并将其转换为可以进一步重复使用的单独的容器组件。
  • 演示组件本质上是您的应用程序的“调色板”。您可以将它们放在一个页面上，让设计师调整所有的变体，而不用触摸应用程序的逻辑。您可以在该页面上运行截图回归测试。
  • 这迫使您提取“布局组件”，例如Sidebar，Page，ContextMenu，并使用this.props.children，而不是在多个容器组件中复制相同的标记和布局。

记住，组件不必发出DOM。他们只需要在UI问题之间提供组合界限。

何时使用容器组件

我建议您开始构建您的应用程序的时候从UI组件开始。最终你会意识到，你正在把太多的props传给中间组件。当您注意到某些组件不使用他们收到的props，而只是转发它们，并且您必须在子组件需要更多数据时重新连接所有这些中间组件，这是引入一些容器组件的好时机。这样，您可以将数据和props到子组件，而不需要在不相关组件中负担。

这是一个持续的重构过程，所以不要开始就尝试。当您尝试使用此模式时，您将开始直观的了解何时抽出一些容器，就像您知道何时提取功能一样。

其他方法

重要的是，您明​​白UI组件和容器之间的区别不是一个技术性的。相反，它的目的是区别的。

相比之下，这里有一些相关（但不同的）技术区别：

  • 有状态和无状态的。一些组件使用React setState（）方法，有些则不使用。虽然容器组件往往是有状态的，而且表示组件往往是无状态的，但这并不是一个难题。演示组件可以是有状态的，容器也可以是无状态的。
  • 类和函数。由于React 0.14，组件可以被声明为类和函数。功能组件更容易定义，但它们缺少当前仅适用于类组件的某些功能。其中一些限制可能会在将来消失，但今天存在。由于功能组件更易于理解，我建议您使用它们，除非您需要状态，生命周期或性能优化，这些类型组件此时才可用。
  • 纯净和不纯。人们说如果一个组件是纯粹的，如果它保证返回相同的结果给予相同的道具和状态。纯组件可以被定义为类和函数，并且可以是有状态的和无状态的。纯组件的另一个重要方面是它们不依赖于道具或状态中的深层突变，因此它们的渲染性能可以通过其shouldComponentUpdate（）钩子中的浅层比较来优化。目前只有类可以定义shouldComponentUpdate（），但可能会在将来发生更改。

两个UI组件和容器都可以落入这些存储桶中。根据我的经验，UI组件往往是无状态的纯函数，容器往往是有状态的纯类。然而，这不是一个规则，而是一个观察，我已经看到与具体情况有关的恰恰相反的情况。

不要将UI和容器组件分离作为一个教条。有时候没有关系，也很难绘制线。如果您不确定特定组件是否应该是表示性的还是集装箱的，那么决定可能还为时过早。不要着急！

延伸阅读

Getting Started with Redux
Mixins are Dead, Long Live Composition
Container Components
Atomic Web Design
Building the Facebook News Feed with Relay

原文链接

发表于   |   分类于

React 组件非常的强大和灵活，提供了强大的功能，但是随着时间的推移，它将变的越来越臃肿和繁琐。

与任何其他类型的编程相比，React 组件遵循单一功能原则（ single responsibility principle），它不仅使你的组件更容易维护，更重要的是复用性。然而，如何负责一个庞大的React组件不再是一件容易的事。下面从易到难我买将有有三种方法具体讲解这个问题。

1. 分离 render()方法

这个是最常见的方法：当一个组件要呈现太多的元素，把这些元素分解为逻辑子组件是一个简单的简化方法。

一个常见而快速的方法就是在同一类中拆分render()方法并创建额外的“sub-render”方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class Panel extends React.Component {
  renderHeading() {
    // ...
  }

  renderBody() {
    // ...
  }

  render() {
    return (
      <div>
        {this.renderHeading()}
        {this.renderBody()}
      </div>
    );
  }
}

虽然这中方法有它的用处，但这不是一个真正的拆分组件本身的方法。每个state、props和class methods等仍然是共享的，所以很难确定哪些是由每个sub-render所使用。

真正降低复杂性的方法应该创建全新的组件。为更简单的子组件，功能组件可以用来把应用到最低:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const PanelHeader = (props) => (
  // ...
);

const PanelBody = (props) => (
  // ...
);

class Panel extends React.Component {
  render() {
    return (
      <div>
        // Nice and explicit about which props are used
        <PanelHeader title={this.props.title}/>
        <PanelBody content={this.props.content}/>
      </div>
    );
  }
}

通过这种方式拆分还有一个微妙但重要的区别。代替直接与间接函数调用组件声明，我们以更小的单位来组织React代码。这是因为返回的‘Panel’的render()是一个树形的元素，只有走到PanelHeader 和 PanelBody,而不是在它们之下的所有元素。

来看个实际意义的测试：一个浅渲染可以用来轻松隔离这些单位进行独立的测试。作为奖励，当React的新语境体系到达时，规模较小的单位将使它更有效地执行增量呈现。

模版组件通过React元素作为props

当一个组件由于多个变量或者配置变得非常的复杂，考虑将这个组件转化成一个“模版”组件。这就需要一个专用的父组件集中配置它们。

例如，一个Comment组件可能有不同的actions或者 metadata显示，取决于你是不是作者，是否保存成功，或者有无权限等。而不是混合的Comment组件，在哪里以及如何呈现它的内容？用逻辑来处理所有的变化？这两个问题可以被认为是独立的。使用React通过元素的能力，不仅仅用数据作为props,来创建一个灵活的模板组件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
class CommentTemplate extends React.Component {
  static propTypes = {
    // Declare slots as type node
    metadata: PropTypes.node,
    actions: PropTypes.node,
  };
  
  render() {
    return (
      <div>
        <CommentHeading>
          <Avatar user={...}/>
          
          // Slot for metadata
          <span>{this.props.metadata}</span>
          
        </CommentHeading>
        <CommentBody/>
        <CommentFooter>
          <Timestamp time={...}/>
          
          // Slot for actions
          <span>{this.props.actions}</span>
          
        </CommentFooter>
      </div>
    );
  }
}

另一个组件可以找出的独有的metadata和actions。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class Comment extends React.Component {
  render() {
    const metadata = this.props.publishTime ?
      <PublishTime time={this.props.publishTime} /> :
      <span>Saving...</span>;
    
    const actions = [];
    if (this.props.isSignedIn) {
      actions.push(<LikeAction />);
      actions.push(<ReplyAction />);
    }
    if (this.props.isAuthor) {
      actions.push(<DeleteAction />);
    }
    
    return <CommentTemplate metadata={metadata} actions={actions} />;
  }
}

请记住，在JSX中，组件的开始和结束标签之间的任何东西都作为特殊的子类支持传递。当正确使用时，可以特别表现出来。为了使用习惯，应该作为组件的主要内容区域保留。在评论示例中，这可能是注释本身的文本。

1
2
3
<CommentTemplate metadata={metadata} actions={actions}>
  {text}
</CommentTemplate>

将常见方面提取到高阶组件中

组件常常会被与其主要并且直接相关的交叉问题所污染。

假设你只要点击Document组件中的一个链接来发送分析数据。为了使事情进一步复杂化，数据需要包括有关文档的信息，如ID。简单的解决方案可能是向Document的componentDidMount和componentWillUnmount生命周期方法添加代码，如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class Document extends React.Component {
  componentDidMount() {
    ReactDOM.findDOMNode(this).addEventListener('click', this.onClick);
  }
  
  componentWillUnmount() {
    ReactDOM.findDOMNode(this).removeEventListener('click', this.onClick);
  }
  
  onClick = (e) => {
    if (e.target.tagName === 'A') { // Naive check for <a> elements
      sendAnalytics('link clicked', {
        documentId: this.props.documentId // Specific information to be sent
      });
    }
  };
  
  render() {
    // ...
  }
}

这里有一些问题：

  • 该组件现在有一个额外的关注，掩盖其主要目的：显示文档。
  • 如果该组件在这些生命周期方法中具有其他逻辑，则分析代码也会变得模糊。
  • 分析代码不可重用。
  • 重新构建组件变得更加困难，因为您必须解决分析代码。

可以使用高阶分量（HOCs）来分解这样的问题。简而言之，这些函数可以应用于任何React组件，用所需的行为来包装该组件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function withLinkAnalytics(mapPropsToData, WrappedComponent) {
  class LinkAnalyticsWrapper extends React.Component {
    componentDidMount() {
      ReactDOM.findDOMNode(this).addEventListener('click', this.onClick);
    }

    componentWillUnmount() {
      ReactDOM.findDOMNode(this).removeEventListener('click', this.onClick);
    }

    onClick = (e) => {
      if (e.target.tagName === 'A') { // Naive check for <a> elements
        const data = mapPropsToData ? mapPropsToData(this.props) : {};
        sendAnalytics('link clicked', data);
      }
    };
    
    render() {
      // Simply render the WrappedComponent with all props
      return <WrappedComponent {...this.props} />;
    }
  }
  
  return LinkAnalyticsWrapper;
}

重要的是要注意，该函数不会使组件变异以添加其行为，而是返回一个新的包装组件。正是这个新的包装组件用于代替原始的Document组件。

1
2
3
4
5
6
7
8
9
class Document extends React.Component {
  render() {
    // ...
  }
}

export default withLinkAnalytics((props) => ({
  documentId: props.documentId
}), Document);

请注意，可以提取要发送的数据（documentId）的具体细节作为HOCs的配置。这可以保留文档的领域知识与文档组件，以及通用的方式来监听withLinkAnalytics HOCs中的点击。

高阶组件显示了React的强大的组合性质。这里的简单示例演示了如何将似乎紧密集成的代码提取到具有单一职责的模块中。

HOCs通常用于React库，例如react-redux，styled-components和react-intl。毕竟，这些库都是解决任何React应用程序的通用方面。另一个库——recompose，通过使用HOCs进一步管理从组件状态到生命周期方法的一切。

结论

React组件是高度可组合的设计。通过轻松分解和组合它们，可以利用这一点。

不要躲避创建小而重要的组件。起初它可能会让你感到尴尬，但结果将是更强大和可重用的代码。