前端森林

前端森林 查看完整档案

上海编辑  |  填写毕业院校  |  填写所在公司/组织 github.com/Cosen95 编辑
编辑

个人动态

前端森林 收藏了文章 · 2018-07-09

JS进阶篇--JS数组reduce()方法详解及高级技巧

基本概念

reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。

reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组。

语法:

arr.reduce(callback,[initialValue])
  • callback (执行数组中每个值的函数,包含四个参数)

    • previousValue (上一次调用回调返回的值,或者是提供的初始值(initialValue))
    • currentValue (数组中当前被处理的元素)
    • index (当前元素在数组中的索引)
    • array (调用 reduce 的数组)
  • initialValue (作为第一次调用 callback 的第一个参数。)

简单应用

例1:

var items = [10, 120, 1000];

// our reducer function
var reducer = function add(sumSoFar, item) { return sumSoFar + item; };

// do the job
var total = items.reduce(reducer, 0);

console.log(total); // 1130

可以看出,reduce函数根据初始值0,不断的进行叠加,完成最简单的总和的实现。

reduce函数的返回结果类型和传入的初始值相同,上个实例中初始值为number类型,同理,初始值也可为object类型。

例2:

var items = [10, 120, 1000];

// our reducer function
var reducer = function add(sumSoFar, item) {
  sumSoFar.sum = sumSoFar.sum + item;
  return sumSoFar;
};

// do the job
var total = items.reduce(reducer, {sum: 0});

console.log(total); // {sum:1130}

进阶应用

使用reduce方法可以完成多维度的数据叠加。如上例中的初始值{sum: 0},这仅仅是一个维度的操作,如果涉及到了多个属性的叠加,如{sum: 0,totalInEuros: 0,totalInYen: 0},则需要相应的逻辑进行处理。

在下面的方法中,采用分而治之的方法,即将reduce函数第一个参数callback封装为一个数组,由数组中的每一个函数单独进行叠加并完成reduce操作。所有的一切通过一个manager函数来管理流程和传递初始参数。

var manageReducers = function(reducers) {
  return function(state, item) {
    return Object.keys(reducers).reduce(
      function(nextState, key) {
        reducers[key](state, item);
        return state;
      },
      {}
    );
  }
};

上面就是manager函数的实现,它需要reducers对象作为参数,并返回一个callback类型的函数,作为reduce的第一个参数。在该函数内部,则执行多维的叠加工作(Object.keys())。

通过这种分治的思想,可以完成目标对象多个属性的同时叠加,完整代码如下:

var reducers = {  
  totalInEuros : function(state, item) {
    return state.euros += item.price * 0.897424392;
  },
  totalInYen : function(state, item) {
    return state.yens += item.price * 113.852;
  }
};

var manageReducers = function(reducers) {
  return function(state, item) {
    return Object.keys(reducers).reduce(
      function(nextState, key) {
        reducers[key](state, item);
        return state;
      },
      {}
    );
  }
};

var bigTotalPriceReducer = manageReducers(reducers);
var initialState = {euros:0, yens: 0};
var items = [{price: 10}, {price: 120}, {price: 1000}];
var totals = items.reduce(bigTotalPriceReducer, initialState);
console.log(totals);

在来一个例子:
某同学的期末成绩如下表示

var result = [
    {
        subject: 'math',
        score: 88
    },
    {
        subject: 'chinese',
        score: 95
    },
    {
        subject: 'english',
        score: 80
    }
];

如何求该同学的总成绩?

var sum = result.reduce(function(prev, cur) {
    return cur.score + prev;
}, 0);

假设该同学因为违纪被处罚在总成绩总扣10分,只需要将初始值设置为-10即可。

var sum = result.reduce(function(prev, cur) {
    return cur.score + prev;
}, -10);

我们来给这个例子增加一点难度。假如该同学的总成绩中,各科所占的比重不同,分别为50%,30%,20%,我们应该如何求出最终的权重结果呢?

解决方案如下:

var dis = {
    math: 0.5,
    chinese: 0.3,
    english: 0.2
}

var sum = result.reduce(function(prev, cur) {
    return cur.score + prev;
}, -10);

var qsum = result.reduce(function(prev, cur) {
    return cur.score * dis[cur.subject] + pre;
}, 0)

console.log(sum, qsum);

再看一个例子,如何知道一串字符串中每个字母出现的次数?

var arrString = 'abcdaabc';

arrString.split('').reduce(function(res, cur) {
    res[cur] ? res[cur] ++ : res[cur] = 1
    return res;
}, {})

由于可以通过第二参数设置叠加结果的类型初始值,因此这个时候reduce就不再仅仅只是做一个加法了,我们可以灵活的运用它来进行各种各样的类型转换,比如将数组按照一定规则转换为对象,也可以将一种形式的数组转换为另一种形式的数组,大家可以动手去尝试一样。

[1, 2].reduce(function(res, cur) { 
    res.push(cur + 1); 
    return res; 
}, [])

koa的源码中,有一个only模块,整个模块就一个简单的返回reduce方法操作的对象:

var only = function(obj, keys){
  obj = obj || {};
  if ('string' == typeof keys) keys = keys.split(/ +/);
  return keys.reduce(function(ret, key){
    if (null == obj[key]) return ret;
    ret[key] = obj[key];
    return ret;
  }, {});
};

通过对reduce概念的理解,这个模块主要是想新建并返回一个obj对象中存在的keys的object对象。

var a = {
    env : 'development',
    proxy : false,
    subdomainOffset : 2
}
only(a,['env','proxy'])   // {env:'development',proxy : false}

参考

JS的内建函数reduce
数组reduce方法的高级技巧

查看原文

前端森林 发布了文章 · 2018-06-18

Redux

redux学习

流程

store分发(dispatch)> action(有type表示将要执行的动作)> reducer纯函数,接受先前的state和action,返回新的state(switch(action.type)case根据type类型执行不同操作,进而改变state)

action

cart-actions.js

export const ADD_TO_CART = 'ADD_TO_CART';
export const UPDATE_CART = 'UPDATE_CART';
export const DELETE_FROM_CART = 'DELETE_FROM_CART';

export function addToCart(product,quantity,unitCost){
    return{
        type:ADD_TO_CART,
        payload:{
            product,
            quantity,
            unitCost
        }
    }
}

export function updateCart(product,quantity,unitCost){
    return{
        type:UPDATE_CART,
        payload:{
            product,
            quantity,
            unitCost
        }
    }
}

export function deleteFromCart(product){
    return{
        type:DELETE_FROM_CART,
        payload:{
            product
        }
    }
}

reducer

  • 不要修改state
  • 在default的情况下返回旧的state

clipboard.png

cart-reducer.js

import { ADD_TO_CART,UPDATE_CART,DELETE_FROM_CART } from '../actions/cart-actions'

const initialState = {
    cart:[
        {
            product:'bread 700g',
            quantity:2,
            unitCost:90
        },
        {
            product:'milk 500ml',
            quantity:1,
            unitCost:47
        }
    ]
}

export default function(state=initialState,action){
    switch(action.type){
        case ADD_TO_CART:{
            return{
                ...state,
                cart:[...state.cart,action.payload]
            }
        }
        case UPDATE_CART:{
            return{
                ...state,
                cart:state.cart.map(item => 
                    item.product === action.payload.product?action.payload:item
                )
            }
        }
        case DELETE_FROM_CART:{
            return{
                ...state,
                cart:state.cart.filter(item =>
                    item.product !== action.payload.product
                )
            }
        }
        default:
            return state;
    }
}

products-reducer.js

export default function(state=[],action){
    return state
}

index.js

import { combineReducers } from 'redux';
import productsReducer from './products-reducer';
import cartReducer from './cart-reducer';

const allReducers = {
    products:productsReducer,
    shoppingCart:cartReducer
}

const rootReducer = combineReducers(allReducers);

export default rootReducer

store.js

clipboard.png

clipboard.png

store.js

import { createStore } from 'redux'
import rootReducer from './reducers'

let store = createStore(rootReducer)

export default store

index.js

import store from './store.js'
import { addToCart,updateCart,deleteFromCart } from './actions/cart-actions'

//const productsReducer = function(state=[],action){
//    return state
//}
//
//const initialState = {
//    cart:[
//        {
//            product:'bread 700g',
//            quantity:2,
//            unitCost:90
//        },
//        {
//            product:'milk 500ml',
//            quantity:1,
//            unitCost:47
//        }
//    ]
//}
//
//const ADD_TO_CART = 'ADD_TO_CART';
////reducer
//const cartReducer = function(state=initialState,action){
//    switch(action.type){
//        case ADD_TO_CART:{
//            return{
//                ...state,
//                cart:[...state.cart,action.payload]
//            }
//        }
//        default:
//            return state;
//    }
//    
//}
////action
//function addToCart(product,quantity,unitCost){
//    return{
//        type:ADD_TO_CART,
//        payload:{
//            product,
//            quantity,
//            unitCost
//        }
//    }
//}
//
//
//
//const allReducers = {
//    products:productsReducer,
//    shoppingCart:cartReducer
//}
//
//const rootReducer = combineReducers(allReducers);
//
//let store = createStore(rootReducer);

console.log("initial state:",store.getState());

let unsubscribe = store.subscribe(() =>
    console.log(store.getState())
);
//ADD_TO_CART
store.dispatch(addToCart('Coffee 500mg',1,250));
store.dispatch(addToCart('Flour 1kg',2,110));
store.dispatch(addToCart('Juice 2L',1,250));
//UPDATE_CART
store.dispatch(updateCart('Juice 2L',3,270));
//DELETE_FROM_CART
store.dispatch(deleteFromCart('Flour 1kg'));
unsubscribe();
查看原文

赞 0 收藏 0 评论 0

前端森林 发布了文章 · 2018-06-18

Linux学习---命令

Linux学习---命令

常用目录的作用

clipboard.png

clipboard.png

clipboard.png

clipboard.png

clipboard.png

命令基本格式

  • 命令提示符

clipboard.png

  • 命令格式

clipboard.png

文件处理命令

  • ls:查询目录中内容(ll相当于ls-l)

clipboard.png

文件权限

clipboard.png

  • mkdir:建立目录

clipboard.png

  • cd:切换所在目录(ctrl+l进行清屏)

clipboard.png

相对路径和绝对路径(Linux下通过tab键可以补全命令或目录,给予充分提示)

clipboard.png

  • pwd:查询所在目录位置

clipboard.png

  • rmdir:删除空目录

clipboard.png

  • 删除文件或目录

clipboard.png

  • cp:复制文件或目录

clipboard.png

  • mv:剪切或改名(原文件与目标文件不在同一个目录为剪切;在同一个目录为改名)

clipboard.png

  • ln:链接命令

clipboard.png

clipboard.png

创建软链接时原文件一定要写绝对路径

clipboard.png

硬链接和软链接的区别

clipboard.png

文件搜索命令

clipboard.png

  • locate

clipboard.png

clipboard.png

clipboard.png

查看原文

赞 2 收藏 2 评论 0

前端森林 发布了文章 · 2018-06-18

Redux

redux学习

流程

store分发(dispatch)> action(有type表示将要执行的动作)> reducer纯函数,接受先前的state和action,返回新的state(switch(action.type)case根据type类型执行不同操作,进而改变state)

action

cart-actions.js

export const ADD_TO_CART = 'ADD_TO_CART';
export const UPDATE_CART = 'UPDATE_CART';
export const DELETE_FROM_CART = 'DELETE_FROM_CART';

export function addToCart(product,quantity,unitCost){
    return{
        type:ADD_TO_CART,
        payload:{
            product,
            quantity,
            unitCost
        }
    }
}

export function updateCart(product,quantity,unitCost){
    return{
        type:UPDATE_CART,
        payload:{
            product,
            quantity,
            unitCost
        }
    }
}

export function deleteFromCart(product){
    return{
        type:DELETE_FROM_CART,
        payload:{
            product
        }
    }
}

reducer

  • 不要修改state
  • 在default的情况下返回旧的state

clipboard.png

cart-reducer.js

import { ADD_TO_CART,UPDATE_CART,DELETE_FROM_CART } from '../actions/cart-actions'

const initialState = {
    cart:[
        {
            product:'bread 700g',
            quantity:2,
            unitCost:90
        },
        {
            product:'milk 500ml',
            quantity:1,
            unitCost:47
        }
    ]
}

export default function(state=initialState,action){
    switch(action.type){
        case ADD_TO_CART:{
            return{
                ...state,
                cart:[...state.cart,action.payload]
            }
        }
        case UPDATE_CART:{
            return{
                ...state,
                cart:state.cart.map(item => 
                    item.product === action.payload.product?action.payload:item
                )
            }
        }
        case DELETE_FROM_CART:{
            return{
                ...state,
                cart:state.cart.filter(item =>
                    item.product !== action.payload.product
                )
            }
        }
        default:
            return state;
    }
}

products-reducer.js

export default function(state=[],action){
    return state
}

index.js

import { combineReducers } from 'redux';
import productsReducer from './products-reducer';
import cartReducer from './cart-reducer';

const allReducers = {
    products:productsReducer,
    shoppingCart:cartReducer
}

const rootReducer = combineReducers(allReducers);

export default rootReducer

store.js

clipboard.png

clipboard.png

store.js

import { createStore } from 'redux'
import rootReducer from './reducers'

let store = createStore(rootReducer)

export default store

index.js

import store from './store.js'
import { addToCart,updateCart,deleteFromCart } from './actions/cart-actions'

//const productsReducer = function(state=[],action){
//    return state
//}
//
//const initialState = {
//    cart:[
//        {
//            product:'bread 700g',
//            quantity:2,
//            unitCost:90
//        },
//        {
//            product:'milk 500ml',
//            quantity:1,
//            unitCost:47
//        }
//    ]
//}
//
//const ADD_TO_CART = 'ADD_TO_CART';
////reducer
//const cartReducer = function(state=initialState,action){
//    switch(action.type){
//        case ADD_TO_CART:{
//            return{
//                ...state,
//                cart:[...state.cart,action.payload]
//            }
//        }
//        default:
//            return state;
//    }
//    
//}
////action
//function addToCart(product,quantity,unitCost){
//    return{
//        type:ADD_TO_CART,
//        payload:{
//            product,
//            quantity,
//            unitCost
//        }
//    }
//}
//
//
//
//const allReducers = {
//    products:productsReducer,
//    shoppingCart:cartReducer
//}
//
//const rootReducer = combineReducers(allReducers);
//
//let store = createStore(rootReducer);

console.log("initial state:",store.getState());

let unsubscribe = store.subscribe(() =>
    console.log(store.getState())
);
//ADD_TO_CART
store.dispatch(addToCart('Coffee 500mg',1,250));
store.dispatch(addToCart('Flour 1kg',2,110));
store.dispatch(addToCart('Juice 2L',1,250));
//UPDATE_CART
store.dispatch(updateCart('Juice 2L',3,270));
//DELETE_FROM_CART
store.dispatch(deleteFromCart('Flour 1kg'));
unsubscribe();
查看原文

赞 0 收藏 0 评论 0

前端森林 收藏了文章 · 2018-06-12

对React-redux中connect方法的理解

关于React-redux

Redux是React全家桶的重要一员,之前在知乎上也看到类似的提问:该如何通俗易懂的理解Redux?
Redux是JavaScript的状态容器,Redux的概念简单明了:

1. 应用中所有的状态都是以一个对象树的形式存储在一个单一的store中;
2. 当你想要改变应用的中的状态时,你就要dispatch一个action,这也是唯一的改变state的方法;
3. 通过编写reducer来维护状态,返回新的state,不直接修改原来数据;

为什么会有Redux

在React中,数据的传递主要采用state和props,props得由父级分发下来,而state是组件中可自行管理的状态,这意味着React并没有让数据回溯的能力,数据只能单向向下分发,或者自行内部处理,举一个简单的例子,父组件可以使用props向子组件传递数据,子组件可以通过触发回调函数来改变父组件的状态,如果是那种没有嵌套关系的组件,该如何来实现通信呢?为了解决这个问题,Redux的方法就是将store放在根目录顶层组件中,一层层往下分发给各子组件,在子组件中进行调用,Redux的作用是让状态变得更加可预测、并且更容易管理。

Redux由Flux框架演变而来,但在Flux的基础上Redux改变了整个框架中某些角色的作用,例如在Flux中你可以拥有多个store,每个store存储自己对应的那部分状态,在Redux中,你只能维护一个store,存储了整个应用的所有状态,Redux更倾向于把store分发下去,dispatch action的时候,reducer根据状态对象的key值再将store进行拆分,reducer能拿到store中对应的那一部分进行处理,Redux提供createStore、combineReducers、applyMiddleware等一系列方法来配合React-redux使用帮我们更好的对这个store进行管理,这里要详讲的是React-redux中的connect方法。

Store与视图层的绑定

Provider组件

想要把store绑定在视图层上,得用到React-redux中的两个主角:Provider和Connect,在api文档第一段话,作者说通常情况下你无法使用connect()去connect一个没有继承Provider的组件,也就是说如果你想在某个子组件中使用Redux维护的store数据,它必须是包裹在Provider中并且被connect过的组件,Provider的作用类似于提供一个大容器,将组件和Redux进行关联,在这个基础上,connect再进行store的传递。

Provider组件源码:

export function createProvider(storeKey = 'store', subKey) {
......
class Provider extends Component {
    getChildContext() {
        return { [storeKey]: this[storeKey], [subscriptionKey]: null }
    }
    constructor(props, context) {
        super(props, context)
        this[storeKey] = props.store;
    }

    render() {
        return Children.only(this.props.children)
    }
}
}

从源码中可以看到,作者用了React的Context,Context解决了一个React中很常见的问题:当你的组件嵌套越来越深的时候,context能让你父组件和其它里层组件之间的通信变的更方便,createProvider方法将返回一个Provider组件,该组件接受store和子组件,在Provider中定义了getChildContext方法来传递store,那么在子组件中利用contextTypes,你就能利用context访问到父级组件传递的store数据了。

<Provider store>

Props

  1. store:应用中唯一的状态store

  2. children: 应用的子组件

例子:

<Provider store={store}>
    <Router history={history}>
    <Route path="/" component={App}>
        <Route path="foo" component={Foo}/>
        <Route path="bar" component={Bar}/>
    </Route>
    </Router>
</Provider>

connect方法

来看下connect函数到底是如何将store和组件联系在一起的,注意到api文档中有这样的一句话:

It does not modify the component class passed to it; instead, it returns a new, connected component class for you to use.

connenct并不会改变它“连接”的组件,而是提供一个经过包裹的connect组件。 conenct接受4个参数,分别是mapStateToProps,mapDispatchToProps,mergeProps,options(使用时注意参数位置顺序)。

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

mapStateToProps(state, ownProps) 方法允许我们将store中的数据作为props绑定到组件中,只要store更新了就会调用mapStateToProps方法,mapStateToProps返回的结果必须是object对象,该对象中的值将会更新到组件中,例子:

const mapStateToProps = (state) => {
    return ({
        count: state.counter.count
    })
}

mapDispatchToProps(dispatch, [ownProps]) 第二个参数允许我们将action作为props绑定到组件中,mapDispatchToProps希望你返回包含对应action的object对象,例如:

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    increase: (...args) => dispatch(actions.increase(...args)),
    decrease: (...args) => dispatch(actions.decrease(...args))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(yourComponent)

