- 博客(180)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 门面模式
门面模式（facade）一般有两个作用：1、简化类的接口2、消除类与使用它的客户代码之间的耦合。门面模式常常是开发人员最亲密的朋友。它几乎是所有javascript库的核心原则。门面模式的目的是为了让开发人员用更简单的方法调用一些相对复杂或组合的方法，主要就是简化开发的复杂性，提供一个相对容易的API去调用内部的方法供外界去使用，这样程序员开发会变得轻松些，编写一次组合代码
2016-08-01 22:26:37
399
原创 组合模式（二）
组合模式的使用场景：1、存在一批组织成某种层次体系的对象2、希望对这批对象或其中的一部分对象实施一个操作。组合模式的特点：1、组合模式中只有两种类型对象：组合对象、叶子对象2、这两种类型都实现同一批接口3、一般我们会在组合对象中调用其方法并隐式调用"下级对象"的方法（这里我们一般采用递归的形式去做）/** * 组合模式应用的场景和特点：
2016-08-01 21:16:12
335
原创 组合模式（一）
组合模式是一种专门为创建Web上的动态用户界面而量身制定的模式。使用这种模式可以用一条命令在多个对象上激发复杂的或递归的行为。这可以简化粘合性代码，使其更容易维护，而那些复杂行为则被委托给各个对象。组合模式的好处：1 你可以用同样的方法处理对象的集合与其中的特定子对象。2 它可以用来把一批子对象组织成树形结构，并且使整棵树都可以被遍历。/* * 场景模拟： * -
2016-08-01 21:10:10
352
原创 实现简单工厂（三）
//创建一个工厂的环境 //卖车的商店 function CarShop(){}; CarShop.prototype = { constructor : CarShop, //还原构造器 sellCar : function(type){ //this指向CarShop，创建抽象类
2016-07-26 09:47:38
305
原创 实现简单工厂（二）
//创建一个工厂的环境 //卖车的商店 function CarShop(){}; CarShop.prototype = { constructor : CarShop, //还原构造器 sellCar : function(type){ var car = CarFactory.createCar(t
2016-07-26 09:45:52
321
原创 实现简单工厂（一）
CommonUtil.js/** * @author Fan *//** * 命名空间 */ var Fan = {}; //接口类Fan.Interface = function(name,method){ //判断接口的个数 if(arguments.length != 2){ throw new Error('接口参数必须是2个'); }
2016-07-22 22:51:03
240
原创 实现jQuery底层链式编程（二）
//jquery使用的就是块级作用域 //特点1.块级作用域的作用就是程序启动时，直接执行了 //特点2.内部的成员变量，外部无法访问 (function(Window,undefined){ // $ 最常用的对象，返回给外界，等于出口，一般大型程序当中 _ 作为私有对象（规范） function _$(arguments)
2016-07-19 23:02:08
446
原创 实现jQuery底层链式编程（一）
//jquery使用的就是块级作用域 //特点1.块级作用域的作用就是程序启动时，直接执行了 //特点2.内部的成员变量，外部无法访问 (function(Window,undefined){ // $ 最常用的对象，返回给外界，等于出口，一般大型程序当中 _ 作为私有对象（规范） function _$(arguments)
2016-07-19 21:55:53
2376
原创 h5新标签和css3动画制作一个鼠标悬停的动画效果
CrazyShark Lily likes to play with crayons and pencils /*--------------------------------*//***** Portfolio Common style *****//*---------
2016-07-19 14:07:33
3932
原创 网站常用jquery小控件总结
自动适应屏幕100%高度$('.screen-height').height($(window).height()); $(window).resize(function(){ $('.screen-height').height($(window).height()); });页面滑动时，隐藏和现实返回顶部按钮$(win
2016-07-19 14:00:54
343
原创 页面加载动画，加载完后隐藏动画
(function($){ /*-------------------------------* * 页面加载时动画，加载完后隐藏动画 --------------------------------*/ $(window).load(function(){ $('#status').fadeOut(); $('#preloade
2016-07-19 13:56:31
4892
原创 单体模式
单体（singleton）模式是javascript中最基本但又最有用的模式之一，它可能比其他任何模式都常用。这种模式提供了一种将代码组织为一个逻辑单元的手段，这个逻辑单元中的代码可以通过单一的变量进行访问。通过确保单体对象只存在一份实例，你就可以确信自己的所有代码使用的都是同样的全局资源。简单单体闭包单体惰性单体分支单体//单体模式 var Ext = {}; Ex
2016-07-18 21:28:47
431
原创 建立接口的三种方式--鸭式辩型接口
通常建立javascript接口有三种方式：1 注释描述接口2 属性检测接口3 鸭式辩型接口接口的利弊：对于一些中小型程序来说 使用接口很显然是不明智的，对项目来说接口的好处也不明显，只是徒增其复杂度而已。对于接口的好处，那么显而易见 首先促进代码的重用，对于开发来讲，还可以告诉程序员那些类都使用了什么方法，如果你事先知道接口那么就减少了你在编码的时候对类与类之间冲突，实现解耦。对于测试和调试也会
2016-07-17 20:22:42
697
原创 经典继承方法实现（模拟extjs底层继承机制）
// 混合继承的缺点： 3件事 : 继承了父类的2次模版 , 继承了一次父类的原型对象 // extend方法 2件事: 继承1次父类的模版 继承一次父类的原型对象 //1：子类，2：父类 function extend(sub,sup){ //目的：实现只继承父类的原型对象 var F = new Function();
2016-07-17 15:17:22
788
原创 继承的简单理解，原型对象继承，类继承，混合方式继承
我们都知道构造函数、原型和实例直接的关系，如果我们让原型对象等于另一个类型的实例，结果会怎么样呢？显然此时的原型对象将包含一个指向另一个原型的指针，相应的另一个原型中也包含着一个指向另一个构造函数的指针。原型链:利用原型让一个引用类型继承另外一个引用类型的属性和方法。简单继承（原型继承）类继承（模版继承或借用构造函数继承）混合使用继承实现完整的继承//原型继承方式 //父类
2016-07-16 22:56:53
1509
原创 原型对象存在的问题与解决问题
原型对象虽然可以对所有实例的属性和方法共享，但是它的局限性也是很明显的，正是因为共享的特性，也导致原型存在的最大问题。我们一般组合使用构造函数式和原型模式，在实际开发中，这种模式也是应用的最为广泛。动态原型模式：就是把信息都封装到函数中，这样体现了封装的概念。稳妥构造函数式：所谓稳妥模式就是没有公共属性，而且其他方法也不引用this对象，稳妥模式最适合在安全的环境中使用。如果你的程序对于安全性要求
2016-07-16 21:58:37
790
原创 简单的原型，原型对象和实例对象先后顺序
•之前我们已经学过了原型如何使用，那么现在我们介绍一种简单原型的使用方式：即直接通过对象字面量来重写整个原型对象（这种方法会改变原型对象的构造器）•ECMA5中的Object.defineProperty()方法可以为原型对象重新加入构造器。•原型的动态性（注意原型和创建实例的前后顺序） //简单原型 function Person(){
2016-07-16 17:52:59
1100
原创 自定义方法，模仿each遍历多维数组
var arr = [1,2,3,[4,[5,[6]]]]; //console.log(arr.length); //自己实现一个each方法，遍历多维数据 Array.prototype.each = function(fn){ try{ //目的：遍历数据的每一项，计数器，记录当前遍历元素的位置 this.i || (th
2016-07-16 13:36:04
702
原创 原型-----常用方法详解
function person(){ } person.prototype.name = 'z3'; person.prototype.age = 20; person.prototype.sayName = function(){ alert('原型方法'); } var p1 = new person
2016-07-15 10:43:51
306
原创 原型-概念详解
我们创建的每一个函数都有一个prototype属性，这个属性是一个指针，指向一个对象，而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。原型对象实际就是一个构造函数的实例对象，与普通的实例对象没有什么本质上的区别，js中每一个对象都有一个原型对象。不过他比较特殊，该对象所包含的所有属性和方法能够供构造函数的所有实例共享，这就是其他语言所说的继承，而javascript通过原型对象
2016-07-11 22:28:27
1028
原创 js面向对象基本理解和三种创建方式
面向对象的语言有一个标志，那就是他们都有类的概念，通过类可以创建任意多个具有相同属性和方法的对象。但是在ECMAScript中没有类的概念，但是我们可以通过其他方式来模拟面向对象的类。工厂模式：工厂模式是软件工厂领域中一种广为人知的设计模式。构造函数模式：比如像ECMAScript中的Array、Object、Date等都是通过构造函数来创建的。//1.工厂模式 f
2016-07-06 22:28:17
334
原创 自己学习时收集的一些jquery插件库
jquery.cbpQTRotator.js这是一款非常实用的jQuery和css3自动轮换的用户评论留言插件。该用户评论留言插件带有进度条，当进度条到达100%时，当前的用户评论留言会切换到下一条评论，通过CSS3在切换时可制作各种动画效果。imagesloaded.pkgd.jsimagesLoaded是一款用于检测页面中的图片是否被加载的js插件。
2016-07-06 14:21:35
772
转载 Animate.css 一款强大的预设css3动画库
插件描述：Animate.css内置了很多典型的css3动画，兼容性好使用方便。Animate.css是一个有趣的，跨浏览器的css3动画库。很值得我们在项目中引用。用法1、首先引入animate css文件 ="stylesheet" href="animate.min.css">/head>2、给指定的元素加上指定的动画样式名class="
2016-07-06 11:47:48
369
原创 图标字体
font-awesome.min.csshttp://www.bootcss.com/p/font-awesome/#contribute完美的图标字体Font Awesome 3.0版本中新增了40个全新的图标。如果你需要更多新图标，可以在 Font Awesome GitHub project 提出需求最简单的 Bootstrap + Font Awes
2016-07-06 11:43:24
402
原创 js闭包的简单理解
闭包与函数有着紧密的关系，它是函数的代码在运行过程中的一个动态环境，是一个运行期的、动态的概念。所谓闭包，是指词法表示包括不必计算的变量的函数。也就是说，该函数能够使用函数外定义的变量.。在程序语言中，所谓闭包，是指语法域位于某个特定的区域，具有持续参照(读写)位于该区域内自身范围之外的执行域上的非持久型变量值能力的段落。这些外部执行域的非持久型变量神奇地保留他们在闭包最初
2016-07-05 22:45:59
286
原创 执行环境、作用域链
•执行环境（executioncontext）是javascript中最为重要的一个概念。执行环境定义了变量或函数有权访问的其他数据，决定了它们各自的行为。每一个执行环境都有一个与之关联的变量对象，环境中定义的所有变量和函数都保存在这个对象中。虽然我们的代码无法访问这个对象，但是解析器在处理数据时会在后台执行它。•全局执行环境是最外围的一个执行环境。根据ECMScript实现所在的宿主
2016-07-05 22:23:51
277
原创 call，apply简单的模拟和实现
•每一个函数都包含两个非继承而来的方法：call、apply。这俩个方法的用途都是在特定的作用域中调用函数，实际上等 于设置函数体内this对象的值。•call、apply的用途之一就是传递参数，但事实上，它们真正强大的地方式能够扩充函数赖以运行的作用域。•使用call（）、aplly（）来扩充作用域的最大好处就是对象不需要与方法有任何耦合关系。//call apply
2016-07-04 22:07:17
597
转载 js闭包的理解
花了三天时间，终于弄清楚闭包的各种写法和注意的事项，以及以前写，经常出错的地方，特此做一个总结，虽然不够专业，但是对于那些初学者来说，绝对对闭包的理解事半功倍。案例一：function aa(){var b=10;return function cc(){ b++;alert(b);}}aa()();这个函数调用时，aa(
2016-07-04 16:37:25
184
原创 this对象的基本使用方法
•this对象是在运行时基于函数的执行环境绑定的。 在全局函数中，this等于window，而当函数被作为某个对象的方法调用时，this等于那个对象。•也就是说this关键字总是指代调用者。//this:this对象是指在运行时期基于执行环境所绑定的 //this：总是指向调用者，谁调用我，我指向谁 var k = 10;
2016-07-03 22:03:48
306
原创 函数的实参形参，arguments对象基本用法
•函数的参数：arguments对象 arguments是表示函数的实际参数(与形参无关)•callee函数（回调函数属性） arguments对象的秘密属性callee属性： 这个属性比较奇怪，他能返回arguments对象所属的函数的引用，这相当于在自己的内部调用自己。 用法：例如检测函数传递的参数正确与否//js中 函数的参数: 形参 实参,arg
2016-07-03 21:34:00
470
原创 函数的基本知识，解析顺序，效率，作用域
•三种定义函数的方式：–function语句形式–函数直接量形式–通过Function构造函数形式定义函数•比较三种方式定义的区别：function语句Function构造函数函数直接量兼容完全js1.1以上js1.2以上版本
2016-07-03 20:08:57
423
原创 用js模仿java里的Map，存入，获取，大小，遍历，移除
function Map(){ var obj = {}; //put方法 this.put = function(key,value){ obj[key] = value; } //对象大小 this.size = function(){ var num =
2016-07-03 00:25:06
4422
原创 数组去重，简短而有效的方法
var arr = [1,2,3,4,5,6,7,8,1,2,3,4,5,12,13,14,15]; /* js对象里没有重复的key，所以可以通过以下方法来解决数组去重 1.把数组转换成对象 2.把值变成对象中的key 3.再把对象还原成数组 */ //把数组转换成对象 function toOb
2016-07-03 00:20:30
745
原创 js数组常用方法
/** * 数组本身也是对象 * js中数组类似于java里的map容器 长度可随意改变 ,元素类型任意 * */ var arr = new Array(); var arr = [1,2,3,4,true ,'abc' , new Date()] ; alert(arr.length); arr.length =
2016-07-02 16:10:54
329
原创 js显示当前系统时间
function tick() { var years, months, days, hours, minutes, seconds; var intYears, intMonths, intDays, intHours, intMinutes, intSeconds; var today; today
2016-07-01 17:25:22
362
转载 TouchSlide触屏滑动特效插件
TouchSlide 是纯javascript打造的触屏滑动特效插件，面向手机、平板电脑等移动终端，能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。插件开源、体积小、简单实用、功能强大，是你架构移动终端网站的重要选择！ps：如果你SuperSlide的使用者，那么你会发现它是那么熟悉和易用。完美兼容ios系统（已测试ios5/6，机型包括ip4、ip4s、ip
2016-06-22 15:14:38
640
转载 artdialog v6强大的模态对话框v6版api
artdialog v6强大的模态对话框jquery插件api使用以及免费下载，artdialog v6版体积更小压缩版只有10K多点，功能更强，兼容到IE6以上，国内qq空间，盛大等网站都选择了这款弹出窗口插件。artdialog有弹出窗口、弹出层功能，也有模拟alert等js原生提示的模态对话框解决方案，还提供了各个方向的tip提示功能。有了这个弹出层，足以应付绝大部分工作了。
2016-06-22 14:27:10
1018
转载 关于手机网站(webApp)点击链接出现蓝色焦点框的问题
随着智能的飞速的普及，手机网站也是越来越多。在使用在浏览手机网站时候，点击链接时候出现一个蓝色的框，非常多影响视角效果，俺就是饱受折磨，又说服不了设计师，几经周折。查阅一些资料，总算把原因给找到了。现在分享出来与大家共享出现以上问题的不再PC端点击链接的虚线框在作祟了，而一个比较偏门的CSS3属性 -webkit-tap-highlight-color 在捣蛋作祟。-web
2016-06-21 22:58:11
1091
转载 使用 CSS 去掉 iPhone 网页上按钮的超大圆角默认样式
使用 iPhone 上的浏览器去浏览网页的时候，按钮总是显示超大圆角的样式，显得超级恶心，但是我们自己定义 border-radius 为 0 也无法去除这个圆角，经过搜索发现这是 webikt 内核浏览器通过私有属性 -webkit-appearance 对控件设置了默认样式。我们只要对按钮设置这个属性，并设置为 ‘none’ 就可以取消浏览器对于控件的默认样式。input {-we
2016-06-21 16:32:28
958
转载 用Less CSS定义常用的CSS3效果函数
定义圆角及调用/*定义圆角@radius 圆角大小*/.round(@radius:5px){ border-radius:@radius; -webkit-border-radius: @radius; -moz-border-radius: @radius;}.round7{ .round(7px);}定义盒子阴影及调用/*盒子阴影@rig
2016-05-21 00:26:57
777
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人