页面模块化（设想）

由 愚人码头 撰写  |  2010/07/09 11:22 发表在 (x)html+css, 前端观察  |  评论 (9)

这段时间做一个项目，其实项目本身很简单，页面表现和结构甚至是交互都是现有的，就是将现有的多个项目页面一些功能做一下重新的拼装组合。

看上去很简单，其实做起来非常痛苦。因为由于历史和前期项目开发的原因其实做这些拼装是很痛苦的事情。现在碰到的一个问题，要开一个C项目，使用A项目的头部、底部、布局，使用B项目的模块功能，同时A项目和B项目本身存在这千丝万缕的联系，很多功能A项目和B项目功能是重叠的，表现上又是很统一、但是又有细微的区别。A项目和B项目都相对独立，css样式也是很独立的，根据每个项目都有一套独立的样式。结果导致在项目维护中A项目改了，B项目也要改，得改2个地方不说。现在有出来一个C项目，又是A项目和B项目合体……，开发时候一些公用样式受到A项目和B项目影响，无法公用不说，维护成本可想而知。这个几乎让我崩溃。

如何既能提高开发效率又能降低维护成本是最为一个前端开发工程师必须考虑的问题。正好前几天程序员和我讨论模板的问题，因为他们在开发C项目的时候也碰到了很多和我类似的问题。模板就是将页面的某部分分装成独立的版块，便于各个使用他的地方调用。那么我们的html和css可不可以按照功能模块或者展现模块来划分呢？答案显然是肯定的，至少在我们公司、我们网站由于页面表现和功能模块比较统一，这无疑给页面模块化提供了很好的萌芽环境。 Read More »

该日志被浏览1931次 标签：: | 阅读全文

使用JSONP跨域

由 愚人码头 撰写  |  2010/07/02 18:24 发表在 JS与RIA, 前端框架  |  评论 (0)

从 1.2 版本开始，jQuery 拥有对 JSONP 回调的本地支持。如果指定了 JSONP 回调，就可以加载位于另一个域的 JSON 数据，回调的语法为：url?callback=?。jQuery 自动将 ? 替换为要调用的生成函数名。

我们使用 ? 作为回调函数名，而非真实的函数名。因为 jQuery 会用生成的函数名替换 ?。

这里做了一个简单的flickr照片的跨域处理：


$(function() {
$.getJSON('http://api.flickr.com/services/feeds/photos_public.gne?id=51666465@N04&tagmode=any&format=json&jsoncallback=?', function(data) {
$.each(data.items, function(i, item) {
$(item.description).appendTo("body")
});
});
});

http://api.flickr.com/services/feeds/photos_public.gne?id=51666465@N04&tagmode=any&format=json

是我照片的json数据，加上callback回调函数 Read More »

该日志被浏览1196次 标签：:, | 阅读全文

使用document.domain和iframe实现站内AJAX跨域

由 愚人码头 撰写  |  2010/07/01 22:12 发表在 JS与RIA  |  评论 (0)

站内AJAX跨域可以通过document.domain和iframe实现，比如www.css88.com、js.css88.com、css88.com这3个域名其实是3个不同的域，很多时候www.css88.com和css88.com打开的可能是用一个页面，但是，他们确实是不同的域，比如www.css88.com的页面通过ajax无法直接获取css88.com域下的数据，这是由于js的安全性引起的。

不过我们可以通过document.domain和iframe实现在站内的ajax跨域。

查看demo：http://www.css88.com/demo/iframe-domain/

还有一点要注意，这个方法需要在iframe加载后才能使用！

该日志被浏览1024次 标签：: | 阅读全文

写在js森林一周年之际

由 愚人码头 撰写  |  2010/06/30 22:40 发表在 前端观察  |  评论 (13)

