刻刻帝丶-CSDN博客

原创 React Hook + TypeScript + styled-component 建站

技术选型Vue 与 React 的对比组件化Vue 的组件化是将 UI 结构（template）、UI 样式（style）、数据与业务逻辑（script）都放在一个 .vue 的文件中，运行前 .vue 文件会被编译成真正的组件；React 的组件化是直接通过 JS 代码的形式实现组件模板引擎Vue的视图模板使用类 HTML 的写法加上属性与指令，多数情况下要比 React 的 JSX 写法清晰且开发效率高，但是在复杂场景下，Vue 的写法有时会比 React 写起来更麻烦数据监听Vue

2021-06-08 13:53:51 1046 1

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

文章目录简介VS CodeVS Code 扩展开发起步package.jsonextension.js/tsAPI调试打包与发布打包发布在利用公司的框架进行业务开发的时候，发现频繁的 C/V 操作很影响开发体验，同时这些 C/V 的代码大多又和业务逻辑关系不大。而利用插件则可以很好的解决问题，有效提高开发效率。对此研究了下如何开发 VS Code 插件，并为团队开发发布了一款提供智能提示、自动补...

2019-04-17 20:05:40 2768

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

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

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

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

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

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

原创 JavaScript扫雷游戏mineClearance

这个扫雷游戏是当年（去年）我刚学完JavaScript后自己做的一个练习小项目不算html、css也有近1000行的代码时隔一年，现在一看当时写的仍然有不成熟的地方现在拿出来希望对一些初学的小伙伴有所帮助功能及界面如下游戏难度选择游戏时间及剩余雷数记录双击或鼠标滑轮键智能扫雷如果点击的方格上的数字和周围插旗的数量相等那么周围没有点开的方格都会被点开（不相等就会有×的动画）失败界面胜利

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

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

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

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

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

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

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

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

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

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

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

其实HTML5就是新增一些有用的API 让我们更轻松的开发从而把更多精力都放在业务逻辑上来这些API的使用也非常简单不过我的记性不太好所以还是以博客的形式记录下来（手动滑稽）今天就来写一下这个拖拽API默认拖拽说起拖放，其实最早实现拖放功能的还是IE（IE4） H5就是在IE实例的基础上指定的拖拽规范在浏览器中，是有默认拖拽的比如说图片的拖拽选中文本的拖拽链接的拖拽元

2017-03-08 21:26:50 5418

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

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

2017-03-07 21:44:05 8165

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

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

2017-03-04 21:04:34 4909

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

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

2017-03-03 20:53:43 3620

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

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

2017-03-01 19:00:31 1720

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

不得不说，HTML5确实提供了大量强大的功能特性甚至颠覆了我们之前理解的JavaScript单线程它提供了JavaScript多线程的解决方案这个新特性叫做Web Worker （在此之前没有多线程，setTimeout等本质仍然是单线程）虽然是多线程编程不过我们不用担心传统的多线程语言C++、Java等等遇到的多线程问题下面我们就来看看什么是Web Worker工作线程专

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

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

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

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

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

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

2017-02-10 23:48:21 4449

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

上一篇简单介绍了NPM包管理工具在这篇文章中我想给大家介绍一个取代使用NPM的包管理工具——Yarn 以及它与NPM之间的差异简介这个就是yarn的logo，应该是一只猫 Yarn的官网：传送门来到官网，映入眼帘的就是这么几个大字（大单词~）富强，民主，文明，和谐…… 那是不可能的~ 这行英语的意思是：极速、可靠、安全的依赖关系管理Yarn是Facebook、Google、Ex

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

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

上一篇文章已经介绍了CommonJS 这里就不赘述了CommonJS包规范包是什么呢？类比于git，是我们对于某种文件夹的叫法 git init 命令在当前文件夹中生成了隐藏文件.git，我们就把这个文件叫做仓库 npm init 命令在当前文件夹中生成了配置文件package.json，我们就把这个文件叫做包CommonJS包规范包括包结构和包描述文件包结构如果严格按照规范来说包目录

2017-02-09 17:09:19 2887

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

但在了解NodeJS模块之前首先来科普一下什么是CommonJSCommonJS规范它为JavaScript制定一套规范——希望JavaScript能在任何地方运行使其具备开发大型应用的能力出发点便是为了弥补当时JavaScript语言自身的缺点：无模块系统现在ES6弥补了这个缺点没有包管理胸痛导致js应用没有自加载和安装依赖能力无标准接口没有定义过像Web服务器一类的标准

2017-02-09 14:33:14 3786

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

最近看了第二季的《中国诗词大会》莫名对诗词产生点兴趣送给大家一首诗春宵一刻值千金，花有清香月有阴。歌管楼亭声细细，秋千院落夜沉沉。 —— (宋)苏轼《春宵》近些年前端的发展可谓日新月异给大家分享一下这篇文章，了解一下 ——文章转载自腾讯前端社区 2016是前端技术，特别是HTML5技术突飞猛进的一年，加上各类AR、VR技术的出现，一下让前端市场变得火热。这可不

2017-02-08 23:35:52 6408

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

在写Redux的时候我们就了解了如果使用Redux的话配合React是最好的 Dan Abramov为此还特意封装了一个react-redux库来提供便利概念一旦我们选择使用了这个react-redux库那么我们的组件概念就要加以区分了从现在起我们的组件分为展示组件和容器组件两种（参考了通俗易懂的阮大神博客）展示组件展示组件（presentational component）也