当你想对组件的render更新进行更好的控制的时候,它也支持返回function方法,具体可以点击#279查看,例子:

const mapDispatchToProps = {
    // increment: () => increment(1),
    increase, // import increase function from action
    decrease 
}

mergeProps(stateProps, dispatchProps, ownProps) 该参数非必须,redux默认会帮你把更新维护一个新的props对象,类似调用Object.assign({}, ownProps, stateProps, dispatchProps)。

而options是为了更好的定制化设置的一个参数,允许返回5个boolean、function的值,我平时基本上没有接触到,想了解的可以参考api文档。

附参考文档:

  1. Redux中文文档

  2. Redux api介绍

(自己平时写的一些总结,有误的地方欢迎交流指正)

查看原文

前端森林 收藏了文章 · 2018-06-08

React+AntD 后台管理系统解决方案 -- 终极版

react-admin(尝试一下)

react-admin system solution

logo

travis-ci
PRs Welcome

文档地址:wiki

问题和方案汇总:issue

更新日志迁移至CHANGELOG.md😁(重要!对于了解项目部分功能和代码很有用!)

cli 命令行脚手架安装和使用 react-admin 🔥

使用 react-admin-creator 快速安装和下载 react-admin 模板来开发项目:

npm i -g react-admin-creator

react-admin-creator myapp

前言

网上react后台管理开源免费的完整版项目比较少,所以利用空余时间集成了一个版本出来,已放到GitHub
启动和打包的时间都稍长,请耐心等待两分钟

依赖模块

<span style="color: rgb(184,49,47);">项目是用create-react-app创建的,主要还是列出新加的功能依赖包</span>

<span style="color: rgb(184,49,47);">点击名称可跳转相关网站😄😄</span>

  • react
  • react-router(<span style="color: rgb(243,121,52);">react路由,4.x的版本,如果还使用3.x的版本,请切换分支(ps:分支不再维护)</span>)
  • redux(基础用法,但是封装了通用action和reducer,demo中主要用于权限控制(ps:目前可以用16.x的context api代替),可以简单了解下)
  • antd(<span style="color: rgb(243,121,52);">蚂蚁金服开源的react ui组件框架</span>)
  • axios(<span style="color: rgb(243,121,52);">http请求模块,可用于前端任何场景,很强大👍</span>)
  • echarts-for-react(<span style="color: rgb(243,121,52);">可视化图表,别人基于react对echarts的封装,足够用了</span>)
  • recharts(<span style="color: rgb(243,121,52);">另一个基于react封装的图表,个人觉得是没有echarts好用</span>)
  • nprogress(<span style="color: rgb(243,121,52);">顶部加载条,蛮好用👍</span>)
  • react-draft-wysiwyg(<span style="color: rgb(243,121,52);">别人基于react的富文本封装,如果找到其他更好的可以替换</span>)
  • react-draggable(<span style="color: rgb(243,121,52);">拖拽模块,找了个简单版的</span>)
  • screenfull(<span style="color: rgb(243,121,52);">全屏插件</span>)
  • photoswipe(<span style="color: rgb(243,121,52);">图片弹层查看插件,不依赖jQuery,还是蛮好用👍</span>)
  • animate.css(<span style="color: rgb(243,121,52);">css动画库</span>)
  • react-loadable(代码拆分,按需加载,预加载,样样都行,具体见其文档,推荐使用)
  • redux-alita 极简的redux2react工具
  • 其他小细节省略

功能模块

<span style="color: rgb(184,49,47);">备注:项目只引入了ant-design的部分组件,其他的组件antd官网有源码,可以直接复制到项目中使用,后续有时间补上全部组件。</span>

<span style="color: rgb(184,49,47);">项目使用了antd的自定义主题功能-->黑色,若想替换其他颜色,具体操作请查看antd官网</span>
<!--more-->

  • 首页

    • 完整布局
    • 换肤(全局功能,暂时只实现了顶部导航的换肤,后续加上其他模块)
  • 导航菜单

    • 顶部导航(菜单伸缩,全屏功能)
    • 左边菜单(增加滚动条以及适配路由的active操作)
  • UI模块

    • 按钮(antd组件)
    • 图标(antd组件并增加彩色表情符)
    • 加载中(antd组件并增加顶部加载条)
    • 通知提醒框(antd组件)
    • 标签页(antd组件)
    • 轮播图(ant动效组件)
    • 富文本
    • 拖拽
    • 画廊
  • 动画

    • 基础动画(animate.css所有动画)
    • 动画案例
  • 表格

    • 基础表格(antd组件)
    • 高级表格(antd组件)
    • 异步表格(数据来自掘金酱的接口)
  • 表单

    • 基础表单(antd组件)
  • 图表

    • echarts图表
    • recharts图表
  • 页面

    • 登录页面(包括GitHub第三方登录)
    • 404页面

功能截图

首页

截图

按钮图标等

截图

轮播图

截图

富文本

截图

拖拽

截图

画廊

截图

动画

截图

表格

截图

表单

截图

图表

截图

页面

截图

菜单拖拽

截图

代码目录

+-- build/                                  ---打包的文件目录
+-- config/                                 ---npm run eject 后的配置文件目录
+-- node_modules/                           ---npm下载文件目录
+-- public/
|   --- index.html                            ---首页入口html文件
|   --- npm.json                            ---echarts测试数据
|   --- weibo.json                            ---echarts测试数据
+-- src/                                    ---核心代码目录
|   +-- axios                               ---http请求存放目录
|   |    --- index.js
|   +-- components                          ---各式各样的组件存放目录
|   |    +-- animation                      ---动画组件
|   |    |    --- ...
|   |    +-- charts                         ---图表组件
|   |    |    --- ...
|   |    +-- dashboard                      ---首页组件
|   |    |    --- ...
|   |    +-- forms                          ---表单组件
|   |    |    --- ...
|   |    +-- pages                          ---页面组件
|   |    |    --- ...
|   |    +-- tables                         ---表格组件
|   |    |    --- ...
|   |    +-- ui                             ---ui组件
|   |    |    --- ...
|   |    --- BreadcrumbCustom.jsx           ---面包屑组件
|   |    --- HeaderCustom.jsx               ---顶部导航组件
|   |    --- Page.jsx                       ---页面容器
|   |    --- SiderCustom.jsx                ---左边菜单组件
|   +-- style                               ---项目的样式存放目录,主要采用less编写
|   +-- utils                               ---工具文件存放目录
|   --- App.js                              ---组件入口文件
|   --- index.js                            ---项目的整体js入口文件,包括路由配置等
--- .env                                    ---启动项目自定义端口配置文件
--- .eslintrc                               ---自定义eslint配置文件,包括增加的react jsx语法限制
--- package.json

安装运行

1.下载或克隆项目源码
2.yarn 或者 npm安装相关包文件(首先推荐使用yarn,国内建议增加淘宝镜像源,不然很慢,你懂的😁)
有些老铁遇到运行时报错,首先确定下是不是最新稳定版的nodejs和npm或者yarn(推荐用yarn),切记不要用cnpn
// 首推荐使用yarn装包
yarn or npm i
3.启动项目
yarn start or npm start
4.打包项目
yarn build or npm run build

Q&A(点击问题查看答案)

1.create-react-app 打包项目run build 增加进度条信息?

2.接口跨域了,怎么在本地开发时配置代理?

3.在使用hashRouter的情况下怎么实现类似锚点跳转?

4.怎么添加多页面配置?

5.路由传参数接问号怎么传?

6.如何兼容IE浏览器?

结尾

该项目会不定时更新,后续时间会添加更多的模块

欢迎和感谢大家PR~~👏👏

若有问题,可加QQ群与我交流

  • 1群:264591039(已满)
  • 2群:592688854(已满)
  • 3群:743490497 (已满)
  • 4群:150131600

如果对你有帮助,给个star哟~~❤️❤️❤️❤️

查看原文

前端森林 赞了文章 · 2018-06-08

Redux入门教程(快速上手)

满满的干货,耐心看完,你会发现redux原来这么可爱。

典型的Web应用程序通常由共享数据的多个UI组件组成。通常,多个组件的任务是负责展示同一对象的不同属性。这个对象表示可随时更改的状态。在多个组件之间保持状态的一致性会是一场噩梦,特别是如果有多个通道用于更新同一个对象。

举个小栗子,一个带有购物车的网站。在顶部,我们用一个UI组件显示购物车中的商品数量。我们还可以用另一个UI组件,显示购物车中商
品的总价。如果用户点击添加到购物车按钮,则这两个组件应立即更新当前的数据。如果用户从购物车中删除商品、更改数目、使用优惠券或者更改送货地点,则相关的UI组件都应该更新出正确的信息。
可以看到,随着功能范围的扩大,一个简单的购物车将会很难保持数据同步。

在这篇文章中,我将介绍Redux框架,它可以帮助你以简单易用的方式构建复杂项目并进行维护。为了使学习更容易,我们将使用一个简化的购物车项目来学习Redux的工作原理。你需要至少熟悉React库,因为你以后需要将其与Redux集成。

学习前提

在我们开始以前,确保你熟悉以下知识:

同时,确保你的设备已经安装:

什么是Redux

Redux是一个流行的JavaScript框架,为应用程序提供一个可预测的状态容器。Redux基于简化版本的Flux框架,Flux是Facebook开发的一个框架。在标准的MVC框架中,数据可以在UI组件和存储之间双向流动,而Redux严格限制了数据只能在一个方向上流动。 见下图:

图片描述

在Redux中,所有的数据(比如state)被保存在一个被称为store的容器中 → 在一个应用程序中只能有一个。store本质上是一个状态树,保存了所有对象的状态。任何UI组件都可以直接从store访问特定对象的状态。要通过本地或远程组件更改状态,需要分发一个action分发在这里意味着将可执行信息发送到store。当一个store接收到一个action,它将把这个action代理给相关的reducerreducer是一个纯函数,它可以查看之前的状态,执行一个action并且返回一个新的状态。

理解不变性(Immutability)

在我们开始实践之前,需要先了解JavaScript中的不变性意味着什么。在编码中,我们编写的代码一直在改变变量的值。这是可变性。但是可变性常常会导致意外的错误。如果代码只处理原始数据类型(numbers, strings, booleans),那么你不用担心。但是,如果在处理Arrays和Objects时,则需要小心执行可变操作。
接下来演示不变性

  • 打开终端并启动node(输入node)。
  • 创建一个数组,并将其赋值给另一个变量。
> let a = [1, 2, 3]
> let b = a
> b.push(8)
> b
[1, 2, 3, 8]
> a
[1, 2, 3, 8]

可以看到,更新数组b也会同时改变数组a。这是因为对象和数组是引用数据类型 → 这意味着这样的数据类型实际上并不保存值,而是存储指向存储单元的指针。
将a赋值给b,其实我们只是创建了第二个指向同一存储单元的指针。要解决这个问题,我们需要将引用的值复制到一个新的存储单元。在Javascript中,有三种不同的实现方式:

  1. 使用Immutable.js创建不可变的数据结构。
  2. 使用JavaScript库(如UnderscoreLodash)来执行不可变的操作。
  3. 使用ES6方法执行不可变操作。

本文将使用ES6方法,因为它已经在NodeJS环境中可用了,在终端中,执行以下操作:

> a = [1,2,3]
[ 1, 2, 3 ]
> b = Object.assign([],a)
[ 1, 2, 3 ]
> b.push(8)
> b
[ 1, 2, 3, 8 ] // b output
> a
[ 1, 2, 3 ] // a output

在上面的代码中,修改数组b将不会影响数组a。我们使用Object.assign()创建了一个新的副本,由数组b指向。我们也可以使用操作符(...)执行不可变操作:

> a = [1,2,3]
[ 1, 2, 3 ]
> b = [...a, 4, 5, 6]
[ 1, 2, 3, 4, 5, 6 ]
> a
[ 1, 2, 3 ]

我不会深入这个主题,但是这里还有一些额外的ES6功能,我们可以用它们执行不可变操作:

配置Redux

配置Redux开发环境的最快方法是使用create-react-app工具。在开始之前,确保已经安装并更新了nodejsnpmyarn。我们生成一个redux-shopping-cart项目并安装Redux

create-react-app redux-shopping-cart

cd redux-shopping-cart
yarn add redux # 或者npm install redux

首先,删除src文件夹中除index.js以外的所有文件。打开index.js,删除所有代码,键入以下内容:

import { createStore } from "redux";

const reducer = function(state, action) {
  return state;
}

const store = createStore(reducer);

让我解释一下上面的代码:

  1. 首先,我们从redux包中引入createStore()方法。
  2. 我们创建了一个名为reducer的方法。第一个参数state是当前保存在store中的数据,第二个参数action是一个容器,用于:

    • type - 一个简单的字符串常量,例如ADD, UPDATE, DELETE等。
    • payload - 用于更新状态的数据。
  3. 我们创建一个Redux存储区,它只能使用reducer作为参数来构造。存储在Redux存储区中的数据可以被直接访问,但只能通过提供的reducer进行更新。

注意到,我在第二点中所提到state。目前,state为undefined或null。要解决这个问题,需要分配一个默认的值给state,使其成为一个空数组:

const reducer = function(state=[], action) {
  return state;
}

让我们更进一步。目前我们创建的reducer是通用的。它的名字没有描述它的用途。那么我们如何使用多个reducer呢?我们将用到Redux包中提供的combineReducers函数。修改代码如下:

// src/index.js

import { createStore } from "redux";
import { combineReducers } from 'redux';

const productsReducer = function(state=[], action) {
  return state;
}

const cartReducer = function(state=[], action) {
  return state;
}

const allReducers = {
  products: productsReducer,
  shoppingCart: cartReducer
}

const rootReducer = combineReducers(allReducers);

let store = createStore(rootReducer);

在上面的代码中,我们将通用的reducer修改为productReducercartReducer。创建这两个空的reducer是为了展示如何在一个store中使用combineReducers函数组合多个reducer。

接下来,我们将为reducer定义一些测试数据。修改代码如下:

// src/index.js

…

const initialState = {
  cart: [
    {
      product: 'bread 700g',
      quantity: 2,
      unitCost: 90
    },
    {
      product: 'milk 500ml',
      quantity: 1,
      unitCost: 47
    }
  ]
}

const cartReducer = function(state=initialState, action) {
  return state;
}

…

let store = createStore(rootReducer);

console.log("initial state: ", store.getState());

我们使用store.getState()在控制台中打印出当前的状态。你可以在终端中执行npm start或者yarn start来运行dev服务器。并在控制台中查看state

图片描述

现在,我们的cartReducer什么也没做,但它应该在Redux的存储区中管理购物车商品的状态。我们需要定义添加、更新和删除商品的操作(action)。我们首先定义ADD_TO_CART的逻辑:

// src/index.js

…

const ADD_TO_CART = 'ADD_TO_CART';

const cartReducer = function(state=initialState, action) {
  switch (action.type) {
    case ADD_TO_CART: {
      return {
        ...state,
        cart: [...state.cart, action.payload]
      }
    }

    default:
      return state;
  }
}

…

我们继续来分析一下代码。一个reducer需要处理不同的action类型,因此我们需要一个SWITCH语句。当一个ADD_TO_CART类型的action在应用程序中分发时,switch中的代码将处理它。
正如你所看到的,我们将action.payload中的数据与现有的state合并以创建一个新的state。

接下来,我们将定义一个action,作为store.dispatch()的一个参数。action是一个Javascript对象,有一个必须的type和可选的payload。我们在cartReducer函数后定义一个:

…
function addToCart(product, quantity, unitCost) {
  return {
    type: ADD_TO_CART,
    payload: { product, quantity, unitCost }
  }
}
…

在这里,我们定义了一个函数,返回一个JavaScript对象。在我们分发消息之前,我们添加一些代码,让我们能够监听store事件的更改。

…
let unsubscribe = store.subscribe(() =>
  console.log(store.getState())
);

unsubscribe();

接下来,我们通过分发消息到store来向购物车中添加商品。将下面的代码添加在unsubscribe()之前:

…
store.dispatch(addToCart('Coffee 500gm', 1, 250));
store.dispatch(addToCart('Flour 1kg', 2, 110));
store.dispatch(addToCart('Juice 2L', 1, 250));

下面是整个index.js文件:

// src/index.js

import { createStore } from "redux";
import { combineReducers } from 'redux';

const productsReducer = function(state=[], action) {
  return state;
}

const initialState = {
  cart: [
    {
      product: 'bread 700g',
      quantity: 2,
      unitCost: 90
    },
    {
      product: 'milk 500ml',
      quantity: 1,
      unitCost: 47
    }
  ]
}

const ADD_TO_CART = 'ADD_TO_CART';

const cartReducer = function(state=initialState, action) {
  switch (action.type) {
    case ADD_TO_CART: {
      return {
        ...state,
        cart: [...state.cart, action.payload]
      }
    }

    default:
      return state;
  }
}

function addToCart(product, quantity, unitCost) {
  return {
    type: ADD_TO_CART,
    payload: {
      product,
      quantity,
      unitCost
    }
  }
}

const allReducers = {
  products: productsReducer,
  shoppingCart: cartReducer
}

const rootReducer = combineReducers(allReducers);

let store = createStore(rootReducer);

console.log("initial state: ", store.getState());

let unsubscribe = store.subscribe(() =>
  console.log(store.getState())
);

store.dispatch(addToCart('Coffee 500gm', 1, 250));
store.dispatch(addToCart('Flour 1kg', 2, 110));
store.dispatch(addToCart('Juice 2L', 1, 250));

unsubscribe();

保存代码后,Chrome会自动刷新。可以在控制台中确认新的商品已经添加了。

图片描述

组织Redux代码

index.js中的代码逐渐变得冗杂。我把所有的代码都写在index.js中是为了起步时的简单易懂。接下来,我们来看一下如何组织Redux项目。首先,在src文件夹中创建一下文件和文件夹:

src/
├── actions
│ └── cart-actions.js
├── index.js
├── reducers
│ ├── cart-reducer.js
│ ├── index.js
│ └── products-reducer.js
└── store.js

然后,我们把index.js中的代码进行整理:

// src/actions/cart-actions.js

export const ADD_TO_CART = 'ADD_TO_CART';

export function addToCart(product, quantity, unitCost) {
  return {
    type: ADD_TO_CART,
    payload: { product, quantity, unitCost }
  }
}
// src/reducers/products-reducer.js

export default function(state=[], action) {
  return state;
}
// src/reducers/cart-reducer.js

import  { ADD_TO_CART }  from '../actions/cart-actions';

const initialState = {
  cart: [
    {
      product: 'bread 700g',
      quantity: 2,
      unitCost: 90
    },
    {
      product: 'milk 500ml',
      quantity: 1,
      unitCost: 47
    }
  ]
}

export default function(state=initialState, action) {
  switch (action.type) {
    case ADD_TO_CART: {
      return {
        ...state,
        cart: [...state.cart, action.payload]
      }
    }

    default:
      return state;
  }
}
// src/reducers/index.js

import { combineReducers } from 'redux';
import productsReducer from './products-reducer';
import cartReducer from './cart-reducer';

const allReducers = {
  products: productsReducer,
  shoppingCart: cartReducer
}

