kejun

function getUUID() {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = '#ff0000';
  ctx.fillRect(0,0,8,10);
  const b64 = canvas.toDataURL().replace('data:image/png;base64,', '');
  const bin = window.atob(b64);
  return bin2hex(bin.slice(-16, -12));
}

kejun

 ;(function($){
      $.support.touch = 'ontouchend' in document;

      if (!$.support.touch) {
       return;
      }
      
     var eventMap = {
       click:     'touchend',
       mousedown: 'touchstart',

kejun

mathclub是最近做的一个个人项目，帮助考SAT的同学通过在线做题、回顾、问答提高成绩。用户功能有：计次/计时做题、成绩单、错题分布、错题回顾、提问、汇总以及注册登录。管理后台主要是题库管理、学员管理、成绩单管理、问题回复。怎么看都像学校里的课设，的确项目本身并不出奇，开发上选用的一些方案或许更有意思。

整个项目一个人从产品需求、原型设计、前后端开发到部署历时2周左右。可以从截图上感受一下：

技术选型上服务端是Node.js，应用框架选了老牌的Express（4.x变化挺大不少中间件都废了），数据服务用的是MongoLab（MongoDB的云服务平台），图片上传用的是又拍云，程序部署在Nodejitsu上。模板引擎没选主流的Jade或ejs，而是用Express React Views它实现了在服务端渲染React组件。前端框架是用React，这次有意想追求前后端全部组件化的组织。之前是用Webpack实现CommonJS模块打包，这次用Browserify配置更简单，它有丰富的transform很赞，其中的reactify转换React的JSX很完美。CSS用Sass＋autoprefixer让人省心。将这一切串起来的自动构建工具是Gulp。我其实崇尚用最精简的工具组合开发，上述组合在我看来比较精简了。（帖纸留念）

![image](http://satexam.b0.upaiyu

kejun

const babel = require('@babel/core');
const t = require('@babel/types');

const sampleCode = `\
import {uniq, extend, flatten, cloneDeep } from "lodash";
export default function Test() {
  return (
    <Sky.Card>
      Test
      <Wind.Button type="primary" loading>{intl('sas.baseline.inDetection')}</Wind.Button>

kejun

;(() => {
  const mergeText = (str, text) => {
    if (str === '') {
      return text;
    }
    if (!text || text === ' ' || str === text) {
      return str;
    }
    str = str.replace(/\s+/g, ' ')
             .replace(/\t|\r|\n/g, '');

kejun

var React         = require('react');
var EventListener = require('react/lib/EventListener');
var partition     = require('linear-partitioning');

var TileLayout = React.createClass({
  getDefaultProps: function() {
    return {
      gutter: 0,
      photos: []
    }

kejun

// pug
div.menu
  ul
    each v in [1,2,3,4,5,6,7,8]
      li
        a( href='#' )= v
        
 // css
 @mixin circle-layout($radius, $dot-radius, $num) {
  $deg: 360deg / $num;

kejun

/**
 * r: circle -> r, ellipse -> rx, ry 
*/
export const getCenterPoint = (x, y, r) => (r.rx ? {
  x: x + r.rx,
  y: y + r.ry,
  rx: r.rx,
  ry: r.ry,
} : {
  x: x + r,

kejun

package.json
{
  "devDependencies": {
    "autoprefixer": "^7.2.5",
    "babel-preset-env": "^1.6.1",
    "node-sass": "^4.7.2",
    "postcss-inline-svg": "^3.0.0",
    "postcss-write-svg": "^3.0.1"
  },
  "dependencies": {

kejun

const path = require('path');
const webpack = require('webpack');
const CleanPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const extractSass = new ExtractTextPlugin({
  filename: 'css/[name].css'
});

const jsBuildPath = path.resolve(__dirname, 'dist');