2017-02-05 23:32:39 7826 1

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

使用Redux做了一个简单的ToDoList待办事项列表这个例子也是源于Redux作者Dan Abramov的视频demo 还要特别说明一下我还没有使用react-redux库进行解耦也没有拆分成多个文件等等优化为了单纯的练习redux 适合初步学习redux的同学本人学疏才浅，发现可以优化的地方或者问题还请大家指正，谢谢功能样式样子就是这样的在输入框输入待办事项功能

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

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

第一次转载文章因为确实是个好消息，我觉得有必要推广一下╰(￣▽￣)╭ 自己加了点东西2017年1月18日，webpack 2.2正式版本发布！webpack2新文档传送门同一天，webpack中文社区正式成立，创建者希望通过培育社区，促进webpack以及前端工程化的发展。webpack中文社区已邀请到包括腾讯AlloyTeam leehey、搜狐视频leo、淘宝FED上坡、w3ctech

2017-02-01 00:48:18 5743

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

前几天给大家谈了谈React 不过它只是一个侧重于UI的框架只能算作是MVC中的V（View视图）而且只是DOM的一个抽象层，不是Web应用完整解决方案如果仅仅用它构建大型项目你会非常的吃力简介14年，Facebook提出Flux架构意图解决这个问题 15年，Dan Abramov将 Flux 与函数式编程相结合，创造了Redux由于简单易学就开始流行起来了 16年，Dan A

2017-01-31 17:54:12 4350 10

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

今天就是春节了，祝各位鸡年大吉，心想事成感觉这两天错过了好几个亿净往外赔钱了~马云爸爸才给了我2.08. 心塞昨晚发现博客还增加了30+访问流量没想到除夕夜还有这么多努力的人. 佩服 d===(￣▽￣*)b 好了废话不多说使用React构建可搜索产品数据表是React官网上的一个demo，它不是很难不过却能够很好的映射React的开发流程而且把我们常用的语法基本都涉及了

2017-01-28 21:06:24 2558

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

明天就是春节了预祝大家新春快乐 [ ]~(￣▽￣)~* 天天饭局搞得我是身心疲惫= = 所以更新比较慢今天想跟大家分享的就是这个大名鼎鼎的React框架简介React是这两年非常流行的框架流行到什么程度呢? 我看了一下Github上的数据React达到了5w8+的star（1w+就很了不起了）在JavaScript中star排名第4 受欢迎程度可见一斑感兴趣的同学，给大家设置

2017-01-26 23:35:26 4067

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

简介 GitHub 是一个面向开源及私有软件项目的托管平台因为它只支持 Git 作为唯一版本库格式进行托管，所以命名GitHub Git是一个开源的分布式版本控制系统可以有效、高速的处理从很小到非常大的项目版本管理它也是目前世界上最先进的分布式版本控制系统什么是版本控制系统呢？简单地说，它有以下功能备份（记录多个版本文件的功能）记录操作时间线（查看历史操作，进行版本回滚、前

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

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

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

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

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

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

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

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

WebpackWebpack是时下最流行的模块打包器它的主要任务就是将各种格式的JavaScript代码，甚至是静态文件进行分析、压缩、合并、打包，最后生成浏览器支持的代码特点：代码拆分方案：webpack可以将应用代码拆分成多个块，每个块包含一个或多个模块，块可以按需异步加载，极大提升大规模单页应用的初始加载速度智能的静态分析：webpack的智能解析器几乎可以处理任何第三方库

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

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

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

2017-01-18 00:02:21 3855 2

原创 HTML5优化Web动画——requestAnimationFrame

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

2017-01-17 17:46:08 2329

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

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

2017-01-17 14:00:52 3722

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

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

2017-01-15 22:08:04 10883

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

给大家介绍一个制作svg的工具当我们在网页上要绘制一个非常复杂的svg图片的时候可以借助于Method Draw工具进行绘制绘制完毕后可以导出为代码拷贝到我们的项目当中不需要下载，这是一个网页工具工具地址：传送门虽然这个网页bug很多不过这依然是一个不错的工具画布点击画布，在页面的右侧我们可以调整画布属性点击属性，滚动滑轮可以微调或者直接双击修改属性值工具栏左侧工具栏

2017-01-15 17:52:42 23014 5

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

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

2017-01-15 16:51:21 2747

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

SVG（Scalable Vector Graphics）可缩放矢量图形用于描述二维矢量图形的一种图形格式它不是HTML5新增的很早之前它就出现了相比于canvas，它更适合作一些小图标icon等等它的优点就是无论怎样放大，都不会模糊 canvas是js动态绘图，而svg是XML文档来描述绘图 svg-icon网址：传送门下面我们来看一下如何使用svg绘图创建svg和ca

2017-01-15 15:12:37 7129

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

今天主要介绍canvas中比较强大的功能比如将画布内容抽取为图片获取、修改画布的像素信息以及画布的命中检测首先我仍然需要创建画布<canvas id="myCanvas" width=500 height=500></canvas>图片抽取首先要明确的一点是 toDataURL()是canvas对象自身的方法而不是环境对象的这个方法会将canvas的内容抽取为一张图片（base

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

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

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

2017-01-08 22:56:34 11439

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

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

2017-01-08 21:01:57 2990