标签归档:前端开发

ExtJs 自定义组件事件绑定

优化了一下代码,结果如下。

调用:

<script type="text/javascript">
function aaa(){
	var student_panel = new WX.student.AddStudent({
		callback_fun:function(){
			alert("我是页面的方法");
		}
	}).show();
}
</script>

组件定义

Ext.define('WX.student.AddStudent', {
	
    extend: 'Ext.window.Window',

    modal:true,
    height: 585,
    width: 590,
    layout: {
        type: 'fit'
    },
    title: '新增学生',
    //用于组件函数回调
    callback_fun:function(){},
    initComponent: function() {
    	
        var me = this;
        
        Ext.applyIf(me, {
            items: [
                {
                    waitTitle: '加载中...',
                    items: [
                        ......
                    ],
                    buttons:[{
                    	text:'保存',
                    	scope:this,                  // <============== 关键参数 
                    	handler:function(){
                    		//DO SOMETHING...
                    		alert("组件的事件");
                    		this.callback_fun();
                    	}
                    }]
                }
            ]
        });
        me.callParent(arguments);
    }

});

【转载】对话《JavaScript高级程序设计》作者 Nicholas C. Zakas(中文版)

业界大牛尼古拉斯扎卡斯的一份访谈实录,蛮开阔眼界的,转载给大家,如果喜欢请注意标明转载出处。

注:以下根据Nicholas C. Zakas回复图灵社区访谈邮件的原文翻译。

转自:?http://www.ituring.com.cn/article/1791

—————————————– 正文如下 ————————————————-

Q1:对各种JavaScript库的优点和缺点一直存在很多争论。在您看来,开发人员应该怎么选择合适的库?

Zakas:在选择JavaScript库的时候,有几个非常重要的方面要考虑。首先,就是时间问题,也就是你的项目多长时间必须做完?如果时间很短,那最好选择你最熟悉的JavaScript库。如果时间不那么紧迫,那你可以研究一下别的库。此时,必须要回答几个问题。还有谁在使用这个JavaScript库?这个库有人在不断完善吗?这个库的文档是否完整详细?这个库的背后有没有一个社区,假如你遇到了问题,能不能获得该社区的支持?是否容易找到具有使用这个库经验的工程师?这个库能不能解决你的所有问题,还是只能解决其中一部分?所有这些都是在选择某个JavaScript库时需要考虑的重要因素。

Q2:你对HTML5的未来怎么看?现在的宣传是不是太过分了?

Zakas:HTML5对Web发展是一件好事儿。但不好的是,一些外行的非技术人员,不分青红皂白地给很多无关的东西都扣上”HTML5“的帽子,这才搞得HTML5这个概念满天飞。这与几年前“Ajax”的情况非常相似。从某种角度看,确实宣传上有点过了,仿佛HTML5会彻底改变每个人的生活。事实并非如此。HTML5的意义在于为开发人员提供了更多的工具,利用这些工具能够创建更有吸引力的用户体验。

Q3:看来,Mobile Web(移动互联网)开发会成为下一行业焦点,你觉得呢?

Zakas:移动互联网开发已经是焦点了。今天,谁不关注移动用户,谁就要被时代抛弃。移动互联网可不是昙花一现,它将是一个时代。如果你真是在开发Web应用,那么就必须考虑移动体验,否则就会让别人让抢占先机。

Q4:现在有很多基于JavaScript改进的语言,比如Dart、 CoffeeScript,等等。你认为JavaScript今后的路会朝着哪方面发展呢?是更加类似于JVM这种的中间层,还是仍然维持一个强大灵活的编程语言存在?或者说,对于专注于JavaScript的前端工程师来说,是否应该投入大精力去研究和使用CoffeeScript这种语言来简化工作,而不是纠结于JavaScript本身可能的繁复解决方案呢?

Zakas:我没觉得JavaScript有一天只会被当成一个中间层。Dart和CoffeeScript很引人关注,这说明开发人员可能更希望JavaScript能多适应一些应用场景。最终,我想JavaScript会博采众长,吸纳其他语言中更流行的范式,从而使语言核心更完善。但我不认为将来的Web开发人员会只用Dart或CoffeeScript或者其他能编译为JavaScript的语言写代码。

Q5:你觉得Node.js怎么样?它会在服务器端开发中发挥重要作用吗?将来,Web前、后端开发真能只用一种语言来做吗? 继续阅读

终结IE6下背景图片闪烁问题

a {}{
background:url(images/normal.gif);
}
a:hover {}{
background:url(images/hover.gif);
}

如果为超级链接定义上述的 css样式以实现鼠标悬浮时的动态效果,在firefox下是没有什么问题的,第一次加载之后,浏览器都会从缓存读取背景图片;而IE6在这里有一个 bug,它每次都从服务器端读取背景图片,结果就是,若服务器反应较慢hover效果就会出现短暂的空白,令人极度不爽。

一直以来都是通过“两张背景图片合并、background-postion控制位置”的方式解决问题的,效果差强人意。今天无意中从一个老外的 网站上发现了一个比较妥善的解决方案,具体来说就是在页面中加入一段简单的javascript脚本,告诉ie6:本地有背景图片的话就不要麻烦服务器 了。
document.execCommand(“BackgroundImageCache”,false,true);

