Extjs 一款基于JavaScript的Ajax企业级框架

最新推荐文章于 2024-03-09 15:15:54 发布

Ten~

最新推荐文章于 2024-03-09 15:15:54 发布

阅读量340

点赞数

文章标签： javascript ajax 开发语言前端

本文链接：https://blog.csdn.net/qq_50993646/article/details/132233148

版权

说到extjs 如今刚毕业或者准备入行的前端小白似乎没有听说过这个远古框架在如今许多的公司还在继续使用此框架并进行了自己的封装原因是此框架维护团队Sencha 将各个组件都封装到了框架中采用面向对象的继承方式让开发者进行选择试开发不需要关注太多的css和html 只需要关注js代码就能写出一个完整的系统但这也间接导致了定制化的局限性页面不太尽人意如果项目是更加炫酷的产品那么不太建议使用此框架如果只是简单的功能性项目那么此框架绝对可以完美的实现。如今的主流三大框架的些许模式都采用了 extjs 框架的设计思想例如组件化生命周期等。虽然是面向对象的构造思想但是最终离不开最基本的js 机制所以对于小白来说只需要将js 中的this 的指向和继承弄清楚此框架就很容易上手。如果有vue或者react的框架使用经历那么学习或上手起来就会更加的迅速。如果公司还在用此框架那么新入职的小伙伴不用害怕他将会带领你走向更好的编程。

如何学习这个远古框架？最佳答案：公司老员工带你。

当然如果你是孤身一人那么你可以像学习vue或者react一样先简单的了解这个组件的生命周期毕竟每一个框架的生命周期都是那么的重要在组件从创建到销毁都很重要。以下是我整理的生命周期对比vue

<body>
    <div>Ext.js的生命周期钩子</div>
    <ul>
      <li>initComponent--->vue 的created</li>
      <li>
        beforeRender 和 onRender--->vue befroMount 和 mounted 挂在前 挂载后
      </li>
      <li>afterRender ---> vue updated 组件渲染后进行一系列 操作</li>
      <li>
        beforeDestroy 和onDestroy --->vue beforeDestroy 和destroyed
        销毁前和销毁时
      </li>
    </ul>

    <script>
  Ext.define('MyApp.MyCustomComponent', {
  extend: 'Ext.panel.Panel',
  constructor(){
    this.callParent(arguments)
  },
  
  initComponent: function () {
    console.log('initComponent');
    this.callParent(arguments);
  },

  beforeRender: function () {
    console.log('beforeRender');
 this.callParent(arguments)
  },

  onRender:function(){
 this.callParent(arguments)
  },

  afterRender: function () {
    console.log('afterRender');
 this.callParent(arguments)
  },

  beforeDestroy: function () {
    console.log('beforeDestroy');
 this.callParent(arguments)
  },

  onDestroy: function () {
    console.log('onDestroy');
 this.callParent(arguments)
  }
});

Ext.onReady(function () {
  var myComponent = Ext.create('MyApp.MyCustomComponent', {
    renderTo: Ext.getBody(),
    width: 400,
    height: 300,
    title: 'My Custom Component',
    html: 'This is my custom component'
  });
});

    </script>
  </body>

我们下一篇文章在继续讲解基本组件的使用

Extjs 一款基于JavaScript的Ajax企业级框架

如何学习这个远古框架？最佳答案：公司老员工带你 。

如何学习这个远古框架？最佳答案：公司老员工带你。