08 2016 档案

深入理解：JavaScript原型与继承
摘要：深入理解：JavaScript原型与继承 看过不少书籍，不少文章，对于原型与继承的说明基本上让人不明觉厉，特别是对于习惯了面向对象编程的人来说更难理解，这里我就给大家说说我的理解。 首先JavaScript是一门基于原型编程的语言，它遵守原型编程的基本原则： 1. 所有的数据都是对象（javascr 阅读全文

posted @ 2016-08-28 19:06 SuriFuture 阅读(301) 评论(0) 推荐(1)

轻松掌握：JavaScript状态模式
摘要：状态模式 状态模式（State）允许一个对象在其内部状态改变的时候改变它的行为，对象看起来似乎修改了它的类。 状态模式的使用场景也特别明确，有如下两点： 1. 一个对象的行为取决于它的状态，并且它必须在运行时刻根据状态改变它的行为。（有些对象通常会有好几个状态，在每个状态都只可以做当前状态才可以做的 阅读全文

posted @ 2016-08-27 17:14 SuriFuture 阅读(512) 评论(0) 推荐(1)

轻松掌握：JavaScript装饰者模式
摘要：装饰者模式 在传统的面向对象语言中，给对象添加功能常常使用继承的方式，但继承的方式会带来问题：当父类改变时，他的所有子类都将随之改变。 当JavaScript脚本运行时，在一个对象中（或他的原型上）增加行为会影响该对象的所有实例， 装饰者是一种实现继承的替代方案，它通过重载方法的形式添加新功能，该模 阅读全文

posted @ 2016-08-27 12:50 SuriFuture 阅读(296) 评论(0) 推荐(1)

