‘JavaScript脚本’ 分类的存档

随着越来越多的交互效果,Javascript越来越流行,对前端的要求也越来越高,无论是Dom,Event,Ajax……还是jquery,prototype,mootools,YUI,我们需要更多的学习 发展

3 条评论[原创]通过shtml实现重构页面模块化构建—实现交付物模块化

2011年10月19日

模块化思想已经不再是创新,陆续的演变成一种思维模式,在处理各种问题时都会考虑模块化思想

前端重构也已经有各种模块化的思想出现,结构模块化、样式模块化等等

今天和同事沟通视觉统一化的时候,发现流程中在产出物方面存在一个问题
如下图所示:

大家按照统一的思维过程在执行时 产出物在页面构建的环节,形成了一个聚合,从以UI组件为单位变为了以page为单位的产出物,而之后到了后端研发时,其实Template还是需要再次分拆,由于这个问题,而产生了更大的沟通成本,降低了整个团队的效率

基于这个问题 我提出了一个解决方法 还算不上解决方案,短暂的解决一下

在页面构建的环境 通过webserver的SSI Include指令 将静态页面也进行模块化,在交付产出物的时候后端研发人员是很清晰的看到module的复用代码,也降低了重构页面时对于统一的ui而产生不同html和css代码的错误率

具体实现如下:

在开发(测试环境)  建立webserver(nginx、apache均可) 然后通过配置文件开启SSI支持

Apache 开启SSI方式 http://www.uplinux.com/download/doc/apache/ApacheManual/howto/ssi.html

要使服务器允许SSI,必须在httpd.conf文件或.htaccess文件中有如下配置:

Options +Includes

告诉服务器以允许解析文件中的SSI指令。注意,在多数配置中,多个Options指令会互相覆盖,所以,可能必须对需要SSI的特定目录使用Options,以确保位于最后并起作用。

并不是所有文件中的SSI指令都会被解析,所以,必须告诉Apache应该解析哪些文件。有两种方法,使Apache解析带有特定文件后缀的任何文件,比如.shtml, 配置如下:

AddType text/html .shtml
AddOutputFilter INCLUDES .shtml

在 Nginx 开启 SSI ,加入以下3行就OK了,可以放在 http, server, 和 location 段都行

ssi on;
ssi_silent_errors on;
ssi_types text/shtml;

SSI Include 指令语法,我们主要用这个语法来调用相关组件文件代码

<!–#include virtual=”文件路径” –>

在构建页面时 目录结构可以是

demoproject/ 项目文件夹
|-- aboutus.shtml  综合性页面 包含module调用
|-- index.shtml    综合性页面 包含module调用
|-- other_page.shtml 综合性页面 包含module调用
|-- module  组件文件夹
|   |-- footer.html  组件文件
|   |-- header.html  组件文件
|   `-- other_module.html 组件文件
|-- images 其他静态文件
|-- js 其他静态文件
`-- style 其他静态文件

这样 我们形成的综合性页面的代码中会包含module调用,在我们每次对通用组建修改时,只需要修改组建文件即可
如下图,因为我们之前在webserver配置了SSI支持,所以我们能够实时预览效果

这样,除了在开发时方便了我们自己,我们的交付物也能够体现模块化思想,方便后端人员处理templates

 

同时我也用python写了一个开源项目,方便使用shtml这种方式构建页面的同事 产出传统html交付物

shtml2html项目

介绍:替换shtml中include内容为真实调用内容 并在同级目录生成.html文件 给重构团队在构建页面时使用

使用方法:

必须安装python环境 2.x版本
Usage: python shtml2html.py path 支持文件和目录(递归处理)

这是我目前的解决方法,正在试行中,小团队还没那么智能化,希望能给大家提供一些思路

如果你有更好的解决方案也请告诉我,多交流

2 条评论[前端开发利器]F5,实时页面刷新工具小测

2011年9月15日

