- 博客(32)
- 收藏
- 关注
RSS订阅转载 React + Ts 实现三子棋小游戏
在这里阅读效果更佳还记得当年和同桌在草稿纸上下三子棋的时光吗今天我们就用代码来重温一下年少（假设你有react基础，没有也行，只要你会三大框架的任意一种，上手react不难）游戏规则双方各执一子，在九宫格内一方三子连成线则游戏结束九宫格下满未有三子连线则视为平局你可以点击这里来体验最终效果，样式有点丑，请见谅准备阶段建议先全局安装typescript 和 create...
2019-09-12 14:22:00
368
转载 让你的项目使用Ts吧
推荐在这里阅读9012年都过半了，还不会用ts你就out了why ?三大框架angular2以后的版本完全是用ts开发的，vue对ts的支持也越来越好，React也有TSX组件还在犹豫什么本文不涉及框架内容，因为框架的cli已经帮你搭好了ts环境。。。本文只教你如何在一个demo里搭建Ts环境，好了，我们开始吧第一步，安装全局安装typescriptnpm in...
2019-08-29 16:21:00
712
转载 ES6 入门系列 ArrayBuffer
由来推荐在这里阅读js操作二进制数据三兄弟ArrayBuffer对象， TypeArray视图和DataView视图它们都以数组的语法处理二进制数据，所以统称为二进制数组::: tip二进制数组并不是真正的数组，而是类似数组的对象:::设计的目的与WebGL项目有关，WebGL是浏览器和显卡之间的通信接口，利用二进制数据通信可以大大提升脚本性能概念ArrayBu...
2019-08-23 17:23:00
217
转载 怎么把使用vuepress搭建的博客部署到Github Pages
推荐在这里阅读效果更佳背景网上搜了很多教程，包括官网的教程,但是还是费了一番功夫，如果你使用自动化部署脚本部署不成功的话，可以参考我的这个笨方法这是部署后的效果前提我假设你本地运行OK, 已经准备好要部署了第一步你的 vuepress 项目是否已经在github上的仓库下如果是，请跳到第二步如果不是，想在GitHub新建一个仓库，如图所示：## 小坑仓库名字要和...
2019-08-19 14:00:00
425
转载 es7之修饰器
什么是修饰器修饰器其实就是一个普通的函数，用来修饰类以及类的方法。比如:@testclass DecoratorTest {}function test(target) { target.testable = true;}target 参数就是它修饰的类 这就表示给DecoratorTest这个类加上了一个静态属性 testable,等价于:class De...
2019-08-17 20:04:00
107
转载 解决 bash: vue command not found
背景 ： win10 使用 yarn 全局 安装 vue/cli 后 yarn global add @vue/cli 提示安装成功 使用vue create 提示bash: vue command not found经过一番搜索。。。。。。原来是 环境变量的问题首先找到yarn 全局安装vue的路径 ： 应该和我的...
2019-08-09 16:39:00
7124
转载 手写instanceof (详解原型链) 和 实现绑定解绑和派发的事件类
A instanceof B 是判断 A 是否继承自B，是返回true, 否返回false再精确点就是判断B 是否 再 A 的 原型链上，什么是原型链，举个例子：我们定义三个对象：const grandFather = { name: 'liu', age: 80},father = { age: 50}...
2019-06-19 17:03:00
357
转载 博客园特效
要定制你自己的博客园大体上分两种方式 一种是不需要js权限的：比如在页脚HTML，页首HTML里加点结构，给你的博客加上一个回到顶部的导航：在页脚HTML里复制粘贴如下代码 <div class="scrollBtn" id="scrollBtn"> <ul class="clearfix"><li class...
2019-06-18 17:52:00
380
转载 ES6入门系列 ----- 使用Proxy 实现观察者模式
观察者模式是指函数自动观察数据对象的变化， 一旦对象有变化，函数就会自动执行。它定义了一种一对多的依赖关系，我们用Proxy来实现一个简单的观察者模式（PS: 初学我们认为观察者模式 == 发布订阅模式， 其实它们有点不同）。 例子：const callbacks = new Set();const observe = fn => callback...
2019-06-17 13:50:00
99
转载 ES6入门系列 ----- Reflect
Reflect 是ES6 为了操作对象而提供的新的API, 目的是：将Object 上一些明显属于语言内部的方法，比如 Object.defineProperty 放到 Reflect对象上现阶段某些方法同时在Object , Reflect 上部署， 未来的新方法将只在Reflect对象上部署，也就是说从Reflect对象上可以获得语言内部的方法。...
2019-06-14 16:24:00
126
转载 ES6入门系列 ----- 对象的遍历
工作中遍历对象是家常便饭了，遍历数组的方法五花八门， 然而很多小伙伴是不是和我之前一样只会用for ...in....来遍历对象呢， 今天给大家介绍五种遍历对象属性的方法：1， 最常用的for in 它可以便利对象本身及其继承自原型上的可枚举属性，过滤掉原型上的属性可以用hasOwnProperty(属性名)来判断是否是本身的属性，对象的每一个属性都...
2019-06-12 20:22:00
144
转载 ES6 入门系列 （三） 尾递归
递归我们不陌生， 那什么是尾递归呢？ 为什么要用尾递归呢？ 尾递归怎么用呢？ 带着这三个问题我们来了解它，我们知道递归非常耗费内存，一不小心就会发生‘栈溢出’， 相信你一定遇到过这个错误： stack overflow，尾递归就是用来优化递归的这个问题的。 尾递归的定义： 在函数的最后一步返回自身，也就是显示地return自身就称为尾递归。对于尾...
2019-06-11 19:58:00
119
转载 ES6入门系列二（数值的扩展）
ES6 在 Number对象上新增了很多方法1 . Number.isFinite()判断是否为有限的数字 和全局的isFinite() 方法的区别是 isFinite('1') === true ; Number.isFinite('1') === false 全局的isFinite()先调用Number() 方法 把 变量 转化为数字再进行...
2019-05-24 20:31:00
81
转载 ES6 入门系列 （一）ES6的前世今生
要学好javascript , ECMAScript标准比什么都强， ESMAScript标准已经用最严谨的语言和最完美的角度展现了语言的实质和特性。理解语言的本质后，你已经从沙堆里挑出了珍珠，能经得起时光的磨砺。 有很多问题在网络上被包装了太多次，解释的千奇百怪，但用规范的语言来描述竟是如此简单。 什么是ES6， 刚开始学ES6的时候我以为它就是ECMAScr...
2019-05-20 17:01:00
159
转载 前端从一只小白到工作半年的心路历程
提笔又不知从何说起， 毕竟头发还茂盛，离大神就差一头秀发的距离，所以此文不讲技术， 只是单纯的总结一下我是怎么入坑的。本人前端打杂的，不喜勿喷。 17年7月我毕业了， 可我并不知道未来在何方， 我该做什么，大学四年给我的只是一纸证书由于家在南方， 所以就选择了深圳这个繁华又孤独的城市， 搜索和专业有关的工作，机械地海投简历，焦虑， 想做出改变...
2019-05-13 21:09:00
924
转载 ES6迭代器
说起迭代器， 那就要先了解迭代模式迭代模式： 提供一种方法可以顺序获得聚合对象中的各个元素， 是一种最简单， 也是最常见的设计模式，它可以让用户通过特定的接口寻访集合中的每一个元素 而不用了解底层的实现。迭代器 ： 依照迭代模式的思想而实现， 分为内部迭代器和外部迭代器，内部迭代器： 本身是函数， 该函数内部定义好迭代规则，完全接手整个迭...
2019-05-07 20:37:00
113
转载 性能优化之惰性函数
我们正常封装一个兼容的绑定事件函数会这样写：function addEvent(dom, type, handle) { if (dom.addEventListener) { dom.addEventListener(type, handle, false) } else { dom.attachEvent('on' + ...
2019-05-05 20:28:00
101
转载 自己写一个Promise
参考Promise 的 官方规范https://promisesaplus.com/Promise 其实就是一个状态机它只有两种状态变化 pending =》 fulfilled pending =》 rejected并且状态一旦发生变化后就不会再改变我们用es5来实现下先写个架子， 并测试下：function m...
2019-04-30 20:31:00
99
转载 js 的 骚操作
单行的js 代码虽然简洁，但却不易维护，甚至难以理解，但这却并不影响前端童鞋们编写简洁代码的热情，一 ， 生成随机ID // 生成长度为10的随机字母数字字符串Math.random().toString(36).substring(2);解析 ：1 , Math.random() 生成一个 0 到 1 的 随机数 =》 numb...
2019-04-29 17:53:00
308
转载 原生js实现 五子棋
先初始化棋盘HTML:<!--棋盘--><div class="grid"></div>CSS：/*棋盘*/.grid{ position: relative; width: 762px; height: 762px; background-image: url('./image/timg.jpg');...
2019-04-26 18:05:00
212
转载 函数防抖与节流你知多少
它们都是为了解决事件的频繁触发而出现的不同之处：防抖： 当事件频繁触发时不执行事件处理函数， 只有空闲下来的时候才会执行事件处理函数， （比如一个搜素场景， 当用户正在输入的时候不触发搜索 只有当用户停止输入时才发起搜索请求）。节流： 当事件频繁触发时规定一定时间内只触发一次事件处理函数， 比如 规定3秒内 ， 无论事件触发了多少次， ...
2019-04-26 11:36:00
56
转载 CSS3 之 童年的纸飞机
今天我们来折纸飞机（可以飞出去的那种哦）基本全用css来实现，只有一小部分的js首先看一下飞机的构造灰色区域为可折叠区域白色区域为机身三角形由border画出来的再经过各种平移翻转变成上图写之前再补充个知识点：我们颜色的设置不用rgba，用hsl() h: 色调 0- 360 0(或360)表示红色，120表示绿色，240表示蓝色 s ...
2019-04-24 17:25:00
212
转载 JS 图片放大镜
今天练习一个小demo, 从本地读取图片，然后实现类似淘宝放大镜的效果，再加两个需求1 .可以调节缩放比例，默认放大两倍2 . 图片宽高自适应， 不固定宽高话不多说先看效果：原理：1， 右侧放大区域的大小等于左侧半透明滑块大小乘以缩放倍数 2， 右侧放大区域图片的原始尺寸要和 左侧图片一样，不能随右侧的宽高变化 3， ...
2019-04-23 16:09:00
107
转载 css 滚动视差 之 水波纹效果
核心属性： background-attachment这个属性就牛逼了， 它可以定义背景图片是相对视口固定，还是随着视口滚动， 加上这个属性网页瞬间就从屌丝变成高大上。我们来看个例子：html:<div class="attach view"></div><div class="text view">I WANT FLY...
2019-04-19 19:05:00
559
转载 手写事件代理函数 （Delegated function）
‘手写 ’ 这个词 ，面试是不是听过无数遍呢 !今天我们来手写一个这样的事件委托函数 =》function（ parent， selector， type , handle) {}你需要传递的参数分别是：parent： 事件绑定的父级selector： 选择器，type: 事件类型handle： 事件处理函数写之前 先了解一下事件委托的概念：...
2019-04-16 18:31:00
364
转载 CSS 圣杯布局 / 双飞翼布局的实现
工作的越久，有些基础知识我们可能就逐渐淡忘了，今天我们来回顾一下css的圣杯布局和双飞翼布局，这两个名词你可能不熟， 那三栏布局你肯定就非常熟悉了，就是两边定宽， 中间自适应 的 布局1 ， 圣杯布局<!--三栏布局--><header>三栏布局</header><div class="container">...
2019-04-15 11:58:00
142
转载 js的异步加载你真的懂吗
面试高频之js的异步加载讲这个问题之前， 我们从另一个面试高频问题来切入，我们的web页面从开始解析到页面渲染完成都经历了什么 ？1 ， 创建document对象， 开始解析页面， 此时document.readyState = 'loading'2 , 遇到link标签引入的css文件， 创建线程并异步加载css，继续解析文档3...
2019-04-11 17:45:00
116
转载 Promise （1） 如何使用Promise
Promise 也是面试高频问题， 今天我们来看看Promise是什么， 能做什么， 怎么用， 下一期我们自己来模拟一个myPromise1 Promise 是什么我们要学会自己给自己提问， 才能加深我们的理解， 首先 Promise 是一个类， 类（class）是ES6 一个新的概念 ，和ES5的构造函数相似，但不完全一样，类必须通过 new 操作符 调用 ;...
2019-04-08 20:16:00
187
转载 数据处理之深浅拷贝完全剖析
大家好 !!! 又到了讨论代码的欢乐时光深浅拷贝作为面试必考的一个知识点，我们要把它按在地上摩擦首先 ， 我们要了解一个前提，原始值 如 number , string, boolean , null, undefined是存在栈内存中引用值如 object 是存在堆内存中，为什么 原始值存在栈内存中呢 ？ 因为原始类型占据的空间是固定的，...
2019-03-29 17:31:00
121
转载 数据处理之 数组扁平化 （数组降维）顺带总结一下数组的方法
Hello, 大噶好， 小葵花妈妈课堂开课啦。。。。。。我们日常工作中拿到的数据不可能是只有一维的平面数组， 百分之99.99 是数组里嵌套数组再套数组的n维数组 .............................这种让人想问候它xx的多维数组我们怎么把它变成一维数组， 也就是只有一个中括号 的数组 呢 ？接下来我们 一步一步来实现它 ， Follow me...
2019-03-27 20:04:00
261
转载 H5 新特性之 fileReader 实现本地图片视频资源的预览
大家好 !! 又见面了， 今天我们来搞一搞 H5的新增API FileReader 真是一个超级超级方便的API呢！！！很多场景都可以使用..........我们先不赘述MDN文档里的内容， 我们从 1 到 0， 从 一个 小Demo 入手 开始 了解 它；请开始你的表演：是不是简单又炫酷， 我们从头开始来看， 界面分三个部分...
2019-03-26 18:17:00
882
转载 自己动手用原生实现 bind/call/apply
大家好！！！注册一年多的第一篇博客。自我介绍： 本人非计算机专业出身，转行进入前端半年时间，写的东西可能观赏性不强，一起进步吧道友们。。。接下来的一段时间， 我都会不定期整理自己理解的js知识点， 欢迎各路道友吐槽。进入正题...... （针对新手，老司机不要嘲笑我）首先，bind/call/apply 这改变this指向的三兄弟我们都很熟悉了， 还有其他...
2019-03-25 19:29:00
126
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人