Archives for : 友吧今天

星期日 晴朗 6~21℃

这样加载 mapbar api js 可能比较理想

官方的方法是把 js 放在 head 加载,然后用 window.onload 执行,这样会有一个问题,进入这个页面时比较慢。

我的做法是在页面底部加载 mapbar 的 js,因为用的是 jquery,所以没有用 window.onload,而是用了 jquery 的 ready(),但是发现这样会有一个问题,有时会提示 maplet is undefined。

window.onload 是所有图像和其他外部资源完整的加载并且在浏览器窗口显示完毕之后才执行;

而 jquery 的 ready() 是在 DOM 被解析之后就执行,在图像和外部资源加载之前就执行。

今晚想到用 jquery 的 getScript() 的回调,应该是比较理想的:

<script type="text/javascript" src="mapbar_api.js"></script>
<script type="text/javascript">
$(function(){
 $.ajaxSetup({cache:true}); // 启用缓存,避免每次都重新加载mapapi.js
 $.getScript("mapbar_api.js", function(){
  initMap();
 });
})
</script>

注意:前面一定要先引用一次 <script type="text/javascript" src="mapbar_api.js"></script>,否则有些地方会出错,例如在调用 maplet.resize() 的时候。

2012-4-14 更新:

发现在 IE 浏览器下,还是把 js 放在 <head> 内会更理想,$.ajaxSetup 对 IE 看起来没有效果或效果不大,而放在 <head> 内,只是初次访问页面时会稍微卡一下,二次访问就不影响了。

基于这一点考虑,建议还是把 js 放在 <head> 内。至于触发,如果是用 jquery,那么建议用 $(function(){ initMap(); }),而不是用 window.onload,以避免其他 js(例如站点统计 js)的阻滞。


使用 mapbar api 31.4

虽然官方宣布的最新 api 是 31.3,但是最近发现 31.4 已经可以调用了,首先发现的不同之处是气泡的 UI 发生了变化,看起来更好看了,还加了投影。


友吧今天

  • 清理模板目录,移除 v3 暂不需要的模板;
  • 场馆详细页第五晚。

 

星期六 晴朗 6~18℃

友吧今天

场馆详细页第四晚,处理 tips 和侧栏。

星期五 上午小雨,下午阴转多云 4~12℃

uch2.0 与 jquery 冲突的解决方法

因为 uch 定义了

function $(id) {
 return document.getElementById(id);
}

和 jquery 的 $ 冲突。

把 jquery 放在 uch 的 js 之前引用(位置不要错),并使用 jquery 的 noConflict() 让出对变量 $ 的控制权。

<script type="text/javascript" src="source/script_jquery.js"></script>
<script type="text/javascript">var Q = jQuery.noConflict();</script>
<script type="text/javascript" src="source/script_common.js"></script>

注意,Q 也要放在 uch 的 js 之前定义,可以用其他不冲突的变量名(我是觉得大写的 Q 和 $ 都是按 shift 组合键,看起来长得也有点像)。

这样定义之后,本来以前这样写的 jquery:

$("#test")

改成这样写:

Q("#test")

详细可以查看 jquery API 里 noConflict() 介绍。


2012-03-22 羽球日志 ( 75)

昨天下班和同事一起去打。

这可能是第一次也是最后一次和这里的同事一起去打吧,因为今天公司就搬回北软了,结束了几个月的寄人篱下的生活。

以前总觉得周一到周四晚上打球不舒服,去打了才发觉周四打球也挺不错,打完球第二天再上一天班就到周末了。

很久没打了,昨晚运动量还算合适。最近关节炎有好转趋向,晚上睡觉时膝盖的腘窝下面不需要垫软的东西了,腿可以伸直来睡,垫着反而变得不舒服。


友吧今天

处理场馆详细页。

星期三 晴 8~15℃

友吧今天

  • 处理场馆详细页。
  • 思考评分系统,打算把场馆的“好中差评”改为“星级评分”。

第1400天:优化css层级

星期二 上午小雨,下午阴 2~10℃

友吧今天

  • 优化 css 层级。
  • 开始处理场馆详细页。整站模板一共三个大框架,前面好了两个,这是第三个。

星期一 上午小雨转阴,下午阴 5~10℃

notepad++ 免安装版“ansi”和“unicode”的选择

notepad++ 免安装版(zip package)里面有“ansi”和“unicode”两个版本,不知道要选哪个,有个繁体的资料:

