• 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

  • 相关阅读:
    JavaScript寄生组合式继承分析
    常用的css命名规则:
    jshint配置(js检查)
    当页面关闭或刷新时提示用户
    Ionic 开发环境搭建
    VS Code前端开发利器-常用快捷键
    Uploadify 上传插件引起Chrome崩溃解决方法
    “全栈工程师”的尴尬
    redis集群升级,数据迁移及校验
    K-means
  • 原文地址:https://www.cnblogs.com/niejunchan/p/4986099.html
Copyright © 2020-2023  润新知