一段的es6 js代码

通过babel了解一下es6的class,let,const和箭头函数

class的实现方式:原型链继承的语法糖,但是es6中未提供静态变量

箭头函数如何处理this:在上文生成一个变量,和arguments:使用上文的arguments,当然箭头函数的写法也是其很重要的一部分。

let:

作用域问题:通过创建不同的变量和调用关系/通过作为函数执行时的参数实现

 

//测试class 和箭头函数
class A {
  static name = () => "liuqi";
  constructor() {
    this.hello = "coool";
    const a = () => {
      console.log("hello", this, arguments);
    };
    const b = function() {
      console.log("hello", this, arguments);
    };
  }
}
class B extends A {
  a = function() {};
}
 
const b = val => {
  console.log(val);
};
 
const a = x => {
  return () => {
    console.log(x);
  };
};
 
// 测试let的上下文
for (let i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, i * 1000);
}
 
for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, i * 1000);
}
 
for (var i = 0; i < 5; i++) { setTimeout(() => {
    console.log(i, this);
  }, i * 1000);
}
 
for (let i = 0; i < 5; i++) { setTimeout(() => {
    console.log(i);
  }, 1000);
}
 
if (true) {
  let a;
  if (false) {
    let a;
    let b;
    a = 1;
  }
  a = 2;
}
"use strict";
 
"use strict";
 
// constructor 返回值
function _possibleConstructorReturn(self, call) {
  if (!self) {
    throw new ReferenceError(
      "this hasn't been initialised - super() hasn't been called"
    );
  }
  return call && (typeof call === "object" || typeof call === "function")
    ? call
    : self;
}
 
// 通过原型链进行继承
function _inherits(subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError(
      "Super expression must either be null or a function, not " +
        typeof superClass
    );
  }
  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: {
      value: subClass,
      enumerable: false,
      writable: true,
      configurable: true
    }
  });
  if (superClass)
    Object.setPrototypeOf
      ? Object.setPrototypeOf(subClass, superClass)
      : (subClass.__proto__ = superClass);
}
 
// 类型检查
function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}
 
// 声明一个class/function
var A = function A() {
  var _this = this,
    _arguments = arguments;
 
  _classCallCheck(this, A);
 
  this.hello = "coool";
  var a = function a() {
    console.log("hello", _this, _arguments);
  };
  var b = function b() {
    console.log("hello", this, arguments);
  };
};
 
// 类的静态方法
A.name = function() {
  return "liuqi";
};
 
// 类的继承
var B = (function(_A) {
  _inherits(B, _A);
 
  function B() {
    var _ref;
 
    var _temp, _this2, _ret;
 
    _classCallCheck(this, B);
 
    for (
      var _len = arguments.length, args = Array(_len), _key = 0;
      _key < _len;
      _key++
    ) {
      args[_key] = arguments[_key];
    }
 
    return (
      (_ret = ((_temp = ((_this2 = _possibleConstructorReturn(
        this,
        (_ref = B.__proto__ || Object.getPrototypeOf(B)).call.apply(
          _ref,
          [this].concat(args)
        )
      )),
      _this2)),
      (_this2.a = function() {}),
      _temp)),
      _possibleConstructorReturn(_this2, _ret)
    );
  }
 
  return B;
})(A);
 
var b = function b(val) {
  console.log(val);
};
 
var a = function a(x) {
  return function() {
    console.log(x);
  };
};
 
// let的作用域
var _loop = function _loop(_i) {
  setTimeout(function() {
    console.log(_i);
  }, _i * 1000);
};
 
for (var _i = 0; _i < 5; _i++) {
  _loop(_i);
}
 
for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, i * 1000);
}
 
for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i, undefined);
  }, i * 1000);
}
 
var _loop2 = function _loop2(_i2) {
  setTimeout(function() {
    console.log(_i2);
  }, 1000);
};
 
for (var _i2 = 0; _i2 < 5; _i2++) {
  _loop2(_i2);
}
 
// let的作用域
if (true) {
  var _a = void 0;
  if (false) {
    var _a2 = void 0;
    var _b = void 0;
    _a2 = 1;
  }
  _a = 2;
}