时间过的真快啊！一下子js森林群一周年了！去年的7月1日我，丸子，肉饼，大白等等一堆网友建立了这个群，当时的想法很简单，大家都是为了学好js。js森林有严格的群规，就是上班时间不准灌水，前期js森林甚至不能讨论css问题，进群需要考试，肯定要js基础。那时js森林有独立的群博客，有js论坛（博客和论坛由于某个原因现在都不复存在了）……
通过网上认识的很多朋友也给面子，很多都被我邀请进了js森林，我记得一开始这个群只有我和demo两个人，这个群号也只在一些关于js的文章上做一些推广，过了半年的时间也就30-40个人，后来建了js森林后才一下子到了200号人，人多了群就难管理，后来就严格限制进群条件。一般只是通过群员推荐，或者直接找我。
今天一下子T了42个人，因为丸子说7月1日一周年之际T半年不说话的，也幸亏丸子提醒，不然我还真忘了这个日志。
在这年里我在群里学了很多，认识很多朋友，虽然有一段时间我一直在学jq，但是前端时间开始我又重新回来学了原生的js，虽然很难，但是我从原生的js到jq再回到原生的js我学会很多东西，很多东西恍然大悟。

在js森林我感谢丸子，其实这个群是丸子的，因为丸子付出的最多；感谢肉饼，大白，当时没有他们我也不会建这个群；感谢六哥，六哥回答问题总是立竿见影，孜孜不倦；感谢demo，其实demo才是真正的元老；感谢肉块，肉块专门给js森林开了一堂js森林的语音交流会，感谢rekey，感谢小志，感谢遥遥，感谢zhenn，感谢甘，感谢芋头，感谢CE，感谢子房，感谢xhlv，感谢斩梦人…感谢所有js森林的所有成员！

不知道写了些什么，反正感谢js森林的所有成员，呵呵！

该日志被浏览940次 标签：: | 阅读全文

北京瑞友科技股份有限公司（原北京用友软件工程有限公司） 杭州分公司招聘前端开发

由 愚人码头 撰写  |  2010/06/29 17:37 发表在 前端招聘  |  评论 (0)

北京瑞友科技股份有限公司（原北京用友软件工程有限公司） 杭州分公司招聘前端开发。

职位要求：
1、 精通HTML、CSS，深刻理解各主流浏览器之间的兼容性。
2、 善于使用前端的基本调试工具。
3、 有较强的学习能力，乐于沟通，做事主动。
4、 有JavaScript开发经验优先，有后台开发经验优先。
5、 工作经验一年及以上。

联系方式：
简历投递至：wangzhuo@use.com.cn
QQ：100999829（请注明招聘信息）

公司简介：
北京瑞友科技股份有限公司（原北京用友软件工程有限公司）是全球化软件与信息技术服务供应商，致力于为全球客户提供量体裁衣、按需定制的专业IT应用规划咨询、软件系统开发及相关IT运营与支持服务。通过向全球客户提供高质量的个性化IT服务TM，最大限度地协助客户创造价值，与客户共赢共荣。

作为“国家规划布局内重点软件企业”和首批入选的中国科学技术部“中国软件欧美出口工程”（COSEP-A）A类企业，瑞友科技公司是率先整体通过美国SEI CMM5级评估的中国公司；2005年，再次整体通过美国SEI CMMI5级评估。2007年，成为通过BSI（英国标准协会）ISO 27001：2005现场认证的首家中国公司。2009年，公司成功通过ISO9001:2000质量管理体系认证。

http://www.rayoo.com.cn/

该日志被浏览814次 标签：:, | 阅读全文

招聘前端开发工程师

由 愚人码头 撰写  |  2010/06/27 23:50 发表在 前端招聘  |  评论 (4)

招前端开发工程师

