es6
栗子好好吃
向来心是看客心,奈何人是剧中人
展开
-
[redux] - createStore简单的实现
class createStore { constructor(reducer, preloadedState, enhancer) { this.currentReducer = reducer; this.currentState = preloadedState; this.currentListeners = []; this.nextListeners = this.currentListeners; this.isDispatching = fal..原创 2020-10-26 10:27:42 · 278 阅读 · 0 评论 -
javascript --- > 函数的柯里化 && Vue 2.x中柯里化的使用
函数式编程部分重点参考资料: 函数式编程柯里化只传递给函数一部分参数来调用它,让它返回一个函数去处理剩下的参数var add = function (x) { return function(y) { return x + y }}var increment = add(1)var addTen = add(10)increment(2) // ...原创 2020-02-29 11:25:49 · 788 阅读 · 2 评论 -
javascript --- > 将DOM结构转换成虚拟DOM && 虚拟DOM转换成真实的DOM结构
虚拟DOM的实现使用虚拟DOM的原因: 减少回流与重绘将DOM结构转换成对象保存到内存中<img /> => { tag: 'img'}文本节点 => { tag: undefined, value: '文本节点' }<img title="1" class="c" /> => { tag: 'img', data: { title = "1"...原创 2020-02-28 12:02:11 · 2213 阅读 · 0 评论 -
node --- > [express] cookie/session 机制与 中间件的使用(路由守卫)
说明源代码记忆、遗忘回顾使用 cookie/session 机制,让 客户端/服务器 的访问变得有状态cookie 与 session由于 HTTP 协议的无状态性,当一次连接断开后. 服务器并不会记录用户是否登录. 因此需要引入 cookie/session 机制cookiecookie: 浏览器在电脑硬盘中开辟的一块空间,主要供服务器端存储数据cookie 中的...原创 2020-01-29 17:26:36 · 597 阅读 · 0 评论 -
javascript --- > 实现对象的深拷贝
浅拷贝和深拷贝浅拷贝: 只拷贝一层.当对象是复杂数据类型(Object、 Array)时,只拷贝引用深拷贝: 多层拷贝.复杂数据类型,会重新分配内存空间.实现浅拷贝的2种方法使用for ... in 实现var obj = { name: 'marron', age: 18, msg: { sex: "1" }}var o = {};for(let k in ...原创 2020-01-24 15:24:29 · 296 阅读 · 0 评论 -
JavaScript --- > [学习笔记]观察者模式 & 理解对象 & 工厂模式 & 构造函数模式
说明:本篇为后面TCP的模拟实现做准备本篇的主要内容: 观察者模式、JS中对象相关的概念、原型链本篇是阅读JS数据的理解(大部分书原内容+少量理解)1. 观察者模式参考JavaScript设计模式1.1 消息注册方法“将订阅者注册的消息推入到消息队列中”[算法思路] :在推入到消息队列时,如果此消息不存在则应该创建一个该消息类型并将该消息放入消息队列中如果此消息存在...原创 2020-01-10 16:13:42 · 263 阅读 · 0 评论 -
算法 --- > [队列结构]二叉树的层次遍历
思路使用队列:初始化的时候,将root, push进队列q中循环队列q,当其中不为空时,取出第一个元素(q.shift),记为r若r.left不为空,将r.left推进q,若r.right不为空,将r.right推进q记录层次:4. 初始化设置i =0;5. 在入队的时候,入队一个对象{r: root, i}6. 出队时,使用es6的解构赋值取出 {r , i}实现如下:...原创 2019-12-21 14:55:39 · 136 阅读 · 0 评论 -
算法 --- > [map的使用]求最大和谐子序列
说明和谐数组是指一个数组里元素的最大值和最小值之间的差别正好是1。现在,给定一个整数数组,你需要在所有可能的子序列中找到最长的和谐子序列的长度。输入: [1,3,2,2,5,2,3,7]输出: 5原因: 最长的和谐数组是:[3,2,2,2,3].思路创建一个map用于统计数组中的值,及值出现的次数创建一个max,用来保存出现的最大次数遍历map,在map中寻找...原创 2019-12-16 10:15:17 · 207 阅读 · 0 评论 -
javascript --- > [代码优化]将复杂的函数分解写&&异步请求数据的同步写法
说明今天优化项目结构,发现有如下一个函数const drawMqiPie = async (index) => { // 请求的参数 let params = { lineNo: lineNo, direct: 1, driveway: 1, pageNum: 0, pageSize: 0, computeR...原创 2019-12-06 15:52:01 · 173 阅读 · 0 评论 -
koa --- > [MVC实现之二]Controller层的实现
[MVC实现之一]传送门https://blog.csdn.net/piano9425/article/details/103362966Router层router这一层,不做业务处理,仅仅只是将路由和路由的处理函数结合起来.路由的处理函数由Controller层实现改进目录结构如下(实际上新建了controller文件夹及其内部子文件,mar.js)Router层的改变我们...原创 2019-12-04 08:13:29 · 1800 阅读 · 0 评论 -
egg --- > 配置连接mysql && 创建模型 && 插入数据
在egg中使用egg-sequelize插件sequelize是与数据库操作相关的库安装: npm install --save egg-sequelize mysql2在egg中配置sequelize在 config/plugin.js中引入 egg-sequelize插件,代码如下sequelize: { enable: true, package: 'egg-se...原创 2019-12-03 09:21:49 · 548 阅读 · 0 评论 -
koa --- > 使用koa-multer和element-ui组件上传头像
文件上传前端代码<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script><link rel="stylesheet" ...原创 2019-11-21 16:56:12 · 612 阅读 · 0 评论 -
koa --- > restful规范及其栗子
遵循Restful规范的简单的栗子前端代码:<html><head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"...原创 2019-11-21 15:01:27 · 135 阅读 · 0 评论 -
koa --- > 跨域,解析POST参数、路由配置
目标将开发中经常遇见的问题写在这里方便查询.使用Koa创建一个简单的服务器const Koa = require("koa");const app = new Koa();app.listen(3000, () =>{ console.log("[server] Server is running at http://localhost:3000")})使用koa2-cor...原创 2019-11-21 14:49:49 · 530 阅读 · 0 评论 -
node --- > 模拟express实现一个简单的服务器
目标使用express实现一个监听3000端口的http服务如下const express = require('express');const app = express();app.get('/', (req, res) => { res.end('Hello Express');})app.get('/users',(req, res)=>{ res...原创 2019-11-03 16:01:57 · 189 阅读 · 0 评论 -
vue --- > 2.0 编译的实现
初识假设html中有如下dom:<div id="app"> <!-- 插值绑定 --> <p>{{name}}</p> <!-- 指令解析 --> <p l-text="name"></p> <p>{{age}}</p> <p>{{doubleA...原创 2019-10-28 12:45:06 · 125 阅读 · 0 评论 -
es6 --- > 使用proxy对数据进行劫持
说明:数据劫持,简单的说就是在对数据进行操作(增删改查)时,触发的函数下面想通过使用以下的形式来使用:let proxy = reactive({ name:'lz' });proxy.name; // 获取proxy.name = '栗子'; // 设置delete proxy.name; // 删除解决方案:proxy函数的2个参数第一个参数: 接收一个对象(...原创 2019-10-24 10:02:03 · 379 阅读 · 0 评论 -
vue --- > 2.0响应式补充
补充:数组的响应式// 对数组的方法进行重写// 1. 不能影响本来的方法// 2. 调用的时候可以找到它let odlArrayPrototype = Array.prototype;let proto = Object.create(odlArrayPrototype); // 继承['push','shift','unshift'].forEach(method =>...原创 2019-10-24 09:24:49 · 97 阅读 · 0 评论 -
vue --- > 2.0数据的响应式的一种实现
初识:实际上是通过Object.defineProperty()方法来实现的talk is cheap, show your codelet obj = {};Object.defineProperty(obj, 'name', { get(){ return document.querySelector('#name').innerHTML; }, set(newVal){...原创 2019-10-22 21:16:02 · 186 阅读 · 0 评论 -
es6 --- > forEach的实现
forEach的第一个参数接收回调函数let a = ['a', 'b', 'c'];a.forEach((v, k ,s)=>{ console.log(v, k ,s); console.log(this);})v: valuek: keys: 代表数组a本身this指向当前函数执行所在的作用域,即windowforEach的第二个参数.forEac...原创 2019-10-22 09:55:43 · 1661 阅读 · 0 评论 -
es6 --- > 自制迭代器
对象对象如下const obj ={ left: 100, top: 200}不可迭代for(let attr of obj){ console.log(attr);}迭代规则可迭代,所具有的属性[Symbol.iterator]需要自己给obj添加迭代规则obj[Symbol.iterator] = () =>{ // 获取obj的所有...原创 2019-10-22 08:54:11 · 109 阅读 · 0 评论 -
es6 --- > 使用Symbol保护私有变量
对于一个人物类假设其属性有姓名和性别我们希望,性别在声明后就固定不变传统方法var Person = (function(){ var _gender = ''; function P(name, gender){ this.name = name; _gender = gender; } ...原创 2019-10-21 22:01:14 · 269 阅读 · 0 评论 -
es6 --- > 内置的Symbol值
Symbol.hasInstance// Symbol.hasInstanceclass MyClass { [Symbol.hasInstance] (foo) { return foo instanceof Array; }}[1, 2, 3] instanceof new MyClass() // true// symbol.hasInstance...转载 2019-04-23 16:56:05 · 365 阅读 · 0 评论 -
es6 --- > Thunkify源码分析
首先看一个例子:读取package.json下的文件,并将读取的数据(若读取失败)打印出来// 导入fs和thunkify模块var thunkify = require('thunkify');var fs = require('fs');// 定义读取文件的函数readvar read = thunkify(fs.readFile);// 调用read函数读取package.j...转载 2019-04-27 16:52:12 · 212 阅读 · 0 评论 -
es6 --- > Promise封装读取文件操作
Promise:es6中为了解决回调地狱问题而产生的Promise的参数Promise的参数是一个函数.每个Promise在实例化时,都会立即执行参数里的函数const p = new Promise(()=>{ console.log(1);})// 解释了上面的第2条Promise参数的参数Promise的参数(函数),默认有2个参数(resol...原创 2019-09-18 16:10:02 · 1025 阅读 · 0 评论 -
javascript --- > 创建一个二维数组
想创建一个 n*n 的矩阵,并全部赋予初始值false你可能会想到下面let arr = [];for(let i =0 ;i< n;i++) { arr[i] = []; for( let j =0; j< n; j++){ arr[i][j] = false; }}稍微封装一下:function Cmatrix(n, c) {...原创 2019-09-12 11:35:10 · 881 阅读 · 0 评论 -
算法 --- > reduce的使用.
描述:难点:将[[‘a’,‘b’,‘c’],[‘d’,‘e’,‘f’]]输出为[“ad”, “ae”, “af”, “bd”, “be”, “bf”, “cd”, “ce”, “cf”].关键代码描述:1.假设我们已经根据输入的数字得到了 rawArr = [[‘a’,‘b’,‘c’],[‘d’,‘e’,‘f’]]2. 下一步将rawArr[0]中的每一个元素与 rawArr[1]中的...原创 2019-09-11 09:59:35 · 275 阅读 · 0 评论 -
es6 --- > Promise.catch
Promise.prototype.catch(): 是.then(null, rejection)的别名,用于指定发生错误时的回调函数p.then( (val) -> console.log('fulfilled:', val)) .catch( (err) => console.log('rejected', err));// 等同于p.then( (val) =>...转载 2019-04-25 14:29:49 · 728 阅读 · 0 评论 -
es6 --- > 使用yield*命令遍历完全二叉树
首先定义二叉树的结构:// 定义二叉树的结构function Tree(left, label, right) { this.left = left; this.label = label; this.right = right;}// 对二叉树采用中序遍历function* inorder(t) { if(t) { yield* ino...转载 2019-04-26 21:50:09 · 329 阅读 · 0 评论 -
es6 --- > 正确获取Generator函数内部的this对象&使其可以使用new
首先看2个例子function * g() { this.a = 11;}let o = g();console.log(o.a);可以看见Generator函数里面的this指向的对象取不出来.再看下一个例子:function* F() { yield this.x = 2; yield this.y = 3;}new F();可以看出Gen...转载 2019-04-27 10:04:53 · 420 阅读 · 0 评论 -
es6 --- > 对任意对象部署可遍历接口
有时候需要对对象进行遍历,下面提供一个比较方便的接口,其基本思路是,首先得到对象的所有键(key),然后将其放在yield* 后面.yield* 可以通过 for … of … 循环遍历具体实现如下:function* iterEntries (obj) { let keys = Object.keys(obj); for ( let i =0; i < keys....转载 2019-04-27 13:44:52 · 157 阅读 · 0 评论 -
es6 --- > Thunk函数的作用
首先了解一下javascript里面的Thunk函数的含义:将多参数函数,替换成一个只接受回调函数作为参数的单参数函数// 一个具体的例子// 正常版本的readFile(多参数函数)fs.readFile(filename, callback);// Thunk版本的readFile(单参数版本)var Thunk = function (fileName) { retur...转载 2019-04-27 21:08:07 · 433 阅读 · 0 评论 -
es6 --- > co模块的源码
function co(gen) { var ctx = this; return new Promise(function(resolve, reject) { if (typeof gen === 'function') gen = gen.call(ctx); if (!gen || typeof gen.next !== 'fun...转载 2019-04-28 21:00:30 · 304 阅读 · 0 评论 -
es6 --- > 解构赋值的简洁性
设想你有一个工具foo,它可以异步产生两个值(x和y):function getY(x) { return new Promise( function(resolve, reject) { setTimeout( function() { resolve( (3*x) -1 ); }, 100); });}functi...转载 2019-06-03 21:34:24 · 132 阅读 · 0 评论 -
es6 --- > 使用生成器交替执行
考虑以下场景:var a = 1;var b = 2;function foo(){ a++; b = b * a; a = b + 3;}function bar(){ b--; a = 8 + b; b = a * 2;}foo();bar();console.log(a, b); // 11 22bar();...转载 2019-06-04 10:47:19 · 188 阅读 · 0 评论 -
es6 --- > 异步迭代生成器 && Promise
看一个经典ajax回调的例子:function foo(x, y, cb) { ajax( "http://some.url.1/?x=" + x + "&y=" + y, cb );}foo(11, 31, function(err, text) { if(err) { console.error(err);...转载 2019-06-04 14:46:55 · 179 阅读 · 0 评论 -
es6 --- > promise.prototype.then的链式引用
很多时候,我们需要使用ajax请求获取数据A.并使用A中的数据A.a来进行下一步的Ajax操作…下面使用promise.prototype.then的链式引用来实现// 首先封装一个getJSON的方法.var getJSON = function (url) { var promise = new Promise(function (resolve, reject) { ...转载 2019-04-25 10:52:44 · 188 阅读 · 0 评论 -
es6 --- > 用promise对象实现Ajax操作的一个实例
首先回顾一下Ajax请求的步骤var client = new XMLHttpRequest(); client.open("GET", url);client.onreadystatechange = handler;client.responseType = "json";client.setRequestHeader("Accept", "application/json");c...转载 2019-04-25 10:13:03 · 543 阅读 · 0 评论 -
es6 --- > Reflect的静态方法
Reflect.get(target, name, receiver): 查找并返回 target对象的 name属性,若没有,返回undefinedvar myObject = { foo: 1, bar: 2, get baz() { return this.foo + this.bar; },}Reflect.get(myObject,...转载 2019-04-25 08:46:59 · 264 阅读 · 0 评论 -
es6 --- > map的使用
思路:1.使用一个map数组来保存nums1中出现的元素及其次数.2.遍历nums2.使用map的has方法来检测nums2中的元素是否出现在map中,若出现则加入返回数组(retArr),且map数组中的次数减1/** * @param {number[]} nums1 * @param {number[]} nums2 * @return {number[]} */var i...原创 2019-09-04 09:56:51 · 154 阅读 · 0 评论