let a = 1;
console.log("1:", a);
new Promise((resolve, reject) => {
  console.log("2:", a);
  resolve(1);
  console.log("3:", a);
  reject(2);
  console.log("4:", a);
})
  .then(val => {
    a = 2;
    console.log("5:", a);
  })
  .catch(val => {
    a = 3;
    console.log("6:", a);
  });
console.log("7:", a);
 
a = 4;
console.log("8:", a);

输出:

1: 1
2: 1
3: 1
4: 1
7: 1
8: 4
5: 2

分析:promise的then是异步的,promise resolve之后的状态就确定了,不能再改变了

富文本编辑器 draft js

官方文档:https://draftjs.org/docs/getting-started

awesome:https://github.com/nikgraf/awesome-draft-js

draft js plugin:https://www.draft-js-plugins.com/

example:https://draftjs-examples.herokuapp.com/

how drafjs represent rich text:https://medium.com/@rajaraodv/how-draft-js-represents-rich-text-data-eeabb5f25cf2

draft js in zhihu:https://zhuanlan.zhihu.com/p/24951621

draft js + electron:https://www.jianshu.com/p/0d22b3bf96a5


富文本编辑器实现可视化的程序/表达式编辑

和具体业务无关

需求:

给定一些变量&常量&函数&运算符,生成一个返回一定内容和意义的表达式。

例如:

给定变量 {name: “时间1″, key:”time1″,value:”2018-01-01-00:01”}{name: “时间2″, key:”time2″,value:”2018-01-01-00:02”},其中key指代的是进行实际运算(就像在编译器里)使用的唯一值,name用于助记

运算符 + – * / > < ( )

生成rule:

time1 > time2

在某些情况下,如果key不友好,rule 的内容可读性不好,希望有如下情况

  > 

和更进一步的:加入函数等表示方式及其可视化(可读性更加)的表示方式和对应的交互:

例如将一个元素拖入编辑面板,删除一个元素(整体删除),光标的移动,more(redo, undo,copy,paste)

