这篇博客是模仿nest.js实现一个demo
,由简单到复杂,来一步步的实现它。这里是效果预览。这是我的github,里边还有很多别的前端的demo
。
从一道面试题开始
实现一个半径
10px
的小球在500px*500px
的方块中做直线运动,初始方向随机,速度保持不变,碰撞到墙壁后反弹。
LC的博客
这篇博客是模仿nest.js实现一个demo
,由简单到复杂,来一步步的实现它。这里是效果预览。这是我的github,里边还有很多别的前端的demo
。
实现一个半径
10px
的小球在500px*500px
的方块中做直线运动,初始方向随机,速度保持不变,碰撞到墙壁后反弹。
在网上找了很多事件循环和任务队列相关的文章,有些说的不是很清楚,看完感觉还是有些晕晕乎乎,所以写这篇博客把整体思路梳理一下。如果你有什么不同的理解,或是疑惑的地方,可以留言讨论。这里是我的github,欢迎来访。
事件循环与任务队列是
JS
中比较重要的两个概念。这两个概念在ES5
和ES6
两个标准中有不同的实现。尤其在ES6
标准中,清楚的区分宏观任务队列和微观任务队列才能解释Promise
一些看似奇怪的表现。
这是一篇
windows
下用node
搭建服务器的简单教程,前端同学可以将自己的页面部署到云上,预览网页效果会比较方便。这里是我的github,欢迎来访。
在将node
服务部署到云上之前,先搭建一个本地服务器,只要本地的可以跑通,将代码直接放到云上一般是不会有什么问题的。现在我们看下开启服务的代码。
一直想做一个立体的盒子,前段时间刚好看见掘金上有位朋友发了篇关于
3d
盒子的文章,看了决定自己做一下,再写一些和盒子互动的操作。这里是最终的效果,这里是github地址,可以直接查看代码,上边还有别的有趣的demo,欢迎来访。
首先看下怎么做一个静止的盒子,用到了css3
的transform
。将盒子六个面放在一个div
里,将这个div
定位好,用transform
属性改变不同的面的朝向,再将其向前移动盒子宽度的一半,盒子就做好了。html
结构如下:
这是一个轮播图组件,你可以直接下载使用,这里是代码地址,需要传入容器的id
和图片地址,支持Internet Explorer 10+
、Firefox
、Opera
和Chrome
等现代浏览器。
首先看一下如何使用这个组件,用到了font-awesome
图标库,然后调用轮播图的css
,最后是用户自己的css
,用户必须设置容器id
以及容器宽高,否则无法正常显示。生成轮播图时给构造函数传入容器元素,以及图片地址:
偶然看到github
的404
页面,没想到github
的404
页面也是做的很有心,就试着找了下源码,打算仿一下这个效果。
这个效果看上去是3d
的,其实没有用到css3
里边的任何一个与3d
有关的属性,这个页面应该在很早之前就被做出来了,可能那时的css3
兼容性还没现在这么好。这个页面是借用图片错位,以及图片运动速度不一致,给人一种立体感。下边先看下html
结构:
js
中的this
是很容易让人觉得困惑的地方,这篇文章打算说一下this
绑定的几种情况,相信可以解决大部分关于this
的疑惑。
this
是在运行的时候绑定的,不是在编写的时候绑定的,函数调用的方式不同,就可能使this
所绑定的对象不同。
函数调用的位置对this
的指向有着很大的影响,但却不是完全取决于它。下面是几种this
的绑定规则:
在csdn上看到一位大神用20行代码就写出了一个贪吃蛇的小游戏,链接请点这里,感觉被惊艳到了,就试着读了一下这段代码,阅读过程中不断为作者写法的巧妙而叫绝,其中我发现自己对运算符优先级和一些js的技巧不是很清楚,所以看完之后决定把思路分享出来,和大家一起学习。可以在这里预览效果,你也可以在我的github上直接查看源码。
我对代码稍稍做了些修改,并添加了一些注释,方便理解。
闭包是指有权访问另一个函数作用域中的变量的函数,创建闭包的常见方式,就是在一个函数内部创建另一个函数。
之所以一个内部的函数可以访问其外部的变量,而且在其被返回或是调用时还可以访问,是因为这个内部函数的作用域链中包含外部函数的作用域。
在了解闭包之前,先要熟悉以下几点:
1. 首先要理解执行环境,执行环境定义了变量或函数有权访问的其他数据。
2. 每个执行环境都有一个与之关联的变量对象,环境中定义的所有变量和函数都保存在这个对象中。
3. 每个函数都有自己的执行环境,当执行流进入一个函数时,函数的环境就会被推入到一个环境栈中。而在函数执行之后,栈将其环境弹出,把控制权返回给之前的执行环境。
js的继承有6种方式,大致总结一下它们各自的优缺点,以及它们之间的关系。
js的继承机制不同于传统的面向对象语言,采用原型链实现继承,基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。理解原型链必须先理解原型,以下是对于原型的一些解释:
无论什么时候,只要创建了一个新函数,就会根据一组特定规则为该函数创建一个
prototype
属性。这个属性指向函数的原型对象,所有原型对象都会自动获得一个constructor
属性,这个属性是一个指向prototype
属性所在函数的指针。创建自定义的构造函数之后,其原型对象只会取得constructor
属性,其他方法都是从Object
继承来的。当调用构造函数创建一个新实例之后,该实例的内部包含一个指针,指向构造函数的原型对象,即[[Prototype]]
,在浏览器中为_proto_