前端技术
文章平均质量分 73
爱德酱
UESTC CS研究生
展开
-
Javascript实现函数的curry化
首先介绍下curry的概念:使函数理解并处理部分应用的过程就叫做CURRY化:例如,我想将add(x,y)方法转换成一个可以分成两部输入参数并正确计算结果的函数,我们就可以用到CURRY化的概念,javascript是一门动态性很强的语言,我们很容易实现这个效果:代码如下:function add(x,y){ var oldx = x,oldy = y; if(typeof oldy原创 2017-05-05 17:20:15 · 1630 阅读 · 0 评论 -
css完美实现垂直居中
之前看到很多人一直都问这个问题,不过当时我没当一回事,因为在 CSS 中要垂直居中,多数是在有高度的情况下,或者容器高度不定的情况下才用,看上去比较舒服,而且实现的方法也不少,不一定要拘泥于和 table 布局一样。不过最近有人问了几个例子,看来对此的需求还不少。现在就把我经验拿出来分享一下,希望大家鼓鼓掌。首先,要有一个概念:凡是 table 布局可以实现的,CSS 一定可以实现。CSS翻译 2017-04-24 14:05:12 · 443 阅读 · 0 评论 -
javascript对象创建模式
命名空间模式使用一个全局的对象变量来作为所有模块的顶级父属性,所有的子模块都他的属性。var MYAPP = MYAPP || {}; var MYAPP.modules = {}; MYAPP.modules.dom = {}; MYAPP.modules.event = {};我们也可以使用通用的命名方法去执行变量的命名初始化;var ajax = namespace('MYAPP.原创 2017-05-08 16:44:58 · 304 阅读 · 0 评论 -
javascript中this的相关疑问解答
前言javascript中没有块级作用域(es6以前),javascript中作用域分为函数作用域和全局作用域。并且,大家可以认为全局作用域其实就是Window函数的函数作用域,我们编写的js代码,都存放在Window函数内(这是个假设),也就是说javascript中只有函数作用域(前面假设做前提下)。作用域是什么作用域是一个盒子,盒子内部的变量只能在当前盒子中使用,作用域盒子是可以嵌套的,内部盒翻译 2017-05-17 15:54:09 · 365 阅读 · 0 评论 -
javascript设计模式之迭代器模式
javascript的迭代器模式实现了一种类似链表的迭代器数据结构和相关查找函数。代码如下:Var agg = (function () { var index = 0, arr = [1,2,3], length = arr.length; return { next: function () {原创 2017-05-17 17:12:16 · 238 阅读 · 0 评论 -
javascript设计模式之装饰器模式
javascript设计模式之装饰器模式装饰器模式是一种结构型模式有两种常见的实现方法第一种是利用原始对象原型的decorate方法,实现装饰对象对上一个对象的继承和方法重载。最终的对象是经过一系列装饰的装饰对象。代码如下:Function Sale (price) { this.price = price || 100;}Sale.decorators = {};Sale.decorat原创 2017-05-17 17:07:19 · 406 阅读 · 0 评论 -
javascript设计模式之工厂模式
javascript设计模式之工厂模式js的设计模式分为创建型模式,结构型模式和行为模式创建型模式描述了对象创建和初始化的事情。工厂模式是一种常见的创建型模式,该模式可以应用于创建多个相似对象我们又不知道该先使用哪个对象时的场景下:下面是示例代码:MYJS.dom.factory = function (type,url){ return MYJS.dom[type] ? new MYJS.d原创 2017-05-02 15:14:38 · 316 阅读 · 0 评论 -
javascript设计模式之单体模式
javascript设计模式之单体模式单体模式属于js设计模式中的创建对象型模式,它保证一个特定类只会有一个实例当我们使用对象字面量的语法创建对象时,自然是一个单体;当我们使用构造器创建对象时,我们通常有两种方法去实现单体模式第一种是使用全局变量做当前对象的保存第二种是使用构造器的静态属性,代码如下:Function Universe () { if(typeof Universe.in原创 2017-05-17 17:18:54 · 350 阅读 · 0 评论 -
css实现div旋转任意角度
主要利用了css属性,transform,transform w3c的属性详解:http://www.w3school.com.cn/cssref/pr_transform.asp<html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>DIV旋转属性的演转载 2017-05-09 16:19:30 · 20433 阅读 · 0 评论 -
JavaScript设计模式之策略模式
策略模式策略模式支持运行时选择算法,客户端只需要一个接口,可以根据不同的数据和业务需求,接口内部会选择不同的算法去适应。validator = { types:{},//所有检查方法 messages:[],//错误信息数组 config:{},//需要验证的方法集 validate:function (data) { //验证方法 var I,原创 2017-05-22 17:18:45 · 276 阅读 · 0 评论 -
JavaScript设计模式之外观模式
外观模式外观模式包装重复方法,浏览器脚本处理Myevent = { ... Stop:function (e) { if(typeof stopPropagation === 'function'){ e.stopPropagation(); } if(typeof preventDefault === 'fun原创 2017-05-22 17:19:46 · 318 阅读 · 0 评论 -
JavaScript设计模式之代理模式
代理模式中介模式合并多个复杂业务请求,减轻web服务器压力页面框架<p><span id='toggle-all'>Toggle Checked</span></p><ol> <li> <input type="checkbox" checked> <a href="http://new.music.yahoo.com/videos/--2158073"></a> </li原创 2017-05-22 17:21:12 · 282 阅读 · 0 评论 -
JavaScript设计模式之观察者模式
观察者模式(订阅发布模式)该模式广泛应用于客户端程序//通用发布者对象var publisher = { subsribers: { any: []//通用订阅者方法 }, subscribe: function (fn,type) { type = type || 'any'; if(!this.subscribers[type]原创 2017-05-22 17:25:05 · 318 阅读 · 0 评论 -
JavaScript设计模式之中介模式
中介者模式该模式会缓解对象之间的耦合度,将紧耦合转换成松耦合代码示例,实现一个键盘游戏,有两个玩家。规定一个人按‘1’,一个人按‘0’。//玩家对象function Player (name) { this.points = 0; this.name = name;}Player.prototype.play = function () { this.points +=原创 2017-05-22 17:23:03 · 295 阅读 · 0 评论 -
js判断变量是否是数组(跨浏览器和ECMA)
在开发中,我们经常需要判断某个对象是否为数组类型,在Js中检测对象类型的常见方法都有哪些呢?typeof 操作符对于Function, String, Number ,Undefined 等几种类型的对象来说,他完全可以胜任,但是为Array时var arr=new Array(“1”,”2”,”3”,”4”,”5”);alert(typeof(arr)); 你会收到一个object 的答案,有点原创 2017-04-27 13:11:55 · 508 阅读 · 0 评论 -
jquery实现图片轮播图效果
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>*{ padding:0; margin:0; list-style:none;}/************************样式区。原本都打算写到JS里面的。不过这玩意改的比较多。新手改CSS没啥问题我就写在这了*************转载 2017-05-02 15:48:40 · 821 阅读 · 0 评论 -
js面向对象编程指南学习笔记--闭包封装HTTP请求
js面向对象编程指南学习笔记–闭包封装HTTP请求首先补充一下js 闭包 的概念,闭包是指可以包含自由(未绑定到特定对象)变量的代码块;这些变量不是在这个代码块内或者任何全局上下文中定义的,而是在定义代码块的环境中定义(局部变量)。闭包可以让局部变量升级到全局变量的一种js特有的方法。下面是实例代码。改代码实现了封装http请求:下面是封装request函数和封装创建XMR对象函数: functio原创 2017-04-25 21:15:43 · 567 阅读 · 0 评论 -
css选择器大全
选择器例子例子描述CSS.class.intro选择 class="intro" 的所有元素。1#id#firstname选择 id="firstname" 的所有元素。1**选择所有元素。2elementp选择所有 元素翻译 2017-02-08 12:37:59 · 320 阅读 · 0 评论 -
js时间比较函数
js日期比较(yyyy-mm-dd) function duibi(a, b) { var arr = a.split("-"); var starttime = new Date(arr[0], arr[1], arr[2]); var starttimes = starttime.getTime(); var arrs = b.split("翻译 2017-03-08 15:59:14 · 373 阅读 · 0 评论 -
reactjs学习(3)组件的生命周期
组件的生命周期分成三个状态:Mounting:已插入真实 DOMUpdating:正在被重新渲染Unmounting:已移出真实 DOMReact 为每个状态都提供了两种处理函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用,三种状态共计五种处理函数。componentWillMount()componentDidMoun翻译 2017-03-27 15:36:27 · 256 阅读 · 0 评论 -
微信小程序开发之页面栈
由于微信小程序做了页面栈的技术:导致小程序开发过程中,如果使用wx.navigateTo()方法跳转页面 会将跳转之前的页面压倒页面栈之中。so,使用navigateBack()方法会将栈首页面出栈,直到目标页面出栈。值得注意的是页面栈的容量是五个。就是说如果超过五个页面,入栈时会发生溢出。新的页面将不会被加入栈中。这样我们要实现页面跳转只能使用重定向方法,也就是redirectT原创 2017-03-24 21:05:20 · 7214 阅读 · 0 评论 -
js判断undefined和null
JS 中如何判断 undefinedJavaScript 中有两个特殊数据类型:undefined 和 null,下节介绍了 null 的判断,下面谈谈 undefined 的判断。以下是不正确的用法:var exp = undefined;if (exp == undefined){ alert("undefined");}exp 为转载 2017-04-02 15:52:43 · 452 阅读 · 0 评论 -
reactjs学习(2)
组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM)。只有当它插入文档以后,才会变成真实的 DOM 。根据 React 的设计,所有的 DOM 变动,都先在虚拟 DOM 上发生,然后再将实际发生变动的部分,反映在真实 DOM上,这种算法叫做 DOM diff ,它可以极大提高网页的性能表现#DOM diff算法详见https:/翻译 2017-03-27 14:30:58 · 250 阅读 · 0 评论 -
css实现超长文字省略号处理(单行和多行)
">用CSS实现超长字段被省略的简单方法效果如下图所示:注意:设置宽度,overflow:hidden, white-space:nowrap, text-overflow:ellipsis四个属性缺一不可。这种写法在所有的浏览器中都能正常显示。原创 2017-04-11 15:03:41 · 3435 阅读 · 0 评论 -
js洗牌算法实现产生随机数组
在学习排序算法的时候,经常要用到随机数组,于是就写了一个生成随机数组的方法。算法来自网络,只是修改成了 JavaScript 版本。基本原理是洗牌算法,首先从所有元素中随机选取一个与第一个元素进行交换,然后在第二个之后选择一个元素与第二个交换,直到最后一个元素。这样能确保每个元素在每个位置的概率都是1/n。具体代码如下:12345678910111213转载 2017-04-19 15:04:36 · 2995 阅读 · 0 评论 -
javascript设计模式之装饰器模式(结构型模式)
javascript设计模式之装饰器模式js的设计模式分为创建型模式,结构型模式和行为模式结构模式描述了如何组合对象以提供新的功能。装饰器模式是一种常见的结构型模式,我们可以以一个基础对象为基础,来给它加上若干个装饰对象以拓展其功能。下面是示例代码:首先我想给一颗圣诞树上装饰很多小东西,也就是大概实现这个方法:var tree = { decorate:function (){ co原创 2017-05-02 15:11:15 · 1903 阅读 · 0 评论 -
javascript设计模式之观察者模式(行为模式)
javascript设计模式之观察者模式js的设计模式分为创建型模式,结构型模式和行为模式行为模式描述了对象之间的通信行为。观察者模式又叫发布–订阅模式,是一种常见的行为模式。下面是示例代码:// obesever modevar observer = { // add a subscriber addSubscribes:function (callback){ if(ty原创 2017-05-02 14:47:36 · 382 阅读 · 0 评论 -
js面向对象编程指南学习笔记--遍历DOM节点树
利用树的先序遍历删除树的每个节点删除节点使用了dom.innerHtml = ”;的方法;因为单纯地删除节点会导致如果该节点绑定了事件监听器,事件监听器没有删除,会导致浏览器的内存泄露。为了防止这种情况的发生,我们需要在删除某个节点之前先把这个节点树中的所有事件属性全部置null。下面是示例代码:function myRemove(dom){ do{ // core code原创 2017-04-26 20:39:04 · 499 阅读 · 0 评论 -
面向委托关联的js代码应用实例
javascript是一种面线对象的编程语言(OOP),但是js和其他面向类语言不同,js中并没有类的概念,但是大多数开发人员都熟悉了类的概念,想方设法在js中加入类的概念,于是就出现了很多类的设计模式,我想说的是,这些设计模式在某些方面也许加快了我们的开发速度,但是却给我们带来严重的不良后果,比如代码维护等等。实际上,js中已经有一些语法是利用来实现类似类的功能,这就是原型,prototype,可原创 2017-07-05 17:43:42 · 386 阅读 · 0 评论