模块化的JavaScript开发的优势在哪里

如今模块化的 JavaScript 的开发越来越火热,无论是模块加载器还是优秀的 JavaScript 模块,都是层出不穷。既然这么火,肯定是有存在的理由,肯定是解决了某些实际问题。很多没接触过模块化 JavaScript 开发者不禁要问,我真的需要模块化吗,模块化相比于传统的模式有什么优势?

JavaScript 本身是没有模块化支持的,很多语言多有,就连 CSS 都有这样的加载方式。

@import "fed.css";

虽然因为性能问题不推荐 CSS 这样来进行加载,但这是一种模块化的思想,这种思想对于 JavaScript 来说很有用。幸好 JavaScript 是一门灵活的语言,可以通过下面这段代码来进行动态加载 JavaScript 文件。

var script = document.createElement( 'script' ),
	head = document.head;

script.src = 'http://example.com/test.js';
script.async = 'async';

head.insertBefore( script, head.firstChild );
阅读全文 »

第三版主题上线

这是本博的第三版主题了,之前的主题一直以绿色为基本色,虽然我一直挺喜欢绿色的,但这次还是换成低调的灰色吧。

这次的主题更加符合阅读习惯,虽然增加了侧边栏,但看起来更简洁了。由于我对于圆角和渐变的设计风格已经有心理阴影了(因为平时工作,UI设计师总是搞些这样的设计风格来增加图片的体积),所以本次的主题没有用到任何的圆角和渐变的设计风格,不用这些照样可以有优雅的界面,让那些只会影响页面性能,为了设计而设计的圆角和渐变的设计风格去死吧。

最后还是要纪念下上一版拉风的主题:

纪念拉风的第二版主题
阅读全文 »

easy.js 正式开源

生命不息,折腾不止。断断续续独自开发了一年多的 easy.js 终于初步完成并开源,这是 easy.js 很重要的一步。而对于我个人来说,收获也较多。在开发的过程中,面对过诸多疑难问题的挑战,每解决一个难题对于我都是一次小提升。

jQuery 确实很优秀,我有怀疑过,但还是要承认这个事实。如果脱离了 jQuery,我还会写 JavaScript 代码吗?这是当时开发 easy.js 的契机—摆脱依赖,更深入的学习。开发 easy.js 的过程就是一个不断学习和进步的过程。当然,这并不是鼓励那些当时和我一样对于 JavaScript 类库和框架有很强依赖性的开发者都去开发自己的类库( 如果你有这个能力和精力可以去尝试 ),但是如果不了解这些 JavaScript 类库和框架的背后的原理,只停留在“会用”的阶段,恐怕只能原地踏步,难以上到一个新台阶上。毕竟,类库和框架提高开发效率的工具,不仅仅要擅于利用这些工具,必要时要具备自己创造工具的能力。

阅读全文 »

JavaScript 动画剖析

最近将去年写过的easyAnim进行了重构和优化以整合到我的javascript框架中,回过头来发现以前写的代码确实还有很多可以改进的地方,这也证明自己还是有点进步的。趁有点时间,将javascript动画运行的机制和实现的思路整理了一下,算是做个小总结,也希望对有兴趣的人有点帮助。篇幅稍长,看之前请自备瓜子啤酒。

当然这里说的javascript动画是指利用javascript来计算DOM元素的CSS属性值来实现的动画,HTML5和CSS3的发展让WEB中的动画有了更多的可能,但这些看起来比较高级的东西还需要浏览器给力点才行。

解析CSS属性值

理论上,只要CSS的属性值包含了数值,就可以进行动画,事实上,包含了数值的CSS属性值有很多很多,拿最常见的属性来说:

div{ left:100px; }

上面的位置值就包含了数值“100”,要想实现该元素从100px的位置到600px的位置,只要不断的修改该元素的位置值,达到一定的速度就实现了动画,据国外的统计,每25毫秒切换一次画面,就可以实现“动”的效果。

CSS属性值都是字符串,为了方便进行计算,需先将字符串转换成数值,并且很多属性值都包含了单位,所以最好解析成下面这种格式:

'100px' ==> { val : 100, unit : 'px' }
阅读全文 »

5173首页前端性能优化实践

从制定计划,到前后端的开发,最后到测试以及上线,历时4个月,5173首页前端性能优化项目终于顺利上线,并达到了预期的性能优化目标。这次的项目并不是改版,而是原来首页的设计和功能不变,只做重构和优化。虽然项目名叫前端的性能优化,但也并不仅仅是前端单方面的工作,要想彻底的把优化做好,就需要前后端的通力配合。

历史背景

老首页应该是09年上线的,首页也是各部门争夺资源的地方,大家都想在首页有一席之地,各部门在首页都有各自的小豆腐块,如果有新项目的上线,大多是打补丁的方式,并且唯一的规范就是能保证功能正常运行,至于性能方面,那是很遥远的事。苦逼的是开发人员,每次有首页的修改都是担惊受怕的,怕改了这个那个又出问题,历史原因造成的问题越来越多。

最先看不下去的应该是前端人员,因为首页在不断的修修补补中,性能已经差到前端人员觉得很没面子的地步了。但是看不下去也仅仅是看不下去,没法采取实质性的措施来改善,因为这牵涉到各部门的利益,也如上面说的,优化不仅仅在于前端,于是前端人员也只能向上面反映问题。到了今年,终于领导也看不下去了,某领导在海外访问我司的8185173首页,对比起来前者首页很快(插播一句,818首页前端开发人员也正是我^_^),后者首页很慢,差别较大。于是在领导重视的推动下,5173首页的前端性能优化项目才经过批准,开发人员终于可以放手大胆的折腾了。

阅读全文 »