※注意:免安裝版解壓縮後會有兩個資料夾分別為「ansi」與「unicode」編碼版本,若你不懂兩者的差異,請統一使用「unicode」版本!

参考:http://jgwy.net/thread-916493-1-1.html

这方面资料不多,还是下载安装版吧。


web高性能开发系列随笔,顺便说一下对“CSS的查找匹配原理”之外的看法

这里的几篇文章《web高性能开发系列随笔》值得看一下。其中最后一篇《了解CSS的查找匹配原理》杀伤力很够猛。原来对于一个层级写法,浏览器不是从左到右去查找匹配,而是从右到左去查找匹配的。不过虽然是知道了这个原理,但我还是会保留使用层级写法的习惯,只是要尽量减少层级数(尽量不超过 3 个)。

联想到 jquery 来。css 从右到左匹配和 jquery 的从左到右匹配正好相反,jquery 里对 id 的选择效率最高。

无论 css 还是 jquery,如果一味追求这点效率,就会让 html 的 class 和 id 激增,使 html 代码变得拖沓,可读性降低,css 自身的可读性也大大降低,如果遇到大的项目,要取这么多 className,一定会很头疼,最后导致这个 className 丧失语义,或者名字很长。

过多的 class / id 和过多的层级,都是极端的,写的时候注意权衡,兼顾两者。


解读CSS优先级

http://www.blueidea.com/tech/web/2009/6801.asp


友吧今天

  • 合并 js,减少 head 请求;
  • jquery.plugins.js 放到页面下方;
  • <head> 内的 css 放在 js 之后。

星期日 多云(雾) 6~18℃

友吧今天

继续 map api 优化。把想到的其他优化先记到记事本上,等上线后再优化。

明晚开始处理场馆详细页。

星期六 阴霾 13~19℃

css reset 处理不好也有弊端

下面这个是比较流行的 css reset:

* { margin:0; padding:0; border:none; outline:0; font-family:inherit; font-style:inherit; font-size:100%; font-weight:inherit; vertical-align:baseline; }

今天发现 mapbar 气泡的关闭按钮错位了,经排查,原来是受 css reset 的 vertical-align:baseline 的影响。

另外,前几天还遇到一个问题,border:none 影响了 select 在 ff 下的显示。

css 不要盲目对所有元素进行 reset,它可能反而会引起意想不到的问题。可分别对不同元素组进行 reset。


友吧今天

map api 优化。

第1396天:setTimeout() 详解

星期五 上午多云转阴,下午阴 12~19℃

setTimeout() 详解

看了这篇文章,对 setTimeout() 会有更深的理解。


友吧今天

早上在公交上想到一个栏目“游戏规则”。

继续优化 map js。

第1395天:阻止事件冒泡方法

星期四 中雨 9~14℃

阻止事件冒泡方法

昨晚遇到一个冒泡问题:

<div onclick="alert(‘第2个触发’)">
 <a id="test" href="#@第3个触发" onclick="alert(‘第1个触发’)">点我</a>
</div>

本意是希望点击 <a> 时不要执行它父级的 <div> 的 onclick,而是直接跳转页面。想了个方法,在 click 子元素时 removeAttr 父级的 onclick  :

$("#test").click(function(){
 $(this).parent().removeAttr("onclick");
})

今天早上来公司查一下,原来 jquery 有提供阻止冒泡的方法 stopPropagation() :

$("#test").click(function(event){
 event.stopPropagation();
})

参考:http://justcoding.iteye.com/blog/587876

又查一下,如果用原生 js 来写,需要用到 stopPropagationcancelBubble

function stopBubble(event) {
 //如果提供了事件对象,则这是一个非IE浏览器
 if (event.stopPropagation)
  //因此它支持W3C的 stopPropagation()方法
  event.stopPropagation();
 } else {
  //否则,我们需要使用IE的方式来取消事件冒泡
  event.cancelBubble = true;
 }
}

参考:http://hi.baidu.com/daijun2007/blog/item/bb0bf431e511b6a45edf0ec8.html

再看一下 jquery-1.4.4_source.js,里面定义了一个同样是名为 stopPropagation 的方法,所以使用 jquery 的 stopPropagation() 就不用考虑浏览器兼容的问题了。


removeClass() 比 removeAttr() 效率高

有同学进行了测试


友吧今天

优化地图传参。