关于这段脚本的放置方式有两种:

1.纯css方式,在css中加入如下代码
html {}{
filter: expression(document.execCommand(“BackgroundImageCache”, false, true));
}

2.随便在页面中哪个位置(head、body或者onload)调用上面提及的脚本,例如:
<script type=”text/javascript”>
document.execCommand(“BackgroundImageCache”, false, true);
</script>

鉴于expression严重影响浏览器效率,建议采用第二种方式。

最后,总结完整方案:普通、hover状态对应的图片合并成一张,css中通过background-postion控制其位置,页面中加入从缓存读取背景图片的javascript脚本。

谷歌产品体验设计

对于产品设计方面的文章,自己看的也多了,今天刚好搜到一片谷歌关于产品设计原则的文章。与我的想法不谋而合,追求速度和简单的极致。把链接共享给大家。

原文链接:http://www.google.com/corporate/ux.html

译文链接:http://ucdchina.com/snap/9529

谷歌的愿景

Googl用户体验团队致力于创建有用的(useful)、快速的(fast)、简单的(simple)、有吸引力的(engaging)、创新的 (?innovative)、适合大众的(universal)、有用的(profitable)、漂亮的(beautiful)、值得信赖的 (trustworthy)、个性化的(personable)的应用。

Google用户体验的十大准则

1. 将焦点集中在用户的生活,工作,和他们的梦想上。

Google 用户体验小组努力发现用户的真正需求,包括那些他们自己都无法阐明的需求。有了这些信息,Google就可以创建解决现实问题的产品并激发所有人的创造 力。Google的目标不仅仅是按部就班的工作,而是改善人们的生活。总之,一个精心设计的Google产品在日常生活中是非常有用的。他并不是靠花哨的 视觉效果和技术打动用户的,虽然也有具备这些特性。他不会强迫用户去使用他们不想要的特性,但是他会引导有兴趣的用户自发的去使用他们。他不会入侵别人的 生活,但是回想那些想要探索世界信息、工作的更加快速和便捷、分享想法的用户敞开大门。

继续阅读

HTML5用户指南 读后感

相对国内的书而言,这本书应该也算走在前列了吧.书中的内容介绍得多而全.如:

  • 新标签的语义以及使用环境
  • CSS样式化
  • 在什么环境下使用新的标签
  • 介绍 html5 为什么要以内容为主并且放弃了验证
  • 新型HTML5元素在浏览器中的应用
  • 新媒体,视频,音频
  • 画布
  • 数据存储 ( 比较感兴趣的是 web sql 的应用)
  • 如何构建离线程序
  • 拖放功能以及数据的传递
  • 如何获得自己的坐标(mobile 应用)
  • Message,Worker,Socket 的实现

给我的感觉就是作者有丰富的开发经验,并且对HTML在未来的应用充满了憧憬,的确也是,读完本书,我个人也觉得HTML5在未来 MOBILE 平台上肯定会大放异彩,当然也不排除传统的 WEB 应用在 RIA 方面的升华.作者结合了日常开发中的小例子,给读者小片的CODE并且对应用的案例进行一些简单的分析,留给读者发挥的空间.代码写得都是通俗易懂,没有特别难以理解的代码片段.基本上都是属于新API的调用.当然,这些例子也是点到即止,如果想对某章节深入研究的读者可能会失望了.

总的来说: 专业,简单,内容丰富且生动是我对这本书的评价.适合所有WEB前端开发人员.如果相对HTML5有一个基础的了解,这本书还算一个不错的选择.

[A188N+.Q] HTML5设计原理 —— Jeremy Keith在 Fronteers 2010 上的主题演讲

导读:“大多数人的意见和运行的代码”,Jeremy Keith的讲演站在开发者的角度娓娓道来Web真谛。围绕Html5的设计,探讨从规范的制定者、浏览器开发商再到开发者在标准制定上的逐步优先。作者旁征博引,引人入胜。很久没读到如此令我激动的文章了,不得不Copy一份。

——Jeremy Keith在 Fronteers 2010 上的主题演讲

本文原文来自:adactio.com/articles/1704/
译文取自:为之漫笔,最后更新于:14:29 2010/11/07
使用本文请遵循?Creative Commons attribution licence (CC-By 3.0)

今天我想跟大家谈一谈HTML5的设计。主要分两个方面:一方面,当然了,就是HTML5。我可以站在这儿只讲HTML5,但我并不打算这样做,因为如果你想了解HTML5的话,你可以Google,可以看书,甚至可以看规范。

实际上,确实有人会谈到规范的内容。史蒂夫·福克纳(Steve Faulkner)会讲HTML5与可访问性。而保罗·艾里什(Paul Irish)则会讲HTML5提供的各种API。因此,我今天站在这里,不会光讲一讲HTML5就算完事了。