const rootReducer = combineReducers(allReducers);

export default rootReducer;
// src/store.js

import { createStore } from "redux";
import rootReducer from './reducers';

let store = createStore(rootReducer);

export default store;
// src/index.js

import store from './store.js';
import { addToCart }  from './actions/cart-actions';

console.log("initial state: ", store.getState());

let unsubscribe = store.subscribe(() =>
  console.log(store.getState())
);

store.dispatch(addToCart('Coffee 500gm', 1, 250));
store.dispatch(addToCart('Flour 1kg', 2, 110));
store.dispatch(addToCart('Juice 2L', 1, 250));

unsubscribe();

整理完代码之后,程序依然会正常运行。现在我们来添加修改和删除购物车中商品的逻辑。修改cart-actions.jscart-reducer.js文件:

// src/reducers/cart-actions.js
…
export const UPDATE_CART = 'UPDATE_CART';
export const DELETE_FROM_CART = 'DELETE_FROM_CART';
…
export function updateCart(product, quantity, unitCost) {
  return {
    type: UPDATE_CART,
    payload: {
      product,
      quantity,
      unitCost
    }
  }
}

export function deleteFromCart(product) {
  return {
    type: DELETE_FROM_CART,
    payload: {
      product
    }
  }
}
// src/reducers/cart-reducer.js
…
export default function(state=initialState, action) {
  switch (action.type) {
    case ADD_TO_CART: {
      return {
        ...state,
        cart: [...state.cart, action.payload]
      }
    }

    case UPDATE_CART: {
      return {
        ...state,
        cart: state.cart.map(item => item.product === action.payload.product ? action.payload : item)
      }
    }

    case DELETE_FROM_CART: {
      return {
        ...state,
        cart: state.cart.filter(item => item.product !== action.payload.product)
      }
    }

    default:
      return state;
  }
}

最后,我们在index.js中分发这两个action

// src/index.js
…
// Update Cart
store.dispatch(updateCart('Flour 1kg', 5, 110));

// Delete from Cart
store.dispatch(deleteFromCart('Coffee 500gm'));
…

保存完代码之后,可以在浏览器的控制台中检查修改和删除的结果。

使用Redux工具调试

如果我们的代码出错了,应该如何调试呢?

Redux拥有很多第三方的调试工具,可用于分析代码和修复bug。最受欢迎的是time-travelling tool,即redux-devtools-extension。设置它只需要三个步骤。

  • 首先,在Chrome中安装Redux Devtools扩展。
  • 然后,在运行Redux应用程序的终端里使用Ctrl+C停止服务器。并用npm或yarn安装redux-devtools-extension包。
yarn add redux-devtools-extension
  • 一旦安装完成,我们对store.js稍作修改:
// src/store.js
import { createStore } from "redux";
import { composeWithDevTools } from 'redux-devtools-extension';
import rootReducer from './reducers';

const store = createStore(rootReducer, composeWithDevTools());

export default store;

我们还可以把src/index.js中日志相关的代码删除掉。返回Chrome,右键单击该工具的图标,打开Redux DevTools面板:

图片描述

图片描述

可以看到,Redux Devtools很强大。你可以在action, statediff(方法差异)之间切换。选择左侧面板上的不同action,观察状态树的变化。你还可以通过进度条来播放actions序列。甚至可以通过工具直接分发操作信息。具体的请查看文档

集成React

在本文开头,我提到Redux可以很方便的与React集成。只需要简单的几步。

  • 首先,停止服务器,并安装react-redux包:
yarn add react-redux
  • 接下来,在index.js中加入React代码。我们还将使用Provider类将React应用程序包装在Redux容器中:
// src/index.js
…
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';

const App = <h1>Redux Shopping Cart</h1>;

ReactDOM.render(
  <Provider store={store}>
    { App }
  </Provider> ,
  document.getElementById('root')
);
…

目前,已经完成了集成的第一部分。可以启动服务器以查看效果。第二部分涉及到使用刚刚安装的react-redux包中的几个方法。通过这些方法将React组件与Redux的storeaction相关联。此外,还可以使用ExpressFeathers这样的框架来设置API。API将为我们的应用程序提供对数据库服务的访问。

感谢网友整理了本文的相关代码,如需要,请移步这里

在Redux中,我们还可以安装其他一些包,比如axios等。我们React组件的state将由Redux处理,确保所有组件与数据库API的同步。想要更进一步的学习,请看Build a CRUD App Using React, Redux and FeathersJS

总结

我希望本文能对你有所帮助。当然,还有很多相关的内容需要学习。例如,处理异步操作、身份验证、日志记录等。如果觉得Redux适合你,可以看看以下几篇文章:

这篇文章是看到比较简明的Redux教程。当然也是翻译过来哒,文中提到了很多延伸文章,我还在一个个学习当中,遇到不错的依然会翻译给大家的。

?喜欢的话记得收藏哦!

查看原文

赞 298 收藏 256 评论 29

前端森林 收藏了文章 · 2018-06-08

Redux入门教程(快速上手)

满满的干货,耐心看完,你会发现redux原来这么可爱。

典型的Web应用程序通常由共享数据的多个UI组件组成。通常,多个组件的任务是负责展示同一对象的不同属性。这个对象表示可随时更改的状态。在多个组件之间保持状态的一致性会是一场噩梦,特别是如果有多个通道用于更新同一个对象。

举个小栗子,一个带有购物车的网站。在顶部,我们用一个UI组件显示购物车中的商品数量。我们还可以用另一个UI组件,显示购物车中商
品的总价。如果用户点击添加到购物车按钮,则这两个组件应立即更新当前的数据。如果用户从购物车中删除商品、更改数目、使用优惠券或者更改送货地点,则相关的UI组件都应该更新出正确的信息。
可以看到,随着功能范围的扩大,一个简单的购物车将会很难保持数据同步。

在这篇文章中,我将介绍Redux框架,它可以帮助你以简单易用的方式构建复杂项目并进行维护。为了使学习更容易,我们将使用一个简化的购物车项目来学习Redux的工作原理。你需要至少熟悉React库,因为你以后需要将其与Redux集成。

学习前提

在我们开始以前,确保你熟悉以下知识:

同时,确保你的设备已经安装:

什么是Redux

Redux是一个流行的JavaScript框架,为应用程序提供一个可预测的状态容器。Redux基于简化版本的Flux框架,Flux是Facebook开发的一个框架。在标准的MVC框架中,数据可以在UI组件和存储之间双向流动,而Redux严格限制了数据只能在一个方向上流动。 见下图:

图片描述

在Redux中,所有的数据(比如state)被保存在一个被称为store的容器中 → 在一个应用程序中只能有一个。store本质上是一个状态树,保存了所有对象的状态。任何UI组件都可以直接从store访问特定对象的状态。要通过本地或远程组件更改状态,需要分发一个action分发在这里意味着将可执行信息发送到store。当一个store接收到一个action,它将把这个action代理给相关的reducerreducer是一个纯函数,它可以查看之前的状态,执行一个action并且返回一个新的状态。

理解不变性(Immutability)

在我们开始实践之前,需要先了解JavaScript中的不变性意味着什么。在编码中,我们编写的代码一直在改变变量的值。这是可变性。但是可变性常常会导致意外的错误。如果代码只处理原始数据类型(numbers, strings, booleans),那么你不用担心。但是,如果在处理Arrays和Objects时,则需要小心执行可变操作。
接下来演示不变性

  • 打开终端并启动node(输入node)。
  • 创建一个数组,并将其赋值给另一个变量。
> let a = [1, 2, 3]
> let b = a
> b.push(8)
> b
[1, 2, 3, 8]
> a
[1, 2, 3, 8]

可以看到,更新数组b也会同时改变数组a。这是因为对象和数组是引用数据类型 → 这意味着这样的数据类型实际上并不保存值,而是存储指向存储单元的指针。
将a赋值给b,其实我们只是创建了第二个指向同一存储单元的指针。要解决这个问题,我们需要将引用的值复制到一个新的存储单元。在Javascript中,有三种不同的实现方式:

  1. 使用Immutable.js创建不可变的数据结构。
  2. 使用JavaScript库(如UnderscoreLodash)来执行不可变的操作。
  3. 使用ES6方法执行不可变操作。

本文将使用ES6方法,因为它已经在NodeJS环境中可用了,在终端中,执行以下操作:

> a = [1,2,3]
[ 1, 2, 3 ]
> b = Object.assign([],a)
[ 1, 2, 3 ]
> b.push(8)
> b
[ 1, 2, 3, 8 ] // b output
> a
[ 1, 2, 3 ] // a output

在上面的代码中,修改数组b将不会影响数组a。我们使用Object.assign()创建了一个新的副本,由数组b指向。我们也可以使用操作符(...)执行不可变操作:

> a = [1,2,3]
[ 1, 2, 3 ]
> b = [...a, 4, 5, 6]
[ 1, 2, 3, 4, 5, 6 ]
> a
[ 1, 2, 3 ]

我不会深入这个主题,但是这里还有一些额外的ES6功能,我们可以用它们执行不可变操作:

配置Redux

配置Redux开发环境的最快方法是使用create-react-app工具。在开始之前,确保已经安装并更新了nodejsnpmyarn。我们生成一个redux-shopping-cart项目并安装Redux

create-react-app redux-shopping-cart

cd redux-shopping-cart
yarn add redux # 或者npm install redux

首先,删除src文件夹中除index.js以外的所有文件。打开index.js,删除所有代码,键入以下内容:

import { createStore } from "redux";

const reducer = function(state, action) {
  return state;
}

const store = createStore(reducer);

让我解释一下上面的代码:

  1. 首先,我们从redux包中引入createStore()方法。
  2. 我们创建了一个名为reducer的方法。第一个参数state是当前保存在store中的数据,第二个参数action是一个容器,用于:

    • type - 一个简单的字符串常量,例如ADD, UPDATE, DELETE等。
    • payload - 用于更新状态的数据。
  3. 我们创建一个Redux存储区,它只能使用reducer作为参数来构造。存储在Redux存储区中的数据可以被直接访问,但只能通过提供的reducer进行更新。

注意到,我在第二点中所提到state。目前,state为undefined或null。要解决这个问题,需要分配一个默认的值给state,使其成为一个空数组:

const reducer = function(state=[], action) {
  return state;
}

让我们更进一步。目前我们创建的reducer是通用的。它的名字没有描述它的用途。那么我们如何使用多个reducer呢?我们将用到Redux包中提供的combineReducers函数。修改代码如下:

// src/index.js

import { createStore } from "redux";
import { combineReducers } from 'redux';

const productsReducer = function(state=[], action) {
  return state;
}

const cartReducer = function(state=[], action) {
  return state;
}

const allReducers = {
  products: productsReducer,
  shoppingCart: cartReducer
}

const rootReducer = combineReducers(allReducers);

let store = createStore(rootReducer);

在上面的代码中,我们将通用的reducer修改为productReducercartReducer。创建这两个空的reducer是为了展示如何在一个store中使用combineReducers函数组合多个reducer。

接下来,我们将为reducer定义一些测试数据。修改代码如下:

// src/index.js

…

const initialState = {
  cart: [
    {
      product: 'bread 700g',
      quantity: 2,
      unitCost: 90
    },
    {
      product: 'milk 500ml',
      quantity: 1,
      unitCost: 47
    }
  ]
}

const cartReducer = function(state=initialState, action) {
  return state;
}

…

let store = createStore(rootReducer);

console.log("initial state: ", store.getState());

我们使用store.getState()在控制台中打印出当前的状态。你可以在终端中执行npm start或者yarn start来运行dev服务器。并在控制台中查看state

图片描述

现在,我们的cartReducer什么也没做,但它应该在Redux的存储区中管理购物车商品的状态。我们需要定义添加、更新和删除商品的操作(action)。我们首先定义ADD_TO_CART的逻辑:

// src/index.js

…

const ADD_TO_CART = 'ADD_TO_CART';

const cartReducer = function(state=initialState, action) {
  switch (action.type) {
    case ADD_TO_CART: {
      return {
        ...state,
        cart: [...state.cart, action.payload]
      }
    }

    default:
      return state;
  }
}

…

我们继续来分析一下代码。一个reducer需要处理不同的action类型,因此我们需要一个SWITCH语句。当一个ADD_TO_CART类型的action在应用程序中分发时,switch中的代码将处理它。
正如你所看到的,我们将action.payload中的数据与现有的state合并以创建一个新的state。

接下来,我们将定义一个action,作为store.dispatch()的一个参数。action是一个Javascript对象,有一个必须的type和可选的payload。我们在cartReducer函数后定义一个:

…
function addToCart(product, quantity, unitCost) {
  return {
    type: ADD_TO_CART,
    payload: { product, quantity, unitCost }
  }
}
…

在这里,我们定义了一个函数,返回一个JavaScript对象。在我们分发消息之前,我们添加一些代码,让我们能够监听store事件的更改。

…
let unsubscribe = store.subscribe(() =>
  console.log(store.getState())
);

unsubscribe();

接下来,我们通过分发消息到store来向购物车中添加商品。将下面的代码添加在unsubscribe()之前:

…
store.dispatch(addToCart('Coffee 500gm', 1, 250));
store.dispatch(addToCart('Flour 1kg', 2, 110));
store.dispatch(addToCart('Juice 2L', 1, 250));

下面是整个index.js文件:

// src/index.js

import { createStore } from "redux";
import { combineReducers } from 'redux';

const productsReducer = function(state=[], action) {
  return state;
}

const initialState = {
  cart: [
    {
      product: 'bread 700g',
      quantity: 2,
      unitCost: 90
    },
    {
      product: 'milk 500ml',
      quantity: 1,
      unitCost: 47
    }
  ]
}

const ADD_TO_CART = 'ADD_TO_CART';

const cartReducer = function(state=initialState, action) {
  switch (action.type) {
    case ADD_TO_CART: {
      return {
        ...state,
        cart: [...state.cart, action.payload]
      }
    }

    default:
      return state;
  }
}

function addToCart(product, quantity, unitCost) {
  return {
    type: ADD_TO_CART,
    payload: {
      product,
      quantity,
      unitCost
    }
  }
}

const allReducers = {
  products: productsReducer,
  shoppingCart: cartReducer
}

const rootReducer = combineReducers(allReducers);

let store = createStore(rootReducer);

console.log("initial state: ", store.getState());

let unsubscribe = store.subscribe(() =>
  console.log(store.getState())
);

store.dispatch(addToCart('Coffee 500gm', 1, 250));
store.dispatch(addToCart('Flour 1kg', 2, 110));
store.dispatch(addToCart('Juice 2L', 1, 250));

unsubscribe();

保存代码后,Chrome会自动刷新。可以在控制台中确认新的商品已经添加了。

图片描述

组织Redux代码

index.js中的代码逐渐变得冗杂。我把所有的代码都写在index.js中是为了起步时的简单易懂。接下来,我们来看一下如何组织Redux项目。首先,在src文件夹中创建一下文件和文件夹:

src/
├── actions
│ └── cart-actions.js
├── index.js
├── reducers
│ ├── cart-reducer.js
│ ├── index.js
│ └── products-reducer.js
└── store.js

然后,我们把index.js中的代码进行整理:

// src/actions/cart-actions.js

export const ADD_TO_CART = 'ADD_TO_CART';

export function addToCart(product, quantity, unitCost) {
  return {
    type: ADD_TO_CART,
    payload: { product, quantity, unitCost }
  }
}
// src/reducers/products-reducer.js

export default function(state=[], action) {
  return state;
}
// src/reducers/cart-reducer.js

import  { ADD_TO_CART }  from '../actions/cart-actions';

const initialState = {
  cart: [
    {
      product: 'bread 700g',
      quantity: 2,
      unitCost: 90
    },
    {
      product: 'milk 500ml',
      quantity: 1,
      unitCost: 47
    }
  ]
}

export default function(state=initialState, action) {
  switch (action.type) {
    case ADD_TO_CART: {
      return {
        ...state,
        cart: [...state.cart, action.payload]
      }
    }

    default:
      return state;
  }
}
// src/reducers/index.js

import { combineReducers } from 'redux';
import productsReducer from './products-reducer';
import cartReducer from './cart-reducer';

const allReducers = {
  products: productsReducer,
  shoppingCart: cartReducer
}

const rootReducer = combineReducers(allReducers);

export default rootReducer;
// src/store.js

import { createStore } from "redux";
import rootReducer from './reducers';

let store = createStore(rootReducer);

export default store;
// src/index.js

import store from './store.js';
import { addToCart }  from './actions/cart-actions';

console.log("initial state: ", store.getState());

let unsubscribe = store.subscribe(() =>
  console.log(store.getState())
);

store.dispatch(addToCart('Coffee 500gm', 1, 250));
store.dispatch(addToCart('Flour 1kg', 2, 110));
store.dispatch(addToCart('Juice 2L', 1, 250));

unsubscribe();

整理完代码之后,程序依然会正常运行。现在我们来添加修改和删除购物车中商品的逻辑。修改cart-actions.jscart-reducer.js文件:

// src/reducers/cart-actions.js
…
export const UPDATE_CART = 'UPDATE_CART';
export const DELETE_FROM_CART = 'DELETE_FROM_CART';
…
export function updateCart(product, quantity, unitCost) {
  return {
    type: UPDATE_CART,
    payload: {
      product,
      quantity,
      unitCost
    }
  }
}

export function deleteFromCart(product) {
  return {
    type: DELETE_FROM_CART,
    payload: {
      product
    }
  }
}
// src/reducers/cart-reducer.js
…
export default function(state=initialState, action) {
  switch (action.type) {
    case ADD_TO_CART: {
      return {
        ...state,
        cart: [...state.cart, action.payload]
      }
    }

    case UPDATE_CART: {
      return {
        ...state,
        cart: state.cart.map(item => item.product === action.payload.product ? action.payload : item)
      }
    }

    case DELETE_FROM_CART: {
      return {
        ...state,
        cart: state.cart.filter(item => item.product !== action.payload.product)
      }
    }

    default:
      return state;
  }
}

最后,我们在index.js中分发这两个action

// src/index.js
…
// Update Cart
store.dispatch(updateCart('Flour 1kg', 5, 110));

// Delete from Cart
store.dispatch(deleteFromCart('Coffee 500gm'));
…

保存完代码之后,可以在浏览器的控制台中检查修改和删除的结果。

使用Redux工具调试

如果我们的代码出错了,应该如何调试呢?

Redux拥有很多第三方的调试工具,可用于分析代码和修复bug。最受欢迎的是time-travelling tool,即redux-devtools-extension。设置它只需要三个步骤。

  • 首先,在Chrome中安装Redux Devtools扩展。
  • 然后,在运行Redux应用程序的终端里使用Ctrl+C停止服务器。并用npm或yarn安装redux-devtools-extension包。
yarn add redux-devtools-extension
  • 一旦安装完成,我们对store.js稍作修改:
// src/store.js
import { createStore } from "redux";
import { composeWithDevTools } from 'redux-devtools-extension';
import rootReducer from './reducers';

const store = createStore(rootReducer, composeWithDevTools());

export default store;

我们还可以把src/index.js中日志相关的代码删除掉。返回Chrome,右键单击该工具的图标,打开Redux DevTools面板:

图片描述

图片描述

