风左山心-优快云博客

原创 gulp教程，只要你不是傻子就能学会的gulp！！！搭建生产环境和开发环境！全程图解！绝对最详细！

gulp新手指南文章中如果出现任何问题，请不吝提出大家既然搜到gulp，想必是享用到gulp，我就不说gulp是什么东西，有些什么作用之类的废话了，直接教大家怎么使用首先你得有个下个node，利用node的npm下载gulp，或者用bower，然后手上有个小项目，好了，开始开干吧。有git的用git,没git的用cmd,现在我用cmd安装gulp（1）打开命令行工具，查看是否安装node，输入n

2016-09-04 02:36:04 958

原创走进Canvas---入门级

本文没有太多理论知识,大部分都是通过案例来讲解,因为我对canvas并未达到熟练的程度,只能做些基础讲解.需求:使用canvas绘制一个三角形思路:1.创建canvas标签,设置样式2.获取上下文,绘制2d图形3.绘制路径4.填充路径<body>

2016-05-19 01:42:15 793

原创 JavaScript继承原型继承组合式继承

什么是继承继承就是凡是自己没有的东西拿过来自己用,让它成为自己的就是继承在js里有两种继承模型>1.原型继承>2.组合继承原型继承如果有一个对象有某一个行为(属性或方法),将这个行为加到原型对象中,那么这个对象就继承自原型对象,获得了该行为那么如何使用原型对象呢?>1.利用对象的动态特性添加成员>2.利用覆盖原型对象>2.利用组合式继承添加原型成员>1.利用对象的动态特性添加成员var o =

2016-04-09 01:33:10 525

原创沙箱模式理解和运用

沙箱模式又称为沙盒模式或者隔离模式那么什么是沙箱模式呢?将代码与外界隔离,不管你在里面做什么,都不会污染到全局变量.沙箱模式的语法结构:(function () {})();沙箱的应用:1.模拟块级作用域2.所有的封装的框架都是在沙箱模式中完成思考?1.沙箱模式是一种自调用函数那么为什么一定要是自调用函数?如果需要让代码既能调用又要隔离,就需要一个函数的调用结构如果不用自调用函数,会造成全局变

2016-04-07 23:36:29 5504

原创函数的四种调用模式函数模式构造器模式方法模式上下文模式

函数的四种调用模式: 1.函数模式 2.方法模式 3.构造器模式 4.上下文模式先来说说函数模式和方法模式以及构造器模式:函数调用模式:定义一个函数,如果单独的将其调用,不将其与任何东西关联就是函数调用模式function F(){}F();方法模式定义一个函数,如果将函数赋值给一个对象的成员,那么利用对象来调用,那么就是方法模式function F(){}var o

2016-04-07 23:23:48 680

原创超级解说通俗易懂原型与原型链,proto和prototype以及Object

很多书上对原型描述的不是很清楚,特别是proto和prototype让很多人分不清,现在我在这里做下归纳以及区分,看懂这篇文章具有具备一定的关于原型的知识,不适合初学者,这篇文章花了我很大的心血,还没有全部写完,是我的各种总结和归纳,非常重要,之后会持续更新,如果有不对的地方还请指正,有疑问尽管提出来,写得很晚了,现在是晚上3点,明天还要起床搬砖,今天就先这样吧~一:对象的原型基本概念凡是有函

2016-04-05 03:19:18 974

原创闭包的应用斐波拉契数列为例详细讲解

(今天写到这里已经很晚了,写博客是件非常辛苦的事情,如果有写的不好的地方值及时指正,本来是很想放弃的,懒得写,因为真的没啥时间,但是因为男神的鼓励,所以忍着痛继续写了,当初写博客也是他鼓励的,感谢一下~~~)先解释下什么是闭包闭包是一个受到保护的变量空间. 从字面意思来看就是封闭和包裹为什么说函数是闭包?在函数中定义的变量,在函数外部无法访问,因此这个函数就构成闭包特点:在函数体内部允许访问外

2016-04-05 02:03:02 2040 2

原创 prototype原型详解非常非常详细!吐血制作!

现在我先不解释prototype,先看代码先定义一个构造函数function Fn(name) { this.name = name; this.say = function () { console.log('hi'); }; } var f1= new Fn('Tom'); var f2 = new

2016-03-28 02:10:05 1420

原创 HTML5 应用缓存 appcache

写博客好辛苦,你不关注一下么=~=1.什么是应用程序缓存Application Cache? 我这里用wscshool给出的解释: HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问. 通过创建一个cache manifest文件,我们可以轻松构建一个离线应用.2.优势可配置需要缓存的资源网络无连接应用也可以用本地读取

