zoukankan      html  css  js  c++  java
  • Extjs的架构设计思考,单页面应用 or 多页面?

    写在前面:不要认为 EXTJS 高版本就是一个界面改良,在项目中,仍然用 N 张页面,在 N 张页面部署 EXTJS .这种方式不用多讲,效率问题大家都看得出来, EXTJS 是一个集成开发工具,注定他的开发包很大,一个 600 多 K 的 JS 文件,打算让它下载多少次呢?应该说, EXTJS 不仅是一个 AJAX 开发框架,也是一个富客户端开发平台, AJAX 是可以部署到多个页面,但不推荐这样做,Extjs能和 FLEX 一样,在一张页面中,完成项目中所有事件。 

    一、单页面 
    目前的应用方式:一个 Viewport ,点击每个菜单在 Viewport 的 center 区域生成一个 tab ,这个 tab 就是一个 panel , panel 中用 html 属性放置一个 iframe ,用 iframe 去加载另外一个全新的页面。 

    单页面方式:还是一个 Viewport ,点击每个菜单在 Viewport 的 center 区域生成一个 tab ,这个 tab 就是一个 panel ,但是 panel 中不使用 iframe ,而是将原来用 iframe 方式加载的内容,直接“画”在 panel 中。 

    目前的应用方式的问题: 
    1.  占用内存超高:每个 tab 都会用 iframe 加载一个全新的页面,每个页面都会载入一套完整的 ExtJS 的运行环境,由于浏览器的原因,这些 tab 关闭的时候内存不会完全释放,这样随着 tab 的开关,内存占用越来越多,占用几百 M 都没问题。 
    2.  center 区域内部的宽高,无法随浏览器宽高变化,无法自适应 
    3.  iframe 内外相互控制,内外沟通非常困难 
    4. 需要消耗额外的 js 解析时间,速度慢,重新加载要消耗解析 js 的时间 
    5.  用 iframe 有时候会导致一些莫名其妙的变形问题,滚动条问题 



    单页面方式: 
    1. 不用 iframe 加载, ExtJS 自己会释放无用的对象、事件占用的内存,一般一个应用只占用几十 M 内存 
    2.  由于是在一个页面内, ExtJS 自己可以掌控宽高自适应 
    3. 单一页面无此问题 
    4. 只需要第一次载入页面的时候加载 ExtJS 运行库 
    5.  很容易控制,无此问题 


    二、组件化、模块化
    编写 ExtJS 程序,应该像搭积木一样,在 Viewport 这样一个框架中,我们添加各种积木块进去得到我们想要的形状。 Extjs 给我们提供了很多最小块的积木,每一块都是一个组件,我们可以将几个最小的组件组合成一个稍微大一点的组件,我们不可能每个功能都从最小的组件从头搭建,我们可以收集一些更大一些的组件,实现这个层面的组件复用,组件是可大可小的,组件的复用也是可大可小的。组件化编程是一个思想,而不是一门技术,这个思想可以用在任何地方。 

    三、 UI 与逻辑分离 
    可能大家都已近习惯了将 handler 和 listeners 与一大堆 Config Options 写在一起了。不能说这是一种错误的用法,但是这绝对不是好用法。类似下面这种代码是不是随处可见呢? 
       

    这种写法,再加上全集变量泛滥,就会导致整个 js 文件混乱不堪,一个 js 文件 3000 行代码,全局变量满天飞,想要的时候找不到,我想大家都遇到过吧。 
     

    再看一下下面这段代码,不会不感觉清爽很多呢  

     


    UI 与逻辑分离,就是在设计一个组件的时候,将 UI 写成一个类,将事件处理和其他逻辑写成另外一个类,两个类存放在两个不同的 js 文件中 ( 非必须 ) 。这样子的好处: 
    1.  改动 UI 和逻辑,几乎不会相互影响 
    2.  代码清晰规范,提高开发速度,降低维护成本 
    3.  组件可以重用,界面可以重用 
    4.  有利于开发规范的统一 
    5.  因为使用继承,内存开销减少,运行速度加快

    转载自:http://shubangjun.iteye.com/blog/1009094

  • 相关阅读:
    修复PLSQL Developer 与 Office 2010的集成导出Excel 功能
    Using svn in CLI with Batch
    mysql 备份数据库 mysqldump
    Red Hat 5.8 CentOS 6.5 共用 输入法
    HP 4411s Install Red Hat Enterprise Linux 5.8) Wireless Driver
    变更RHEL(Red Hat Enterprise Linux 5.8)更新源使之自动更新
    RedHat 5.6 问题简记
    Weblogic 9.2和10.3 改密码 一站完成
    ExtJS Tab里放Grid高度自适应问题,官方Perfect方案。
    文件和目录之utime函数
  • 原文地址:https://www.cnblogs.com/niejunchan/p/4986099.html
Copyright © 2011-2022 走看看