浅谈JavaScript沙箱SandBox设计模式

Posted by & filed under Uncategorized.

沙箱模式常见于YUI3 core,它是一种采用同一构造器(Constructor)生成彼此独立且互不干扰(self-contained)的实例对象,而从避免污染全局对象的方法。 命名空间 JavaScript本身中没有提供命名空间机制,所以为了避免不同函数、对象以及变量名对全局空间的污染,通常的做法是为你的应用程序或者库创建一个唯一的全局对象,然后将所有方法与属性添加到这个对象上。 代码清单1 : 传统命名空间模式

  在这段代码中,你创建了一个全局对象MYAPP,并将其他所有对象、函数作为属性附加到MYAPP上。 通常这是一种较好的避免命名冲突的方法,它被应用在很多项目中,但这种方法有一些缺点。 需要给所有需要添加的函数、变量加上前缀。 因为只有一个全局对象,这意味着一部分代码可以肆意地修改全局对象而导致其余代码的被动更新。 全局构造器 你可以用一个全局构造器,而不是一个全局对象,我们给这个构造器起名为Sandbox(),你可以用这个构造器创建对象,你还可以为构造器传递一个回调函数作为参数,这个回调函数就是你存放代码的独立沙箱环境。 代码清单2:沙箱的使用

  让我们给沙箱添加点别的特性。 创建沙箱时可以不使用’new’操作符。 Sandbox()构造器接受一些额外的配置参数,这些参数定义了生成对象所需模块的名称,我们希望代码更加模块化。 拥有了以上特性后,让我们看看怎样初始化一个对象。 代码清单3显示了你可以在不需要‘new’操作符的情况下,创建一个调用了’ajax’和’event’模块的对象。 代码清单3:以数组的形式传递模块名

  代码清单4:以独立的参数形式传递模块名

  代码清单5显示了你可以把通配符’*’作为参数传递给构造器,这意味着调用所有可用的模块,为了方便起见,如果没有向构造器传递任何模块名作为参数,构造器会把’*’作为缺省参数传入。 代码清单5:调用所用可用模块

  代码清单6显示你可以初始化沙箱对象多次,甚至你可以嵌套它们,而不用担心彼此间会产生任何冲突。 代码清单6:嵌套的沙箱实例

  从上面这些示例可以看出,使用沙箱模式,通过把所有代码逻辑包裹在一个回调函数中,你根据所需模块的不同生成不同的实例,而这些实例彼此互不干扰独立的工作着,从而保护了全局命名空间。 现在让我们看看怎样实现这个Sandbox()构造器。 添加模块 在实现主构造器之前,让我们看看如何向Sandbox()构造器中添加模块。 因为Sandbox()构造器函数也是对象,所以你可以给它添加一个名为’modules’的属性,这个属性将是一个包含一组键值对的对象,其中每对键值对中Key是需要注册的模块名,而Value则是该模块的入口函数,当构造器初始化时当前实例会作为第一个参数传递给入口函数,这样入口函数就能为该实例添加额外的属性与方法。 在代码清单7中,我们添加了’dom’,’event’,’ajax’模块。 代码清单7:注册模块

  实现构造器 代码清单8描述了实现构造器的方法,其中关键的几个要点: 我们检查this是否为Sandbox的实例,若不是,证明Sandbox没有被new操作符调用,我们将以构造器方式重新调用它。 你可以在构造器内部为this添加属性,同样你也可以为构造器的原型添加属性。 模块名称会以数组、独立参数、通配符‘*’等多种形式传递给构造器。 请注意在这个例子中我们不需要从外部文件中加载模块,但在诸如YUI3中,你可以仅仅加载基础模块(通常被称作种子(seed)),而其他的所有模块则会从外部文件中加载。 一旦我们知道了所需的模块,并初始化他们,这意味着调用了每个模块的入口函数。 回调函数作为参数被最后传入构造器,它将使用最新生成的实例并在最后执行。 代码清单8:实现Sandbox构造器

  Read more […]

浅谈jQuery的事件绑定

Posted by & filed under Uncategorized.

问题 首先我们看下面的一个很常见的事件绑定代码:  

这段代码在事件绑定处理上有一些缺陷: 过多的事件绑定会损耗内存 后期生成HTML会没有事件绑定,需要重新绑定 语法过于繁杂 解决方案 对于1、2两点的解决方案,我们首先先了解一下jQuery的事件绑定 jQuery的事件绑定有多个方法可以调用,以click事件来举例: click方法 bind方法 delegate方法 on方法 不管你用的是(click / bind / delegate)之中那个方法,最终都是jQuery底层都是调用on方法来完成最终的事件绑定。因此从某种角度来讲除了在书写的方便程度及习惯上挑选,不如直接都采用on方法来的痛快和直接。 性能 首先我们需要先对不同的事件绑定方式之间的内存占用差距有一个清晰的认识。 对于性能的分析将采用Chrome的Developer Read more […]

