zoukankan      html  css  js  c++  java

  • extjs5(项目中文件的加载过程）

    现在来看看js类加载过程。如下图所示：



    1. 1､首先：浏览器中输入 localhost:1841 ，调用 index.html;   
    1. <!DOCTYPE HTML>  
    2. <html>  
    3. <head>  
    4.     <meta charset="UTF-8">  
    5.   
    6.     <title>app</title>  
    7.   
    8.     <!-- The line below must be kept intact for Sencha Cmd to build your application -->  
    9.     <script id="microloader" type="text/javascript" src="bootstrap.js"></script>  
    10.   
    11. </head>  
    12. <body></body>  
    13. </html>  
    在这里面只引入了一个文件：bootstrap.js。这是一个神奇的文件，他根据配置文件bootstrap.json来设置extjs的类的调用路径、引入css，最后再根据配置文件中的信息，加载app.js。这个文件只要知道这些功能就行了，要了解具体的内部实现，可以去搜索一下相关文章。

    2､app.js文件的说明

    1. Ext.application({  
    2.     name: 'app',//应用的名称app  
    3.   
    4.     extend: 'app.Application',       //继承自app.Application,这个文件是 app/Application.js  
    5.       
    6.     autoCreateViewport: 'app.view.main.Main'  //自动创建的Viewport的类名,文件在 app/view/main/Main.js  
    7.   
    8. });  

    上面的类中会根据类加载的设置信息，自动为类 app.Application加载文件 /app/Application.js,同样也为app.view.main.Main类找到js文件并加载。


    3､Application.js文件

    1. Ext.define('app.Application', {  
    2.             extend : 'Ext.app.Application',  
    3.   
    4.             name : 'app',  
    5.             views : [], // ＭＶＣ用到的view  
    6.             controllers : ['Root'  
    7.             // MVC控制器的名称，会自动到 /app/controller下去加载同名的js文件  
    8.             // 对于Root,会去自动加载 /app/Controller/Root.js 这个文件  
    9.             ],  
    10.             stores : [],  
    11.             launch : function() {  
    12.                 // 需要执行的语句可以加在此处  
    13.             }  
    14.         });  


    4、Main.js 文件

    1. Ext.define('app.view.main.Main', {  
    2.     extend: 'Ext.container.Container',  
    3.   
    4.     xtype: 'app-main',  
    5.       
    6.     controller: 'main',   
    7.         //MVVM架构的控制器的名称，会在当前路径中根据‘Main’ + Controller 来确定文件名  
    8.         //这个我没找到其他任何可以自动加载MainController.js的依据，只能作上面的判断了  
    9.     viewModel: {  
    10.         type: 'main'  
    11.         //MVVM架构的viewModel的类型，会在当前路径中根据‘Main’ + Model 来确定文件名  
    12.     },  
    13.   
    14.     layout: {  
    15.         type: 'border'          //系统的主页面的布局  
    16.     },  
    17.   
    18.     items: [{  
    19.         xtype: 'panel',   
    20.         bind: {  
    21.             title: '{name}'  
    22.         },  
    23.         region: 'west',     //左边面板  
    24.         html: '<ul><li>This area is commonly used for navigation, for example, using a "tree" component.</li></ul>',  
    25.          250,  
    26.         split: true,  
    27.         tbar: [{  
    28.             text: 'Button',  
    29.             handler: 'onClickButton'  
    30.         }]  
    31.     },{  
    32.         region: 'center',       //中间面版  
    33.         xtype: 'tabpanel',  
    34.         items:[{  
    35.             title: 'Tab 1',  
    36.             html: '<h2>Content appropriate for the current navigation.</h2>'  
    37.         }]  
    38.     }]  
    39. });  



    上面的类是继承自Container的一个容器类，这个类使用了extjs5的mvvm的新特性，


    1. controller: 'main',   
    2.     //MVVM架构的控制器的名称，会在当前路径中根据‘Main’ + Controller 来确定文件名  
    3.     //这个我没找到其他任何可以自动加载MainController.js的依据，只能作上面的判断了  
    4. viewModel: {  
    5.     type: 'main'  
    6.     //MVVM架构的viewModel的类型，会在当前路径中根据‘Main’ + Model 来确定文件名  
    7. },

    上面的属性controller表示当前Main类的控制器为"main",这个类里没有引用控制器的语句，因此控制器的类名可能是有其默认的加载规则，应该是在当前路径中加载“Main”+"Controller.js"，这个文件作为控制器。viewModel属性定义了ＶＭ的类型，其加载类的规则和上面控制器是一样的。
     
    由于此类是作为一个 autoCreateViewport 属性被加载，加载完成后会立即生成一个实例，并渲染，就是我们看到的网页。
     
     
  • 相关阅读:
    oracle查看锁表及解锁
    二、web综合开发
    一、springboot入门
    oracle行转列及分组排序
    awk命令--转
    oracle 游标
    HttpServletRequestWrapper类的使用
    rabbitMQ
    java（其他）面试要点7
    java（框架）面试要点6
  • 原文地址：https://www.cnblogs.com/dingjiaoyang/p/6612670.html
Copyright © 2011-2022 走看看