最近的坑

  • react:
    • dva 系列的实现
      • react-saga的文档:https://redux-saga-in-chinese.js.org/docs/api/
      • react-route-redux
      • dva源码: https://dvajs.com/guide/source-code-explore.html#start-%E6%96%B9%E6%B3%95
      • dva subscription
      • react + redux 的3条规范 https://blog.jimmylv.info/2016-07-04-rules-for-structuring-redux-applications/
    • context
    • unmount–>深入理解生命周期
    • mobx
    • https://react.jokcy.me/ 源码解析
  • rxjs
    • https://zhuanlan.zhihu.com/p/25383159 写一遍
    • 响应式编程和流处理(kafka之类的)
  • event loop
    • https://segmentfault.com/a/1190000014940904
  • webpack
    • http://www.cnblogs.com/hezihao/p/7921872.html
  • 交互
    • 富文本编辑器
  • ml
    • nlp前沿
    • nlp实践
  • 其他
    • es7(?)& es6 : http://es6.ruanyifeng.com/#README
    • css精通 && flex(?
    • ui设计
    • pwa
    • pathToRegexp 优雅的处理处理url
    • promise 异常处理: 用途,redux-saga中的异常,其他框架中的异常处理(一般是通过中间件捕捉)
    • draft js 使用心得
    • 编译原理
    • google 开发者大会 from B站
    • 百度的est样式库:http://ecomfe.github.io/est/#ellipsis
    • http2和cdn等网络相关的东西
    • graphql cms
    • node pipe https://www.onmpw.com/tm/xwzj/prolan_225.html
    • styled component https://segmentfault.com/a/1190000014682665

React拖拽

占坑

需求:

用户需要比较简单的操作(智商低),需要拖拽实现四则运算的式子,使用react-dnd实现

分析:

与具体业务无关

数据结构:todo

拖拽实现&原理&trick:

基于h5 拖拽的封装,也可以自己实现相关的接口

几个关键内容:拖拽开始,拖拽over,拖拽结束;数据传送datatransfer

拖拽实现公式操作:todo

代码&demo

todo

函数式编程

函数式编程与面向对象编程的比较:https://www.cnblogs.com/zhenw/p/6160931.html


廖雪峰的python函数式编程教程:https://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000/001386819866394c3f9efcd1a454b2a8c57933e976445c0000

相关概念:

  • 高阶函数:把函数作为参数传入
  • 函数作为函数
  • lambda函数
  • 装饰器
  • 偏函数(?语言特性太重)

 


JS 函数式编程指南:

https://legacy.gitbook.com/book/llh911001/mostly-adequate-guide-chinese/details

react 相关

收藏:

react 技术栈学习笔记:https://www.cnblogs.com/ruoji/p/6464131.html

react生命周期:https://blog.csdn.net/fengxiaoxiao_1/article/details/77261617

扩展create react app 的webpack配置:https://juejin.im/post/5a5d5b815188257327399962

create react app 相关:

  • 功能介绍1: https://www.cnblogs.com/hello-yz/p/8268026.html
  • 功能介绍2: https://blog.csdn.net/github_squad/article/details/57452333
  • 常用配置: https://www.jianshu.com/p/e09b2c57cf20

react + webpack:基于webpack的React项目搭建 https://www.cnblogs.com/raion/p/8053799.html

react高阶组件:https://github.com/brickspert/blog/issues/2

react setState异步/同步:https://segmentfault.com/a/1190000007454080

状态提升:https://www.cnblogs.com/zhangbob/p/6962138.html?utm_source=itdadao&utm_medium=referral

smart和dumb组件:https://blog.csdn.net/xiao_chun5316/article/details/50428345

函数组件:https://blog.csdn.net/xuchaobei123/article/details/75195522

redux(需要多看几遍):https://segmentfault.com/a/1190000012976767

redux-saga:https://www.jianshu.com/p/e84493c7af35

推荐使用browserHistory:https://segmentfault.com/q/1010000007788281

redux-connect:https://segmentfault.com/a/1190000010416732

面试准备:

  • react 常见面试题 https://blog.csdn.net/sinat_17775997/article/details/69938720/

todo:

react+webpack

react+redux:react 更新原理

router

总结和面试准备


react redux summary

react redux要做的事:

统一存储数据 store

数据传递到组件

修改数据的接口dispatch

修改完数据触发更新connect

2018.3-6

完成的工作:

  • 快仓实习
    • antd开发*2
    • cocos 开发
    • nginx
    • 图片流demo
      • 待整理
    • emqtt&&eggjs
    • 摸鱼
  • thinkjs && antd
    • VPN管理系统*1.5
    • 图书管理系统(?)
  • OctoberCms
    • 文档
    • 二开
  • WordPress
    • 二次开发
  • 划水
    • wecenter
    • react
  • 血缘白金

emqtt & plugin for eggjs

emqtt简介

http://www.emqtt.com/docs/v2/index.html

EMQ 2.0 (Erlang/Enterprise/Elastic MQTT Broker) 是基于 Erlang/OTP 语言平台开发,支持大规模连接和分布式集群,发布订阅模式的开源 MQTT 消息服务器。

解决问题:
  • 长链接的消息订阅模型(基于tcp/websocket),好处是自己不用自定(web)socket的协议,性能>> 轮询
  • 据官网说能百万连接(?)
  • QOS
  • 开源的轮子

可能的问题:

  • 需要可靠性测试和压力测试
  • 开源的坑(开源版本弱于商业版本,开源漏洞修改不及时)
  • erlang二次开发困难

mqtt协议: http://www.emqtt.com/docs/v2/mqtt.html

栗子

# 启动emqtt服务器
unzip emqttd-macosx-v2.0.zip && cd emqttd

# 启动emqttd
./bin/emqttd start

# 检查运行状态
./bin/emqttd_ctl status

# 停止emqttd
./bin/emqttd stop

 node 和 浏览器使用mqtt.js : https://github.com/mqttjs/MQTT.js#browser

//使用 mqtt.js
var mqtt = require('mqtt')
var client  = mqtt.connect('mqtt://test.mosquitto.org')

client.on('connect', function () {
  client.subscribe('presence')
  client.publish('presence', 'Hello mqtt')
})

client.on('message', function (topic, message) {
  // message is Buffer
  console.log(message.toString())
  client.end()
})

egg mqtt plugin

需求

  1. egg获取(监听)mqtt服务器消息
  2. egg根据逻辑发布mqtt消息

解决方案

1

要求在egg js服务器中使用一个长期运行的进程进行处理:

egg js agent:

  • 多进程模型和进程间通讯: http://eggjs.org/zh-cn/core/cluster-and-ipc.html
  • 多进程研发模式增强: http://eggjs.org/zh-cn/advanced/cluster-client.html

在agent.js里面处理监听:

  • 使用emqtt 的$SYS主题订阅获得服务器信息: http://www.emqtt.com/docs/v2/guide.html#sys
    • 使用mqtt.js
  • 使用emqtt的http接口主动获得服务器信息:http://www.emqtt.com/docs/v2/rest.html
    • 此处注意需要进行http base认证(全明文传输包括用户名或者密码的信息,需要注意环境或者加密)
    • 可以使用egg的 agent.curl 实现
  • 处理错误,agent进程的稳定性要求高:
    • mqtt.js的错误
    • curl的错误
    • 其他

2

使用mqtt.js 根据逻辑处理:

  • 在agent里面处理业务
  • 给worker进行发消息(rpc)让其干活
  • 其他

3

插件化:订阅/监听逻辑写在插件根目录下的agent.js里面,发布逻辑看个人实现

cocos creator 开发基础

 

  • 环境
    • pc
      • 下载cocos creator: http://docs.cocos.com/creator/manual/zh/getting-started/install.html
      • 配置vs code: http://docs.cocos.com/creator/manual/zh/getting-started/coding-setup.html
    • andriod环境搭建: http://docs.cocos.com/creator/manual/zh/publish/setup-native-development.html
  •  结构
    • 项目结构:http://docs.cocos.com/creator/manual/zh/getting-started/project-structure.html
    • 编辑器基础
    • 基本概念
      • 场景: http://docs.cocos.com/creator/manual/zh/asset-workflow/scene-managing.html
        • 创建场景
      • 组件
      • 节点
      • 脚本
  • 资源
    • 主要使用:场景,贴图,预置,图集,脚本,瓦片图,其他:http://docs.cocos.com/creator/manual/zh/asset-workflow/
  •  事件
    • 系统事件
      • 触摸事件
      • pc事件
        • 点击,滚轮
      • 键盘事件
    • 自定义事件冒泡
  • 场景构建
    • 节点
    • 组件
      • 常用组件
  • 布局/样式
    • 锚点 /坐标系/定位
    • 定位组件
    • 自适应:fit width/height
    • layout
    • 对齐
    • 缩放
    • 移动
    • 样子主要靠贴图
  • 脚本开发
    • 创建和使用脚本
    • 处理
    • 节点和组件处理
    • 生命周期
    • 场景处理
    • 资源处理
    • 动作处理:http://docs.cocos.com/creator/manual/zh/scripting/action-list.html
  • 插件/模块化
    • 插件脚本
    • model.export
  • 网络通信
    • websocket/socket.io
    • xhr
  • 构建发布
  • 性能
    • 性能评价
      • 图形性能
      • 节点性能
    • 性能优化
      • 预置
      • 修改逻辑,减少渲染
    • 其他。。
  • js 语言版本
    • 基本支持es6(模块化不一样)
    • 插件脚本需要babel

实现选择框(触摸或者鼠标移动添加选择框):

一个单色Sprite作为选择框的表示,其anchor为0,0.

事件监听在其父节点。

触摸开始时:

记录起始点A,设置position为该点,启动touchMove事件

触摸移动时:

获得触摸位置B,设置width和height为B – A。

触摸结束时:

关闭touchMove事件, 执行选择逻辑。


更多内容或者协助请联系nameliuqi@outlook.com