Front Tec

JS相关

jquery

moment

日期处理类库

moment().format('MMMM Do YYYY, h:mm:ss a'); // 一月 3日 2019, 1:51:46 下午
moment().format('dddd');                    // 星期四
moment().format("MMM Do YY");               // 1月 3日 19
moment().format('YYYY [escaped] YYYY');     // 2019 escaped 2019
moment().format();                          // 2019-01-03T13:51:46+08:00

http请求

axios

支持浏览器和node.js
支持promise
能拦截请求和响应
能转换请求和响应数据
能取消请求
自动转换JSON数据
浏览器端支持防止CSRF(跨站请求伪造)

  1. get方式
axios.get('/user', {
    params: {
      ID: 12345
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});
  1. post方式
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});
  1. 参数项方式
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
}).then(function(response) {
  response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});

whatwg-fetch

fetch()函数是一种基于promise的机制，用于在浏览器中以编程方式发出web请求。这个项目是一个实现了标准Fetch规范子集的polyfill，足以使Fetch成为传统web应用程序中XMLHttpRequest的大多数用法的可行替代。

  • npm安装地址：https://www.npmjs.com/package/whatwg-fetch
  1. HTML
import {fetch} from 'whatwg-fetch';

fetch('/users.html')
.then(function(response) {
  return response.text()
}).then(function(body) {
  document.body.innerHTML = body
})
  1. XHR
import {fetch} from 'whatwg-fetch';
fetch('/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'Hubot',
    login: 'hubot',
  })
})
  1. JSON
import {fetch} from 'whatwg-fetch';
fetch('/users.json')
.then(function(response) {
  return response.json()
}).then(function(json) {
  console.log('parsed json', json)
}).catch(function(ex) {
  console.log('parsing failed', ex)
})

数据处理

loadash

lodash是一个一致性、模块化、高性能的 JavaScript 实用工具库。

_.defaults({ 'a': 1 }, { 'a': 3, 'b': 2 });
// → { 'a': 1, 'b': 2 }

_.partition([1, 2, 3, 4], n => n % 2);
// → [[1, 3], [2, 4]]

object-assign

ES2015 Object.assign() ponyfill

const objectAssign = require('object-assign');
 
objectAssign({foo: 0}, {bar: 1});

immutability-helper

在不更改原始源的情况下更改数据副本

import update from 'immutability-helper';
 
const newData = update(myData, {
  x: {y: {z: {$set: 7}}},
  a: {b: {$push: [9]}}
});

serialize-javascript

将JavaScript序列化为包含正则表达式、日期和函数的JSON超集。

var serialize = require('serialize-javascript');
 
serialize({
    str  : 'string',
    num  : 0,
    obj  : {foo: 'foo'},
    arr  : [1, 2, 3],
    bool : true,
    nil  : null,
    undef: undefined,
    date: new Date("Thu, 28 Apr 2016 22:02:17 GMT"),
 
    fn: function echo(arg) { return arg; },
    re: /([^\s]+)/g
});

'{"str":"string","num":0,"obj":{"foo":"foo"},"arr":[1,2,3],"bool":true,"nil":null,date:new Date("2016-04-28T22:02:17.156Z"),"fn":function echo(arg) { return arg; },"re":/([^\\s]+)/g}'

promise

promise

promise类库

var Promise = require('promise');
 
var promise = new Promise(function (resolve, reject) {
  get('http://www.google.com', function (err, res) {
    if (err) reject(err);
    else resolve(res);
  });
});

promise-polyfill

轻量级的promise，使不支持promise的浏览器和node支持promise语法

import 'promise-polyfill/src/polyfill';

ES6-Promise

可以理解为上面两个的合集

  1. promise
var Promise = require('es6-promise').Promise;
  1. promise-polyfill
require('es6-promise').polyfill();

bluebird

Bluebird是一个功能齐全的promise库，专注于创新的功能和性能

var Promise = require("bluebird");

// Enable cancellation
Promise.config({cancellation: true});

var fs = Promise.promisifyAll(require("fs"));

// In 2000ms or less, load & parse a file 'config.json'
var p = Promise.resolve('./config.json')
 .timeout(2000)
 .catch(console.error.bind(console, 'Failed to load config!'))
 .then(fs.readFileAsync)
 .then(JSON.parse);

// Listen for exception event to trigger promise cancellation
process.on('unhandledException', function(event) {
 // cancel config loading
 p.cancel();
});

co

Generator基于的控制流，有益于nodejs和浏览器，使用promise，让您以一种友好的方式编写非阻塞代码。

  1. 示例1
co(function* () {
  var result = yield Promise.resolve(true);
  return result;
}).then(function (value) {
  console.log(value);
}, function (err) {
  console.error(err.stack);
});
  1. 示例2
co(function *(){
  // resolve multiple promises in parallel
  var a = Promise.resolve(1);
  var b = Promise.resolve(2);
  var c = Promise.resolve(3);
  var res = yield [a, b, c];
  console.log(res);
  // => [1, 2, 3]
}).catch(onerror);

babel

babel

转换ES6语法为ES5语法

babel/core

babel编译器的核心。

babel-jest

如果您已经在使用jest-cli，只需添加babel-jest，它将使用babel自动编译JavaScript代码。

babel-loader

babel加载器

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

babel-runtime

babel模块化运行时助手

babel-plugin-import

[
  {
    "libraryName": "antd",
    "libraryDirectory": "lib",   // default: lib
    "style": true
  },
  {
    "libraryName": "antd-mobile"
  },
]

babel-preset-react

.babelrc配置

{
  "presets": ["react"]
}

babel-preset-react-app

针对create-react-app的Babel预置。

.babelrc文件

{
  "presets": ["react-app"]
}

typescript

TypeScript是JavaScript类型的超集，它可以编译成纯JavaScript。TypeScript可以在任何浏览器、任何计算机和任何操作系统上运行，并且是开源的。

ts-loader

typescript加载器







 
 
 
 
 



 







const path = require('path');

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

pubsub-js

处理发布订阅的类库

import PubSub from 'pubsub-js';

var mySubscriber = function (msg, data) {
    console.log( msg, data );
};
var token = PubSub.subscribe('MY TOPIC', mySubscriber);
PubSub.publish('MY TOPIC', 'hello world!');

chalk

终端打印颜色定制

  • npm安装地址：https://www.npmjs.com/package/chalk
const chalk = require('chalk');
 
console.log(chalk.blue('Hello world!'));

raf

为node和浏览器，提供支持requestAnimationFrame的polyfill

https://ci.testling.com/chrisdickinson/raf.png

var raf = require('raf')
 
raf(function tick() {
  // Animation logic
  raf(tick)
})

resolve

实现node require.resolve()算法，以便您可以以异步和同步的方式代表文件请求.resolve()

var resolve = require('resolve');
resolve('tap', { basedir: __dirname }, function (err, res) {
    if (err) console.error(err);
    else console.log(res);
});

← CSS相关 →