2019年03月_purple_lumpy

原创热门搜索样式布局

我们来做，点击搜索栏，弹出“热门搜索” 的框子。我们先在 src/common/header/index.js 中写上这个组件( SearchInfo )，如下。 import { HeaderWrapper, Logo, Nav, NavItem, NavSearch, Addition, But...

2019-03-29 16:01:45 606

原创使用 Redux-immutable 统一数据格式

我们来看一下 src/common/header 下的 index.js 代码，如下。import React from 'react';import {connect} from 'react-redux';import { HeaderWrapper, Logo, Nav, NavItem, NavSearch, Addition, Button, S...

2019-03-29 14:24:44 343

原创使用 Immutable.js 来管理 store 中的数据

我们先来看一下 src/common/header/store 下的reducer ，如下。import { SEARCH_FOCUS, SEARCH_BLUR } from './actionTypes';const defaultState = { focused: false};export default (state = defaultState, action)...

2019-03-28 17:30:17 255

原创 actionCreators 与 constants 的拆分

下面我们继续对 redux reducer 中的数据进行拆分。我们打开src/common/header/store 下的reducer.jsconst defaultState = { focused: false};export default (state = defaultState, action) => { if (action.type === ...

2019-03-28 17:00:19 385

原创使用combineReducers 完成对数据的拆分管理

前面，我们将focused 属性放置在redux 中了。但是现在在浏览器中调试窗口看redux 的信息，还看不到，我们还需要做一些设置。我们可以在github 上搜索redux-devtools-extension 如下这个就是我们要的插件（它不需要安装）。github 的文档，往下翻，会找到它的使用方法，如下，是一部分。按照官网的写法，我们去src/store 下，找到 ...

2019-03-28 15:31:55 328

原创使用React-redux 进行应用数据的管理

React 在处理小型的项目的时候是完全可以的。但是在处理复杂的项目时，React 自己是不够的。我们还需要使用redux 框架，帮助我们管理数据。如果我们使用了redux 管理数据，那我们尽量把数据都放到redux 中进行管理。下面，我们先把Header 组件中的focus 属性放到redux 中进行管理。先下载安装 redux 与 react-reduxyarn add red...

2019-03-28 13:43:56 197

原创搜索框动画效果实现

呃，我们的搜索框，为了不让输入的字符串把放大镜遮住，我们给input 设置padding-right 为30px，如下。export const NavSearch = styled.input` width: 160px; height: 38px; margin-top: 9px; margin-left: 20px; padding: 0 30px 0 20px;...

2019-03-28 09:57:57 1820

原创使用iconfont 嵌入头部图标

我们现在iconfront 中下载下来需要的图标。下载解压后的文件如下。第二排的文件( 和第一排的.woff2 )，是我们要放到项目中去的。那么，我们首先在项目目录的src/statics 下，创建一个目录 iconfont，然后把第二排的文件拖进来。然后，我们需要改一下其中的iconfont.css 文件，把里面字体的路径改成相对路径。如下。@font-face {font...

2019-03-24 17:35:34 1444

原创使用styled-components 完成Header 组件布局

首先，我们在src 下面新建目录 common ,因为 Header 组件是很多页面都要共用的一个组件。然后我们在common下新建目录header，再在header 目录下新建文件 index.js。然后我们开始初始化这个组件，如下。import React, { Component } from 'react';class Header extends Component {...

2019-03-24 17:01:55 576

原创项目目录搭建， styled-components 与 reset.css 的使用

我们先使用npx create-react-app xxx(project name) 来创建项目。我们删除掉src 目录下，暂时不用的文件，只留下 index.js , index.css, App.js 三个文件。然后呢，为了实现css 的模块化，使模块间的css 不会冲突，我们使用一个第三方模块Styled-components对css 样式进行管理。好的，先来下载安装它。用...

2019-03-24 12:50:42 624

原创 React-redux 介绍

前面我们了解了redux 以及redux 的中间件 redux-thunk，redux-saga。下面，我们来继续了解一下 react-redux。react-redux 是一个第三方模块，能够帮助我们在react 中更方便的使用redux。好啦，我们现在用react-redux 重新写一个todolist。之前的store文件夹，和src 里面组件代码都可以删掉了。我们先来安装rea...

2019-03-23 15:58:12 152

原创 Redux-saga 中间件

之前我们使用redux-thunk 把异步代码放到了action 里面，这个解决了自动化测试的一些问题以及代码的拆分管理。redux-saga 也是做异步代码拆分的中间件，可以把它将 redux-thunk 互换。我们要使用redux-saga，先把之前redux-thunk 相关代码删掉。然后，我们在github 上找到 redux-saga :https://github.com...

2019-03-23 13:40:03 184

下面是Redux 的data 流，Redux 中间件是指 action 和 store 之间。之前我们说，在 Redux 中action 只能是对象，action作为对象被直接派发给了store 。当我们使用了Redux-thunk 后，action 可以是函数了。如下图，action 通过dispatch 方法传给了store，dispatch 中使用了Middleware，对它进行了封装。...

2019-03-22 14:39:54 127

原创使用redux-thunk 中间件进行 ajax 请求的发送

之前我们是把异步ajax 请求直接放在了组件 app.js 中了，当逻辑十分复杂时，我们最好是将这些异步请求放在一个地方进行统一的管理。下面就是我们之前的代码，看看。import React, { Component } from 'react';import './mockdata.js';import axios from 'axios';import "antd/dist/a...

2019-03-22 14:25:16 224

原创 redux 中发送异步请求获取数据

我们实现一下，异步获取远程数据，然后将它显示在todolist 中。异步数据获取，我们使用axios。那么我们首先使用一下生命周期函数componentDidMount ，在周期函数里面发送axios 请求。如下。import React, {Component} from 'react';import store from './store/index.js';import ...

2019-03-21 17:14:57 1580

原创 webpack 与 code splitting

code splitting 即代码分割。那么什么是代码分割。我们举个例子。我们先下载一个包lodash，使用命令 npm install lodash --save 。lodash 是一个功能集合，提供了很多功能方法。先在src 目录下 index.js 中写下面的代码，如下是index.js 中的内容。import _ from 'lodash';console.log(...

2019-03-20 16:44:59 96

原创 Development 和 Prodection 模式打包的区别

webpack 打包，我们是可以配置模式的。如下是webpack.config.js 中的一部分代码。module.exports = { mode: "development"}我们一般用development 的模式进行开发，在这个环境下，我们使用了webpack 中的 devServer，它可以帮我们起一个服务器，还可以配置热更新等内容。十分方便。但是，当我们开发完成，需要...

2019-03-20 14:24:30 2067

原创 Tree Shaking 概念

我们先来写一个例子，在 src 目录下，创建一个文件 math.js 。它导出两个方法。如下export const add = (a,b) => { console.log(a+b);}export const minus = (a,b) => { console.log(a-b);}然后，在 index.js 中引入，如下。import {add} fro...

2019-03-19 18:04:18 1026 1

原创 webpack 实现对react 框架代码的打包

这里我们不用 react 脚手架初始化一个React 项目了。我们直接用webpack 来打包生成一个可用的React 项目。当然，React 中的JSX 语法，我们需要借助babel 来转化为ES5 语法。下面就是配置了。首先，我们在 webpack 官网的docs 中左侧栏的 presets 中可以找到react 的选项。根据它的介绍，我们先要下载 preset-react (它可...

2019-03-17 12:43:39 409

原创 webpack 使用babel 处理ES6 语法

我们打开项目，在index.js 中写一些ES6 的语法，如下。const arr = [ new Promise( () => {} ), new Promise( () => {} )];arr.map(item => { console.log(item)});然后我们使用打包命令 npm run bundle 或者 npx webpack在浏...

2019-03-15 17:02:47 439

原创 node.js express 返回一个静态页面

首先我们要有一个静态页面 .html 文件。然后，我们初始化一个express 项目。首先新建一个目录，进入它，如果没有下载express 的话，使用命名下载npm install express --save 。已经下载过，就跳过。接下来，我们再下载一个express 框架程序生成器并全局安装（用它创建一个新的Express 程序） npm install express-gener...

2019-03-15 11:40:14 7392

原创 WebpackDevServer 的使用 - 提升开发效率

前面，每次我们想要打包的话，都得先删除先前打包得文件，然后运行命令 npm run bundle . 然后打开浏览器，输入文件地址才能查看页面。下面我们可以通过三种方式，实现，每当改动src 中代码后，webpack 能自动帮助我们打包成压缩文件。第一种方式：使用命令webpack --watch我们将package.json 文件加上这个命令 "scripts": { ...

2019-03-14 15:10:24 517

原创 webpack SourceMap 配置

当webpack mode 是 “development”时，默认是sourcemap 已经配置进去了的。下面是我们的代码，此时，mode 是 “development”，此时sourcemap 默认已经配置进去了。const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');...

2019-03-13 17:14:05 3031

原创 webpack entry 与 output 的基本配置

entry 配置项，可以传一个字符串，也可以传一个对象。下面，entry 配置项就是传的对象。如果传字符串的话，实际上就等价于下面(字符串是main 对应的value )。接着，我们如果在output 中指定了filename，那么最后打包js 的名字就是指定的filename, 否则就是 main.js ，而这个main.js 就来源与entry 中的key 值。const pat...

2019-03-13 15:25:16 360

原创 webpack 使用 plugin 让打包更方便

plugin 可以在webpack 运行到某一时刻时，做一些事情。有点想vue, react 中的生命周期函数。比如下面的 “HtmlWebpackPlugin”，会在每次打包完成后，增加 html 文件。额，每次webpack 打包的时候如果先把原来打包的文件删除，那么里面的index.html 文件就要先拿出来，再放进入，甚麻烦。我们可以使用webpack插件，让这个步骤，不用自己...

2019-03-13 14:19:51 210

原创 webpack 使用Loader 打包静态资源 - 样式2

前面我们介绍啦样式文件的打包。下面是webpack.config.jsconst path = require('path');module.exports = { mode: 'development', entry: { main: './src/index.js' }, module: { rules: [{ test: /\.(png|...

2019-03-10 16:45:05 591

原创 webpack 使用Loader 打包静态资源 - 样式1

我们接下来要实现一下样式文件的打包。首先，我们在 src 下新建一个文件 index.css，代码如下。.pic { width: 150px; height: 150px;}然后在 index.js 中引入它，并使用这个样式。import gz from './gz.png';import './index.css';var img = new Image()...

2019-03-10 15:19:21 139

原创 webpack 使用Loader 打包静态资源 - 图片

file-loader之前我们使用如下的配置代码，进行了项目的打包const path = require('path');module.exports = { mode: 'production', entry: { main: './src/index.js' }, module: { rules: [{ test: /\.png$/,...

2019-03-10 11:55:38 620

原创 webpack 核心概念 loader

我们直到 webpack 可以打包js css 图片。那么我们来试一下。改一下index.js 代码，如下。const Div1 = require("./DivOne.js");const Div2 = require("./DivTwo.js");const gz = require("./gz.png");new Div1();new Div2();然后运行命令 np...

2019-03-10 11:09:57 143

原创 webpack 打包输出内容

webpack 打包完成后，会输出一堆信息。如下。我们来解释一下这些信息。hash 值，代表本次打包对应的唯一一个hash值。version ，本次打包webpack 的版本。time，本次打包用时。Asset 指，打包出的文件是 bundle.jsSize 指，打包后文件大小。Chunks ，我们在打包的时候，这一次比较简单只打包成一个文件，有的时候，会打包成多个...

2019-03-09 23:06:13 3827 1

原创使用webpack 的配置文件

当我们使用 npx webpack index.js 进行打包时，其实使用的是webpack 的默认配置文件。但是，为了实现更符合期望的配置，我们还得自己写配置文件。下面，我们就开始写配置文件吧。我们在项目根目录下，建一个文件叫“webpack.config.js”, 是webpack 默认的配置文件名这个时候，运行代码 npx webpack发现会报错Entry modu...

2019-03-09 20:01:18 329

原创搭建webpack 环境

webpack 是基于node.js 开发的模块打包工具，所以呢，首先应该安装node.js 环境。安装好了后，我们新建一个文件。在这个文件目录下，初始化（node）项目。使用命令npm init 然后回车确认即可。然后呢，它会在目录下生成一个package.json 文件。{ "name": "webpack-demo", "version": "1.0.0", "...

2019-03-09 18:49:21 89

原创无状态组件

前面我们写了UI组件和容器组件。还有一种组件：无状态组件。无状态组件其实就是一个函数。普通的组件，是js中的类，这个类还有一些生命周期函数。所以无状态组件的性能比普通组件要好。当一个组件，只有一个render 函数的时候，就可以被修改成无状态组件。一般，在做UI组件的时候，它没有逻辑操作，只是渲染的话。我们可以使用无状态组件定义它。这是之前的UI组件，代码。impo...

2019-03-07 21:34:48 243

原创 UI组件和容器组件

像原来的代码：import React, {Component} from 'react';import 'antd/dist/antd.css';import { Input, Button, List } from 'antd';import store from './store/index.js';import { getInputChangeAction, getA...

2019-03-07 21:20:11 815

原创 redux 基本概念 4

redux 的一些基本原则1. 一个项目里只能有一个store 公共存储空间2. 只有 store 能够改变自己的内容3. reducer 必须是纯函数（输入一样则输出一定一样，不会改变输入）redux 核心API (见文知意)createStorestore.dispatchstore.getStorestore.subscribe...

2019-03-06 16:56:02 130

原创 redux 基本概念 3

ActionTypes 的拆分之前的代码中我们把每一个action 都定义一个type，然后再到 reducer 里面判断这些type 。这样子，万一马虎了，就很难排错，也会不太好维护。我们可以将 type 都放到一起。在src/store 下，建立文件 actionType.js 。然后写入下面内容。export const CHANGE_INPUT_VALUE = 'c...

2019-03-06 16:46:43 137

原创 Redux 基本概念 2

Action 和 Reducer 的编写我们可以先下载一个 Chrome 浏览器插件 "redux devtools"，方便进行 redux 的调试。添加后，就可以在浏览器的开发者工具中找到 redux 选项卡了，如下。当然，这时会显示 “No store found”, 点击 the instructions 链接，然后它会告诉我们，只要在创建 store 的时候加上一行语句即可...

2019-03-06 15:42:57 468

原创 Antd 将TodoList 页面美化一下

Antd 是一个比较好的前端UI框架。官网：https://ant.design/index-cn在React 项目中下载，使用 yarn add 命令即可。使用也很简单。在组件中引用它的css 样式，然后按需引入即可。下面贴上代码。import React, {Component} from 'react';import 'antd/dist/antd.css';i...

2019-03-04 23:24:41 669

原创 Redux 基本概念 1

Redux 实际上是一个数据层框架，它将数据存储在Store 中。每个组件可以从Store 中获取数据，也可以修改Store 中的数据。Redux 的工作流程 Redux Flow如下，请求Store数据：React Components 向 Action Creators 发送请求获取Store 中的数据，Action Creators 向Store 提交请求，Store 则向Reduc...

2019-03-04 23:19:39 183

空空如也

opencv（for android）怎样提取出JPEG图像的DCT系数？