所需人数：1名
工作地点：上海闵行区
—————————–
了解我们：
(1)我们正在做一个互联网网购社区C2C2B项目“如意算盘”。
(2)我们想做下一个10年最成功、最简单、最能盈利的网购社区网站。
(3)我们拥有一个来自51、snda高管组成的管理团队，和一个年轻激情的80后执行团队。
(4)我们期待在茫茫的互联网中，与你不期而遇，然后一见钟情，最后你深深地揽入我们团队的怀抱。
你的工作:
(1)用你精通HTML+CSS技能，迅速将PSD转化为扩展性能和负载性能较好的静态网页。
(2)把你所精通的javascript各种武艺统统亮出来，但至少熟练运用jquery的各种插件库，这门武功。
(2)既然做，就要做好，起码要做得更具有扩展性、在负载上也有所考虑，因为我们规划的会员范围是100W—1000W。
你的待遇：
(1)在前端这个领域，眼界决定你是否能持续成长，我们希望给你提供更好的发展空间，但同样要求你有较快的学习能力。
(2)公司免费提供员工宿舍，在27楼，早上起得早可以看日出，晚上一般下班较晚，看不到日落。日常的生活必须品都有了。
所以入驻就可以了。
(3)吃方面，公司有食堂，不过是借用世界500强企业的食堂，所以需要你自拟。
(4)公司有员工期权，大家吃肉，所以一般不会让其他人喝汤。
(5)你的起薪最初在6K\8K徘徊，后期公司成长后，会让整个数量增上去的，大概时间在半年左右。
其他信息：
上海亨融实业有限公司
所属部门：产品部；
如有意向，请投递简历至studyget@yeah.net / QQ:1025409678 / 13524753318(加时请注明）
该日志被浏览2171次 标签：:, | 阅读全文

JS操作iframe里的dom

由 愚人码头 撰写  |  2010/06/24 23:00 发表在 JS与RIA  |  评论 (4)

看到断桥残雪对我上一篇日志的回复我也学习了一下JS操作iframe里的dom；主要参考了断桥残雪的《用JavaScript在IE和Firefox下进行iframe的DOM操作》和支付宝UED的《用JS访问操作iframe里的dom》，非常不错的两篇文章。

一、父级窗口操作iframe里的dom

JS操作iframe里的dom可是使用contentWindow属性，contentWindow属性是指指定的frame或者iframe所在的window对象，在IE中iframe或者frame的contentWindow属性可以省略，但在Firefox中如果要对iframe对象进行编辑则，必须指定contentWindow属性，contentWindow属性支持所有主流浏览器。

相关的还有一个contentDocument属性，这个属性是指指定的frame或者iframe所在的document对象，但是悲剧的是，ie6-ie7并不支持这个属性。

ie6和ie7还可以使用document.frames["iframe Name"]或者document.frames["iframe ID"]来获取相当于contentWindow属性，而firefox和chrome并不支持这些document.frames["iframe Name"]或者document.frames["iframe ID"]，但是window.frames["iframe Name"]或window.frames[index]（index是索引值）也支持所有主流浏览器；

这个可以看实例：http://www.css88.com/demo/iframe-correspond/index-test.html

我们知道document对象是window对象的一个子对象，所以我们可以通过document.getElementById(“iframe ID”).contentWindow.document来获取iframe的document对象，相当于contentDocument属性。

二、iframe里的js操作父级窗口的dom

iframe里的js要操作父级窗口的dom，必须搞懂几个对象：

parent是父窗口（如果窗口是顶级窗口，那么parent==self==top），

top是最顶级父窗口（有的窗口中套了好几层frameset或者iframe），

self是当前窗口（等价window），

opener是用open方法打开当前窗口的那个窗口；

这样iframe里的js要操作父级窗口的dom可以通过parent，top这些对象来获取父窗口的window对象，例如：

parent.document.getElementById(“dom ID”)；

parent，top还能调用父级窗口的的js方法，比如，getIFrameDOM(iID）是父级窗口的一个方法，那么iframe里可以使用parent.getIFrameDOM(“wIframeA”)来调用父级窗口的getIFrameDOM(iID）方法；

————————————————

查看一下JS操作iframe里的dom的demo：http://www.css88.com/demo/iframe-correspond/

虽然iframe在现在WEB开发中越来越少用到了，但是iframe还有很多值得使用的地方，比如使用iframe解决跨域问题.关于iframe还有很多东西要学习，比如iframe自适应高度，使用iframe解决跨域问题，iframe加载问题，iframe加载性能问题等等，还有很多东西要学习，

该日志被浏览1966次 标签：:, , | 阅读全文

js窗口间通信摘要

由 愚人码头 撰写  |  2010/06/18 22:54 发表在 JS与RIA  |  评论 (1)

1.打开一个新窗口：window.open();为了便于父窗口操作子窗口可以为window.open()定义一个变量，例如：

var opW = window.open(‘tests.html’,'popup’,'width=300,height=300′);

这样要关闭子窗口可直接使用：opW.close();

要操作子窗口元素，例如：

opW.document.getElementById(“fartherWindowTxt”).innerHTML = “操作子窗口”;

2.子窗口可以使用window.opener来引用父窗口：window.opener.document.getElementById(“fartherWindowTxt”).innerHTML=”子窗口操作父窗口！”;

3.窗口关闭自身窗口可以使用：window.close();

点击查看demo：http://www.css88.com/demo/window-tongxin/

该日志被浏览1069次 标签：: | 阅读全文

盖亚魔力诚聘网站设计师

由 愚人码头 撰写  |  2010/06/17 16:37 发表在 前端招聘  |  评论 (0)

如果你符合以下其中三条，这份工作可能适合你：

热爱音乐，电脑里面起码有20G音乐，并且有自己极爱的曲风或者什么音乐都爱

平时工作之余常接项目，或者有自己做一些自己喜欢的设计

追求这篇文章的细节 http://ucdchina.com/snap/3545

有强烈的表现欲，建有自己博客、页面或者混迹论坛

追求自由，但做事无懈可击，曾经让老师，现在让老板很头痛

会翻墙

熟读至少一本关于Web产品设计的书，或喜爱以下其中一本书：

设计心理学

点石成金（Don’t make me think）

用户体验到要素

设计中的设计

写给大家看的设计书

基本职责：

配合产品经理完成产品Demo，输出产品保真原型和设计说明文档

根据产品策划，把握整体网站整体视觉设计风格，设计、修改网页关键元素

专题、广告或其他设计 Read More »

该日志被浏览961次 标签：: | 阅读全文

上海五分钟诚聘前端开发工程师

由 愚人码头 撰写  |  2010/06/17 10:47 发表在 前端招聘  |  评论 (1)

上海五分钟诚聘前端开发工程师

职位名称：前端开发工程师

你有两个方向可供选择：

平台方向
职位描述
1. 负责公司各游戏产品的web页面输出及优化；
2. 能快速处理主流浏览器的兼容性问题（FF/IE6/IE7/IE8/Chrome/Opera）；
3. 使用Facebook/人人网/opensocial等Javascript API完成相关功能；
4. 负责公司各管理系统后台界面的输出和Javascript开发；
游戏WAP版方向
职位描述
1.负责游戏wap版的前端开发工作；
2.保证在各种不同的移动设备中有良好的可用性；

职位要求
1. 本科或以上学历，一年以上前端开发相关工作经验，有WAP相关开发经验者优先考虑；
2. 精通各种Web前端技术，包括XHTML/XML/CSS/Javascript等；
3. 能熟练使用一门服务器端语言者优先考虑（如Java/PHP/C#/Ruby）；
4. 有良好的沟通能力，善于和各种背景的人合作；
5. 理解Web标准，对可用性、可访问性等相关知识有实际的了解。
6. 关注前端技术发展方向，对HTML5和CSS3有所了解；
注：简历请附上作品链接,若有技术BLOG，请附上BLOG地址。

简历请投递：jobs[at]fminutes.com 或   kai.zhang[at]fminutes.com

加入我们，一起创造快乐！

上海五分钟是世界上成长最快、创造性最强的社交游戏公司之一。在这里，你的每一份努力，都会成为全世界玩家的一份快乐！我们可以给你:

  • 一个开放快乐的环境；
  • 一个有挑战性的岗位；
  • 一把潜力巨大的股票；
  • 一份有竞争力的薪水；
  • 一段共同奋斗的回忆！
该日志被浏览919次 标签：: | 阅读全文