一直在mac平台下工作,一直在用LiveReload(http://livereload.com/),windows下一直在用 xrefresh(http://xrefresh.binaryage.com/)做同步刷新还是很不错的,能够解决基本问题了

解释:

同步刷新:当文件修改时 浏览器自动刷新,如果你在做多屏幕开发的时候会尤其提升开发效率

昨天在微博上看到了f5这款国人开发的软件,今天收到激活码 ,在mac下进行了简单测试,没有什么问题

相比较的话,国人开发的这款软件基于air技术,能够比较好的跨平台,但是需要激活,不知道除了验证以外会不会有其他数据的收集

总体来讲 支持一下

官方网站:http://www.getf5.com//

视频演示:

下面有几个激活码 分享一下

  • c65af48f80e249d198293cdf1a9ee6a9
  • 55a365fc7d7042e5be52ad6d24b77450

没有评论【发布】豆瓣fm 简单扩展 支持各浏览器

2011年7月1日

听豆瓣电台的时候 听到好歌 想看下歌词或者下载 发现很费劲 标题也不能复制 就给自己开发了这个小扩展

可以在豆瓣播放器下面显示 歌词 和 下载的 链接

效果见下图:

项目发布地址:http://dbfmshow.sinaapp.com/

借此机会也学习了不少东西

Chrome扩展的相关知识 ,利用浏览器标签实现部分功能(云输入法也是这样实现的),同时还学习了一下SAE的部分使用方法

3 条评论用JqGrid简单实现了一个查询数据效果 基于本地静态数据

2011年6月21日

截图:


demo见:http://www.iamued.com/demo/Mselect/

代码:https://github.com/iamued/Mselect

也借此机会尝试用了一下git 貌似还不错哦~

2 条评论[转]jQuery1.5的改进细节

2011年1月19日

jQuery 1.5 beta1出来了,从学习跟进上来说,这一次已经比较晚了(我竟然不知道1.5什么时候出的alpha,就这么beta了)。

这个1.5版本最大的更新是AJAX的完全重写,提供了更强的可扩展性。但是受制于精力和篇幅,对新的AJAX的分析还是放到下回,本篇先简单介绍一下细节方面的改进。

jQuery._Deferred和jQuery.Deferred

首先不得不说这两个新生事物,因为他们是作为基础设施存在,不把这两个东西讲明白了,有些问题根本没办法解释。

首先,jQuery.Deferred是jQuery._Deferred的增强版,因此对于这个问题,从jQuery._Deferred入手,就能说明一大半的问题。

什么是Deferred?从字面上看,我的第一反应是“延迟加载”,首字母大写的应该是“类型”的定义,所以这大概是一个“透明提供延迟加载功能”的类型吧。然而实际上,虽然确实带有那么一点点“延迟”的意思,这个东西却不是用来实现延迟加载的。

简单来说,jQuery._Deferred是一个函数队列,他的作用有以下几点:

  • 保存若干个函数。
  • 在特定的时刻把保存着的函数全部执行掉。
  • 执行过后,新进来的函数会立刻执行。

感觉是不是和啥东西很像?对,jQuery的ready函数就是这样的逻辑,实际中jQuery 1.5中的ready函数也确实被嫁接到这上面去了。

jQuery._Deferred提供下面的接口:

  • done:function(fn1, fn2, …)的形式,用于把函数添加到队列中。
  • fire:function(context, args)的形式,使用context指定this对象,args指定参数,调用队列中所有函数。fire被调用后,_Deferred会进入 isResolved状态,未来对done的调用不会再保存函数,而是直接调用函数。
  • resolve:相当于调用fire(this, arguments),一个简化的方法。
  • isResolved:用来判断_Deferred是否在isResolved状态,具体参考前面的fire函数的解释。
  • cancel:取消掉整个队列,这样不管未来是不是fire,队列中的函数都不会再被调用。

说明白了jQuery._Deferred,再来看看jQuery.Deferred。这个东西其实就是2个_Deferred组成的,第一个称为 deferred,用于保管“正常”状态下的函数;第二个称为failDeferred,用于保管“出错”状态下的函数。同时 jQuery.Deferred提供了一些新的接口:

  • then:function(done, fail)的形式,把done添加进deferred,把fail添加进failedDeferred。
  • fail:相当于failDeferred的done函数。
  • fireReject:相当于failDeferred的fire函数。
  • reject:相当于failDeferred的resolve函数。
  • isRejected:相当于failDeferred的isResolved函数。

同时jQuery.Deferred取消了cancel函数。

那么这个是啥用的呢?有“正常”和“出错”2个状态,同时又是异步的,很容易就能想到……对,给AJAX用的,在下一篇分析中再详细说明。

jQuery.ready的变化

因为有了jQuery._Deferred这个东西,jQuery.ready函数变成依赖于函数队列,具体的变化有:

原来的readyList变量已经不再是一个数组,而变成了jQuery._Deferred对象。

原本在DOMContentLoaded时,调用readList中所有函数的逻辑,现在也使用了jQuery._Deferred中,原来的代码:

while ( (fn = ready[ i++ ]) ) {
    fn.call( document, jQuery );
}

变成了:

readyList.fire( document , [ jQuery ] );

jQuery.parseXML函数

新增了静态函数jQuery.parseXML,用于提供浏览器兼容的从字符串转为XML文档的功能。

该函数的逻辑网上有很多,jQuery也没有特别的地方,大致分为以下2种:

  • 对于标准浏览器,使用DOMParser对象:
    var parser = new DOMParser();
    var xml = parser.parseFromString(text, 'text/html');
  • 对于IE,使用Microsoft.XMLDOM对象:
    var parser = new ActiveXObject('Microsoft.XMLDOM');
    parser.async = 'false';
    parser.loadXML(text);
    var xml = parser.documentElement;

data部分

添加了jQuery.hasData函数,用于判断一个元素是否有jQuery附加上去的数据。

修改了jQuery.expando的实现,在原来单纯地取当前时间的基础上,添加了一个随机数:

expando = "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, "" );

这样保证在同一时间,引入多个jQuery副本,这几个副本之间的expando不会相互冲突,导致元素上的data变得错乱。一般来说,是不会引入多个jQuery副本的,但是使用SealJS等的时候,配置不当的话,也是很容易出现此类问题的。

DOM操作部分

原本的hasClass、addClass、removeClass函数都需要将元素的class属性分隔为数组,在1.4.4版本中,通过\n或\t进行分隔,在1.5中增加了一个\r,用于对应Windows平台下的换行符(\r\n)。

jQuery.fn.attr函数,1.4.4版本中拒绝从TextNode和CommentNode上获取属性,在1.5版本中添加了一个AttributeNode(noteType == 2)。

在1.4.4版本中,jQuery会在页面unload的时候清理掉由jQuery维护的所有DOM事件,这是为了避免IE的内存泄露问题。但是在1.5中这一段代码不见了,不知是出于什么考虑。

对于IE下使用cloneNode复制节点,会将事件也一起复制过来的问题,1.4.4中是采取复制innerHTML的方式给予解决,而在1.5中则采纳了mootools团队提供的方法,使用cloneFixAttribute函数修正该问题。

cloneFixAttribute函数们于jQuery 1.5 beta1源码文件的5388-5438行,处理IE的BUG的原理很简单,当然前端里一些看似简单的东西,都是很难发现的:

  1. IE中有个叫clearAttributes的函数,会清除到节点上的所有属性,顺便把和事件相关的onclick之类的属性也去掉了。在复制出来的节点上调用这个函数,就会把属性清得干干净净。
  2. IE中还有一个叫mergeAttributes的函数,把一个节点的属性复制到另一个节点上,但他不会把和事件相关的属性复制过去。所以再把原始节点调用mergeAttributes,把属性重新放回复制出来的节点上,这就相当于起到了去除事件相关属性的作用。

另外cloneFixAttribute函数还处理了非常多IE6-8在cloneNode上的兼容性问题,非常值得详细研究。

AJAX部分

AJAX已经完全重写了,只留下一点边边角角保留着1.4.4版本的风采,这里只抽取一部分进行简单的说明。

原来版本中$.get和$.post的实现非常相似,具体来说仅有一个method配置项不同,因此在1.5版本中被合并起来了:

$.each(['get', 'post'], function(i, method) {
    $[method] = function() { ... };
});

ajaxSetup函数现在加了一行return this;,可以链式调用了。

serializeArray函数现在统一将value中的换行符替换成Windows的风格(\r\n)。

AJAX的回调函数中,作为参数的对象不再是原生的XMLHTTPRequest,而是jQuery自己封装的称为jXHR的对象,这个对象提供了XMLHTTPRequest的常用接口。

原本对于“请求成功”的浏览器状态码,除200-299以及304外,还有一个1223,来自于IE的一个BUG,会将204的状态码变成 1223。现在因为有了jXHR对象,相当于中间多了一层,因此从jXHR对象获取statusCode不会出现1223的情况,已经被变回204了。

jQuery.ajax函数的配置项中多了一个statusCode项,其结构为map,用于指定返回特定状态码时的回调函数,大致形式如下:

jQuery.ajax({
    url: 'xxx',
    statusCode: {
        200: function() { 处理请求成功 },
        404: function() { 处理页面未找到 },
        503: function() { 处理Service Unavailable }
    }
});

再添加了这个回调后,jQuery.ajax函数已经有非常多的回调函数,其触发过程如下:

  1. 根据返回的状态码,触发success或者error回调。
  2. 根据状态码,触发对应的statusCode回调。
  3. 触发complete回调。
  4. 触发全局ajaxComplete回调。
  5. 如果此时没有正在执行的AJAX,触发全局ajaxStop回调。

其他细节

入口函数jQuery.fn.init现在多了一个参数,值始终为rootjQuery,用于加速init函数中对rootjQuery变量的查找速度(减少了一层作用域):

//jQuery 1.5 beta1 源码23行
jQuery = function( selector, context ) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init( selector, context, rootjQuery );
}

jQuery对象支持继承了,具体的修改是将几处直接调用jQuery的代码改为了对this.constructor的调用:

202行:return this.constructor( context ).find( selector );
253行:var ret = this.constructor();
334行:return this.prevObject || this.constructor(null);

同时还提供了jQuery.subclass函数用于创建一个继承自jQuery的类型,由于不是很常用jQuery,更是从来没有用到过需要继承jQuery的情况,因此也不方便说这个功能的作用有多大。

转自:http://www.cnblogs.com/GrayZhang/archive/2011/01/18/jquery-1-5-enhanced-detail.html