说老实话,在正式开始之前,我想先交待清楚我所说的HTML5到底是什么意思。这话听起来有点搞笑:这会子你一直在说HTML5,难道我们还不知道什么是HTML5吗?大家知道,有一个规范,它的名字叫HTML5。我所说的HTML5,指的就是这个规范。但问题是,有些人所说的HTML5,指的不仅仅是这个规范,还有别的意思。比如说,用HTML5来代指CSS3就是一种常见的叫法。我可不是这样的。我所说的HTML5,不包含CSS3,就是HTML5。

类似的术语问题以前也有过。Ajax本来是一种含义明确的技术,但过了不久,它的含义就变成了“用JavaScript来做一切好玩的东西”。这就是Ajax,对不对?今天,HTML5也面临同样的问题,它本来指的是一个特定的规范,但如今含义却成了“在Web上做一切好玩的事。”我说的不是这种HTML5,不是这种涵盖了最近刚刚出现的各种新东东的HTML5。我说的仅仅是规范本身:HTML5。

刚才已经说了,我今天想要讲的内容不多,也没有打算介绍HTML5都包含什么。今天我要讲的是它的另一方面,即HTML5的设计。换句话说,我要讲的不是规范里都包含什么,而是规范里为什么会包含它们,以及在设计这个规范的时候,设计者们是怎么看待这些东西的。

设计原理

设计原理本质上是一种信念、一种想法、一个概念,是你行动的支柱。不管你是制定规范,还是制造一种有形的物品,或者编写软件,甚至发明编程语言。你都能找到背后的一个或者多个设计原理,多人协作的任何成果都是例证。不仅仅Web开发领域是这样。纵观人类历史,像国家和社会这样大规模的构建活动背后,同样也有设计原理。

就拿美国为例吧,美国的设计原理都写在了《独立宣言》中了。

我们认为这些真理是不言而喻的,人人生而平等,造物主赋予了每个人不可剥夺的权利,包括生存、自由和追求幸福。

这里有一句口号:生存、自由和追求幸福。这是被写进宪法中的核心理念,它关系到我们所有人的一切,也就是我们构建自己社会的原则。

还有一个例子,就是卡尔·马克思(Karl Marx),他的著作在20世纪曾被奉为建设社会主义的圭臬。其基本思想大致可以归结为下面这条设计原理:

各尽所能,各取所需。

这其实就是一种经济体系背后的设计原理。

还有一个例子,比前面两个的历史更久远一些,不过大同小异:

人人为我,我为人人。 继续阅读

HTML元信息标记(meat)

MEAT位于<head></head>间

<meat?name=”author”?content=”网页内容”>

<meat>标记属性:name是描述网页的,对应与content以便与搜索引擎机器人的查找,分类(目前几乎所有搜索引擎都使用网上机器人自动查找meat值来给网页分类)

<meat?name=”keywords”??content=”关键字内容”>

name=keywords代表关键字,当在搜索引擎总输入相关主题就会搜到本网站,关键字输入不要过多,应切中要害,关键字之间用逗号分割。 继续阅读

GWT 使用笔记

国庆长假没有着落啊,泪奔中,闲来无聊,就继续在家中上上网,听听歌,打打球。打发一下无聊的时光。昨天钓鱼去了,哈哈,收获不错,第一次钓鱼,第一杆下去就是一条不能塞牙缝的小鲫鱼。钓了一个下午,人晒得和非洲人一样。一身通红,才钓了6条丁点大小的鱼,o(︶︿︶)o?唉·····················背。

回家继续看了GWT,很 COOL 的一个框架,Google 公司的产品。仔细翻看一下,是一个很 JAVA 的框架。如果有 Java 的朋友不太会前端 UI,又觉得 YUI,Ext,Backbase 等这些个框架太难搞的话,可以尝试下这个。

总体上来说 GWT 和 Java 的 Swing 编程风格非常类似,也是有恶心的布局,事件监听器注册(做过Java的应该都知道 T_T)不过好在 Google 对 Eclipse 有一个不错的插件支持,看起来和 .Net 的 Vs Studio 200x 差不多,直接拖拽,不过双击并不能编程哦。需要自己找到 Widget 对象,并且绑定时间句柄。 继续阅读

一偏关于线框图的文章(转载)

在搜狐上看见的这篇文章。写的非常的言简意赅,并且容易理解。转载一下共享给大家

原帖地址:http://heidixie.blog.sohu.com/159793641.html


这是一篇老生常谈的问题,所以若有人已经了解,请自动忽略好了。这也是在一次和PD的交流培训会上再次提出的老问题:究竟线框图为什么要画,以及如何画。

至于线框图为什么要画,就不在这里聱述了。相信已经有很多人写过类似的文章,当然,如果你还有疑问,可以给我写邮件。

现在就是如何画的问题。 继续阅读

交互设计的方法(转载)

原文出处:http://www.baiduux.com/blog/2010/08/03/interaction_design/comment-page-1/#comment-453

看见这品文章刚好是在我们团队很混乱的时候出现了,天赐良文啊.在公司,我们也对设计越来越重视,可是也苦于没有很好的交互设计规则,导致搞得一团糟.作者的文章应该还是能够对线框图,交互设计这些工作中存在疑虑的开发者一些帮助. 继续阅读