浅谈代码简洁化–校验过程

Posted by & filed under Uncategorized.

前言 大家都知道,客户端检测不单可以让用户获得更好的体验,而且可以通过校验数据大大减少客户端和服务器端的往返次数,减少服务器负担。在这里,打算回顾一下自己在客户端检测方面的学习历程和采用方法,如果大家有什么更好的方法或者建议,欢迎提出来共享! 为了方便举例和说明,先构建一个简单的html页面,如下:

  第一阶段是:续项强写 每个人都基本会经过这个阶段,就是对检测内容每个都手工校验。很惭愧,自己也写过不少这样的代码。。这个阶段的代码如下:

第二阶段:集中消灭 这阶段的同学们已经被第一阶段折磨怕了。很快就想出了集中消灭相同类型检测的方法。就是写检测函数,如下:

很可能还将上边代码独立成一个公共类,叫Common.js什么的,然后实际检测引用一下,就容易多了:

第三阶段:链式的威力 看着一大堆if Read more […]

浅谈js的原型和原型链

Posted by & filed under Uncategorized.

前言   JavaScript 不包含传统的类继承模型,而是使用 prototypal 原型模型。 虽然这经常被当作是 JavaScript 的缺点被提及,其实基于原型的继承模型比传统的类继承还要强大。实现传统的类继承模型是很简单,但是实现 JavaScript 中的原型继承则要困难的多。 由于 JavaScript 是唯一一个被广泛使用的基于原型继承的语言,所以理解两种继承模式的差异是需要一定时间的,今天我们就来了解一下原型和原型链。 原型 2年前,我刚学习JavaScript的时候,一般都是用如下方式来写代码:

  通过执行各个function来得到结果,学习了原型之后,我们可以使用如下方式来美化一下代码。 原型使用方式1: 在使用原型之前,我们需要先将代码做一下小修改:

然后,通过给Calculator对象的prototype属性赋值对象字面量来设定Calculator对象的原型。

  这样,我们就可以new Read more […]

HTTP协议及其POST与GET操作差异

Posted by & filed under Uncategorized.

