islighting

动态载入/删除/更新外部 JavaScript/CSS (转)

Bentz — Wed, 20 Jan 2010 06:31:26 +0000

动态载入 JavaScript/Css 文件

传统加载外部JavaScript(*.js) 或者 Css(*.css)文件的方法是直接在标签里面进行添加:

1 2	<script src="myscript.js" type="text/javascript"></script> <link href="main.css" type="text/css" rel="stylesheet" />

这些文件用这种方式会同步加载到当前这个页面。

现在用动态的方式载入JavaScript/Css文件：

用 DOM createElement 方法创建一个 “script” 或者 ”link” 元素
设置相应的属性
使用 appendChild 方法, 把创建的元素插入到 head 标签的末尾

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

为了防止多次载入同一个js/css文件，添加以下判断（这只是粗略检测）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

//临时载入的文件名

var filesadded="";
function checkloadjscssfile(filename, filetype){
if (filesadded.indexOf("["+filename+"]")==-1){
loadjscssfile(filename, filetype);
//把 [filename] 存入 filesadded
filesadded+="["+filename+"]";
}
else{
alert("file already added!");
}

//第一次载入
checkloadjscssfile("myscript.js", "js");
//重复载入同一个文件，失败
checkloadjscssfile("myscript.js", "js");

动态删除 JavaScript/Csss 文件

注意：ie6/7 下动态删除样式时有bug. 2种解决方案：1.样式表里不要有import的样式表 2.把link的type属性设置为空值，然后再修改 href 的地，或者直接设置href为空，最后再把type值设置成”text/css” 强制让ie解释新的样式表。

取得相应的 DOM 元素
根据文件名&文件类型定位元素
用 DOM removeChild 删除一个 “script” 或者 ”link” 元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function removejscssfile(filename, filetype){
//判断文件类型
var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none";
//判断文件名
var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none";
var allsuspects=document.getElementsByTagName(targetelement);
//遍历元素，并删除匹配的元素
for (var i=allsuspects.length; i>=0; i--){
if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1)
allsuspects[i].parentNode.removeChild(allsuspects[i]);
}
}

removejscssfile("somescript.js", "js");
removejscssfile("somestyle.css", "css");

动态更新 JavaScript/Csss 文件

使用 createElement 创建要更新的 JavaScript/Css 元素
查找要被替换的元素
用 replaceChild 替换元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

Espresso 升级拉！

Bentz — Tue, 15 Dec 2009 15:46:32 +0000

Espresso，mac下强大的web开发IDE，最近升级到1.1，增加了不少新功能。

试过不少编辑器，最终还是选择了espresso来写页面，因为他最像神器textmate。类似textmate一般干净的界面和主题，不断增加中的sugar(扩展)，完美支持中文，更能导入textmate的bundle为我所用！这些优点和轻量的感觉，使得写页面这种枯燥的事情也变得鲜活乐趣起来。

这次增加的功能不少是重要更新，类似”Find in Project”，”Image Preview”，”Open with”，都使得工作流更加集成。

在一个界面端完成所有要紧事，这恐怕是你我这样的懒人最期望的事情。

Zen Coding，透过css生成html

Bentz — Tue, 15 Dec 2009 09:28:29 +0000

是不是觉得每天都敲同样的html代码有点麻木？ok，那就让css代我们生成优雅的代码和排版吧。让我们专心做其他更重要的事。

这就是Zen Coding所能做的。Zen Coding是一套快速编写html/css的工具，语法简单至极，实现的效果却有点惊人。利用css的书写规则来创建html，想像一下这有多便利吧，尤其是列表、小模块，这简直太棒了！

演示视频

简单的例子

1	div#content>h1+p

上面这一行的输出结果

1
2
3
4

更多语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14

