前端
关注
分享
扫一扫
文章平均质量分 64
空谷足音 -จุ
活出自己的世界！(微信18710307060)
展开
-
JS 模块化
1、CommonJS产生背景：一开始大家都认为JS是辣鸡，没什么用，官方定义的API只能构建基于浏览器的应用程序，CommonJS就按耐不住 了，CommonJS API定义很多普通应用程序（主要指非浏览器的应用）使用的API，从而填补了这个空白。它的终极 目标是提供一个类似Python，Ruby和Java标准库。这样的话，开发者可以使用Commo...原创 2018-08-10 14:53:38 · 248 阅读 · 0 评论 -
canvas碰撞检测-圆
问题：实现一个鼠标移到圆内则北京变黄，鼠标离开圆的背景变回之前的形态的效果？思路： 鼠标移动的事件中，获取距离context的左边和上边的距离，ev.offsetX；ev.offsetY，他们距离圆心和差开方就可以获取到圆心的距离， 只要判断点->圆心 的距离小于等于半径即可。代码实现：<!DOCTYPE html><html> <...原创 2019-07-17 17:44:37 · 462 阅读 · 0 评论 -
canvas碰撞检测-矩形
问题：实现一个鼠标移到矩形内则边框变红，鼠标离开矩形边框变回之前的形态的效果？思路： 鼠标移动的事件中，获取距离context的左边和上边的距离，ev.offsetX；ev.offsetY，只要判断这个范围在矩形范围内即可。代码实现：<!DOCTYPE html><html> <head> <meta charset="u...原创 2019-07-17 17:33:28 · 777 阅读 · 0 评论 -
canvas-小游戏-控制人走向
实现效果：通过键盘的上下左右键控制人的走动？代码实现：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style media="screen"> body {backg...原创 2019-07-19 14:34:36 · 601 阅读 · 0 评论 -
canvas实现一个pie
1. 效果图2. 具体实现这里面会设计到数学的知识，如三角函数，弧度和角度的转换等，需要注意的是： 数学的0°从12点开始，弧度0是从3点开始。代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></tit...原创 2019-06-26 13:53:06 · 563 阅读 · 0 评论 -
一个canvas实现的画板
1.实现效果2.上代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>一个canvas实现的画板</title> <style media="screen"> ...原创 2019-06-06 15:24:49 · 547 阅读 · 0 评论 -
移动webapp适配方案--rem
1.remrem 就是根据网页根元素「html」来设置字体大小这有什么用呢？这是移动 webapp 的最佳的适配方案「目前来说」，既然说是最佳的适配方案，那肯定还有别的适配方案，先看看都有那些适配方案吧1、viewport缩放「被废弃了」 2、宽度固定两边留白「体验很差」 3、响应式布局「工作量太大，针对不同的分辨率各写一套 」2、如何适配动态的修改 font-size...原创 2019-05-22 13:48:20 · 314 阅读 · 0 评论 -
vue使用粒子效果particles.js的内存泄露问题
1.vue中使用particles.js效果：代码实例:<template lang='pug'> #c-animate .c-background__content .c-background__title img(:src="logoSrc") span...原创 2019-05-24 17:28:13 · 1459 阅读 · 1 评论 -
一名合格前端工程师的自检清单
开篇前端开发是一个非常特殊的行业，它的历史实际上不是很长，但是知识之繁杂，技术迭代速度之快是其他技术所不能比拟的。winter在他的《重学前端》中提到：到现在为止，前端工程师已经成为研发体系中的重要岗位之一。可是，与此相对的是，我发现极少或者几乎没有大学的计算机专业愿意开设前端课程，更没有系统性的教学方案出现。大部分前端工程师的知识，其实都是来自于实践和工作中零散的学习。这样是...转载 2019-05-09 10:34:36 · 262 阅读 · 0 评论 -
JS 面试之数组的几个不 low 操作
前言本文主要从应用来讲数组api的一些骚操作，如一行代码扁平化n维数组、数组去重、求数组最大值、数组求和、排序、对象和数组的转化等。上面这些应用场景你可以用一行代码实现吗？1.扁平化n维数组Array.flat(n)是ES10扁平数组的api， n表示维度， n值为 Infinity时维度为无限大。2.去重set是ES6新出来的一种一种定义不重复数组的数据类型...原创 2019-03-21 16:46:18 · 212 阅读 · 0 评论 -
写好 JS 条件语句的 5 条守则
在用 JavaScript 工作时，我们经常和条件语句打交道，这里有5条让你写出更好/干净的条件语句的建议。目录：1.多重判断时使用 Array.includes2.更少的嵌套，尽早 return3.使用默认参数和解构4.倾向于遍历对象而不是 Switch 语句5.对 所有/部分 判断使用 Array.every & Array.some6.总结1.多重判断...转载 2019-03-04 09:38:41 · 137 阅读 · 0 评论 -
CSS3之 transform和animation区别
CSS3 有3种和动画相关的属性：transform, transition, animation。其中 transform 描述了元素静态样式。而transition 和 animation 却都能实现动画效果。所以transform 常常配合后两者使用 一、transform 描述的是元素静态样式 transform属性应用于元素的2D或3D转换。这个属性允许你将...原创 2018-11-16 13:48:07 · 1560 阅读 · 0 评论 -
js 设计模式
1. 单例模式保证一个类只有一个实例，并提供一个访问它的全局访问点（调用一个类，任何时候返回的都是同一个实例）。class Singleton { constructor(name) { this.name = name this.instance = null // } getName() { return this...原创 2018-12-10 14:50:20 · 164 阅读 · 0 评论 -
完美实现一个“回到顶部”
前言在实际应用中，经常用到滚动到页面顶部或某个位置，一般简单用锚点处理或用js将document.body.scrollTop设置为0，结果是页面一闪而过滚到指定位置，不是特别友好。我们想要的效果是要有点缓冲效果。现代浏览器陆续意识到了这种需求，scrollIntoView意思是滚动到可视，css中提供了scroll-behavior属性，js有Element.scrollIntoV...原创 2018-11-19 10:46:09 · 276 阅读 · 0 评论 -
前端必须会的ES6知识
ES6简介ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。ES6新功能1、定义变量let 替代var 拥有块级作用域。2、const 定义常量：常量不可修改，如果修改会报错3、字符串连接ES6管它叫模板引擎...转载 2018-10-24 10:03:53 · 875 阅读 · 0 评论 -
JS原型、原型链及继承
1. 原型与原型链每个对象都有 __proto__ 属性，但只有函数对象才有 prototype 属性 a.字面量方式var a = {};console.log(a.__proto__); //Object {}console.log(a.__proto__ === a.constructor.prototype); //trueb.构造器方式var A = f...原创 2018-09-26 17:56:03 · 240 阅读 · 0 评论 -
D3.js的V5版本-Vue框架中使用(第十章) ---流程图
1. 效果展示2. 使用dagre-d3需要安装dagre-d3库，d3的流程图库。3. 代码示例（封装组件）主要代码讲解：//得到流程图绘制对象this.graph = new dagreD3.graphlib.Graph().setGraph({ // 控制方向 rankdir: this.direction}).setDefault...原创 2018-09-26 12:02:08 · 6845 阅读 · 1 评论 -
JS中彻底弄懂浅拷贝和深拷贝
1、浅拷贝和深拷贝的简介浅拷贝：两个对象经过拷贝后虽然具有相同的属性，但是他们都指向同一个内存空间let a = {x: 123}let b = ab.x = 234console.log(b) // {x: 234}console.log(a) // {x: 234}.操作会引起引用，同一地址的变量一起改变深拷贝：两个对象除了拷贝了一样的属性, 没有任何其他...原创 2018-08-19 14:28:24 · 795 阅读 · 0 评论 -
JavaScript 和 CSS 常用工具方法封装
JavaScript 和 CSS 常用工具方法封装因为工作中经常用到这些方法，所有便把这些方法进行了总结。JavaScript1. type 类型判断isString (o) { //是否字符串 return Object.prototype.toString.call(o).slice(8, -1) === 'String'}isNumber (o) ...原创 2019-08-01 10:35:12 · 291 阅读 · 0 评论