可以看到,Redux Devtools很强大。你可以在action, statediff(方法差异)之间切换。选择左侧面板上的不同action,观察状态树的变化。你还可以通过进度条来播放actions序列。甚至可以通过工具直接分发操作信息。具体的请查看文档

集成React

在本文开头,我提到Redux可以很方便的与React集成。只需要简单的几步。

  • 首先,停止服务器,并安装react-redux包:
yarn add react-redux
  • 接下来,在index.js中加入React代码。我们还将使用Provider类将React应用程序包装在Redux容器中:
// src/index.js
…
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';

const App = <h1>Redux Shopping Cart</h1>;

ReactDOM.render(
  <Provider store={store}>
    { App }
  </Provider> ,
  document.getElementById('root')
);
…

目前,已经完成了集成的第一部分。可以启动服务器以查看效果。第二部分涉及到使用刚刚安装的react-redux包中的几个方法。通过这些方法将React组件与Redux的storeaction相关联。此外,还可以使用ExpressFeathers这样的框架来设置API。API将为我们的应用程序提供对数据库服务的访问。

感谢网友整理了本文的相关代码,如需要,请移步这里

在Redux中,我们还可以安装其他一些包,比如axios等。我们React组件的state将由Redux处理,确保所有组件与数据库API的同步。想要更进一步的学习,请看Build a CRUD App Using React, Redux and FeathersJS

总结

我希望本文能对你有所帮助。当然,还有很多相关的内容需要学习。例如,处理异步操作、身份验证、日志记录等。如果觉得Redux适合你,可以看看以下几篇文章:

这篇文章是看到比较简明的Redux教程。当然也是翻译过来哒,文中提到了很多延伸文章,我还在一个个学习当中,遇到不错的依然会翻译给大家的。

?喜欢的话记得收藏哦!

查看原文

前端森林 收藏了文章 · 2018-06-08

create-react-app安装及使用

create-react-app学习之前可以从它的官网开始了解

推荐网址

安装

推荐网址

按这个步骤走下去:

  • npm install -g create-react-app

  • create-react-app my-app

使用命令创建应用,myapp为项目名称

  • cd my-app

进入目录,然后就启动

  • npm start

启动之后打开的页面:
图片描述

这是我现在的项目目录:
图片描述

下面代码:

如果觉得不舒服,可以自己新建文件夹

在App.js先写一些东西,看看它是否运行

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <h1>asdfghj</h1>
    );
  }
}

export default App;

这是运行的效果图:
图片描述

安装最后一步:推荐网址

  • npm install --save react-router-dom

安装完之后可以在项目目录src下创建几个文件夹
图片描述

看我的代码:

App.js

import React,{ Component } from 'react';
import { BrowserRouter, Route,Link} from 'react-router-dom';


import Home from './components/Home';
import Product from './components/Product';
import About from './components/About';

class App extends Component {
    render() {
        return (
          <BrowserRouter>
            <div>
              <a href="/abc">家</a>
              <a href="/abc1">产品</a>
              <a href="/abc2">我们</a>
              <br/>
              <Link to="abc"> 家</Link>
              <Link to="abc1"> 产品</Link>
              <Link to="abc2">我们</Link>
              <br/>
              <Route path="/abc" component={Home}/>
              <Route path="/abc1" component={Product}/>
              <Route path="/abc2" component={About}/>
            </div>
              
          </BrowserRouter>
               
        );
    }
}

export default App;

About.js

import React from 'react';

class About extends React.Component {
    render() {
        return (
                <h1>关于我们</h1>
        );
    }
}

export default About;

Home.js

import React from 'react';

class Home extends React.Component {
    render() {
        return (
                <h1>hihihihi</h1>
        );
    }
}

export default Home;

Product.js

import React from 'react';

class Product extends React.Component {
    render() {
        return (
                <h1>产品列表</h1>
        );
    }
}

export default Product;

效果图:
图片描述

查看原文

前端森林 收藏了文章 · 2018-05-29

30分钟掌握ES6/ES2015核心内容(下)

30分钟掌握ES6/ES2015核心内容(上)我们讲解了es6最常用的一些语法:let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments

俗话说打铁要趁热,今天我们继续讲es6其他几个非常有用的新特性。

import export

这两个家伙对应的就是es6自己的module功能。

我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小工程,再用一种简单的方法把这些小工程连接在一起。

这有可能导致两个问题:

  1. 一方面js代码变得很臃肿,难以维护
  2. 另一方面我们常常得很注意每个script标签在html中的位置,因为它们通常有依赖关系,顺序错了可能就会出bug

在es6之前为解决上面提到的问题,我们得利用第三方提供的一些方案,主要有两种CommonJS(服务器端)和AMD(浏览器端,如require.js)。

如果想了解更多AMD,尤其是require.js,可以参看这个教程:why modules on the web are useful and the mechanisms that can be used on the web today to enable them

而现在我们有了es6的module功能,它实现非常简单,可以成为服务器和浏览器通用的模块解决方案。

ES6模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS和AMD模块,都只能在运行时确定这些东西。

上面的设计思想看不懂也没关系,咱先学会怎么用,等以后用多了、熟练了再去研究它背后的设计思想也不迟!好,那我们就上代码...

传统的写法

首先我们回顾下require.js的写法。假设我们有两个js文件: index.jscontent.js,现在我们想要在index.js中使用content.js返回的结果,我们要怎么做呢?

首先定义:

//content.js
define('content.js', function(){
    return 'A cat';
})

然后require:

//index.js
require(['./content.js'], function(animal){
    console.log(animal);   //A cat
})

那CommonJS是怎么写的呢?

//index.js
var animal = require('./content.js')

//content.js
module.exports = 'A cat'

ES6的写法

//index.js
import animal from './content'

//content.js
export default 'A cat'

以上我把三者都列出来了,妈妈再也不用担心我写混淆了...

ES6 module的其他高级用法

输出输入多个变量

//content.js

export default 'A cat'    
export function say(){
    return 'Hello!'
}    
export const type = 'dog' 

上面可以看出,export命令除了输出变量,还可以输出函数,甚至是类(react的模块基本都是输出类)

//index.js

import { say, type } from './content'  
let says = say()
console.log(`The ${type} says ${says}`)  //The dog says Hello

这里输入的时候要注意:大括号里面的变量名,必须与被导入模块(content.js)对外接口的名称相同。

如果还希望输入content.js中输出的默认值(default), 可以写在大括号外面。

//index.js

import animal, { say, type } from './content'  
let says = say()
console.log(`The ${type} says ${says} to ${animal}`)  
//The dog says Hello to A cat

修改变量名

此时我们不喜欢type这个变量名,因为它有可能重名,所以我们需要修改一下它的变量名。在es6中可以用as实现一键换名。

//index.js

import animal, { say, type as animalType } from './content'  
let says = say()
console.log(`The ${animalType} says ${says} to ${animal}`)  
//The dog says Hello to A cat

模块的整体加载

除了指定加载某个输出值,还可以使用整体加载,即用星号(*)指定一个对象,所有输出值都加载在这个对象上面。

//index.js

import animal, * as content from './content'  
let says = content.say()
console.log(`The ${content.type} says ${says} to ${animal}`)  
//The dog says Hello to A cat

通常星号*结合as一起使用比较合适。

终极秘籍

考虑下面的场景:上面的content.js一共输出了三个变量(default, say, type),假如我们的实际项目当中只需要用到type这一个变量,其余两个我们暂时不需要。我们可以只输入一个变量:

import { type } from './content' 

由于其他两个变量没有被使用,我们希望代码打包的时候也忽略它们,抛弃它们,这样在大项目中可以显著减少文件的体积。

ES6帮我们实现了!

不过,目前无论是webpack还是browserify都还不支持这一功能...

如果你现在就想实现这一功能的话,可以尝试使用rollup.js

他们把这个功能叫做Tree-shaking,哈哈哈,意思就是打包前让整个文档树抖一抖,把那些并未被依赖或使用的东西统统抖落下去。。。

看看他们官方的解释吧:

Normally if you require a module, you import the whole thing. ES2015 lets you just import the bits you need, without mucking around with custom builds. It's a revolution in how we use libraries in JavaScript, and it's happening right now.

未完待续

希望更全面了解es6伙伴们可以去看阮一峰所著的电子书ECMAScript 6入门

查看原文

前端森林 收藏了文章 · 2018-05-27

promise介绍--基础篇

前言

Promise,相信每一个前端工程师都或多或少地在项目中都是用过,毕竟它早已不是一个新名词。ES6中已经原生对它加以支持,在caniuse中搜索一下Promise,发现新版的chrome和firefox也已经支持。但是低版本的浏览器我们可以使用es6-promise这个polyfill库来加以兼容。

暂且不谈awaitasync,在Google或百度或360搜索等搜索引擎、或者在segmentfault等社区中,我们可以搜到一大把介绍promise的文章,毕竟它已经出现了很长时间,早已有很多大神分析讲解过。

我也看了一些文章,但是感觉都没有达到想要的效果。所以决定自己开一个小系列文章学习讲解一下promise的原理,以及实现,最后再谈一谈与之联系密切的Deferred对象。

本文是该系列的第一篇文章,主要先让大家对Promise有一个基本的认识。

promise简介

Promise的出现,原本是为了解决回调地狱的问题。所有人在讲解Promise时,都会以一个ajax请求为例,此处我们也用一个简单的ajax的例子来带大家看一下Promise是如何使用的。

ajax请求的传统写法:

getData(method, url, successFun, failFun){
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.open(method, url);
  xmlHttp.send();
  xmlHttp.onload = function () {
    if (this.status == 200 ) {
      successFun(this.response);
    } else {
      failFun(this.statusText);
    }
  };
  xmlHttp.onerror = function () {
    failFun(this.statusText);
  };
}

改为promise后的写法:

getData(method, url){
  var promise = new Promise(function(resolve, reject){
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open(method, url);
    xmlHttp.send();
    xmlHttp.onload = function () {
      if (this.status == 200 ) {
        resolve(this.response);
      } else {
        reject(this.statusText);
      }
    };
    xmlHttp.onerror = function () {
      reject(this.statusText);
    };
  })
  return promise;
}

getData('get','www.xxx.com').then(successFun, failFun)

很显然,我们把异步中使用回调函数的场景改为了.then().catch()等函数链式调用的方式。基于promise我们可以把复杂的异步回调处理方式进行模块化。

下面,我们就来介绍一下Promise到底是个什么东西?它是如何做到的?

Promise的原理分析

其实promise原理说起来并不难,它内部有三个状态,分别是pendingfulfilledrejected

pending是对象创建后的初始状态,当对象fulfill(成功)时变为fulfilled,当对象reject(失败)时变为rejected。且只能从pengding变为fulfilledrejected ,而不能逆向或从fulfilled变为rejected 、从rejected变为fulfilled。如图所示:

状态变化

Promise实例方法介绍

Promise对象拥有两个实例方法then()catch()

从前面的例子中可以看到,成功和失败的回调函数我们是通过then()添加,在promise状态改变时分别调用。promise构造函数中通常都是异步的,所以then方法往往都先于resolvereject方法执行。所以promise内部需要有一个存储fulfill时调用函数的数组和一个存储reject时调用函数的数组。

从上面的例子中我们还可以看到then方法可以接收两个参数,且通常都是函数(非函数时如何处理下一篇文章中会详细介绍)。第一个参数会添加到fulfill时调用的数组中,第二个参数添加到reject时调用的数组中。当promise状态fulfill时,会把resolve(value)中的value值传给调用的函数中,同理,当promise状态reject时,会把reject(reason)中的reason值传给调用的函数。例:

var p = new Promise(function(resolve, reject){
    resolve(5)
}).then(function(value){
    console.log(value) //5
})

var p1 = new Promise(function(resolve, reject){
    reject(new Error('错误'))
}).then(function(value){
    console.log(value)
}, function(reason){
    console.log(reason) //Error: 错误(…)
})

then方法会返回一个新的promise,下面的例子中p == p1将返回false,说明p1是一个全新的对象。

var p = new Promise(function(resolve, reject){
    resolve(5)
})
var p1 = p.then(function(value){
    console.log(value)
})
p == p1 // false

这也是为什么then是可以链式调用的,它是在新的对象上添加成功或失败的回调,这与jQuery中的链式调用不同。

那么新对象的状态是基于什么改变的呢?是不是说如果p的状态fulfill,后面的then创建的新对象都会成功;或者说如果p的状态reject,后面的then创建的新对象都会失败?

var p = new Promise(function(resolve, reject){
    resolve(5)
})
var p1 = p.then(function(value){
    console.log(value)   // 5
}).then(function(value){
    console.log('fulfill ' + value)   // fulfill undefined
}, function(reason){
    console.log('reject ' + reason)   
})

上面的例子会打印出5和"fulfill undefined"说明它的状态变为成功。那如果我们在p1then方法中抛出异常呢?

var p = new Promise(function(resolve, reject){
    resolve(5)
})
var p1 = p.then(function(value){
    console.log(value)   // 5
    throw new Error('test')
}).then(function(value){
    console.log('fulfill ' + value)
}, function(reason){
    console.log('reject ' + reason)   // reject Error: test
})

理所当然,新对象肯定会失败。

反过来如果p失败了,会是什么样的呢?

var p = new Promise(function(resolve, reject){
    reject(5)
})
var p1 = p.then(undefined, function(value){
    console.log(value)   // 5
}).then(function(value){
    console.log('fulfill ' + value)   // fulfill undefined
}, function(reason){
    console.log('reject ' + reason)
})

说明新对象状态不会受到前一个对象状态的影响。

再来看如下代码:

var p = new Promise(function(resolve, reject){
    reject(5)
})
var p1 = p.then(function(value){
    console.log(value) 
})
var p2 = p1.then(function(value){
    console.log('fulfill ' + value)
}, function(reason){
    console.log('reject ' + reason)   // reject 5
})

我们发现p1的状态变为rejected,从而触发了then方法第二个参数的函数。这似乎与我们之前提到的有差异啊,p1的状态受到了p的状态的影响。

再来看一个例子:

var p = new Promise(function(resolve, reject){
    resolve(5)
})
var p1 = p.then(undefined, function(value){
    console.log(value) 
})
var p2 = p1.then(function(value){
    console.log('fulfill ' + value)   // fulfill 5
}, function(reason){
    console.log('reject ' + reason)   
})

细心的人可能会发现,该例子中then第一个参数是undefined,且value值5被传到了p1成功时的回调函数中。上面那个例子中then的第二个参数是undefined,同样reason值也传到了p1失败时的回调函数中。这是因当对应的参数不为函数时,会将前一promise的状态和值传递下去。

promise含有一个实例方法catch,从名字上我们就看得出来,它和异常有千丝万缕的关系。其实catch(onReject)方法等价于then(undefined, onReject),也就是说如下两种情况是等效的。

new Promise(function(resolve, reject){
    reject(new Error('error'))
}).then(undefined, function(reason){
    console.log(reason) // Error: error(…)
})

new Promise(function(resolve, reject){
    reject(new Error('error'))
}).catch(function(reason){
    console.log(reason) // Error: error(…)
})

我们提到参数不为函数时会把值和状态传递下去。所以我们可以在多个then之后添加一个catch方法,这样前面只要reject或抛出异常,都会被最后的catch方法处理。

new Promise(function(resolve, reject){
    resolve(5)
}).then(function(value){
    taskA()
}).then(function(value){
    taskB()
}).then(function(value){
    taskC()
}).catch(function(reason){
    console.log(reason)
})

Promise的静态方法

Promise还有四个静态方法,分别是resolverejectallrace,下面我们一一介绍。

除了通过new Promise()的方式,我们还有两种创建Promise对象的方法:

Promise.resolve() 它相当于创建了一个立即resolve的对象。如下两段代码作用相同:

Promise.resolve(5)

new Promise(function(resolve){
    resolve(5)
})

它使得promise对象直接resolve,并把5传到后面then添加的成功函数中。

Promise.resolve(5).then(function(value){
    console.log(value) // 5
})

Promise.reject() 很明显它相当于创建了一个立即reject的对象。如下两段代码作用相同:

Promise.reject(new Error('error'))

new Promise(function(resolve, reject){
    reject(new Error('error'))
})

它使得promise对象直接reject,并把error传到后面catch添加的函数中。

Promise.reject(new Error('error')).catch(function(reason){
    console.log(reason) // Error: error(…)
})

Promise.all() 它接收一个promise对象组成的数组作为参数,并返回一个新的promise对象。

当数组中所有的对象都resolve时,新对象状态变为fulfilled,所有对象的resolvevalue依次添加组成一个新的数组,并以新的数组作为新对象resolvevalue,例:

Promise.all([Promise.resolve(5), 
  Promise.resolve(6), 
  Promise.resolve(7)]).then(function(value){
    console.log('fulfill', value)  // fulfill [5, 6, 7]
}, function(reason){
    console.log('reject',reason)
})

当数组中有一个对象reject时,新对象状态变为rejected,并以当前对象rejectreason作为新对象rejectreason

Promise.all([Promise.resolve(5), 
  Promise.reject(new Error('error')), 
  Promise.resolve(7),
  Promise.reject(new Error('other error'))
  ]).then(function(value){
    console.log('fulfill', value)
}, function(reason){
    console.log('reject', reason)  // reject Error: error(…)
})

那当数组中,传入了非promise对象会如何呢?

Promise.all([Promise.resolve(5), 
  6,
  true,
  'test',
  undefined,
  null,
  {a:1},
  function(){},
  Promise.resolve(7)
  ]).then(function(value){
    console.log('fulfill', value)  // fulfill [5, 6, true, "test", undefined, null, Object, function, 7]
}, function(reason){
    console.log('reject', reason)
})

我们发现,当传入的值为数字、boolean、字符串、undefined、null、{a:1}、function(){}等非promise对象时,会依次把它们添加到新对象resolve时传递的数组中。

那数组中的多个对象是同时调用,还是一个接一个的依次调用呢?我们再看个例子

function timeout(time) {
    return new Promise(function (resolve) {
        setTimeout(function () {
            resolve(time);
        }, time);
    });
}
console.time('promise')
Promise.all([
    timeout(10),
    timeout(60),
    timeout(100)
]).then(function (values) {
    console.log(values); [10, 60, 100]
    console.timeEnd('promise');   // 107ms 
});

由此我们可以看出,传入的多个对象几乎是同时执行的,因为总的时间略大于用时最长的一个对象resolve的时间。

Promise.race() 它同样接收一个promise对象组成的数组作为参数,并返回一个新的promise对象。

Promise.all()不同,它是在数组中有一个对象(最早改变状态)resolvereject时,就改变自身的状态,并执行响应的回调。

Promise.race([Promise.resolve(5), 
  Promise.reject(new Error('error')), 
  Promise.resolve(7)]).then(function(value){
    console.log('fulfill', value)  // fulfill 5
}, function(reason){
    console.log('reject',reason)
})

Promise.race([Promise.reject(new Error('error')), 
  Promise.resolve(7)]).then(function(value){
    console.log('fulfill', value) 
}, function(reason){
    console.log('reject',reason) //reject Error: error(…)
})

且当数组中有非异步Promise对象或有数字、boolean、字符串、undefined、null、{a:1}、function(){}等非Promise对象时,都会直接以该值resolve

