Fork me on GitHub

随笔分类 -  前端开发

Chrome开发者工具不完全指南(一、基础功能篇)
摘要:就算你不是一名前端开发工程师,相信你也不会对Chrome浏览器感到陌生。根据最新的一份(2015/06)的浏览器市场占有率报告,Chrome近乎占有浏览器天下的半壁江山。简单、快捷使它成为了新时代人们的新宠。如果你是一名web开发人员,我推荐你使用Chrome。作为前端开发的"IDE",你只需要搭配 阅读全文
posted @ 2015-06-15 09:38 chen·yan 阅读(73352) 评论(32) 推荐(43) 编辑
利用history实现无刷新跳转界面
摘要:看标题是不是感觉很拽的样子,其实没什么啦,也就是时下常说的单页面应用。这种web形式在如今的移动端十分流行,毕竟在移动端频繁得去刷新界面不是很友好,而且还费流量。今天我们要做一个小的app(移动端),来揭秘history的秘密。首先我们了解一下核心方法: window.history.push... 阅读全文
posted @ 2015-06-08 14:43 chen·yan 阅读(4237) 评论(2) 推荐(3) 编辑
javascript的执行和预解析
摘要:很久以前遇到过一个面试题目,的的确确是面试官问我的问题,下面是这个问题的代码部分。由于年少无知,没有回答上,被无情pass了。 那 alert('hello world') } var say = function() { alert('bonjour monde') } say(); }); 现在 阅读全文
posted @ 2015-05-19 16:13 chen·yan 阅读(1289) 评论(5) 推荐(0) 编辑
js中的深复制和浅复制
摘要:在实际情况中经常会遇到对对象复制的问题。比如在处理项目中的一笔多结构的数据存储或者调用,这个时候你就要对对象(json)进行操作,而不同的操作根据不同的需求来定义。其中最常见最普遍的是对对象的复制,重新定义,扩展等。下面我们正对这些问题来进行探讨。要了解对象,我们首先需要了解js的内存分配机制: v 阅读全文
posted @ 2015-05-03 14:05 chen·yan 阅读(923) 评论(0) 推荐(0) 编辑
Backbone源码解析(五):Route和History(路由)模块
摘要:今天是四月十二号,距离上次写博已经将近二十天了。一直忙于工作,回家被看书的时间占用了。连续两个礼拜被频繁的足球篮球以及各种体育运动弄的精疲力竭,所以很少抽时间来写技术博客。今天抽出时间把backbone的基本模块部分写完,还有一篇总结篇就结束这个系列了。昨天下了一整天的雨,天空放晴,外面一片清澈... 阅读全文
posted @ 2015-04-12 17:30 chen·yan 阅读(1465) 评论(1) 推荐(1) 编辑
Backbone源码解析(四):View(视图)模块
摘要:View视图故名思义,它控制的是界面。我们可以把一个大的网页分成很多部分的视图,按照backbone的架构,每一个视图对应都是一个对象,我们可以通过元素的钩子(id或者class或者其他选择器)把它们封装到View对象中集中操作。由于传统项目中界面视图和数据不分层,使得各种操作数据逻辑和视图逻辑的代... 阅读全文
posted @ 2015-03-26 15:54 chen·yan 阅读(1006) 评论(0) 推荐(0) 编辑
Backbone源码解析(三):Collection模块
摘要:Collection模块式是对分散在项目中model的收集,他可以存储所有的model,构成一个集合,并且通过自身的方法统一操作model。Collection模块包装着若干对象,对象本身不具有一些方法,而它可以应用集合自身方法进行管理。它自身定义了一些方法,同时继承依赖库的一些方法,使得它能够对自... 阅读全文
posted @ 2015-03-24 10:02 chen·yan 阅读(417) 评论(0) 推荐(0) 编辑
Backbone源码解析(二):Model(模型)模块
摘要:Model(模型)模块在bk框架中的作用主要是存储处理数据,它对外和对内都有很多操作数据的接口和方法。它与视图(Views)模块精密联系着,通过set函数改变数据结构从而改变视图界面的变化。下面我们来看一下它的构造函数://传入两个参数,a需要保存的数据,b是该模型所属的colltion,如果没有可... 阅读全文
posted @ 2015-03-17 15:03 chen·yan 阅读(919) 评论(0) 推荐(0) 编辑
Backbone源码解析(一):Event模块
摘要:Backbone是一个当下比较流行的MVC框架。它主要分为以下几个模块: Events, View, Model, Collection, History, Router等几大模块。它强制依赖underscore,jq或者zepto库。通过它,我们可以轻松地来创建单页面应用或者响应式布局界面。它将... 阅读全文
posted @ 2015-03-12 15:18 chen·yan 阅读(1165) 评论(2) 推荐(3) 编辑
javascript 设计模式-----单例模式
摘要:单例模式的意思是只需要实例化某个类一次,它的方法也比较简单,通过判断某个类是否已经被实例化了,再返回该值。可以通过各种方法来实现单例模式,下面我们采取以下这种实现方式:var single = (function(window, undefined) { var _u;//私有成员, var new... 阅读全文
posted @ 2015-03-12 10:56 chen·yan 阅读(385) 评论(0) 推荐(0) 编辑
javascript 设计模式-----外观模式
摘要:外观模式是为外部提供简单的接口一种方式,由于模块内部方法庞杂,不能一一对外公开,那么我们需要一个统一的和简单的对外方法(API)来调用这些内在的函数。这时候我们可以用到外观模式:var module = (function(){ var name = 'bobi'; var _p = functio... 阅读全文
posted @ 2015-03-11 15:16 chen·yan 阅读(226) 评论(0) 推荐(0) 编辑
javascript 设计模式-----观察者模式
摘要:观察者模式在设计模式中被重点提到,因为它应用的场景非常多,而且在模块化设计当中扮演着非常重要的角色。MVC模式中最底层的就是观察者模式,当下流行的javascript框架backbone就是很好地运用该模式的框架之一。观察者模式为我们提供了一些思路,在处理模块或者组件的之间的关系的时候,为了使它们之... 阅读全文
posted @ 2015-03-10 15:43 chen·yan 阅读(419) 评论(0) 推荐(0) 编辑
javascript 设计模式-----工厂模式
摘要:所谓的工厂模式,顾名思义就是成批量地生产模式。它的核心作用也是和现实中的工厂一样利用重复的代码最大化地产生效益。在javascript中,它常常用来生产许许多多相同的实例对象,在代码上做到最大的利用。比如现在有需求是项目中需要创建若干的组件,这些组件分门别类,但是又同属于某些类别下。这个时候我们... 阅读全文
posted @ 2015-03-09 15:48 chen·yan 阅读(298) 评论(0) 推荐(0) 编辑
javascript 设计模式-----模块模式
摘要:在一些大的项目中经常使用到模块,在这里,我们将了解一下什么是模块模式。模块模式最简单的方法大家一定会用过,如下所示:var a = { b : 1, c : 2 }这样一个对象的直接量其实就已经是可以表示一个模块的定义了。但是这里会有些问题:a对象里面的b和c属性是公有的,也就是说... 阅读全文
posted @ 2015-03-05 14:54 chen·yan 阅读(337) 评论(0) 推荐(0) 编辑
javascript 设计模式-----享元模式
摘要:四个轮子,一个方向盘,有刹车,油门,车窗,这些词首先让人联想到的就是一辆汽车。的确,这些都是是一辆车的最基本特征,或者是属性,我们把词语抽象出来,而听到这些词语的人把他们想象陈一辆汽车。在代码里面也是这样的,为了将所有的车辆统一描述,我们将车的特征抽象出来,作为一个理念,就像柏拉图说的那样,接下来,... 阅读全文
posted @ 2015-02-10 15:34 chen·yan 阅读(250) 评论(0) 推荐(0) 编辑
javascript 设计模式-----策略模式
摘要:在《javascript设计模式》中,作者并没有向我们介绍策略模式,然而它却是一种在开发中十分常见的设计模式。最常见的就是当我们遇到一个复杂的表单验证的时候,常常需要编写一大段的if和else逻辑代码,这些代码维护起来非常麻烦,但是麻烦的事情远远不止于此。通常一个项目中不止涉及单个的表单或者数据的认... 阅读全文
posted @ 2015-02-09 17:13 chen·yan 阅读(422) 评论(0) 推荐(0) 编辑
js操作Dom的一些方法简化
摘要:众所周知JQ的选择符很强大,一些看起来很难实现的功能只要在$符号中传入简单的字符串就可以获取到各种层级关系的DOM,而却不用考虑浏览器的兼容性。但有时候在做小项目的时候并不需要引入JQ,而又不想频繁繁琐地调用原始方法,那么我们可以考虑对它们做一点小小的修改,来帮助你在以后需要用到它们的时候变得方便简... 阅读全文
posted @ 2015-02-05 10:14 chen·yan 阅读(651) 评论(0) 推荐(0) 编辑




点击右上角即可分享
微信分享提示