轻松掌握：JavaScript享元模式
摘要：享元模式 在JavaScript中，浏览器特别是移动端的浏览器分配的内存很有限，如何节省内存就成了一件非常有意义的事情。节省内存的一个有效方法是减少对象的数量。 享元模式（Flyweight），运行共享技术有效地支持大量细粒度的对象，避免大量拥有相同内容的小类的开销(如耗费内存)，使大家共享一个类( 阅读全文

posted @ 2016-08-27 00:18 SuriFuture 阅读(445) 评论(0) 推荐(0)

轻松掌握：JavaScript模板方法模式
摘要：模板方法模式 假如我们有一些对象，各个对象之间有一些相同的行为，也有一些不同的行为，这时，我们就可以用模板方法模式来把相同的部分上移到它们的共同原型中（父类），而将不同的部分留给自己各自重新实现。 模板方法：在这些平行对象的共同原型中定义的一个方法，它封装了子类的算法框架，它作为一个算法的模板，指导 阅读全文

posted @ 2016-08-26 16:59 SuriFuture 阅读(360) 评论(0) 推荐(0)

轻松掌握：JavaScript组合模式
摘要：组合模式 组合模式：将一组对象组合成树形结构，并统一对待组合对象和叶对象，忽略它们之间的不同（因为叶对象也可以也可以包含叶对象而成为组合对象），组合模式中的对象只能是一对多的关系，不能出现多对一。 基本单元：一个组合对象包含多个叶对象。每个基本单元又可以是别的组合对象的叶对象 类似文件夹与它里面的内 阅读全文

posted @ 2016-08-26 12:49 SuriFuture 阅读(420) 评论(0) 推荐(1)

轻松掌握：JavaScript观察者模式
摘要：观察者模式 观察者模式也叫“订阅者/发布者”模式，定义对象间的一种一对多的依赖关系，发布者可以向所有订阅者发布消息。 观察者模式被广泛地应用于JavaScript客户端编程中。所有的浏览器事件（mouseover，keypress等）都是使用观察者模式的例子。 使用这个模式的最主要目的就是促进对象之 阅读全文

posted @ 2016-08-26 00:48 SuriFuture 阅读(386) 评论(0) 推荐(0)

轻松掌握：JavaScript代理模式、中介者模式
摘要：代理模式、中介者模式 代理模式 在面向对象设计中，有一个单一职责原则，指就一个类（对象、函数）而言，应该仅有一个引起它变化的原因。如果一个对象承担了过多的职责，就意味着它将变得巨大，引起它变化的原因就多，它把这些职责耦合到了一起，这种耦合会导致程序难于维护和重构。 这时候，我们可以把该对象（本体）的 阅读全文

posted @ 2016-08-25 21:30 SuriFuture 阅读(1408) 评论(0) 推荐(1)

轻松掌握：JavaScript策略模式
摘要：策略模式 定义：定义一系列的算法，把它们一个个封装成函数，也可把它们作为属性统一封装进一个对象，然后再定义一个方法，该方法可根据参数自动选择执行对应的算法。 一般用于在实现一个功能时，有很多个方案可选择的情况。 例子1：根据员工薪水salary、绩效等级S、A、B、C，来计算年终奖 例子2：表单验证 阅读全文

posted @ 2016-08-25 11:38 SuriFuture 阅读(308) 评论(0) 推荐(1)

轻松掌握：JavaScript单例模式
摘要：单例模式 定义：保证一个对象（类）仅有一个实例，并提供一个访问它的全局访问点； 实现原理：利用闭包来保持对一个局部变量的引用，这个变量保存着首次创建的唯一的实例; 主要用于：全局缓存、登录浮窗等只需要唯一一个实例的时候； 一. 为一个非单例模式对象（如：Demo）实现单例模式的方法： 给Demo添加 阅读全文

posted @ 2016-08-24 23:41 SuriFuture 阅读(294) 评论(0) 推荐(0)

JS常用的设计模式
摘要：单例模式 只创建类的唯一一个实例。我们看了好几种可以不通过构造函数和类Java语法达成单例的方法。从另一方面来说，JavaScript中所有的对象都是单例。有时候开发者说的单例是指通过模块化模式创建的对象。 工厂模式 一种在运行时通过指定字符串来创建指定类型对象的方法。 遍历模式 通过提供API来实 阅读全文

posted @ 2016-08-22 23:17 SuriFuture 阅读(185) 评论(0) 推荐(0)

原生JS实现-星级评分系统
摘要：今天我又写了个很酷的实例：星级评分系统（可自定义星星个数、显示信息） 使用默认值5个星星，默认信息 `var msg = [........]; sufuStar.star(10,msg);`自定义星星个数为10、显示信息msg格式参考默认值，条数必须和星星个数一致； 自己实现一些实例，有个好处，能 阅读全文

posted @ 2016-08-20 14:31 SuriFuture 阅读(2559) 评论(0) 推荐(1)

原生JS实现轮播+学前端的感受（防止走火入魔）
摘要：插件！插件！天天听到有人求这个插件，那个插件的，当然，用第三方插件可以大幅提高开发效率，但作为新手，我还是喜欢自己来实现，主要是我有时间！ 今天我来给大家分享下用原生JS实现图片轮播的写法 前辈们可以无视下面这段废话： 在开始之前，先说下我学前端到现在的一点感受。到今天应该有两个月左右了吧，基本每天 阅读全文

posted @ 2016-08-19 13:18 SuriFuture 阅读(1495) 评论(0) 推荐(1)

JavaScript实战（原生range和自定义特效）
摘要：今天我又码了两个特效：一个是用原生input[type=range]的，另一个完全自定义的；下面是完整代码和演示： <!DOCTYPE html tip{ position: absolute; top: 30px; left: 0; right: 0; width: 200px; height: 阅读全文

posted @ 2016-08-16 15:34 SuriFuture 阅读(1244) 评论(0) 推荐(0)

JavaScript实战-菜单特效
摘要：以下是我自己用原生JS写的各种菜单特效，虽然网上一搜一大堆，但我还是喜欢自己来写一写！ 这是上一篇： "JavaScript实战（带收放动画效果的导航菜单）" 下面是经过优化后的完整代码，优化了CSS样式、简化事件函数、减少HTML层级，删了至少20行以上的冗余代码 __如果各位前辈有好的建议，记得 阅读全文

posted @ 2016-08-15 12:48 SuriFuture 阅读(743) 评论(0) 推荐(0)

DOM事件类型详解
摘要：一、表单事件： 一、表单事件： input事件当<input>、<textarea>的值发生变化时触发。此外，打开contenteditable属性的元素，只要值发生变化，也会触发input事件。input事件的一个特点，就是会连续触发，比如用户每次按下一次按键，就会触发一次input事件。 inp 阅读全文

posted @ 2016-08-13 17:33 SuriFuture 阅读(3648) 评论(1) 推荐(2)

DOM中的事件处理概览与原理的全面剖析
摘要：事件是一种异步编程的实现方式，本质上是程序各个组成部分之间的通信，DOM支持大量的事件； 本文通过这几点向大家详细解析事件处理的基本原理：事件类型、事件目标、事件处理程序、事件对象、事件传播 最后再向大家介绍Event对象； （原创文章，转摘请注明：苏福：http://www.cnblogs.com 阅读全文

posted @ 2016-08-13 17:29 SuriFuture 阅读(1562) 评论(0) 推荐(0)

JavaScript实战（带收放动画效果的导航菜单）
摘要：虽然有很多插件可用，但为了共同提高，我做了一系列JavaScript实战系列的实例，分享给大家，前辈们若有好的建议，请务必指出，免得误人子弟啊！ （ 原创文章，转摘请注明：苏福：http://www.cnblogs.com/susufufu/p/5768402.html ） 今天是第一战：带收放动画 阅读全文

posted @ 2016-08-13 17:14 SuriFuture 阅读(1337) 评论(0) 推荐(0)

（转）高性能JavaScript：加载和运行（动态加载JS代码）
摘要：浏览器是如何加载JS的 当浏览器遇到一个<script>标签时，浏览器首先根据标签src属性下载JavaScript代码，然后运行JavaScript代码，继而继续解析和翻译页面。如果需要加载的js文件很多很大，则会让人感觉页面加载很慢，影响页面的交互。浏览器在遇到<body>之前，不会渲染页面的任 阅读全文

posted @ 2016-08-12 12:00 SuriFuture 阅读(12095) 评论(0) 推荐(2)

（转）网页性能管理详解
摘要：一、网页的生成过程：大致可以分成五步。 HTML代码转化成DOM CSS代码转化成CSSOM（CSS Object Model） 结合DOM和CSSOM，生成一棵渲染树（包含每个节点的视觉信息） 生成布局（layout），即将所有渲染树的所有节点进行平面合成 将布局绘制（paint）在屏幕上 这五步 阅读全文

posted @ 2016-08-12 11:36 SuriFuture 阅读(441) 评论(0) 推荐(0)

（转）JavaScript-性能优化之函数节流（throttle）与函数去抖（debounce）
摘要：JavaScript-性能优化之函数节流（throttle）与函数去抖（debounce） 函数节流，简单地讲，就是让一个函数无法在很短的时间间隔内连续调用，只有当上一次函数执行后过了你规定的时间间隔，才能进行下一次该函数的调用。 函数节流的原理挺简单的，估计大家都想到了，那就是定时器。当我触发一个 阅读全文

posted @ 2016-08-11 10:26 SuriFuture 阅读(1361) 评论(0) 推荐(0)

你真的知道setTimeout是如何运行的吗
摘要：大家看下如下代码，猜猜执行结果： var start = new Date; setTimeout(function(){ console.log('时间流逝了:'+(new Date - start)+'毫秒'); }, 200); while (new Date - start < 1000) 阅读全文

posted @ 2016-08-11 02:07 SuriFuture 阅读(1869) 评论(1) 推荐(0)

用原生JS读写CSS样式的方法总结
摘要：为了日后方便查询，本人翻阅了一些资料总结了以下方法，仅限原生JS，如有不对的地方欢迎指出！只求大家看完觉得有学到点什么就OK了！ 一、可以通过DOM节点对象的style对象(即CSSStyleDeclaration对象)来读写文档元素的CSS样式 如：var elm = document.getEl 阅读全文

posted @ 2016-08-08 16:31 SuriFuture 阅读(65217) 评论(3) 推荐(8)

选取文档元素的方法总结
摘要：在讲解如何选取文档元素之前，先普及一下什么是文档节点： HTML文档的每个节点都表示一个Node对象，节点树形结构的根部是Document节点，代表整个文档，代表HTML元素的节点是Element节点，代表文本的节点是Text节点；Document、Element、Text类都是Node类的子类；（ 阅读全文

posted @ 2016-08-04 22:40 SuriFuture 阅读(1139) 评论(0) 推荐(0)

导航