Promise.race([new Promise((resolve)=>{
    setTimeout(()=>{
        resolve(1)
    },100)}),
  Promise.resolve(5), 
  "test",
  Promise.reject(new Error('error')), 
  Promise.resolve(7)]).then(function(value){
    console.log('fulfill', value)  // fulfill 5
}, function(reason){
    console.log('reject',reason)
})
// fulfill 5

数组中第一个元素是异步的Promise,第二个是非异步Promise,会立即改变状态,所以新对象会立即改变状态并把5传递给成功时的回调函数。

那么问题又来了,既然数组中第一个元素成功或失败就会改变新对象的状态,那数组中后面的对象是否会执行呢?

function timeout(time) {
    return new Promise(function (resolve) {
        setTimeout(function () {
            console.log(time)
            resolve(time);
        }, time);
    });
}
console.time('promise')
Promise.race([
    timeout(10),
    timeout(60),
    timeout(100)
]).then(function (values) {
    console.log(values); [10, 60, 100]
    console.timeEnd('promise');   // 107ms
});

// 结果依次为
// 10
// 10
// promise: 11.1ms
// 60
// 100

说明即使新对象的状态改变,数组中后面的promise对象还会执行完毕,其实Promise.all()中即使前面reject了,所有的对象也都会执行完毕。规范中,promise对象执行是不可以中断的。

补充

promise对象即使立马改变状态,它也是异步执行的。如下所示:

Promise.resolve(5).then(function(value){
  console.log('后打出来', value)
});
console.log('先打出来')

// 结果依次为
// 先打出来
// 后打出来 5

但还有一个有意思的例子,如下:

setTimeout(function(){console.log(4)},0);
new Promise(function(resolve){
    console.log(1)
    for( var i=0 ; i<10000 ; i++ ){
        i==9999 && resolve()
    }
    console.log(2)
}).then(function(){
    console.log(5)
});
console.log(3);

结果是 1 2 3 5 4,命名4是先添加到异步队列中的,为什么结果不是1 2 3 4 5呢?这个涉及到Event loop,后面我会单独讲一下。

查看原文

前端森林 收藏了文章 · 2018-05-18

前端经典面试题: 从输入URL到页面加载发生了什么?

从输入URL到页面加载发生了什么

最近在进行前端面试方面的一些准备,看了网上许多相关的文章,发现有一个问题始终绕不开: 在浏览器中输入URL到整个页面显示在用户面前时这个过程中到底发生了什么。仔细思考这个问题,发现确实很深,这个过程涉及到的东西很多。这个问题的回答真的能够很好的考验一个web工程师的水平,于是我自问自答一番。

总体来说分为以下几个过程:

  1. DNS解析

  2. TCP连接

  3. 发送HTTP请求

  4. 服务器处理请求并返回HTTP报文

  5. 浏览器解析渲染页面

  6. 连接结束

具体过程

DNS解析

DNS解析的过程就是寻找哪台机器上有你需要资源的过程。当你在浏览器中输入一个地址时,例如www.baidu.com,其实不是百度网站真正意义上的地址。互联网上每一台计算机的唯一标识是它的IP地址,但是IP地址并不方便记忆。用户更喜欢用方便记忆的网址去寻找互联网上的其它计算机,也就是上面提到的百度的网址。所以互联网设计者需要在用户的方便性与可用性方面做一个权衡,这个权衡就是一个网址到IP地址的转换,这个过程就是DNS解析。它实际上充当了一个翻译的角色,实现了网址到IP地址的转换。网址到IP地址转换的过程是如何进行的?

解析过程

DNS解析是一个递归查询的过程。

DNS解析过程

上述图片是查找www.google.com的IP地址过程。首先在本地域名服务器中查询IP地址,如果没有找到的情况下,本地域名服务器会向根域名服务器发送一个请求,如果根域名服务器也不存在该域名时,本地域名会向com顶级域名服务器发送一个请求,依次类推下去。直到最后本地域名服务器得到google的IP地址并把它缓存到本地,供下次查询使用。从上述过程中,可以看出网址的解析是一个从右向左的过程: com -> google.com -> www.google.com。但是你是否发现少了点什么,根域名服务器的解析过程呢?事实上,真正的网址是www.google.com.,并不是我多打了一个.,这个.对应的就是根域名服务器,默认情况下所有的网址的最后一位都是.,既然是默认情况下,为了方便用户,通常都会省略,浏览器在请求DNS的时候会自动加上,所有网址真正的解析过程为: . -> .com -> google.com. -> www.google.com.。

DNS优化

了解了DNS的过程,可以为我们带来哪些?上文中请求到google的IP地址时,经历了8个步骤,这个过程中存在多个请求(同时存在UDP和TCP请求,为什么有两种请求方式,请自行查找)。如果每次都经过这么多步骤,是否太耗时间?如何减少该过程的步骤呢?那就是DNS缓存。

DNS缓存

DNS存在着多级缓存,从离浏览器的距离排序的话,有以下几种: 浏览器缓存,系统缓存,路由器缓存,IPS服务器缓存,根域名服务器缓存,顶级域名服务器缓存,主域名服务器缓存。

  • 在你的chrome浏览器中输入:chrome://dns/,你可以看到chrome浏览器的DNS缓存。

  • 系统缓存主要存在/etc/hosts(Linux系统)中:

DNS系统缓存

  • ...

DNS负载均衡

不知道大家有没有思考过一个问题: DNS返回的IP地址是否每次都一样?如果每次都一样是否说明你请求的资源都位于同一台机器上面,那么这台机器需要多高的性能和储存才能满足亿万请求呢?其实真实的互联网世界背后存在成千上百台服务器,大型的网站甚至更多。但是在用户的眼中,它需要的只是处理他的请求,哪台机器处理请求并不重要。DNS可以返回一个合适的机器的IP给用户,例如可以根据每台机器的负载量,该机器离用户地理位置的距离等等,这种过程就是DNS负载均衡,又叫做DNS重定向。大家耳熟能详的CDN(Content Delivery Network)就是利用DNS的重定向技术,DNS服务器会返回一个跟用户最接近的点的IP地址给用户,CDN节点的服务器负责响应用户的请求,提供所需的内容。在这里打个免费的广告,我平时使用的比较多的是七牛云的CDN(免费)储存图片,作为我个人博客的图床使用。

TCP连接

HTTP协议是使用TCP作为其传输层协议的,当TCP出现瓶颈时,HTTP也会受到影响。但由于TCP优化这一块我平常接触的并不是很多,再加上大学时的计算机网络的基础基本上忘完,所以这一部分我也就不在这里分析了。

HTTPS协议

我不知道把HTTPS放在这个部分是否合适,但是放在这里好像又说的过去。HTTP报文是包裹在TCP报文中发送的,服务器端收到TCP报文时会解包提取出HTTP报文。但是这个过程中存在一定的风险,HTTP报文是明文,如果中间被截取的话会存在一些信息泄露的风险。那么在进入TCP报文之前对HTTP做一次加密就可以解决这个问题了。HTTPS协议的本质就是HTTP + SSL(or TLS)。在HTTP报文进入TCP报文之前,先使用SSL对HTTP报文进行加密。从网络的层级结构看它位于HTTP协议与TCP协议之间。

HTTPS

HTTPS过程

HTTPS在传输数据之前需要客户端与服务器进行一个握手(TLS/SSL握手),在握手过程中将确立双方加密传输数据的密码信息。TLS/SSL使用了非对称加密,对称加密以及hash等。具体过程请参考经典的阮一峰先生的博客TLS/SSL握手过程
HTTPS相比于HTTP,虽然提供了安全保证,但是势必会带来一些时间上的损耗,如握手和加密等过程,是否使用HTTPS需要根据具体情况在安全和性能方面做出权衡。

HTTP请求

其实这部分又可以称为前端工程师眼中的HTTP,它主要发生在客户端。发送HTTP请求的过程就是构建HTTP请求报文并通过TCP协议中发送到服务器指定端口(HTTP协议80/8080, HTTPS协议443)。HTTP请求报文是由三部分组成: 请求行, 请求报头请求正文

请求行

格式如下:
Method Request-URL HTTP-Version CRLF

eg: GET index.html HTTP/1.1

常用的方法有: GET, POST, PUT, DELETE, OPTIONS, HEAD。

TODO:

  • GET和POST有什么区别?

请求报头

请求报头允许客户端向服务器传递请求的附加信息和客户端自身的信息。
PS: 客户端不一定特指浏览器,有时候也可使用Linux下的CURL命令以及HTTP客户端测试工具等。
常见的请求报头有: Accept, Accept-Charset, Accept-Encoding, Accept-Language, Content-Type, Authorization, Cookie, User-Agent等。

HTTP分析

上图是使用Chrome开发者工具截取的对百度的HTTP请求以及响应报文,从图中可以看出,请求报头中使用了Accept, Accept-Encoding, Accept-Language, Cache-Control, Connection, Cookie等字段。Accept用于指定客户端用于接受哪些类型的信息,Accept-Encoding与Accept类似,它用于指定接受的编码方式。Connection设置为Keep-alive用于告诉客户端本次HTTP请求结束之后并不需要关闭TCP连接,这样可以使下次HTTP请求使用相同的TCP通道,节省TCP连接建立的时间。

请求正文

当使用POST, PUT等方法时,通常需要客户端向服务器传递数据。这些数据就储存在请求正文中。在请求包头中有一些与请求正文相关的信息,例如: 现在的Web应用通常采用Rest架构,请求的数据格式一般为json。这时就需要设置Content-Type: application/json。

服务器处理请求并返回HTTP报文

自然而然这部分对应的就是后端工程师眼中的HTTP。后端从在固定的端口接收到TCP报文开始,这一部分对应于编程语言中的socket。它会对TCP连接进行处理,对HTTP协议进行解析,并按照报文格式进一步封装成HTTP Request对象,供上层使用。这一部分工作一般是由Web服务器去进行,我使用过的Web服务器有Tomcat, Jetty和Netty等等。

HTTP响应报文也是由三部分组成: 状态码, 响应报头响应报文

状态码

状态码是由3位数组成,第一个数字定义了响应的类别,且有五种可能取值:

  • 1xx:指示信息–表示请求已接收,继续处理。

  • 2xx:成功–表示请求已被成功接收、理解、接受。

  • 3xx:重定向–要完成请求必须进行更进一步的操作。

  • 4xx:客户端错误–请求有语法错误或请求无法实现。

  • 5xx:服务器端错误–服务器未能实现合法的请求。
    平时遇到比较常见的状态码有:200, 204, 301, 302, 304, 400, 401, 403, 404, 422, 500(分别表示什么请自行查找)。

TODO:

  • 301和302有什么区别?

  • HTTP缓存

状态码

该图是本公司对状态码的一个总结,绘制而成的status code map,请大家参考。

响应报头

常见的响应报头字段有: Server, Connection...。

响应报文

服务器返回给浏览器的文本信息,通常HTML, CSS, JS, 图片等文件就放在这一部分。

浏览器解析渲染页面

浏览器在收到HTML,CSS,JS文件后,它是如何把页面呈现到屏幕上的?下图对应的就是WebKit渲染的过程。

WebKit渲染过程

浏览器是一个边解析边渲染的过程。首先浏览器解析HTML文件构建DOM树,然后解析CSS文件构建渲染树,等到渲染树构建完成后,浏览器开始布局渲染树并将其绘制到屏幕上。这个过程比较复杂,涉及到两个概念: reflow(回流)和repain(重绘)。DOM节点中的各个元素都是以盒模型的形式存在,这些都需要浏览器去计算其位置和大小等,这个过程称为relow;当盒模型的位置,大小以及其他属性,如颜色,字体,等确定下来之后,浏览器便开始绘制内容,这个过程称为repain。页面在首次加载时必然会经历reflow和repain。reflow和repain过程是非常消耗性能的,尤其是在移动设备上,它会破坏用户体验,有时会造成页面卡顿。所以我们应该尽可能少的减少reflow和repain。

Event loop

JS的解析是由浏览器中的JS解析引擎完成的。JS是单线程运行,也就是说,在同一个时间内只能做一件事,所有的任务都需要排队,前一个任务结束,后一个任务才能开始。但是又存在某些任务比较耗时,如IO读写等,所以需要一种机制可以先执行排在后面的任务,这就是:同步任务(synchronous)和异步任务(asynchronous)。JS的执行机制就可以看做是一个主线程加上一个任务队列(task queue)。同步任务就是放在主线程上执行的任务,异步任务是放在任务队列中的任务。所有的同步任务在主线程上执行,形成一个执行栈;异步任务有了运行结果就会在任务队列中放置一个事件;脚本运行时先依次运行执行栈,然后会从任务队列里提取事件,运行任务队列中的任务,这个过程是不断重复的,所以又叫做事件循环(Event loop)。

浏览器在解析过程中,如果遇到请求外部资源时,如图像,iconfont,JS等。浏览器将重复1-6过程下载该资源。请求过程是异步的,并不会影响HTML文档进行加载,但是当文档加载过程中遇到JS文件,HTML文档会挂起渲染过程,不仅要等到文档中JS文件加载完毕还要等待解析执行完毕,才会继续HTML的渲染过程。原因是因为JS有可能修改DOM结构,这就意味着JS执行完成前,后续所有资源的下载是没有必要的,这就是JS阻塞后续资源下载的根本原因。CSS文件的加载不影响JS文件的加载,但是却影响JS文件的执行。JS代码执行前浏览器必须保证CSS文件已经下载并加载完毕。

Web优化

上面部分主要介绍了一次完整的请求对应的过程,了解该过程的目的无非就是为了Web优化。在谈到Web优化之前,我们回到一个更原始的问题,Web前端的本质是什么。我的理解是: 将信息快速并友好的展示给用户并能够与用户进行交互。快速的意思就是在尽可能短的时间内完成页面的加载,试想一下当你在淘宝购买东西的时候,淘宝页面加载了10几秒才显示出物品,这个时候你还有心情去购买吗?怎么快速的完成页面的加载呢?优雅的学院派雅虎给出了常用的一些手段,也就是我们熟悉的雅虎34条军规。这34军规实际上就是围绕请求过程进行的一些优化方式。

如何尽快的加载资源?答案就是能不从网络中加载的资源就不从网络中加载,当我们合理使用缓存,将资源放在浏览器端,这是最快的方式。如果资源必须从网络中加载,则要考虑缩短连接时间,即DNS优化部分;减少响应内容大小,即对内容进行压缩。另一方面,如果加载的资源数比较少的话,也可以快速的响应用户。当资源到达浏览器之后,浏览器开始进行解析渲染,浏览器中最耗时的部分就是reflow,所以围绕这一部分就是考虑如何减少reflow的次数。

总结

写这篇文章真的非常纠结,前前后后断断续续写了两个星期,因为涉及到的东西比较多,再加上有些东西记忆的没有那么清晰了,所以不好下笔。所涉及到的大部分内容,也基本上是一笔带过,只是给读者一个浅显的认知,当遇到相关的问题时,知道如何去查询。大家可以当成一篇Web开发的科普类文章去阅读。

另外在这里为公司的产品打个广告,在Chrome store中搜索DHC,这是一款超级好用的Web客户端工具,囊括了很多的功能: 报文分析,API测试等等,可谓说是WEB工程师必备工具。

查看原文

前端森林 收藏了文章 · 2018-04-17

借助webpack对项目进行分析优化

进入公司之后,接手的便是前人留下来的一个大项目。庆幸的是整个项目拥有完善的产品功能文档,但是由于项目过于庞大,老旧。包含了打包过慢,冗余文件过多等诸多问题。想要快速的解决这些问题,想要完全把功能重构一遍的话,成本太高了。一个一个文件来过,时间成本也比较大。因此在此篇文章中,我们介绍一下我是如何配合webpack一步步进行分析,将项目进行优化的。
同时我针对思路封装了一个webpack-unused-files,用于查找项目中的冗余文件,欢迎试用并star
原文链接

问题

首先,我们先大致看下我们都有什么问题,然后一步步进行解决

  • 项目频繁进行修改,冗余文件过多
  • 部分第三方依赖滥用,想去除但是不知道在哪个文件中。或没用,但是遗留在package.json里,
  • 项目庞大,打包的结果过大,时间过长

删除冗余文件

由于项目的频繁改动,有很多文件已经不被使用并且没有被删除。由于项目的不断扩大,只会影响我们定位功能和问题的速度,因此对冗余文件进行清理,是很重要的。但是我们单凭肉眼很难识别哪个文件是否被依赖的,因此还要通过webpack来解决。

1.获取项目依赖的所有文件

我们来看一下webpack的输出文件格式:

{
  ...
  chunks: [{
    name: 'chunk-name',
    modules: [
      // 每个chunk中所有的依赖文件
    ]
  }]
  ...
}

所以说,根据这个stats.json,我们可以拿到在整个项目中拿到的所有项目文件:

/**
 * 查询依赖的模块
 */
function findSrcModules () {
  return new Promise((resolve, reject) => {
    fs.readFile(statPath, (err, data) => {
      if (err) return
      const json = JSON.parse(data)
      const assetsList = json.chunks
      let ret = []
      // 拿到所有chunk的所有依赖文件
      assetsList.forEach(chunk => {
        const modules = chunk.modules.map(item => item.name)
        ret = ret.concat(modules)
      })
      // 去除node_modules中的文件
      ret = ret.filter(item => item.indexOf('node_modules') < 0)
      resolve(ret)
    })
  })
}

通过这一步,我们可以拿到项目中,所有打包依赖的文件。

2.获取项目中所有的文件

通过glob,我们可以获取所有的文件:

function getAllFilesInSrc () {
  const pattern = './src/**'

  return new Promise((resolve, reject) => {
    glob(pattern, {
      nodir: true
    }, (err, files) => {
      const ret = files.map(item => {
        return item.replace('./src', '.')
      })
      resolve(ret)
    })
  })
}

3.将两个文件数组进行对比,然后进行删除等操作:

将两个数组进行对比,没有出现在依赖中的文件,就是冗余文件。我们可以一键删除

findSrcModules().then(ret => {
  getAllFilesInSrc().then(allFiles => {
    const unUsed = allFiles.filter(item => {
      return ret.indexOf(item) < 0
    })
    const join = p => path.join('./src', p)

    unUsed.forEach(file => {
      shelljs.rm(join(file))
    })
  })
})

分析第三方依赖

根据上述冗余文件的思路,我们同样可以对第三方依赖进行处理,大致思路如下

  1. 获取所有包含node_modules的依赖
  2. 将文件名进行截取、去重。获取到所有的依赖
  3. 与package.json进行对比,拿到没有使用的依赖
  4. 将对比结果进行分析,将不想使用的依赖保存下来
  5. 再次查找stat.json,查找该依赖的reson字段,获取再哪里引用了该依赖,进行输出
  6. 将依赖进行手动替换、删除等操作

可以说,拿到了所有依赖及依赖关系,我们可以很灵活的对其进行处理,拿到我们想要的结果。

该功能后续也会更新到webpack-unused-files中去。

优化打包大小

让人震惊的是,整个项目由于种种原因,打包后的大小有近20M的大小!虽然并不是TO C项目,并且针对页面进行了代码拆分和懒加载,但是作为一个“合格的前端”,这种现象是一定要修改的(没错!)。该如何下手呢?一个个的翻代码,看看我们都引用了什么大依赖,看哪些项目过大未免太复杂了。我们看看webpack给我吗提供了什么方案:

