Chinaunix首页 | 论坛 | 博客
  • 博客访问: 553104
  • 博文数量: 233
  • 博客积分: 2221
  • 博客等级: 大尉
  • 技术积分: 3184
  • 用 户 组: 普通用户
  • 注册时间: 2010-02-16 14:01
个人简介

瓜瓜派的瓜瓜

文章分类

全部博文(233)

文章存档

2013年(28)

2012年(197)

2011年(8)

分类: JavaScript

2013-02-19 17:39:00



Ext JS是用纯JavaScript代码开发,期间可能会用到无数多的“{ }”、“( )”,一多起来就眼花缭乱,让你晕头。我的习惯是:

  1. 不要“吝啬”缩进;
  2. 模块化、组件化风格。

1. 坏的习惯
Ext.onReady(function() {
   new Ext.Window({
       height  : 300,
       width   : 400,
       layout  : 'fit',
       items   : new Ext.TabPanel({
           activeTab   : 0,
           items       : [
               {
                   title   : '第一页',
                   html    : '第一页内容'
               },
               {
                   title   : '第二页',
                   html    : '第二页内容'
               },
               {
                   title   : '第三页',
                   html    : '第三页内容'
               }
           ]
       })
   }).show()
});

上面这种写法,把各个组件揉在一起写,在UI组件很多且复杂的情况下,可读性很差。

2. 组件化写法
Ext.onReady(function() {
   var Tab1 = {
       title   : '第一页',
       html    : '第一页内容'
   }
   var Tab2 = {
       title   : '第二页',
       html    : '第二页内容'
   }
   var Tab3 = {
       title   : '第三页',
       html    : '第三页内容'
   }

   var tabPanel = new Ext.TabPanel({
       activeTab   : 0,
       items       : [
           Tab1,
           Tab2,
           Tab3
       ]
   });
   
   new Ext.Window({
       height  : 300,
       width   : 400,
       layout  : 'fit',
       items   : tabPanel
   }).show()
});

把组件分开来,看起来、写起来都清楚多了。


阅读(3861) | 评论(1) | 转发(0) |
0

上一篇:RubyMine和WebStorm到货

下一篇:Ruby变量

给主人留下些什么吧!~~

CU博客助理2013-04-08 14:59:59

嘉宾点评:现代编程实践中,对代码的可读性极为重视,可读性良好的编码风格对 debug、代码的维护、修改都十分重要。javascript 程序员非常容易忽视这一问题,而 javascript 代码又是出名的难调试,难修改。2gu a通过自身的编程实践,指出了在使用 ExtJS 框架进行 javascript 编程过程中,如何运用编码风格编写可读性高、易维护的代码,这是值得推荐的,也是每个程序员应该引起重视并一直遵循的。希望作者能够在 javascript 编程方面,为我们提供更多的好的建议。
(感谢您参与“原创博文评选”获奖结果即将公布)