1、HTTP概述 为了唤醒你对HTTP协议的记忆或使你能够对HTTP协议有所了解,首先简单一下HTTP协议。超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。所有的WWW文件都必须遵守这个标准。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。 HTTP的发展是万维网协会(World Wide Web Consortium)和Internet工作小组(Internet Engineering Task Force)合作的结果,(他们)最终发布了一系列的RFC,其中最著名的就是RFC 2616。RFC 2616定义了HTTP协议中一个现今被广泛使用的版本——HTTP 1.1。 1.1、HTTP协议的客户端与服务器的交互 HTTP是一个客户端和服务器端请求和应答的标准(TCP)。客户端是终端用户,服务器端是网站。通过使用Web浏览器、网络爬虫或者其它的工具,客户端发起一个到服务器上指定端口(默认端口为80)的HTTP请求。(我们称这个客户端)调用户代理(user Read more […]

浅谈责任链

Posted by & filed under Uncategorized.

概述 责任链(Chain of Responsibility)模式: 责任链模式是一种对象的行为模式。在责任链模式里,很多对象由每一个对象对其下家的引用而连接起来形成一条链。请求在这个链上传递,直到链上的某一个对象决定处理此请求。发出这个请求的客户端并不知道链上的哪一个对象最终处理这个请求,这使得系统可以在不影响客户端的情况下动态地重新组织和分配责任 情景模拟     简单描述 一个靓仔(高富帅或者低矮搓)为了追到心爱的女孩,历经磨难,最终到达结果! 预定两个磨难:女孩的闺蜜要求靓仔开车兜兜风;女孩的妈妈要求你有钱,有房。 构建原型 Me

    LoverFriends  

      LoverParents

MyLover

    第一次开始启动磨难历程

  发现问题 代码不能因需求无限的变化。(当出现爱人的姑姑给靓仔再添加一个磨难考验,他的弟弟妹妹再给靓仔添加磨难……..) 考验(Test)存在同样的形式。   解决问题 将这种考验变成接口! 将(Test)形成数组操作   提取接口Test  

  各个Model都实现Test。下面贴出LoverParents,其他同。

集合化

  发现问题 好像过多的磨难,需要组成一个集合类,方便增删改查。   解决问题 将考验形成集合! 集合本身也是一个大考验(Test),也可以实现Test接口  

  将考验形成单向一个链条,责任链!多么悲惨的事实!

  主程序

      得到的只是另一个历程的开始 好开心,心爱的姑娘答应了我,但是讨厌的事情又来了……… 情景模拟 心爱的姑娘答应了结婚,但是要求给他买个钻戒。妈妈要求彩礼,姐妹们要带她们去马尔代夫。   分析问题 好像又是很多的考验(Test),是不是继续添加Test对象?Test Read more […]

浅谈ASP.NET的Postback

Posted by & filed under Uncategorized.

说道ASP.NET的Postback,就得说Web Page的生命周期,但是Web Page的生命周期却不是三言两语就能够说得清楚的,所以在这里单纯站的编程的角度,撇开Web Page 的生命周期浅谈Postback。 我们知道,无论是ASP.NET1.x,2.0,甚至是以后的版本,ASP.NET最终Render到Client端通过浏览器浏览的都是一样:一个单纯的HTML。Client通过Submit Form的方式将填入Form的数据提交给Server进行处理。我们现在来看看ASP.NET整个Postback程序处理的过程。 首先我们通过一个Sample来看ASP.NET如何处理一个通过Click一个Button引起的Postback。下面是Web Page的HTML:

  很简单,定义了3个Button,分别注册了他们的两个Event:Click和Command。3个Button的Command Read more […]

C# 数组去除重复元素算法研究

Posted by & filed under Uncategorized.

在数组中去除重复数据,一般我们使用以下方法:

  原理应该比较容易理解吧,通过遍历原数组中的每一个元素,将元素添加到新的泛型listString中,如果listString已经包含了就不添加,当遍历完原数组,泛型中保存的就是去重后的结果了。   在数据量小的时候用这个算法还OK,但如果数据量比较大时其效率就不是那么让人接受了,一次处理需要耗费近1分钟左右的时间 由于需求对结果的元素序列没有任何要求,我采取了下列算法来提高效率

思路是:首先对数组进行排序,这样相同的数组就排列在了一起。然后遍历原数组,一次取出当前元素和上一个元素,如果2个元素相等就跳过,不相等就将其元素的保存到泛型listString中。(第一次运行的时候,前一个元素为空,所以把第一个元素单独拿出来处理) Read more […]

MVC项目开发中那些用到的知识点(js css优化– 合并和压缩)

Posted by & filed under Uncategorized.

在项目框架中,首先要引用很多css和js文件,80%的用户响应时间都是浪费在前端。而这些时间主要又是因为下载图片、样式表、JavaScript脚本、flash等文件造成的。减少这些资源文件的Request请求数将是提高网页显示效率的重点。 这里好像有个矛盾,就是如果我减少了很多的图片,样式,脚本或者flash,那么网页岂不是光秃秃的,那多难看呢?其实这是一个误解。我们只是说尽量的减少,并没有说完全不能使用。减少这些文件的Request请求数,我们这里主要针对js和css文件进行优化,使用Combres工具 第一步准备工具Nuget可以百度,也可以在此http://nuget.org/ 第二步通过VS2010管理NuGet程序包来查找第二个工具,也就是本次要使用的工具Combres的工具。 点击安装后,会在项目中生成一系列的文件和引用。 在App_Data/combres.xml,这个就是设置压缩/合并的文件配置。 第三步进行对配置文件进行处理,当然主要是对css文件和Js文件进行相关配置,修改combres.xml如下。

  这是我修改之后的文件配置。主要是resourceSet节点下的配置。 <!–defaultDuration Read more […]

Javascript执行效率小结

Posted by & filed under Uncategorized.

Javascript是一门非常灵活的语言,我们可以随心所欲的书写各种风格的代码,不同风格的代码也必然也会导致执行效率的差异,开发过程中零零散散地接触到许多提高代码性能的方法,整理一下平时比较常见并且容易规避的问题 Javascript自身执行效率 Javascript中的作用域链、闭包、原型继承、eval等特性,在提供各种神奇功能的同时也带来了各种效率问题,用之不慎就会导致执行效率低下。 1、全局导入 我们在编码过程中多多少少会使用到一些全局变量(window,document,自定义全局变量等等),了解javascript作用域链的人都知道,在局部作用域中访问全局变量需要一层一层遍历整个作用域链直至顶级作用域,而局部变量的访问效率则会更快更高,因此在局部作用域中高频率使用一些全局对象时可以将其导入到局部作用域中,例如:

  2、eval以及类eval问题 我们都知道eval可以将一段字符串当做js代码来执行处理,据说使用eval执行的代码比不使用eval的代码慢100倍以上(具体效率我没有测试,有兴趣同学可以测试一下) JavaScript Read more […]