1.展示打包结果

我们知道,在webpack打包结束后,会自动在控制台显示打包结果。同时,他也提供了输出依赖及大小的功能,我们执行以下参数, 便可将所有的依赖进行展示,并且看到他们的大小了。

webpack --display-modules --sort-modules-by size

结果类似这样:
图片描述

我们可以很快的定位到排名前几的js文件或者第三方依赖,决定该如何对其进行处置。

2.可视化分析依赖

webpack提供了一个功能,将打包的所有依赖文件以及关系,以json格式进行输出:

webpack --profile --json > stats.json

这是我们整篇文章的一个基础,很多人基于此封装了不少可视化分析的工具,可以直观的看到各个
文件、chunk之间的依赖关系以及大小等,快速定位到大文件、大模块

webpack analyse

图片描述

webpack chart

图片描述

3.优化方案

通过以上两种方法,我们可以很好的对内容文件和依赖进行定位和分析,针对打包大小的优化方案网上已经有很多了,在此不再进行赘述,提供几个思路及参考:

优化打包时间

针对打包时间的优化的文章其实也很多了,我们在此仅提供一些思路。我们主要提一点,通过构建会发现,项目中引用了大量的svg图标以及国旗图标,每次在静态资源处理中,打包时间就会变的特别慢。

我们在项目中使用的svg-sprite-loader,自动将各个svg图标进行svg-spirte。但是我们知道,这些图标一旦引用,我们很少进行修改。尤其是像国旗图标这种,但是每次构建我们都需要进行重复打包。因此,我们可以提前把这些图标进行svg-sprite。推荐一个网站,将各种svg图标提前进行sprite并自动进行引用:

iconmoon

日常打包时间优化点

  • externals 避免打包大的第三方依赖
  • dll-plugin 预打包第三方依赖
  • happypack 多进程处理,缓存
  • 缓存与增量构建

    • babel-loader?cacheDirectory
    • webpack cache:true
  • 减少构建搜索或编译路径 alias resolve
  • 具象打包的范围 include exclude

总结

通过对webpack输出依赖关系的json的分析,我们可以直观的拿到以下数据:

  • 所有依赖文件及其大小
  • 每个依赖文件是被哪些文件引用的
  • 项目依赖的第三方依赖

通过这些数据,我们可以很方便的对现有项目进行优化。

生命不息,倒腾不止。让我们对所有的恶心代码说再见!

查看原文

前端森林 收藏了文章 · 2018-04-08

前端模块及依赖管理的新选择:Browserify

引言

1. manually

以前,我新开一个网页项目,然后想到要用jQuery,我会打开浏览器,然后找到jQuery的官方网站,点击那个醒目的“Download jQuery”按钮,下载到.js文件,然后把它丢在项目目录里。在需要用到它的地方,这样用<script>引入它:

<script data-original="path/to/jquery.js"></script>

2. Bower

后来,我开始用[Bower][]这样的包管理工具。所以这个过程变成了:先打开命令行用bower安装jQuery。

bower install jquery

再继续用<script>引入它。

<script data-original="bower_components/jquery/dist/jquery.js"></script>

3. npm&Browserify

现在,我又有了新的选择,大概是这样:

命令行用npm安装jQuery。

npm install jquery

在需要用到它的JavaScript代码里,这样引入它:

var $ = require("jquery");

没错,这就是使用npm的包的一般方法。但特别的是,这个npm的包是我们熟知的jquery,而它将用在浏览器中。

[Browserify][],正如其名字所体现的动作那样,让原本属于服务器端的Node及npm,在浏览器端也可使用。

显然,上面的过程还没结束,接下来是Browserify的工作(假定上面那段代码所在的文件叫main.js):

browserify main.js -o bundle.js

最后,用<script>引用Browserify生成的bundle.js文件。

<script data-original="bundle.js"></script>

这就是依托Browserify建立起来的第三选择。

等下,怎么比以前变复杂了?

CommonJS风格的模块及依赖管理

其实,在这个看起来更复杂的过程中,require()具有非凡的意义。