* E
Element name (div, p);
* E#id
Element with identifier (div#content, p#intro, span#error);
* E.class
Element with classes (div.header, p.error.critial). You can combine classes and IDs, too: div#content.column.width;
* E>N
Child element (div>p, div#footer>p>span);
* E+N
Sibling element (h1+p, div#header+div#content+div#footer);
* E*N
Element multiplication (ul#nav>li*5>a);
* E$*N
Item numbering (ul#nav>li.item-$*5);

上手很简单，多看几个例子就ok，或者在demo尝试一下，online demo。
Zen Coding支持的IDE众多，包括textmate和espresso，可以作为插件安装到我们最熟悉的IDE上。Ok, let’s speed up!

Data URIs for CSS Images tests

Bentz — Tue, 15 Dec 2009 06:52:58 +0000

用Data URIs来嵌入image的好处是能减少连接数，更少的连接数意味着更快的访问速度，和更低的服务器负载。
Rob Flaherty作了一个 Data URIs for css images的测试，将一个页面做成三个版本，分别对比他们的加载情况：

页面a:默认页面，1 css 1 js 31 images, 33 requests
页面b:css images作data URIs嵌入到css中，3 requests
页面c:css images作data URIs嵌入到另一个css中，放到页尾， 6 requests

结论：如预期般的，加载时间c具体情况见这里

about lab

Bentz — Sat, 12 Dec 2009 14:10:51 +0000

把平常捣鼓的一些小玩意放在了lab中，经常更新。
经验很大程度上就是代码量的堆砌，轮子造出来了稍微修剪下就能应用，在细节上没有必要纠缠太多，快速实现，频繁迭代，不要让时间拖累了自己。

js tips

Bentz — Mon, 07 Dec 2009 05:58:40 +0000

超长换行的字符串
在换行的地方加\

1
2
3
4
5
6
7

var table = '

\
\
\
\
\

mootools bundle for textmate

Bentz — Tue, 03 Nov 2009 03:50:23 +0000

工欲善其事，必先利其器。textmate不愧为最强大的编辑器，各式的bundle不仅好玩，新奇，更重要的是使用，用好bundle的感觉就像武功高手打出一整套组合拳般淋漓畅快，华丽但又拳拳到肉。

mootools的bundle是在git上搜到的，作者Thomas Aylott貌似就是mootools开发者之一。。。他的git中还有一个非常好用的js bundle，相对textmate自带的bundle来说多了挺多实用的功能。

安装:

1 2	cd ~/Library/Application\ Support/TextMate/Bundles git clone git://github.com/subtleGradient/MooTools.tmBundle.git

然后show bundle editor，成功安装～
使用时注意将语言切换到MooTools Javascript

Google Wave

Bentz — Sat, 24 Oct 2009 10:56:28 +0000

要不是收到申请通过的信件，我都快忘记这茬了。。如果你还不了解google wave请看介绍

google这个受邀才能体验的机制做的狠抓人心，记得gmail出来时也是如此，最开始一个帐号能炒到上千美刀。。不过现在泛滥的可以不值钱鸟~

~~还有数个邀请，想要的朋友留言，我尽力发放~~

foobar杂记

Bentz — Sun, 18 Oct 2009 06:36:06 +0000

终于将客厅里的机器也安上了win7，比尔盖茨说过的家庭数字娱乐中心，正在慢慢实现。

重新装了foobar，界面还是太阳春了些，但对于这种自定性高的软件，我总是抱以十二分的好感，不管初始的界面或是功能多么简陋，一番diy以后，总有超出预期的惊喜。我安装的插件，列表如下：

foo_audioscrobbler
Last.fm推送
foo_ui_columns
columns ui配win7默认的主题，其实就很不错的了～
foo_out_asio
asio低延迟的输出，对音质很有帮助，既然我的m-audio 410声卡支持asio，那就不要浪费
foo_run
调用外部程序，
foo_w7shell
任务栏上显示专辑封面预览和播放控制

我的音乐都是以专辑文件夹形式归档的，免不了会有一些VA合辑的情况出现，想让他们在playlist中还是正常显示的话，可以修改playlist grouping script，改为

1	"$if2(%album artist%,%artist%) - %album% %date%"

，然后将合辑下所有单曲信息中的album artist设为一致，比如VA。

专辑的封面也是个麻烦事，不过借用AlbumArtDownloader XUI和foo_run，可以很方便的完成。
下载AlbumArtDownloader ，安装，我设置常用的album art抓取站点是amazon，last.fm，discogs，junorecords，对于我常听的音乐类型来说，这几个就够用了，实在不行还有google image么～

在foobar设置面板中增加一项Get AlbumArt的项(名称随意)，设置Path为

1	"D:\Program Files\foobar2000\AlbumArtDownloader\AlbumArt.exe" /artist "%artist%" "%album%" /album "%album%" /path "$substr(%_path%,0,$strrchr(%_path%,'\'))folder.jpg"

“D:\Program Files\foobar2000\AlbumArtDownloader\AlbumArt.exe”是我的目录，你需要把它改成你的。使用的话就是在playlist要抓封面的专辑或者单曲上右键 Run service -> Get AlbumArt，调出AlbumArtDownloader界面，就能抓到封面并保存到专辑目录下了

mac下清除dns缓存

Bentz — Thu, 15 Oct 2009 06:06:46 +0000

内网的dns服务器有时候会不稳定，导致svn无法连接到服务器，这时候可以清除一下dns缓存，正所谓来也冲冲，去也冲冲：

1	dscacheutil -flushcache