自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

尐轩web前端网络日志

—— 丛培森 Payen S.Tsung ——There's no place like 127. 0. 0. 1

原创 VS Code 插件的开发及发布指南

文章目录简介VS CodeVS Code 扩展开发起步package.jsonextension.js/tsAPI调试打包与发布打包发布 在利用公司的框架进行业务开发的时候,发现频繁的 C/V 操作很影响开发体验,同时这些 C/V 的代码大多又和业务逻辑关系不大。而利用插件则可以很好的解决问题,有...

2019-04-17 20:05:40 1117 0

原创 六种方法实现JavaScript数组去重

JavaScript数组去重问题是面试(或笔试)中可能被问到的题 如果只能说出一两种方法的话,就显得我们很low 所以这里我总结了数组去重的六种方法供大家参考直接遍历首先先来一种简单粗暴的方法 也是很容易就可以想到的办法 声明一个新数组 直接遍历

2017-06-15 12:26:26 5996 1

原创 JavaScript实现简单的双向数据绑定(Ember、Angular、Vue)

什么是双向数据绑定呢? 简单的说 就是UI视图与数据绑定在了一块 也就是数据和视图是同步改变的 双向数据绑定最常见的应用场景就是表单 (应用场景还是很有限的)现在我们要实现这样一个简单的数据绑定 输入栏中输入字符 和它绑定的节点内容同步改变

2017-06-13 16:14:39 8972 2

原创 JavaScript扫雷游戏mineClearance

这个扫雷游戏是当年(去年)我刚学完JavaScript后自己做的一个练习小项目 不算html、css也有近1000行的代码 时隔一年,现在一看当时写的仍然有不成熟的地方现在拿出来希望对一些初学的小伙伴有所帮助功能及界面如下游戏难度选择游戏时间及剩余雷数记录双击或鼠标滑轮键智能扫雷如果点击的方格...

2017-05-08 22:54:56 2572 9

原创 Node.js轻量级Web框架Express4.x使用指南

Express是一个轻量级的Web框架,简单、灵活 也是目前最流行的基于Nodejs的Web框架 通过它我们可以快速搭建功能完整的网站Express现在是4.x版本,更新很快 并且不兼容旧版本 导致现在市面上很多优秀的Node书籍过时 这篇文章是一篇入门级的Express使用,需要一定N...

2017-05-02 16:02:14 5027 1

原创 Node.js使用MongoDB3.4+Access control is not enabled for the database解决方案

