摘要: 单体模式的优势用了这么久的单体模式,竟全然不知!用它具体有哪些好处呢?1.可以用它来划分命名空间(这个就是就是经常用的了)2.利用分支技术来封装浏览器之间的差异(这个还真没用过,挺新鲜)3.借助单体模式,可以把代码组织的更为一致,方便阅读与维护(这个也用过了)最基本的单体模式最简单的单体其实就是一个对象字面量。它把一批有一定关联的方法和属性组织在一起。var Singleton={ name: nimei, age: 2, walk: function(){ ... }, eat: function(){ ... }}这个对象可以... 阅读全文
posted @ 2014-03-19 09:18 JChen___ 阅读(3755) 评论(4) 推荐(2) 编辑
摘要: 目的我们的目的就是编写一个用于创建和管理就地编辑域的可重用的模块化API。它是指网页上的一段普通文本被点击后就变成一个配有一些按钮的表单域,以便用户就地对这段文本进行编辑。思路当用户点击时1.将普通文本域隐藏2.添加表单元素3.设置表单元素的value当用户保存时ajax通信保存内容当用户取消时1.隐藏表单域2.显示文本域3.设置文本域的value类式继承实现就地编辑superClass的实现(input)function EditInPlaceField(id, parent, value){ this.id = id; this.value = value || 'defaul.. 阅读全文
posted @ 2014-03-14 16:31 JChen___ 阅读(1050) 评论(0) 推荐(0) 编辑
摘要: 类式继承0.构造函数一个简单的Person类function Person(name){ this.name = name;}Person.prototype.getName = function(){ return this.name;}1.原型链实现继承未封装extend函数继承继承步骤如下:step 1:创建继承类的构造函数step 2:设置继承类的原型链为父类构造函数。step 3:调整继承类的构造函数。step 4:创建继承类function Author(name, books){ Person.call(this, name); //step 1 this... 阅读全文
posted @ 2014-03-12 19:18 JChen___ 阅读(1222) 评论(0) 推荐(1) 编辑
摘要: 封装、信息隐藏与接口的关系信息隐藏是目的,封装是手段。接口提供了一份记载着可供公共访问的方法的契约。它定义了两个对象间可以具有的关系。只要接口不变,这个关系的双方都是可以替换的。一个理想的软件系统应该为所有类定义接口。创建对象的基本模式1.门户大开型var Publication = new Int... 阅读全文
posted @ 2014-03-05 11:31 JChen___ 阅读(622) 评论(0) 推荐(0) 编辑
摘要: 什么是接口接口提供了一种用以说明一个对象应该具有哪些方法的手段。接口之利1.接口具有自我描述性从而促进代码的重用2.接口有助于稳定不同中的类之间的通信方式3.测试和调试也变得更轻松接口之弊1.在一定程度上强化了类型的作用2.js中没有内置的interface,实现它会增加复杂度3.实现接口会对性能造成一定的影响4.无法强迫其他程序员遵守你定义的接口三种方法在JS中模仿接口注释法(这只是一种文档规范)/*interface Composite{ function add(child); function remove(child); function getChild(inde... 阅读全文
posted @ 2014-03-01 17:10 JChen___ 阅读(3060) 评论(0) 推荐(0) 编辑
摘要: 创建支持链式调用的类(构造函数+原型)Function.prototype.method = function(name, fn){ this.prototype[name] = fn; return this;};//构造函数+原型 创建类var Anim = function(){}... 阅读全文
posted @ 2014-02-22 17:36 JChen___ 阅读(483) 评论(0) 推荐(1) 编辑
摘要: 为了引入Dgls,我们从创建Dom节点说起。用JS创建Dom节点var div = document.createElement('div');div.className = 'gdls';var test = document.createTextNode('zhe');div = div.appendChild(test);看到没,我们仅仅为了创建zhe竟然写了四行代码,而且用了那么多无用的字符。用JQ创建Dom节点$('div',{ 'class': 'dgls', 'id': 阅读全文
posted @ 2013-11-11 15:38 JChen___ 阅读(1556) 评论(5) 推荐(1) 编辑
摘要: 一、通过三个问答来认识一下Ajax什么是Ajax?Ajax是Asynchronous Javascript And XML的缩写,它是一种技术。Ajax有什么用?这一技术能够向服务器请求额外的数据而不用卸载页面。Ajax有什么好处?会带来更好的用户体验。二、Ajax的前世1)前端的Ajax早在Ajax出世之前,Ajax式的通信要通过一些Hack才能完成,大多数是使用隐藏的框架或内嵌框架。(很遗憾我不是在那个时期成长起来的,所以就不太熟悉了,大概是利用iframe来实现的,只不过是不跨域而已)2)中间件的Ajax在Ajax出世之前,有一种叫远程脚本的技术,它的工作和Ajax类似。Javascri 阅读全文
posted @ 2013-11-07 14:13 JChen___ 阅读(2600) 评论(14) 推荐(4) 编辑
摘要: 1.同源策略如下:URL说明是否允许通信http://www.a.com/a.jshttp://www.a.com/b.js同一域名下允许http://www.a.com/lab/a.jshttp://www.a.com/script/b.js同一域名下不同文件夹允许http://www.a.com:8000/a.jshttp://www.a.com/b.js同一域名,不同端口不允许http://www.a.com/a.jshttps://www.a.com/b.js同一域名,不同协议不允许http://www.a.com/a.jshttp://70.32.92.74/b.js域名和域名对应i 阅读全文
posted @ 2013-10-31 19:25 JChen___ 阅读(35966) 评论(12) 推荐(11) 编辑
摘要: 知识体系JavaScript高级程序设计浏览器css渲染、缓存、JS执行顺序HTTP/AJAXJavaScript继承、闭包、匿名、代理、内存、DOM、跨域、原型jQuery各种机制CSS/CSS3动画、边框、阴影HTML5localStorage、sessionStorage、history、web worker等NodeJS 阅读全文
posted @ 2013-10-27 16:35 JChen___ 阅读(339) 评论(0) 推荐(0) 编辑