Browserify并不只是一个让你轻松引用JavaScript包的工具。它的关键能力,是JavaScript模块及依赖管理。(这才是为师的主业

就模块及依赖管理这个问题而言,已经有RequireJS[]这些优秀的作品。而现在,Browserify又给了我们新的选择。

Browserify

Browserify参照了Node中的模块系统,约定用require()来引入其他模块,用module.exports来引出模块。在我看来,Browserify不同于RequireJS和Sea.js的地方在于,它没有着力去提供一个“运行时”的模块加载器,而是强调进行预编译。预编译会带来一个额外的过程,但对应的,你也不再需要遵循一定规则去加一层包裹。因此,相比较而言,Browserify提供的组织方式更简洁,也更符合CommonJS规范。

像写Node那样去组织你的JavaScript,Browserify会让它们在浏览器里正常运行的。

安装及使用

命令行形式

命令行形式是官方贴出来的用法,因为看起来最简单。

Browserify本身也是npm,通过npm的方式安装:

npm install -g browserify

这里-g的参数表示全局,所以可以在命令行内直接使用。接下来,运行browserify命令到你的.js文件(比如entry.js):

browserify entry.js -o bundle.js

Browserify将递归分析你的代码中的require(),然后生成编译后的文件(这里的bundle.js)。在编译后的文件内,所有JavaScript模块都已合并在一起且建立好了依赖关系。最后,你在html里引用这个编译后的文件(喂,和引言里的一样啊):

<script data-original="bundle.js"></script>

有关这个编译命令的配置参数,请参照[node-browserify#usage][]。如果你想要做比较精细的配置,命令行形式可能会不太方便。这种时候,推荐结合Gulp使用。

+ Gulp形式

结合Gulp使用时,你的Browserify只安装在某个项目内:

npm install browserify --save-dev

建议加上后面的--save-dev以保存到你项目的package.json里。

接下来是gulpfile.js的部分,下面是一个简单示例:

var gulp = require("gulp");
var browserify = require("browserify");
var sourcemaps = require("gulp-sourcemaps");
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');

gulp.task("browserify", function () {
    var b = browserify({
        entries: "./javascripts/src/main.js",
        debug: true
    });

    return b.bundle()
        .pipe(source("bundle.js"))
        .pipe(buffer())
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(sourcemaps.write("."))
        .pipe(gulp.dest("./javascripts/dist"));
});

可以看到,Browserify是独立的,我们需要直接使用它的API,并将它加入到Gulp的任务中。

在上面的代码中,debug: true是告知Browserify在运行同时生成内联sourcemap用于调试。引入gulp-sourcemaps并设置loadMaps: true是为了读取上一步得到的内联sourcemap,并将其转写为一个单独的sourcemap文件。vinyl-source-stream用于将Browserify的bundle()的输出转换为Gulp可用的[vinyl][](一种虚拟文件格式)流。vinyl-buffer用于将vinyl流转化为buffered vinyl文件(gulp-sourcemaps及大部分Gulp插件都需要这种格式)。

这样配置好之后,直接运行gulp browserify就可以得到结果了,可能像这样:

Gulp + Browserify结果示例

如果你的代码比较多,可能像上图这样一次编译需要1s以上,这是比较慢的。这种时候,推荐使用[watchify][]。它可以在你修改文件后,只重新编译需要的部分(而不是Browserify原本的全部编译),这样,只有第一次编译会花些时间,此后的即时变更刷新则十分迅速。

有关更多Browserify + Gulp的示例,请参考[Gulp Recipes][]。

特性及简要原理

使用Browserify来组织JavaScript,有什么要注意的地方吗?

要回答这个问题,我们先看看Browserify到底做了什么。下面是一个比较详细的例子。

项目内现在用到2个.js文件,它们存在依赖关系,其内容分别是:

name.js

module.exports = "aya";

main.js

var name = require("./name");

console.log("Hello! " + name);

然后对main.js运行Browserify,得到的bundle.js的文件内容是这样的:

(function e(t, n, r) {
    // ...
})({
    1: [function (require, module, exports) {
        var name = require("./name");

        console.log("Hello! " + name);
    }, {"./name": 2}],
    2: [function (require, module, exports) {
        module.exports = "aya";
    }, {}]
}, {}, [1])

//# sourceMappingURL=bundle.js.map

请先忽略掉省略号里的部分。然后,它的结构就清晰多了。可以看到,整体是一个立即执行的函数([IIFE][]),该函数接收了3个参数。其中第1个参数比较复杂,第2、3个参数在这里分别是{}[1]

模块map

第1个参数是一个Object,它的每一个key都是数字,作为模块的id,每一个数字key对应的值是长度为2的数组。可以看出,前面的main.js中的代码,被function(require, module, exports){}这样的结构包装了起来,然后作为了key1数组里的第一个元素。类似的,name.js中的代码,也被包装,对应到key2

数组的第2个元素,是另一个map对应,它表示的是模块的依赖。main.js在key1,它依赖name.js,所以它的数组的第二个元素是{"./name": 2}。而在key2name.js,它没有依赖,因此其数组第二个元素是空Object{}

因此,这第1个复杂的参数,携带了所有模块的源码及其依赖关系,所以叫做模块map。

包装

前面提到,原有的文件中的代码,被包装了起来。为什么要这样包装呢?

因为,浏览器原生环境中,并没有require()。所以,需要用代码去实现它(RequireJS和Sea.js也做了这件事)。这个包装函数提供的3个参数,requiremoduleexports,正是由Browserify实现了特定功能的3个关键字。

缓存

第2个参数几乎总是空的{}。它如果有的话,也是一个模块map,表示本次编译之前被加载进来的来自于其他地方的内容。现阶段,让我们忽略它吧。

入口模块

第3个参数是一个数组,指定的是作为入口的模块id。前面的例子中,main.js是入口模块,它的id是1,所以这里的数组就是[1]。数组说明其实还可以有多个入口,比如运行多个测试用例的场景,但相对来说,多入口的情况还是比较少的。

实现功能

还记得前面忽略掉的省略号里的代码吗?这部分代码将解析前面所说的3个参数,然后让一切运行起来。这段代码是一个函数,来自于browser-pack项目的[prelude.js][]。令人意外的是,它并不复杂,而且写有丰富的注释,很推荐你自行阅读。

所以,到底要注意什么?

到这里,你已经看过了Browserify是如何工作的。是时候回到前面的问题了。首先,在每个文件内,不再需要自行包装

你可能已经很习惯类似下面这样的写法:

;(function(){
    // Your code here.
}());

但你已经了解到,Browserify的编译会将你的代码封装在局部作用域内,所以,你不再需要自己做这个事情,像这样会更好:

// Your code here.

类似的,如果你想用"use strict";启用严格模式,直接写在外面就可以了,这表示在某个文件的代码范围内启用严格模式。

其次,保持局部变量风格。我们很习惯通过window.jQuerywindow.$这样的全局变量来访问jQuery这样的库,但如果使用Browserify,它们都应只作为局部变量:

var $ = require("jquery");

$("#alice").text("Hello!");

这里的$就只存在于这个文件的代码范围内(独立的作用域)。如果你在另一个文件内要使用jQuery,需要按照同样的方式去require()

然而,新的问题又来了,既然jQuery变成了这种局部变量的形式,那我们熟悉的各种jQuery插件要如何使用呢?

browserify-shim

你一定熟悉这样的jQuery插件使用方式:

<script data-original="jquery.js"></script>
<script data-original="jquery.plugin.js"></script>
<script>
    // Now the jQuery plugin is available.
</script>

很多jQuery插件是这样做的:默认window.jQuery存在,然后取这个全局变量,把自己添加到jQuery中。显然,这在Browserify的组织方式里是没法用的。

为了让这样的“不兼容Browserify”(其实是不兼容CommonJS)的JavaScript模块(如插件)也能为Browserify所用,于是有了[browserify-shim][]。

下面,以jQuery插件[jquery.pep.js][]为例,请看browserify-shim的使用方法。

使用示例

安装browserify-shim:

npm install browserify-shim --save-dev

然后在package.json中做如下配置:

"browserify": {
    "transform": [ "browserify-shim" ]
},
"browser": {
    "jquery.pep" :  "./vendor/jquery.pep.js"
},
"browserify-shim": {
    "jquery.pep" :  { "depends": ["jquery:jQuery"] }
}

最后是.js中的代码:

var $ = require("jquery");
require("jquery.pep");

$(".move-box").pep();

完成!到此,经过Browserify编译后,将可以正常运行这个jQuery插件。

这是一个怎样的过程呢?

在本例中,jQuery使用的是npm里的,而jquery.pep.js使用的是一个自己下载的文件(它与很多jQuery插件一样,还没有发布到npm)。查看jquery.pep.js源码,注意到它用了这样的包装:

;(function ( $, window, undefined ) {
    // ...
}(jQuery, window));

可以看出,它默认当前环境中已存在一个变量jQuery(如果不存在,则报错)。package.json中的"depends": ["jquery:jQuery"] 是为它添加依赖声明,前一个jquery表示require("jquery"),后一个jQuery则表示将其命名为jQuery(赋值语句)。这样,插件代码运行的时候就可以正常找到jQuery变量,然后将它自己添加到jQuery中。

实际上,browserify-shim的配置并不容易。针对代码包装(尽管都不兼容CommonJS,但也存在多种情况)及使用场景的不同,browserify-shim有不同的解决方案,本文在此只介绍到这。

关于配置的更多说明,请参照browserify-shim官方文档[]。此外,如果你觉得browserify-shim有些难以理解或者对它的原理也有兴趣,推荐阅读[这篇Stack Overflow上的回答][]。

当然,对于已经处理了CommonJS兼容的库或插件(比如已经发布到npm),browserify-shim是不需要的。

其实还有的更多transform

在前面browserify-shim的例子中,"browserify": {"transform": [ "browserify-shim" ]}其实是Browserify的配置。可以看出,browserify-shim只是Browserify的其中一种transform。在它之外,还有[很多的transform][]可用,分别应对不同的需求,使Browserify的体系更为完善。

比如,还记得本文引言里的Bower吗?[debowerify][]可以让通过Bower安装的包也可以用require()引用。npm和bower同为包管理工具,Browserify表示你们都是我的翅膀。

一点提示

Browserify是静态分析编译工具,因此不支持动态require()。例如,下面这样是不可以的:

var lang = "zh_cn";
var i18n = require("./" + lang);

文档资料

有关Browserify更详细的说明文档,请看[browserify-handbook][]。

结语

我觉得Browserify很有趣,它用了这样一个名字,让你觉得它好像只是一个Node的浏览器端转化工具。为此,它还完成了Node中大部分核心库的浏览器端实现。但实际上,它走到了更远的地方,并在JavaScript模块化开发这个重要的领域中,创立了一个全新的体系。

喜欢CommonJS的简洁风格?请尝试Browserify!

(重新编辑自我的博客,原文地址:http://acgtofe.com/posts/2015/06/modular-javascript-with-browserify

查看原文

前端森林 收藏了文章 · 2018-03-29

【基础】这15种CSS居中的方式,你都用过哪几种?

简言

CSS居中是前端工程师经常要面对的问题,也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种。如有漏掉的,还会陆续的补充进来,算做是一个备忘录吧。

css居中

1 水平居中

1.1 内联元素水平居中

利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。此方法对内联元素(inline), 内联块(inline-block), 内联表(inline-table), inline-flex元素水平居中都有效。

核心代码:

.center-text {
    text-align: center;
 }

演示程序:

演示代码

1.2 块级元素水平居中

通过把固定宽度块级元素的margin-leftmargin-right设成auto,就可以使块级元素水平居中。

核心代码:

.center-block {
  margin: 0 auto;
}

演示程序:

演示代码

1.3 多块级元素水平居中

1.3.1 利用inline-block

如果一行中有两个或两个以上的块级元素,通过设置块级元素的显示类型为inline-block和父容器的text-align属性从而使多块级元素水平居中。

核心代码:

.container {
    text-align: center;
}
.inline-block {
    display: inline-block;
}

演示程序:

演示代码

1.3.2 利用display: flex

利用弹性布局(flex),实现水平居中,其中justify-content 用于设置弹性盒子元素在主轴(横轴)方向上的对齐方式,本例中设置子元素水平居中显示。

核心代码:

.flex-center {
    display: flex;
    justify-content: center;
}

演示程序:

演示代码

2 垂直居中

2.1 单行内联(inline-)元素垂直居中

通过设置内联元素的高度(height)和行高(line-height)相等,从而使元素垂直居中。

核心代码:

#v-box {
    height: 120px;
    line-height: 120px;
}

演示程序:

演示代码

2.2 多行元素垂直居中

2.2.1 利用表布局(table

利用表布局的vertical-align: middle可以实现子元素的垂直居中。

核心代码:

.center-table {
    display: table;
}
.v-cell {
    display: table-cell;
    vertical-align: middle;
}

演示程序:

演示代码

2.2.2 利用flex布局(flex

利用flex布局实现垂直居中,其中flex-direction: column定义主轴方向为纵向。因为flex布局是CSS3中定义,在较老的浏览器存在兼容性问题。

核心代码:

.center-flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

演示程序:

演示代码

2.2.3 利用“精灵元素”

利用“精灵元素”(ghost element)技术实现垂直居中,即在父容器内放一个100%高度的伪元素,让文本和伪元素垂直对齐,从而达到垂直居中的目的。

核心代码:

.ghost-center {
    position: relative;
}
.ghost-center::before {
    content: " ";
    display: inline-block;
    height: 100%;
    width: 1%;
    vertical-align: middle;
}
.ghost-center p {
    display: inline-block;
    vertical-align: middle;
    width: 20rem;
}

演示程序:

演示代码

2.3 块级元素垂直居中

2.3.1 固定高度的块级元素

我们知道居中元素的高度和宽度,垂直居中问题就很简单。通过绝对定位元素距离顶部50%,并设置margin-top向上偏移元素高度的一半,就可以实现垂直居中了。

核心代码:

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; 
}

演示程序:

演示代码

2.3.2 未知高度的块级元素

当垂直居中的元素的高度和宽度未知时,我们可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题。

核心代码:

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

演示程序:

演示代码

3 水平垂直居中

3.1 固定宽高元素水平垂直居中

通过margin平移元素整体宽度的一半,使元素水平垂直居中。

核心代码:

.parent {
    position: relative;
}
.child {
    width: 300px;
    height: 100px;
    padding: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -70px 0 0 -170px;
}

演示程序:

演示代码

3.2 未知宽高元素水平垂直居中

利用2D变换,在水平和垂直两个方向都向反向平移宽高的一半,从而使元素水平垂直居中。

核心代码:

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

演示程序:

演示代码

3.3 利用flex布局

利用flex布局,其中justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式;而align-items属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。

核心代码:

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

演示程序:

演示代码

3.4 利用grid布局

利用grid实现水平垂直居中,兼容性较差,不推荐。

核心代码:

.parent {
  height: 140px;
  display: grid;
}
.child { 
  margin: auto;
}

演示程序:

演示代码

3.5 屏幕上水平垂直居中

屏幕上水平垂直居中十分常用,常规的登录及注册页面都需要用到。要保证较好的兼容性,还需要用到表布局。

核心代码:

.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.inner {
    margin-left: auto;
    margin-right: auto; 
    width: 400px;
}

演示程序:

演示代码

4 说明

文中所述文字及代码部分汇编于网络。因时间不足,能力有限等原因,存在文字阐述不准及代码测试不足等诸多问题。因此只限于学习范围,不适用于实际应用。

文中所述方案只是居中方案其中的一部分,并不是全部。另代码中涉及CSS3的flex,transform,grid等内容都存在兼容性问题。

5 引用参考

Centering in CSS: A Complete Guide

w3.org centering things

How To Center Anything With CSS

如何使DIV在屏幕上水平垂直居中显示?

查看原文

前端森林 收藏了文章 · 2018-03-28

Nodejs 制作命令行工具

wcj

github仓库源码下载

这不仅是一篇教程,还是通过命令行输出我自己简历的一个工具O(∩_∩)O哈哈哈~,很有趣的样子哦。

图片描述

# 全局安装,安装报错是需要前面加上sudo
$ sudo npm install -g wcj 

# 输出帮助
$ wcj -h
  Usage: wcj 这里是我私人玩耍的命令哦![options] <package>


  Commands:

    resume|rs [options] [cmd]    这里是我的简历详情!

  Options:

    -h, --help     output usage information
    -V, --version  output the version number

# 输出子命令帮助
$ wcj rs -h

  Usage: resume|rs [options] [cmd]

    这里是我的简历详情!

  Options:

    -h, --help              output usage information
    -b, --basicinfo [type]  基本信息
    -e, --education [type]  教育经历

  basicinfo 说明:

    preview 预览简历

    -b, --basicinfo 基本信息
       name : 名字
       height : 身高
       dateOfBirth : 出生日期
       workExperience : 工作经验
       mobile : 手机号码
       telephone : 电话号码
       email : 邮箱地址
       residency : 居住地点
       currentSituation : 现状
       currentCity : 当前城市
       nation : 国家
       region : 地区
       postalCode : 邮编地址
       ID : 身份证ID
       website : 个人网赚
       maritalStatus : 婚姻状况
       politicalStatus : 政治面貌
    -e, --education 教育经历

在使用 Nodejs 过程中,有很多包都支持全局安装,提供一个命令,然后在命令行我们就可以完成一些任务。有时候我们也需要开发这样的命令工具。在Node.js 中发现弄个命令行工具特别轻松,我来学习如何使用 Node.js 生成自己的command命令,在未来的项目中方便自己。

  • 先弄个小实例感受一下命令行的魅力

  • 再用命令行实现输出自己的简历(我觉得这个可能很有趣)

  • 常用的命令加入进来

    • ls 查看当前目录

    • ls -a 包括隐藏文件

    • 打开当前目录

  • 就先这么计划着吧。

小实例

开始编写之前需要确认的一件事情是你已经安装了Node.js。你可以在命令行中运行 which node 来确认是否已经安装,或者运行 node -v 查看 node 的版本 。如果你已经安装了node,你可以看到类似于下面的输出结果,一般情况安装了node.js 顺带npm工具自动安装了。

$ which node
/usr/local/bin/node  

$ node -v
v0.10.36

创建目录

首先任意创建一个文件夹,初始化 package.json 文件,在该文件夹下创建bin目录:

$ mkdir wcj #创建一个文件夹
$ cd wcj && mkdir bin
$ npm init #初始化 `package.json` 文件

编写命令行

cd到 bin 目录下,新建一个 wcj.js 文件(名字自取),编写如下代码,在js文件顶部加上 #!/usr/bin/env node 这段代码:

#!/usr/bin/env node  
var fs = require("fs"),
    path = process.cwd();

var run= function (obj) {
    if(obj[0] === '-v'){
        console.log('version is 1.0.0');
    }else if(obj[0] === '-h'){
        console.log('Useage:');
        console.log('  -v --version [show version]');
    }else{
        fs.readdir(path, function(err, files){
            if(err){
                return console.log(err);
            }
            for(var i = 0; i < files.length; i += 1){
                console.log(files[i]);
            }
        });
    }
};
//获取除第一个命令以后的参数,使用空格拆分
run(process.argv.slice(2)); 

上面的 #!/usr/bin/env node 被成为 shebang ,表示用后面的路径所示的程序来执行当前文件夹。还需要一个 package.json 文件

{
  "name": "wcj",
  "version": "1.0.0",
  "description": "wcj ---",
  "repository": {
    "type": "git",
    "url": "https://github.com/jaywcjlove/wcj.git"
  },
  "main": "index.js",
  "bin": { "wcj": "bin/wcj.js" },
  "author": "kenny wang <wowohoo@qq.com> ",
  "license": "MIT"
}

运行 node bin/wcj.js 会显示当前文件夹下的所以文件和文件夹名。这个玩意儿真的跑起来了。更多npm link的信息请查看

package.json 文件中 bin 里面的内容表示这个字段将 wcj 命令映射到了你的 bin/wcj.js 脚本。bin参考

此工具采用 npm版本号采用的 semver 规则

"bin": { "wcj": "bin/wcj.js" }

列子源码

全局运行命令调试

确保你在 package.json 文件中添加了 bin 节点。然后打开命令了工具进入 wcj 目录

install

如果在项目目录下运行没有问题,可以将当前目录模块安装到全局,也可以采用此方法来更新你的命令行工具

sudo npm install . -g

link

或者目录输入 npm link 会自动添加全局的 symbolic link ,然后就可以使用自己的命令了。

$ wcj
#README.md
#bin
#package.json

$ cmd -v
# version is 1.0.0

$ cmd -h 
#Useage:
#  -v --version [show version]

错误处理

在运行 sudo npm install . -g 会有一堆警告可以忽视

如果你已经 npm link 搞了一遍你再 link 一遍,会报如下错误。即使你 npm unlink 也会报如下错误:

npm link
npm ERR! Darwin 14.3.0
npm ERR! argv "node" "/usr/local/bin/npm" "link"
npm ERR! node v0.10.36
npm ERR! npm  v2.7.1
npm ERR! path /usr/local/bin/wcj
npm ERR! code EEXIST

npm ERR! Refusing to delete: /usr/local/bin/wcj not in /Applications/XAMPP/xamppfiles/htdocs/git/github.com/myJS/wcj
File exists: /usr/local/bin/wcj
Move it away, and try again.

让你删除 /usr/local/bin/wcjnpm link , 删除此目录运行 rm -rf /usr/local/bin/wcj

发布安装

发布到npm中

发布必须注册 npm 账号,还有 github 账号,具体怎么玩儿问 谷歌大婶吧。在JSLite.io 中也有教程哦。

npm publish

安装

前提你发布到了npm中,你就可以运行下面的命令了。

sudo npm install -g wcj

例子下载:v1.0.1

Commander

依赖 nodejs 原生开发命令工具比较麻烦,Commander.js 可以帮助我们简化命令行开发。Commander 是一款重量轻,表现力和强大的命令行框架。提供了用户命令行输入和参数解析强大功能。Commander 源自一个同名的Ruby项目。Commander.jsTJ 写的一个帮助快速开发Nodejs命令行工具的package。TJ这货是Nodejs社区里非常知名的高产作者。方便的定义option(包括option的描述和其回调函数)和子命令。

特性

Commander的方便之处在于:

自记录代码、自动生成帮助、合并短参数(“ABC”==“-A-B-C”)、默认选项、强制选项​​、命令解析、提示符

API

Option(): 初始化自定义参数对象,设置“关键字”和“描述”
Command(): 初始化命令行参数对象,直接获得命令行输入
Command#command(): 定义一个命令名字
Command#action(): 注册一个callback函数
Command#option(): 定义参数,需要设置“关键字”和“描述”,关键字包括“简写”和“全写”两部分,以”,”,”|”,”空格”做分隔。
Command#parse(): 解析命令行参数argv
Command#description(): 设置description值
Command#usage(): 设置usage值

参考:官方文档例子

安装

安装commander

sudo npm install commander

Option

内置选项Built-in option,Commander 会为程序提供给一个默认的 -h option。

program
  .version('0.0.1')
  .option('-r, --resume', '简历');
program.parse(process.argv);

其中parse函数是处理定义的option和sub-command, 解析命令行参数并触发相应的回调(下文会说)。


./bin/wcj.js -h
## 输出下面内容
  Usage: wcj [options]

  Options:

    -h, --help     output usage information
    -V, --version  output the version number
    -r, --resume   简历

可以看到默认就有个 -h 参数,传入后会输出 wcj 命令的帮助信息。

Custom option

wcj 命令增加一个 option,展示说明是我的简历。

program
  .version('0.0.1')
  .option('-r| --resume', '简历');
program.parse(process.argv);

if (program.resume) {
    console.log('简历 - '
        + '这个是我的简历!'
    );
}

option() 接收四个参数

  • 第一个参数中,-rshort option--resume为对应的long option, 二者的分割符是|或者,。在命令行里使用时,这两个是等价的。 区别是后者可以在程序里通过 program.resume 的方式取到该 option 的值,此处 option 的值为 bool,也可以为字符串。

  • 第二个为 option 描述, 会在 help 信息里展示出来

  • 第三个参数为回调函数

  • 第四个参数为默认值

Unknown option

当接收到未定义的option时,程序会自动抛出错误

./bin/wcj.js -h

## 输出下面内容
error: unknown option '--res'

Commander同时提供了api来取消这个自动报错机制, .allowUnknownOption()

#!/usr/bin/env node
program
    .allowUnknownOption()
    .version('0.0.1')
    .option('-r, --resume', '简历');

program.parse(process.argv);
//省略一些细节...

Option types

Command支持以下两种类型的option: requiredoptionalbool

required 和 optional

在option的第一个参数里, 除了shortlong option,还可以指定option类型,分隔符也是|, 其中

  • <lang> required参数,使用时后边必须跟参数值, 否则程序会报错

  • [db] optional参数,后面可以选择是否跟参数值

#!/usr/bin/env node  
var program = require('commander');
program
    .allowUnknownOption()
    .version('0.0.1')
    .option('-r, --resume', '简历')
    .option('-l, --language <lang>', '这个语言是我擅长的语言。')
    .parse(process.argv);

if (program.resume) {
    console.log('简历'
        + '-'
        + '这个是我的简历!'
    );
}

if (program.language) console.log('language: 我擅长的语言`' + program.language + '`');
if (program.database) console.log('db: 我擅长的语言`' + program.database + '`');

看下效果

./bin/wcj.js -l python
## 输出
language: 我擅长的语言`python`
db: 我擅长的语言`MySQL`

./bin/wcj.js -l
## 输出
  error: option '-l, --language <lang>' argument missing

bool

选项值为布尔型, 像上面的--date, 默认是false,当使用此参数时,program.datetrue, 否则为false

booloption有个变种,当long option定义为no-*时默认值为true, 将

var program = require('commander');
program
  .option('-d, --no-date', 'don‘t display current date')
  .parse(process.argv);

var dt = new Date();
if (program.date) {
    console.log(dt.getFullYear()
        + '-'
        + (dt.getMonth() + 1)
        + '-'
        + dt.getDate()
    );
}

不带-d 参数时, 参数的默认值为true

Automated --help

Commander会根据配置的option,sub-command等信息,自动生成help信息。

Custom help

可以通过监听--help事件来输出额外的帮助信息,如下面给fe命令添加了一些examples

// must be before .parse() since node's emit() is immediate
program.on('--help', function () {
    console.log('  自定义的例子:')
    console.log('')
    console.log('    输出命令  wcj -d')
    console.log('    输出命令  wcj -l python')
    console.log('')
})

program.parse(process.argv);

效果如下:

./bin/wcj.js -h

  Usage: wcj [options]

  Options:

    -h, --help             output usage information
    -d, --no-date          display current time
    -l, --language <lang>  这个语言是我擅长的语言。
    -b, --database [db]    该数据库为我最擅长数据库

  自定义的例子:

    输出命令  wcj -d
    输出命令  wcj -l python

像git风格一样的命令

列子源码

#!/usr/bin/env node 
var program = require('commander');
var appInfo = require('./../package.json');

program
    .version(appInfo.version)
    .usage('这里是我私人玩耍的命令哦![options] <package>')

//像git风格一样的子命令
program
    //子命令
    .command('resume <cmd>')
    //短命令 - 简写方式
    .alias('rs')
    //说明
    .description('这里是我的简历详情!')
    //resume的子命令
    .option("-n, --name <mode>", "输出我的名字")
    //注册一个callback函数
    .action(function(cmd, options){
        var nm = typeof options.name=='string'?options.name:""

        console.log('resume "%s" 使用 %s 模式', cmd, nm);
    }).on('--help', function() {
        //这里输出子命令的帮助
        console.log('  Examples:');
        console.log('    运行方法:');
        console.log('    $ ./bin/wcj.js resume ss -n aaaaa');
        console.log('    $ ./bin/wcj.js resume ss');
        console.log();
    });

program.parse(process.argv);

上面实例运行输出方式

$ ./bin/wcj.js resume ss -n aaaaa

#输出:
resume "ss" 使用 aaaaa 模式

$ ./bin/wcj.js resume ss
#输出:
resume "aa" 使用  模式

事件监听

命名多少个命令就监听多少命令,--help 为默认监听事件。

program.on('--help', function(argv,test){
    process.exit(1);
});

yargs

命令行框架 yargs 和你的程序实现交互 yargs for github

var argv = require('yargs').argv;
if (argv.l == 'zh-cn') {
    console.log('Chinese site!');
}else if(argv.l == 'en') {
    console.log('English website!');
}

使用

var argv = require('yargs').argv;
if (argv.l == 'zh-cn') {
    console.log('Chinese site!');
}else if(argv.l == 'en') {
    console.log('English website!');
}

阅读参考

第一个小实例看了很多文章,记录一下,感觉非常简单的样子。

查看原文

前端森林 收藏了文章 · 2018-03-22

移动端预览压缩上传图片

移动端预览压缩上传图片

推荐一个使用成熟的解决方案:https://github.com/think2011/...

文章已同步我的github笔记https://github.com/ymblog/blog,欢迎大家加star~~,加star后人生更加美好……

原理介绍

移动端图片上传,通过FileReader生成base64图片资源进行预览,通过canvas进行图片的压缩,将图片url转换成Blob对象上传。

实现方案

  • 初始页面布局
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片上传</title>
</head>
    <style>    
        img{
            display:block;
            width:200px;
        }
    </style>
<body>
    <input type="file" accept="image/*" multiple id="upload" onchange="previewImg(this,'preview-img')">
    <img data-original="" alt="" id="preview-img">
</body>
</html>
  • 移动端file有兼容上的问题,解决方案:
<input type="file" id="upload" class="upload" accept="image/*" multiple />
  • 使用FileReader进行图片预览
/**
 * [previewImg 预览图片]
 * @param  {[type]} input [文件上传input]
 * @param  {[type]} obj   [description]
 * @return {[type]}       [description]
 */
function previewImg(input,imgObj) {
    var maxsize = 300 * 1024;//超过300k进行压缩
    //是否支持
    if (typeof FileReader === 'undefined') {
        alert("抱歉,你的浏览器不支持 FileReader,请使用现代浏览器操作!");
        input.setAttribute('disabled','disabled');
    }
    if(input.files && input.files[0]){
        var file = input.files[0],
            reader = new FileReader();
        if(!/image\/\w+/.test(file.type)) {
            alert('不是有效的图片文件!');
            return;
        }
        reader.onload = function(e){
            var result = this.result;//获取到base64的图片
            //大于300k图片进行压缩
            if(result.length >= maxsize){
                var img = new Image();
                img.src = result;
                img.onload = function(){
                    compressSrc = compress(img,0.8,100);
                    $(imgObj).setAttribute('src',compressSrc);
                    //ajax dataURLtoBlob(compressSrc);
                }
            }else{
                $(imgObj).setAttribute('src',result);
                //ajax dataURLtoBlob(result);
            }
        }
    }
}
  • 使用canvas图片压缩,不过在ios中图片大于2000000像素就无法使用canvas压缩,就需要瓦片绘制。
/**
 * [compress 压缩图片]
 * @param  {[dom]} sourceImg [图片dom]
 * @param  {[int]0-1} scale     [缩小的尺寸比例]
 * @param  {[int]0-100} quality   [清晰质量]
 * @return {[object]}           [图片源]
 */
function compress(sourceImg,scale,quality){
    var area = sourceImg.width * sourceImg.height,//源图片的总大小
        height = sourceImg.height * scale,
        width = sourceImg.width * scale,
        compressCvs = document.createElement('canvas');//压缩的图片画布
    //压缩的图片配置宽高
    compressCvs.width = width;
    compressCvs.height = height;
    var compressCtx = compressCvs.getContext("2d");
    //解决ios 图片大于2000000像素无法用drawImage的bug
    if(area > 2000000 && navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){
        //瓦片绘制
        var smallCvs = document.createElement("canvas"),
            smallCtx = smallCvs.getContext("2d"),
            count = Math.ceil(area / 1000000),//分割的数量
            cvsWidth = width / count,//每个小canvas的宽度
            picWidth = sourceImg.width / count;//分割成小图片的宽度
        smallCvs.height = compressCvs.height;
        smallCvs.width =  width / count;
        //拼凑成大的canvas
        for(var i = 0;i < count;i ++){
            smallCtx.drawImage(sourceImg,i*picWidth,0,picWidth,sourceImg.height,0,0,cvsWidth,height);
            compressCtx.drawImage(smallCvs,i*cvsWidth,0,cvsWidth,height);
        }
    }else{
        compressCtx.drawImage(sourceImg,0,0,sourceImg.width,sourceImg.height,0,0,width,height);
    }
    //将canvas转换成base64
    return compressCvs.toDataURL('image/jpeg',quality/100);
}
function $(id){
    return document.getElementById(id);
}
  • 将图片url转换为blob对象
/**
 * [dataURLtoBlob 将base64转换为blob对象]
 * @param  {[type]} dataurl [图片源base64]
 * @return {[object]}         [图片源blob对象]
 */
function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
}

使用说明

这个只是一个移动端预览压缩上传图片实现的demo,会有一些兼容性和bug问题,大家可以自己修改和扩展

结束,撒花~~~

文章已同步我的github笔记https://github.com/ymblog/blog,欢迎大家加star~~,加star后人生更加美好……
查看原文

前端森林 收藏了文章 · 2018-03-10

Bootstrap 栅格系统的精妙之处

节选翻译自The Subtle Magic Behind Why the Bootstrap 3 Grid Works

从接触 Bootstrap 已经有很长时间了,给人的感觉是快速,简单,易上手,其中栅格系统是一个亮点:

一直感觉像 CSS 栅格系统之类的东西拿过来用就好了,不用深究背后的原理。直到有一天你发现简单的套用在稍复杂的页面上出现问题,间隔啊,内外边距啊,哪都不对劲儿。

当然会有这样的过程,然后随着知识的积累,可以去读一些 Bootstrap 的源码,结合文档会发现一些不是很理解的地方:

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

“行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。

CONTAINER

Container 有两个作用:

  1. 在随时可能的宽度变化(响应式)中提供宽度限制。当页面宽度变化,container 的宽度也随之变化。并且其中的 column 的宽度是基于百分比,所以他们的值不需要变化。

  2. 提供一个水平方向的 padding,使其内部的内容不会接触到浏览器的边界,大小为15px,就是图片中粉红色的部分,作用会在下面说。

注意,不需要也不应该在 container 中嵌套另一个 container。
15px-padding

ROW

Row 是 column 直接存在的容器,按照文档描述 row 中最多可有12个 column,不过可以通过 nesting 的方式灵活扩展。同时作为都是左浮动的 column 的 wrapper,自带 clearfix 的性质。

同时 row 还有一个很特殊的地方,就是左右各有 -15px 的 margin,就是图片中的蓝色部分。这样也就抵消了上面提到的 container 中15px的 padding,那么为什么要这么折腾呢?接着看往下读。

注意:千万记住要把 row 放到 container 的内部,这样才能保证正常。
-15px-margin

COLUMN

注意啦,每个column 也会有15px的水平方向的 padding,也就是图片中黄色的部分,唉,先别急,会明白的。还记得上面提到的 row 的作用吗,colunmn 只能在 row 中生存,由于 row 的 margin 为-15px,那么位于两边的 column 就碰到了 container 的边界。但是 colunmn 本身又有 15px 的 padding 使得它其中的内容并不会碰到 container,同时 不同column的内容之间就有了30px的槽。结合图片看一下就一目了然了。

注意:一定要把 column 放到 row 里使用。
column

NESTING

当把上面一系列的 container, row, column 都设置好,就可以通过 nesting 扩展它的栅格系统了,也就是在 column 中直接嵌套 row,而不需要再套一层 container:
nesting

还记得 container 和 column 都有15px的 padding 吗,当 nesting 的时候 column 的作用也相当于 container 了,这样就可以实现任意的嵌套了。
nesting

这正是 Bootstrap 的栅格系统的最巧妙的地方!

查看原文

前端森林 收藏了文章 · 2018-03-05

你不能错过的前端面试题合集

收集的一些前端面试题

从面试题发现不足,进而查漏补缺,比通过面试更难得

1BAT及各大互联网公司2014前端笔试面试题--Html,Css篇
2BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
3javascript面试题
4javascript puzzlers
59个JQuery和5个JavaScript经典面试题
6前端开发面试题
7如何面试前端工程师:GitHub 很重要
844 个 JavaScript 变态题解析
9如何通过饿了么 Node.js 面试
10Front-end-Developer-Interview-Questions
11轻课堂JavaScript面试题
12前端开发面试题
132016腾讯前端JavaScript笔试题
14五个典型的 JavaScript 面试题
15前端面试题的整理
16魅族前端面试题
17前端面试经典题目汇总
18阿里、网易、滴滴共十次前端面试碰到的问题
19原来又到了校招季,一个前端新人的回忆
20Node.js面试题之2017
21Node.js 常见面试题
222017年前端面试题整理汇总100题
23前端面试题和答案
24123-Essential-JavaScript-Interview-Question
25interview-questions-in-javascript
26js-interview-review
27hiring-without-whiteboards
28方正的前端面试知识点汇总
29React 常用面试题目与分析
302016各大互联网公司前端面试题汇总
312017年第一波JavaScript前端面试题
32前端面试之js相关问题(一)
33前端面试之js相关问题(二)
34无他,唯手熟尔-前端实习面试题篇
35前端基础面试题(JS部分)
36Vue面试题合集
37JavaScript,Python,go实现十大经典排序算法

github项目地址:https://github.com/calabash51...

会持续更新和收集前端面试题,关注点watch,收藏点star,互粉点follow,hiahia

觉得有用的话,不妨点个赞再走囖,ღ( ´・ᴗ・` )比心

查看原文

前端森林 收藏了文章 · 2018-03-05

面试的信心来源于过硬的基础

在过去的一年很多人不满于公司没有福利、人际关系不好相处、没有发展前途的境遇等等,想着在开年来换一份工作来重新开始自己,那么 你 准备好了吗?

下面是本人整理的一份面试材料,本想自己用的,但是新年第一天 公司突然给了我个惊喜,涨工资了!!!

1、 viewport

    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    // width    设置viewport宽度,为一个正整数,或字符串‘device-width’
    // device-width  设备宽度
    // height   设置viewport高度,一般设置了宽度,会自动解析出高度,可以不用设置
    // initial-scale    默认缩放比例(初始缩放比例),为一个数字,可以带小数
    // minimum-scale    允许用户最小缩放比例,为一个数字,可以带小数
    // maximum-scale    允许用户最大缩放比例,为一个数字,可以带小数
    // user-scalable    是否允许手动缩放

延伸 提问

怎样处理 移动端 1px 被 渲染成 2px 问题


    1 局部处理
        meta标签中的 viewport属性 ,initial-scale 设置为 1 
        rem 按照设计稿标准走,外加利用transfrome 的scale(0.5) 缩小一倍即可;
    2 全局处理
        meta标签中的 viewport属性 ,initial-scale 设置为 0.5
        rem 按照设计稿标准走即可

2、跨域的几种方式

首先了解下浏览器的同源策略
同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSRF等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。

那么怎样解决跨域问题的呢?

    1 通过jsonp跨域
        1.)原生实现:
         <script>
            var script = document.createElement('script');
            script.type = 'text/javascript';
        
            // 传参并指定回调执行函数为onBack
            script.src = 'http://www.....:8080/login?user=admin&callback=onBack';
            document.head.appendChild(script);
        
            // 回调执行函数
            function onBack(res) {
                alert(JSON.stringify(res));
            }
         </script>
    2、 document.domain + iframe跨域  
        此方案仅限主域相同,子域不同的跨域应用场景。
        1.)父窗口:(http://www.domain.com/a.html)

            <iframe id="iframe" data-original="http://child.domain.com/b.html"></iframe>
            <script>
                document.domain = 'domain.com';
                var user = 'admin';
            </script>
            2.)子窗口:(http://child.domain.com/b.html)
            
            <script>
                document.domain = 'domain.com';
                // 获取父窗口中变量
                alert('get js data from parent ---> ' + window.parent.user);
            </script>

        弊端:请看下面渲染加载优化

    3、 nginx代理跨域
    4、 nodejs中间件代理跨域
    5、 后端在头部信息里面设置安全域名
    
    更多跨域的具体内容请看  https://segmentfault.com/a/1190000011145364
    

3、 渲染优化

    1.禁止使用iframe(阻塞父文档onload事件);
        *iframe会阻塞主页面的Onload事件;
        *搜索引擎的检索程序无法解读这种页面,不利于SEO;
        *iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。

        使用iframe之前需要考虑这两个缺点。如果需要使用iframe,最好是通过javascript
        动态给iframe添加src属性值,这样可以绕开以上两个问题。

    2.禁止使用gif图片实现loading效果(降低CPU消耗,提升渲染性能);
    3、使用CSS3代码代替JS动画(尽可能避免重绘重排以及回流);
    4、对于一些小图标,可以使用base64位编码,以减少网络请求。但不建议大图使用,比较耗费CPU;
            小图标优势在于:
                1.减少HTTP请求;
                2.避免文件跨域;
                3.修改及时生效;

    5、页面头部的<style></style> 会阻塞页面;(因为 Renderer进程中 JS线程和渲染线程是互斥的);
    6、页面头部<script</script> 会阻塞页面;(因为 Renderer进程中 JS线程和渲染线程是互斥的);
    7、页面中空的 href 和 src 会阻塞页面其他资源的加载 (阻塞下载进程);
    
    8、网页Gzip,CDN托管,data缓存 ,图片服务器;
    9、前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数
    10、用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。
    11、当需要设置的样式很多时设置className而不是直接操作style。
    12、少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
    13、避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性)。
    14、图片预加载,将样式表放在顶部,将脚本放在底部  加上时间戳。

    15、 避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示出来,显示比div+css布局慢。
        对普通的网站有一个统一的思路,就是尽量向前端优化、减少数据库操作、减少磁盘IO。
            向前端优化指的是,在不影响功能和体验的情况下,能在浏览器执行的不要在服务端执行,
            能在缓存服务器上直接返回的不要到应用服务器,程序能直接取得的结果不要到外部取得,
            本机内能取得的数据不要到远程取,内存能取到的不要到磁盘取,缓存中有的不要去数据库查询。
            减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成(例如join查询),
            减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分,换语言是无法“优化”的。
            

4、事件的各个阶段

1:捕获阶段 ---> 2:目标阶段 ---> 3:冒泡阶段
document   ---> target目标 ----> document

由此,addEventListener的第三个参数设置为true和false的区别已经非常清晰了:

true表示该元素在事件的“捕获阶段”(由外往内传递时)响应事件;

false表示该元素在事件的“冒泡阶段”(由内向外传递时)响应事件。

5、let var const

let 允许你声明一个作用域被限制在块级中的变量、语句或者表达式
    let绑定不受变量提升的约束,这意味着let声明不会被提升到当前
    该变量处于从块开始到初始化处理的“暂存死区”。

var 声明变量的作用域限制在其声明位置的上下文中,而非声明变量总是全局的
    由于变量声明(以及其他声明)总是在任意代码执行之前处理的,所以在代码中的任意位置声明变量总是等效于在代码开头声明
    
const 声明创建一个值的只读引用 (即指针)
    这里就要介绍下 JS 常用类型 
    String、Number、Boolean、Array、Object、Null、Undefined
    其中基本类型 有 Undefined、Null、Boolean、Number、String,保存在栈中;
    复合类型 有 Array、Object ,保存在堆中;
    
    基本数据当值发生改变时,那么其对应的指针也将发生改变,故造成 const申明基本数据类型时,
    再将其值改变时,将会造成报错, 例如 const a = 3 ; a = 5 时 将会报错;
    但是如果是复合类型时,如果只改变复合类型的其中某个Value项时, 将还是正常使用;

6、箭头函数

    语法比函数表达式更短,并且不绑定自己的this,arguments,super或 new.target。这些函数表达式最适合用于非方法函数,并且它们不能用作构造函数。
    

7、快速的让一个数组乱序

    var arr = [1,2,3,4,5,6,7,8,9,10];
    arr.sort(function(){
        return Math.random() - 0.5;
    })
    console.log(arr);

此处解释:(语言组织能力不足,请勿吐槽)

首先: 当return 的值

    小于 0 ,那么 a 会被排列到 b 之前;
    等于 0 , a 和 b 的相对位置不变;
    大于 0 , b 会被排列到 a 之前;

这里你会 发现起始 的时候数组是正序排列,每当进行一次排列的时候, 都会先随机一个随机数 
(注意这里的每一次排列 指 每一个红框指一次排列, 共9次排列 , 一次排列中可能存在多次比较);

当一次排列的 随机数大于0.5 时 将会进行第二次比较, 当第二次随机数 仍然大于0.5 时 ,
    将会再 进行一次比较, 直到 随机数大于0.5 或者排列到第一位;

当一次排列的 随机数 小于0.5时 当前比较的两项 索引将不会改变 ,继续下一次 的排列;

8、字体font-family

    @ 宋体      SimSun
    @ 黑体      SimHei
    @ 微信雅黑   Microsoft Yahei
    @ 微软正黑体 Microsoft JhengHei
    @ 新宋体    NSimSun
    @ 新细明体  MingLiU
    @ 细明体    MingLiU
    @ 标楷体    DFKai-SB
    @ 仿宋     FangSong
    @ 楷体     KaiTi
    @ 仿宋_GB2312  FangSong_GB2312
    @ 楷体_GB2312  KaiTi_GB2312  
    @
    @ 说明:中文字体多数使用宋体、雅黑,英文用Helvetica
    
    body { font-family: Microsoft Yahei,SimSun,Helvetica; } 

9、可能用到的meta标签

    
    <!-- 设置缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
    <!-- 可隐藏地址栏,仅针对IOS的Safari(注:IOS7.0版本以后,safari上已看不到效果) -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- 仅针对IOS的Safari顶端状态条的样式(可选default/black/black-translucent ) -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <!-- IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别 -->
    <meta name="format-detection"content="telephone=no, email=no" />

    其他meta标签
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="320">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">

10、消除transition闪屏

    .css {
        -webkit-transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
        -webkit-perspective: 1000;
    }
    过渡动画(在没有启动硬件加速的情况下)会出现抖动的现象, 以上的 解决方案只是改变 视角 来启动硬件加速的一种方式;
    启动硬件加速的 另外一种方式: 
        .css {
            -webkit-transform: translate3d(0,0,0);
            -moz-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }
    
    启动硬件加速
    最常用的方式:translate3d、translateZ、transform

    opacity属性/过渡动画(需要动画执行的过程中才会创建合成层,动画没有开始或结束后元素还会回到之前的状态)

    will-chang属性(这个比较偏僻),一般配合opacity与translate使用(而且经测试,除了上述可以引发硬件加速的属性外,
    其它属性并不会变成复合层),

    弊端: 硬件加速会导致 CPU性能占用量过大,电池电量消耗加大 ;因此 尽量避免泛滥使用硬件加速。

11、android 4.x bug

    1.三星 Galaxy S4中自带浏览器不支持border-radius缩写
    2.同时设置border-radius和背景色的时候,背景色会溢出到圆角以外部分
    3.部分手机(如三星),a链接支持鼠标:visited事件,也就是说链接访问后文字变为紫色
    4.android无法同时播放多音频audio
    5.oppo 的border-radius 会失效

12、JS 判断设备来源

    function deviceType(){
        var ua = navigator.userAgent;
        var agent = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];    
        for(var i=0; i<len,len = agent.length; i++){
            if(ua.indexOf(agent[i])>0){         
                break;
            }
        }
    }
    deviceType();
    window.addEventListener('resize', function(){
        deviceType();
    })


    微信的 有些不太一样
    function isWeixin(){
        var ua = navigator.userAgent.toLowerCase();
        if(ua.match(/MicroMessenger/i)=='micromessenger'){
            return true;
        }else{
            return false;
        }
    }

13、audio元素和video元素在ios和andriod中无法自动播放

    
    原因: 因为各大浏览器都为了节省流量,做出了优化,在用户没有行为动作时(交互)不予许自动播放;

    /音频,写法一
    <audio data-original="music/bg.mp3" autoplay loop controls>你的浏览器还不支持哦</audio>
    
    //音频,写法二
    <audio controls="controls"> 
        <source data-original="music/bg.ogg" type="audio/ogg"></source>
        <source data-original="music/bg.mp3" type="audio/mpeg"></source>
        优先播放音乐bg.ogg,不支持在播放bg.mp3
    </audio>
    
    //JS绑定自动播放(操作window时,播放音乐)
    $(window).one('touchstart', function(){
        music.play();
    })
    
    //微信下兼容处理
    document.addEventListener("WeixinJSBridgeReady", function () {
        music.play();
    }, false);
    
    //小结
    //1.audio元素的autoplay属性在IOS及Android上无法使用,在PC端正常;
    //2.audio元素没有设置controls时,在IOS及Android会占据空间大小,而在PC端Chrome是不会占据任何空间;
    //3.注意不要遗漏微信的兼容处理需要引用微信JS;

14、css实现单行文本溢出显示 ...

直接上效果:相对于多行文本溢出做处理, 单行要简单多,且更容易理解。

实现方法

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
当然还需要加宽度width属来兼容部分浏览。

15、实现多行文本溢出显示...

效果:

实现方法:

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

适用范围:

因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;

注:

1、-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
2、display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
3、-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。

如果你觉着这样还不够美观, 那么就接着往下看:

效果:

这样 是不是你想要的呢?

实现方法:

div {
    position: relative;
    line-height: 20px;
    max-height: 40px;
    overflow: hidden;
}

div:after {
    content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(right, transparent, #fff 55%);
    background: -moz-linear-gradient(right, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);
}

不要只顾着吃,要注意胃口,此方法有个弊端 那就是 【未超出行的情况下也会出现省略号】 ,这样会不会很挫!!! 没办法,只能结合JS 进行优化该方法了。

注:


1、将height设置为line-height的整数倍,防止超出的文字露出。
2、给p::after添加渐变背景可避免文字只显示一半。
3、由于ie6-7不显示content内容,所以要添加标签兼容ie6-7(如:<span>…<span/>);兼容ie8需要将::after替换成:after。

16、让图文不可复制

这点应该大家 都很熟悉了, 某些时候【你懂的】为了快捷搜索答案,可是打死也不让你复制

-webkit-user-select: none; 
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;

那有些网页为了尊重原创,复制的文本 都会被加上一段来源说明,是如何做到的呢?问的好! 等的就是你这个问题 -_- 。

大致思路:


1、答案区域监听copy事件,并阻止这个事件的默认行为。
2、获取选中的内容(window.getSelection())加上版权信息,然后设置到剪切板(clipboarddata.setData())。

17、盒子垂直水平居中

这个问题好像面试必问的吔!反正我是必问的,哈哈!!! 其实无关多少种实现思路,只要你能实现就可以!

提供4种方法

1、定位 盒子宽高已知, position: absolute; left: 50%; top: 50%; margin-left:-自身一半宽度; margin-top: -自身一半高度;

2、table-cell布局 父级 display: table-cell; vertical-align: middle;  子级 margin: 0 auto;

3、定位 + transform ; 适用于 子盒子 宽高不定时; (这里是本人常用方法)
    
    position: relative / absolute;
    /*top和left偏移各为50%*/
       top: 50%;
       left: 50%;
    /*translate(-50%,-50%) 偏移自身的宽和高的-50%*/
    transform: translate(-50%, -50%); 注意这里启动了3D硬件加速哦 会增加耗电量的 (至于何是3D加速 请看浏览器进程与线程篇)

4、flex 布局
    父级: 
        /*flex 布局*/
        display: flex;
        /*实现垂直居中*/
        align-items: center;
        /*实现水平居中*/
        justify-content: center;

再加一种水平方向上居中 :margin-left : 50% ; transform: translateX(-50%);

18、改变placeholder的字体颜色大小

其实这个方法也就在PC端可以,真机上屁用都没有,当时我就哭了。 但 还是贴出来吧

input::-webkit-input-placeholder { 
    /* WebKit browsers */ 
    font-size:14px;
    color: #333;
} 
input::-moz-placeholder { 
    /* Mozilla Firefox 19+ */ 
    font-size:14px;
    color: #333;
} 
input:-ms-input-placeholder { 
    /* Internet Explorer 10+ */ 
    font-size:14px;
    color: #333;
}

19、最快捷的数组求最大值

    var arr = [ 1,5,1,7,5,9];
    Math.max(...arr)  // 9 

20、更短的数组去重写法

    [...new Set([2,"12",2,12,1,2,1,6,12,13,6])]
    
    // [2, "12", 12, 1, 6, 13]

21、 vue 父子组件嵌套时,组件内部的各个生命周期钩子触发先后顺序

首先 我们可以把 子组件当做function函数来看待,当父组件 import 子组件的时候, 就当是声明了 并加载了这个函数,
在调用的时候才会去执行这个函数(子组件)。那么父子组件中的各个声明周期钩子触发的先后顺序是怎样的呢?
如下图:

下图带222 的 是为子组件,所以一次顺序是为 先创建父组件,然后才穿件子组件,当子组件创建完成并且实体dom挂载完成后父组件才挂载完成

注:资源来源于自己长期收集整理而来,如有和其他网站和论坛相同部分,在此抱歉!

查看原文