今天使用MongoDB时遇到了一些问题出现这个警告的原因是新版本的MongDB为了让我们创建一个安全的数据库 必须要进行验证解决方案如下:创建管理员use admin db.createUser( { user: "myUserAdmin", pwd: &...

2017-04-28 22:48:41 22101 9

原创 HTML5+JavaScript-ES6移动端2D飞行射击游戏

前一段时间用JavaScript写了一个飞机游戏的小项目作为练习 js不到2000行 借用了曾经微信飞机大战的资源 画风大概是这个样子的 给大家简单介绍一下 感兴趣的同学可以去我的github上查看或下载源码github传送门: https://github.com/paysonTsun...

2017-04-19 16:31:10 3407 5

原创 HTML5元素拖拽drag与拖放drop相关API

其实HTML5就是新增一些有用的API 让我们更轻松的开发 从而把更多精力都放在业务逻辑上来 这些API的使用也非常简单 不过我的记性不太好 所以还是以博客的形式记录下来(手动滑稽) 今天就来写一下这个拖拽API默认拖拽说起拖放,其实最早实现拖放功能的还是IE(IE4) H5就是在I...

2017-03-08 21:26:50 4882 0

原创 HTML5历史状态管理history API-pushState/replaceState与popstate事件

AJAX技术对我们前端产生了巨大影响 可以让我们的页面无刷新操作减少网络请求 但是它也产生了一些问题 不能够使用浏览器的前进与后退 (后退是浏览器非常常用的按钮)很久很久以前,Gmail借助iframe解决了这个问题 但现在,HTML5提供了超级简单的APIpushState与onpop...

2017-03-07 21:44:05 6409 0

原创 HTML5无插件多媒体Media——音频audio与视频video

音频与视频现在已经变得越来越流行 各个网站为了保证跨浏览器的兼容性 仍然选择使用flash (源码截自优酷)多媒体标签使用HTML5增加了audio与video两个多媒体标签 兼容性还不错,低版本IE不支持 可以使我们不需要使用任何浏览器插件就

2017-03-04 21:04:34 3682 0

原创 HTML5文件读取FileReader及文件读取模块的封装

FileReader是File-API重要的组成部分 用于读取本地文件FileReader创建要想使用读取文件功能 同样需要实例化FileReader对象var fr = new FileReader();它为我们提供了一些接口方法和事件方法通过实例对象可以调用5个方法 其中4个指定文件读取...

2017-03-03 20:53:43 2577 0

原创 HTML5地理位置定位Geolocation-API及Haversine地理空间距离算法

HTML5提供了Geolocation-API允许我们获取地理位置坐标 不过只有针对特定的需求才会用到 比如说地图应用一般还是很少用到的Geolocation-API使用的方法也很简单 API都存在于navigator.geolocation对象的原型上核心的方法就是getCurrentPo...

2017-03-01 19:00:31 1369 0

原创 HTML5多线程JavaScript解决方案Web Worker——专用Worker和共享Worker

不得不说,HTML5确实提供了大量强大的功能特性 甚至颠覆了我们之前理解的JavaScript单线程 它提供了JavaScript多线程的解决方案 这个新特性叫做Web Worker (在此之前没有多线程,setTimeout等本质仍然是单线程) 虽然是多线程编程 不过我们不用担心传统...

2017-02-28 21:10:22 7777 2

原创 利用策略模式与装饰模式扩展JavaScript表单验证功能

昨天为了练习策略模式和装饰模式 就写了一个表单验证的小例子 敲得过程中还是遇到了一些问题的 下面就给大家分享一下

2017-02-14 13:05:11 2235 2

原创 浅析JavaScript设计模式——装饰者模式

装饰者模式 在不改变对象自身的基础上,在程序运行期间给对象动态地添加一些额外职责 在传统面向对象语言中,为对象添加功能常使用继承 但是继承有很多缺点: 超类子类强耦合,超类改变导致子类改变 超类内部细节对子类可见,破坏了封装性 完成功能复用

2017-02-10 23:48:21 3860 0

原创 一个比NPM更快更安全可靠的JavaScript包管理工具——Yarn

上一篇简单介绍了NPM包管理工具 在这篇文章中 我想给大家介绍一个取代使用NPM的包管理工具——Yarn 以及它与NPM之间的差异简介这个就是yarn的logo,应该是一只猫 Yarn的官网:传送门 来到官网,映入眼帘的就是这么几个大字(大单词~)富强,民主,文明,和谐…… 那是不可能...

2017-02-09 22:36:17 2873 5

原创 CommonJS包规范与NodeJS的包管理工具NPM

上一篇文章已经介绍了CommonJS 这里就不赘述了CommonJS包规范包是什么呢? 类比于git,是我们对于某种文件夹的叫法 git init 命令在当前文件夹中生成了隐藏文件.git,我们就把这个文件叫做仓库 npm init 命令在当前文件夹中生成了配置文件package.json...

2017-02-09 17:09:19 2116 0

原创 CommonJS模块规范与NodeJS的模块系统底层原理

但在了解NodeJS模块之前 首先来科普一下什么是CommonJSCommonJS规范它为JavaScript制定一套规范——希望JavaScript能在任何地方运行 使其具备开发大型应用的能力出发点便是为了弥补当时JavaScript语言自身的缺点: 无模块系统 现在ES6弥补了这个缺点 ...

2017-02-09 14:33:14 3097 0

转载 2017年前端领域可能迎来的6个发展趋势

最近看了第二季的《中国诗词大会》 莫名对诗词产生点兴趣 送给大家一首诗 春宵一刻值千金,花有清香月有阴。 歌管楼亭声细细,秋千院落夜沉沉。 —— (宋)苏轼《春宵》 近些年前端的发展可谓日新月异 给大家分享一下这篇文章,了解一下 ——文章转载自腾讯前端社区 2016是前...

2017-02-08 23:35:52 5964 0

原创 React×Redux——react-redux库connect()方法与Provider组件

在写Redux的时候我们就了解了 如果使用Redux的话配合React是最好的 Dan Abramov为此还特意封装了一个react-redux库来提供便利概念一旦我们选择使用了这个react-redux库 那么我们的组件概念就要加以区分了 从现在起我们的组件分为展示组件和容器组件两种 ...

2017-02-05 23:32:39 5256 0

原创 React+Redux实现简单的待办事项列表ToDoList

使用Redux做了一个简单的ToDoList待办事项列表 这个例子也是源于Redux作者Dan Abramov的视频demo 还要特别说明一下 我还没有使用react-redux库进行解耦 也没有拆分成多个文件等等优化 为了单纯的练习redux 适合初步学习redux的同学 本人学疏...

2017-02-05 14:41:52 4417 1

转载 Webpack中文社区正式成立-多位前端大牛参与解答开发难题

第一次转载文章 因为确实是个好消息,我觉得有必要推广一下╰( ̄▽ ̄)╭ 自己加了点东西2017年1月18日,webpack 2.2正式版本发布!webpack2新文档传送门 同一天,webpack中文社区正式成立,创建者希望通过培育社区,促进webpack以及前端工程化的发展。webpack...

2017-02-01 00:48:18 5050 0

原创 应用数据流状态管理框架Redux简介、设计思想、核心概念及工作流

前几天给大家谈了谈React 不过它只是一个侧重于UI的框架 只能算作是MVC中的V(View视图) 而且只是DOM的一个抽象层,不是Web应用完整解决方案 如果仅仅用它构建大型项目 你会非常的吃力简介14年,Facebook提出Flux架构意图解决这个问题 15年,Dan Abram...

2017-01-31 17:54:12 3887 9

原创 React组件开发流程——利用React构建简单的可检索产品数据表

今天就是春节了,祝各位鸡年大吉,心想事成 感觉这两天错过了好几个亿 净往外赔钱了~马云爸爸才给了我2.08. 心塞 昨晚发现博客还增加了30+访问流量 没想到除夕夜还有这么多努力的人. 佩服 d===( ̄▽ ̄*)b 好了废话不多说使用React构建可搜索产品数据表 是React官网上的...

2017-01-28 21:06:24 2036 0

原创 客户端高性能组件化框架React简介、特点、环境搭建及常用语法

明天就是春节了 预祝大家新春快乐 [ ]~( ̄▽ ̄)~* 天天饭局搞得我是身心疲惫= = 所以更新比较慢 今天想跟大家分享的就是这个大名鼎鼎的React框架简介React是这两年非常流行的框架 流行到什么程度呢? 我看了一下Github上的数据React达到了5w8+的star(1w+...

2017-01-26 23:35:26 3111 0

原创 分布式版本控制系统Git与项目托管平台Github相关概念、操作方法、开发流程与常用命令

简介 GitHub 是一个面向开源及私有软件项目的托管平台 因为它只支持 Git 作为唯一版本库格式进行托管,所以命名GitHub Git是一个开源的分布式版本控制系统 可以有效、高速的处理从很小到非常大的项目版本管理 它也是目前世界上最先进的分布式版本控制系统什么是版本控制系统呢? ...

2017-01-22 23:00:19 9659 4

原创 移动端Touch事件与H5-Canvas像素点检测实现刮刮乐

最近又被支付宝的集福字刷屏了 我到底还是没看到敬业福ค(TㅅT) 心塞 今天给大家带来移动端的刮刮乐实现 效果就是这样的手滑动触发刮卡 当刮卡面积达到70%以上,自动刮开全部灰色图层 代码不是很多 全部代码就这些<!DOCTYPE html> <html lang=&...

2017-01-19 21:47:53 6007 5

原创 CSS预处理语言Less常用语法

Less是一种动态样式语言,属于css预处理语言的一种 它使用类似CSS的语法为CSS的赋予了动态的特性 如变量,继承,运算,函数等,更方便css的编写和维护实现css模块化less 可以在多种语言,环境中使用,包括浏览器端、桌面客户端、服务端 其实它非常简单 要想使用less我们需要下载...

2017-01-19 16:27:09 2365 1

原创 前端自动化构建工具Webpack1.x开发模式使用指南

WebpackWebpack是时下最流行的模块打包器 它的主要任务就是将各种格式的JavaScript代码,甚至是静态文件 进行分析、压缩、合并、打包,最后生成浏览器支持的代码 特点: 代码拆分方案:webpack可以将应用代码拆分成多个块,每个块包含一个或多个模块,块可以按需异步加载,...

2017-01-18 20:01:49 7582 6

原创 HTML5客户端数据存储Web Storage——localStorage与sessionStorage

HTML5提供了在客户端存储数据的新方法Web Storage 类似于HTML4中的Cookie 不过它要强大的多Cookie先来简单复习一下之前使用的cookiecookie存储数据到用户设备上,存储的数据量较小只有4KB 可以通过navigator.cookieEnabled检测是否开启...

2017-01-18 00:02:21 3140 1

原创 HTML5优化Web动画——requestAnimationFrame

在页面中实现动画,我们有很多选择 可以使用CSS3的transition CSS3中的animation配合keyframes规则 SVG中也可以使用SMIL-animation 最原始的方法就是我们利用JavaScript的setTimeout/setInterval来实现动画 不过现...

2017-01-17 17:46:08 1987 0

原创 SVG(可缩放矢量图形)图片添加、高斯模糊、渐变与g标签

今天主要谈一下SVG的特殊效果 其实和canvas都是差不多的,只不过是利用XML标签 用的不是很多但是以防以后万一用到还是整理一下图片添加svg中也可以添加图片<svg width=300 height=300> <image xlink:href="./...

2017-01-17 14:00:52 2241 0

原创 SVG(可缩放矢量图形)虚线相关属性与线条动画原理:一条会动的线

SVG可以实现非常酷炫的线条动画甚至是这样的网页 传送门我们可以先来实现一个简单的SVG线条动画 像这样不要着急,在此之前我们需要先了解一些属性值虚线属性虚线属性包括两个stroke-dasharray与stroke-dashoffsetstroke-dasharray大家来看下面的例子 <...

2017-01-15 22:08:04 6882 0

原创 SVG(可缩放矢量图形)绘制工具Method Draw

给大家介绍一个制作svg的工具 当我们在网页上要绘制一个非常复杂的svg图片的时候 可以借助于Method Draw工具进行绘制 绘制完毕后可以导出为代码拷贝到我们的项目当中 不需要下载,这是一个网页工具 工具地址:传送门 虽然这个网页bug很多 不过这依然是一个不错的工具画布点击画...

2017-01-15 17:52:42 15293 3

原创 SVG(可缩放矢量图形)视区盒属性viewbox与preserveAspectRatio

SVG除了width和height这两个基本的宽高设置属性 还有两个更高级的属性 viewbox与preserveAspectRatio视区盒viewbox是svg标签上的属性 看下面的例子<svg width=300 height=300> <rect x=10 ...

2017-01-15 16:51:21 1878 0

原创 SVG(可缩放矢量图形)基本图形绘制方法与path路径命令

SVG(Scalable Vector Graphics)可缩放矢量图形 用于描述二维矢量图形的一种图形格式 它不是HTML5新增的 很早之前它就出现了 相比于canvas,它更适合作一些小图标icon等等 它的优点就是无论怎样放大,都不会模糊 canvas是js动态绘图,而svg是X...

2017-01-15 15:12:37 4796 0

原创 HTML5画布Canvas图片抽取、像素信息获取、命中检测

今天主要介绍canvas中比较强大的功能 比如将画布内容抽取为图片 获取、修改画布的像素信息 以及画布的命中检测 首先我仍然需要创建画布<canvas id="myCanvas" width=500 height=500></canvas>图片抽...

2017-01-14 20:30:46 20065 6

原创 HTML5画布Canvas文本填充、线段属性、裁剪、透明度与像素合并方式

CSS3中的很多都可以类比与我们canvas的一些属性 canvas中“画笔”环境对象的很多属性都可以类比CSS3中的属性 我们不仅仅可以绘制图形,还可以向画布中添加文字文字填充同样先获取元素对象与环境对象<canvas id="myCanvas" width=500...

2017-01-08 22:56:34 8161 0

原创 HTML5画布Canvas坐标轴转换、图案填充、渐变与阴影

上一篇文章我们了解了一些canvas基本图形绘制 下面我们再来看一些相关操作坐标轴变换我们画布中默认的坐标轴与浏览器坐标轴相同 x正半轴朝右 y正半轴朝下 但是我们可以手动设置画布坐标轴变换 首先还是会获取“画布”和“画笔”<canvas id="myCanvas&quo...

2017-01-08 21:01:57 2357 0

原创 HTML5画布Canvas线段、矩形、弧形及贝塞尔曲线等简单图形绘制

HTML5中最有意思的就是这个canvas了 通过它我们可以画自己想要的图形 它也是十分重要的技术 应用于游戏、图表等等 或者绘制各种酷炫的东西 这里给大家分享一个网站 传送门 里面都是canvas技术绘制的图形画布创建canvas是html的一个标签 是一个图形容器 首先要在ht...

2017-01-08 14:38:11 6860 0

提示
确定要删除当前文章?
取消 删除