- 博客(38)
- 收藏
- 关注
RSS订阅原创 vue组件从开发到发布
组件化是前端开发非常重要的一部分，从业务中解耦出来，可以提高项目的代码复用率。更重要的是我们还可以打包发布，俗话说集体的力量是伟大的，正因为有许许多多的开源贡献者，才有了现在的世界。不想造轮子的工程师，当不了合格的搬运工 。让我们来了解一下vue组件从开发到打包发布流程，并配置Github主页。本文以 vue-clock2 组件为例，欢迎star_~~ 项目地址目标框架：vue打包...
2018-10-15 21:59:59
1097
1
原创 花样形状 -- CSS
只使用一个html元素绘制图形，部分图形需要浏览器支持正方形 Square #square { width: 100px; height: 100px; background: dodgerblue; }长方形 Rectangle #rectangle...
2018-08-29 20:43:25
481
转载 16种水平居中垂直居中方法
原文链接水平居中1) 若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中. 2) 若是块级元素, 该元素设置 margin:0 auto即可. 3) 若子元素包含 float:left 属性, 为了让子元素水平居中, 则可让父元素宽度设置为fit-content,并且配合margin, 作如下设置:.parent{ wi...
2018-07-20 10:25:12
284
转载 移动端常见bug
移动端常见bug整理原文链接点击样式闪动屏蔽用户选择移动端如何清除输入框内阴影禁止文本缩放如何禁止保存或拷贝图像解决字体在移动端比例缩小后出现锯齿的问题设置input里面placeholder字体的大小audio元素和video元素在ios和andriod中无法自动播放手机拍照和上传图片输入框自动填充颜色开启硬件加速用户设置字号放大或者缩...
2018-07-18 12:42:03
306
原创 CSS3渐变效果工具
推荐一个css3渐变效果工具，觉得有帮助的可以收藏下。工具链接 CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 CSS3 定义了两种类型的渐变（gradients）： - 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向 - 径向渐变（Radial Gradients）- 由它们的中心定义使用角度使用...
2018-06-28 12:59:49
943
原创 鼠标移入移出效果 -- jQuery/Vue版
元素内遮罩层根据鼠标方向显示的效果比较常见，比如百度图片里的图片信息展示。自己动手实现jQuery插件版和Vue组件版效果。原文地址git地址实现思路根据鼠标的位置定位在元素内出现的方向根据方向动态设置遮罩层样式设置动画移动遮罩层jQuery版jQuery插件可以通过$.fn.extend方法进行拓展。html<div class=...
2018-06-25 09:46:39
999
原创 canvas烟花锦集
canvas可以实现不同动画效果，本文主要记录几种不同节日烟花效果实现。 原文链接实现一效果地址htmlcssbody { background: #000; margin: 0;}canvas { cursor: crosshair; display: block;}js// when anim
2018-01-17 16:28:21
493
原创 three.js简介 —— 3D框架
随着HTML5的普及，网页的表现能力越来越强大，浏览器提供了WebGL接口，可以通过调用对应API进行3D图形的绘制，Three.js在这些基础接口之上又做了一层封装。 原文链接特点Three.js特点： * 掩盖了3D渲染细节 * 面向对象 * 功能丰富 * 速度快 * 支持交互 * 内置文件支持 * 拓展性强 * 同时支持HTML5、2D、Canvas动画示例threejs
2017-12-26 23:52:31
3891
原创 Google LOGO的CSS Sprite
为纪念美国现代舞舞蹈家玛莎·葛兰姆诞辰，Google Doodle推出了一款极其炫酷的LOGO，整个LOGO使用CSS Sprite技术，利用一个初始图片和一张画满各个动作的拼接图片，实现了动画，而非传统的GIF动画图像。原文查看效果
2017-11-11 19:45:34
276
原创 Ionic3项目实战
记录一些使用ionic3开发项目实战经验和功能解决方案。 原文链接目录结构Ionic应用是混合式开发的单页面应用，在开发之初要考虑到页面的切换和业务流程，以页面流定义项目层级关系会导致层级过深、不直观，所以考虑以业务模块划分项目目录。
2017-11-02 23:49:24
3339
原创 万圣节动画-canvas像素点
万圣节到了，写一个小例子了解一下canvas画图方法。 原文链接canvas可以实现一些有趣的效果，动画实现。以一个简单的页面实现了解一下基础的画图方法。效果万圣节快乐
2017-10-31 02:20:25
553
原创 Canvas弹幕实现
canvas原生实现直播视频弹幕效果。 上一篇中用动态创建DOM元素实现弹幕效果，好处是可以在DOM元素上添加事件，但问题是当大量弹幕出现会造成页面卡顿，于是尝试用canvas绘制弹幕效果。
2017-10-26 00:09:20
2867
原创 JS弹幕实现
基于直播平台的流行，利用原生实现一下弹幕效果。 原文链接实现原理1、设置展示弹幕元素位置属性为relative 2、动态创建弹幕元素，位置属性设置absolute，left为展示宽度 3、随机设置弹幕元素top值 4、随机产生弹幕元素移动速率，修改left值
2017-10-23 23:36:51
365
原创 node文件重命名
在一个实际需求中，需要对一批文件(如：文本、图片)进行重命名，按照数字编号。正好借此熟悉了一下node的fs文件操作，写了一个批量修改文件名的脚本。 原文链接需求现有以下图片文件 需要批量修改文件名称，变为统一前缀名称并且自增索引，修改后效果 最简单的人力操作就是逐个文件重命名，但本着DRY(Don’t repeat yourself)原则，还是写一个node脚本搞定。研究node中要
2017-10-19 17:39:27
3658
原创 JS函数节流防抖
在前端开发中有一部分的用户行为会频繁的触发事件执行，而对于DOM操作、资源加载等耗费性能的处理，很可能导致界面卡顿，甚至浏览器的崩溃。函数节流(throttle)和函数防抖(debounce)就是为了解决类似需求应运而生的。
2017-10-18 09:50:54
266
原创 CSS布局
合理的布局是产品的基础，可以使人感觉整齐大方，提升用户体验。掌握几种常见的布局形式也是前端开发的基础，对于快速实现页面重构有很大帮助。
2017-10-15 12:46:18
248
原创 JS继承这点儿事
ECMAScript 实现继承的方式不止一种。这是因为 JavaScript 中的继承机制并不是明确规定的，而是通过模仿实现的。这意味着所有的继承细节并非完全由解释程序处理。可以根据需求决定适合的继承方式。
2017-10-14 14:23:32
175
原创 前端图片加载优化
图片是界面显示效果很重要的组成部分，图片加载关系到用户体验、应用性能，优化图片加载的常用策略为：预加载和懒加载。 原文链接预加载图片预加载可以提高用户体验，对于图片画廊和图片占比很大的网页内容尤其重要css预加载利用css的background属性可以预先加载图片，但不显示在屏幕位置内，使用这些图片时路径一致的话，浏览器会优先加载缓存内的图片进行显示，这样就达到了预加载的目的 #
2017-10-11 21:28:25
1683
原创 JS设计模式-策略模式
策略模式是指对一系列的算法定义，并将每一个算法封装起来，而且使它们还可以相互替换。策略模式让算法独立于使用它的客户而独立变化。 原文链接优点：策略模式利用组合、委托等技术和思想，可以避免很多if条件语句策略模式提供了开放-封闭原则，使代码更容易理解和拓展简单取值很多例子以绩效等级和薪资计算奖金为说明let calculateBouns = (level,salary)=>{
2017-10-11 11:54:31
123
原创 JS设计模式-代理模式
代理模式的定义：为其他对象提供一种代理以控制对这个对象的访问。在某些情况下，一个对象不适合或者不能直接引用另一个对象，而代理对象可以在客户端和目标对象之间起到中介的作用。 原文链接虚拟代理虚拟代理是把一些开销很大的对象，延迟到真正需要它的时候才去创建执行图片懒加载//图片加载let imageEle = (function(){ let node = document.creat
2017-10-11 11:53:17
165
原创 JS设计模式-观察者模式
观察者（又称发布订阅）模式定义了对象间的一种一对多的依赖关系，以便一个对象的状态发生变化时，所有依赖于它的对象都得到通知并自动刷新。 原文链接应用场景当用户在网页执行一些操作（如点击）后就需要执行一些预定的事件（如表单提交、跳转页面）优点：在发布者和订阅者间耦合性降低缺点：弱化了对象间的关系，不利于代码的维护和理解实现思路确定发布者定义发布者缓存列表，存储回调函数通知订阅者发布
2017-10-11 11:52:09
106
原创 JS设计模式-工厂模式
工厂模式是最常用的实例化对象模式，是用工厂方法代替new操作的一种模式 原文链接简单工厂模式优点：能解决多个相似的问题缺点：不能识别对象的类型function Factory(name,age,sex){ let person = {}; person.name = name; person.age = age; person.sex = sex
2017-10-11 11:50:12
150
原创 JS设计模式-单例模式
单例模式是一个用来划分命名空间并将一批属性和方法组织在一起的对象，如果它可以被实例化，那么它只能被实例化一次。 原文链接 单例模式优点划分命名空间，减少全局变量组织代码为一体，便于阅读维护 并非所有的对象字面量都是单例，比如模拟数据基本结构：let Cat = { name: 'Kitty', age: 3, run: ()=>{ console.
2017-10-11 11:48:51
115
原创 git-command
Git 常用命令清单 原文链接 github是全球最大的代码托管网站，其中管理项目的git命令更是繁多，所以在此记录一下新建项目新建一个目录，初始化为git代码库 git init 'project name'下载一个项目到当前目录下git clone 'url'增：add添加指定文件或目录到本地暂存区git add 'file'或'dir'添加目录下所有文件到本地暂存区
2017-10-11 11:45:02
130
原创 svn-command
svn是一个开放源代码的版本库，是cvs的重写版和改进版 原文链接导出下载项目svn checkout 'url'简写svn co 'url'增添加指定文件或目录svn add 'file'或'dir'添加所有目录文件svn add *创建纳入版本目录svn mkdir -m 'commit message' 'url/dir'删删除指定文件svn delete 'file'
2017-10-11 11:43:39
540
原创 flex布局
2009年，W3C 提出了一种新的方案—-flex 布局，可以简便、完整、响应式地实现各种页面布局。 原文链接布局之源垂直居中是一种常见的页面布局方式，对于行内元素可以设置text-align:center;vertical-align:center实现， 而对于块级元素通常可以通过以下设置实现.parent{ position: relative;}.child{ p
2017-10-10 19:12:55
181
原创 正则表达式知识整理
学好正则表达式很重要，下面是一些关于正则表达式的基本知识整理 原文链接正则表达式知识整理\ : 转义字符^ : 匹配字符串开始位置$ : 匹配字符串结束位置* : 匹配前面的表达式任意次+ : 匹配前面的表达式一次或多次? : 匹配前面的表达式零次或一次{n} : 匹配确定的n次，n为非负整数{n,} : 匹配至少n次，n为非负整数{n,m} : 匹配至少n次，至多m次，n和
2017-10-10 19:07:35
173
原创 JS排序算法
JS排序算法 原文链接冒泡排序 时间复杂度：O(n^2); 最快：数据是正序时 最慢：数据是反序时function bubbleSort(arr) { var len = arr.length; for (var i = 0; i < len; i++) { for (var j = 0; j < len - 1 - i; i++) { // 相
2017-10-10 19:06:06
144
原创 node-mongodb
通过node连接mongodb数据库，进行增删改查操作 原文链接node连接mongodbmongodb安装mongodb下载 mongodb配置mongodb基本命令创建数据库(如果存在则切换到数据库)use [database]例如use db_test删除数据库db.dropDatabase()插入数据db.[collection].insert({data})例如db.col
2017-10-10 19:04:38
227
原创 node-mysql
通过node连接mysql数据库，进行增删改查基础操作。 原文链接node连接mysqlmysql安装首先mysql下载 mysql解压缩版windows配置mysql基本命令修改root密码123为1234mysqladmin -u root -p 123 password 1234;显示数据库show databases; 创建数据库，例如：create database data
2017-10-10 19:02:48
339
原创 AngularJS
AngularJS 是一个 JavaScript 框架，它是一个以 JavaScript 编写的库。 原文链接Angular 简介AngularJS 把应用程序数据绑定到 HTML 元素。AngularJS 可以克隆和重复 HTML 元素。AngularJS 可以隐藏和显示 HTML 元素。AngularJS 可以在 HTML 元素”背后”添加代码。AngularJS 支持输入验
2017-10-10 12:56:57
195
原创 hexo + github 博客搭建
使用hexo搭建博客，托管于github 配置环境: node + githexo安装hexonpm install hexo -g初始化hexohexo init 或 hexo init <文件名>注：不加文件名会在当前目录下下载初始文件生成静态页面hexo generate 或 hexo g本地启动服务hexo server 或 hexo s浏览器输入http://localh
2017-10-10 12:53:08
181
原创 面试经验分享
分享一些面试遇到的问题 1、同源策略： 同源策略：浏览器安全策略，同协议、ip、端口的脚本才会执行； 跨域同源策略解决：带src属性的标签可以跨域。jsonp（json的一种使用模式）：向服务端抛出一个callback方法，数据以参数传入，再有前端执行callback获得数据。2、闭包：for(var i=0;i<10;i++){ setTimeout(function(){
2017-10-10 12:39:31
164
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人