2016-03-15 22:35:42 764

原创 HTML5 本地存储 web Storage和清除缓存的几种方法

#看在我写的这么辛苦的份上,你不关注下我么~如果本文中有写错的地方,请不吝赐教!在以往,我们进行本地存储的时候是用document.cookie来存储的.但是存储大小只有4k左右,解析也很复杂,效率得不到提高.HTML5规范则提出了解决方案,定义了两个重要的API:Web Storage 和 WebSQL Datebase.本文主要讲解Web Storage. 1.web Storage

2016-03-15 19:44:17 3504

原创 html5 history新特性精简易懂介绍

由于我刚刚写博客没有多久,写博客的技术还不是很强,在一些方面可能写的不是特别到位,如果你有什么疑问或者有什么没讲,可以在底下留言,我都会一一回复的~~一 history和ajax无刷新操作利用HTML5 History API可以实现页面的无刷新跳转,而在以前是没有技术可以达到这点的,Ajax虽然可以实现页面的无刷新操作,但是分页时url地址并不会改变,不利于有所引擎优化而在h5里面并且不

2016-03-15 02:26:43 960

HTML History API新特性讲解

由于我刚刚写博客没有多久,写博客的技术还不是很强,在一些方面可能写的不是特别到位,如果你有什么疑问或者有什么没讲,可以在底下留言,我都会一一回复的~~一 history和ajax无刷新操作利用HTML5 History API可以实现页面的无刷新跳转,而在以前是没有技术可以达到这点的,Ajax虽然可以实现页面的无刷新操作,但是分页时url地址并不会改变,不利于有所引擎优化而在h5里面并且不

2016-03-15 00:37:38 246

原创 js模板引擎artTemplate内部实现原理

原生js模板引擎内部实现原理模板引擎的实质其实是利用正则表达式,替换模板当中事先定义好的标签必备元素:字符串正则数据1.不引入模板引擎,简单实现 !-- 1.创建模板 --> // %> 符号包裹起来的语句则为模板的逻辑表达式 //为输出表达式 my name is i am years old //2.将函数进行简单封装

2016-03-14 01:30:40 1599 1

原创 js模板引擎内部实现原理

模板引擎的实质其实是利用正则表达式,替换模板当中事先定义好的标签这里正则表达式不做介绍,网上有很多,可以查1.不引用模板引擎 !-- 模板 --> my name is i am years old //将函数进行封装 function template(id,data){ var tpl = document.getElementBy

2016-03-14 00:20:50 324

原创趣味解说HTTP协议

今天讲的是HTTP协议1. 那么什么是HTTP协议呢?专业话来讲就是超文本传输协议,从www浏览器传输到本地浏览器的一种传输协议,网站是基于HTTP协议的,例如网站的图片,CSS,JS等都是基于HTTP协议进行传输的.HTTP协议是由从客户机到服务器的请求(Request)和从服务器到客户机的响应(response)进行约束和规范就像,你样了一只很可爱的狗狗,你要和它玩你丢我捡的丢

2016-03-11 00:51:01 712

原创开发中常用的伸缩布局详解

今天给大家讲讲在我们经常用于移动端的伸缩布局，这段日子闲得蛋疼，之前都特别忙，要么就是懒，一直不想写博，最近决定有时间每天更更博，妹子我也是够拼了，虽然现在还没啥阅读量，但我还是要努力写。在做传统布局的时候，我们需要精确计算宽度和外边距，好麻烦啊有木有！css3在布局方面做了很大的改进，对块级元素的排列方式非常灵活，因为强大的伸缩性，在响应式开发中发挥着极大的作用首先用传统布局和伸缩布局实

2016-03-06 01:06:29 657

原创 CSS3盾牌2D效果

将原本的图片打乱然后鼠标触摸恢复原状，实现这种效果主要用到过渡（transition）和移动（translate）；过渡可以实现元素不同状态之间的平滑过渡（补间动画），补间动画意思是自动完成从起始状态到终止状态的过渡，经常用来制作动画效果只要当前有属性发生变化时，可以平滑的进行过渡，不仅仅局限在hover上。移动translate(x,y)可以改变元素的位置，课为负值，移动位置相当于自

2016-03-04 23:02:04 1236 1

原创如何用border-radius画出27种图形

我不是很喜欢写博客，这也是我第一篇技术博客，因为很耗时间，这里总结了一些常用的利用border-radius做的一些图形，如果不清楚border-radius的用法请百度。style> body, ul, li, dl, dt, dd, h1, h2, h3, h4, h5 { margin: 0; padding: 0; }

2016-03-03 21:15:01 1952 1