[Ext JS6]包-Package

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/oscar999/article/details/84997253

Ext JS 包的概念

就是共用组件的概念,一些可以共用的前端代码封装成组件使用并可以放到中央库和本地库。感觉是借鉴了Angular JS的设计。对后端比较了解的话,可以类比成Java中的依赖包放到Maven库中管理。

Ext JS 包的类型

code代码 - 给其他包或是应用使用, 通过 require方式导入
theme主题- 应用的主题样式
locale本地化

创建包(package)的方式

包的创建是在工作区(Workspace)中进行的。
关于工作区,可以参考:
[Ext JS6]工作区-Workspace
命令行切换到工作区目录,以创建一个本地的名字为mypackage的包为例。
执行:

sencha generate package mypackage

执行之后会在工作区目录中创建包的目录,结构如下:
packages/ # 包目录
local/ # 本地工作区包
remote/ # 下载的包
注:包创建的默认路径也可以修改。

包的子目录

创建的包下包含不同子目录,存放不同类型的代码。

  1. src - 源代码
    src 目录存放客制化组件类和一些其他的类。这些类会自动包含在classpath中,使用require方式导入使用。
    大部分的js代码放于此,这个路径中的js类需要遵循一些规则:
  • 每个js的源文件需包含全局的Ext.define声明
  • 文件名和类名保持一致。比如Ext.define(“MyApp.mypackage.bar.Thing” ,源文件就是Thing.js
    -类的命名空间(类的包路径)和文件存放位置保持一致。以上面为例/ mypackage/bar

cmd编译器将类和文件视为同义词,如果需要某个文件中的类,则这个文件中所有的类都会导入,而不能切割。

  1. saas - 样式
    saas目录包含三个子目录用于编译样式的各个部分
  • saas/etc 和js的类没有直接关系
  • saas/var 变量定义 (镜像js类层级)
  • saas/src 综合和规则(镜像js类层级)
  1. resources-资源
    resources目录存放包需要用到的静态资源。
    当应用使用这个包的时候,会把这个目录复制到各自resources 的子目录中。
    以上面为例 目录就是resources/mypackage

  2. overrides -重写
    overrides 目录用放需要重写的。
    应该谨慎使用此机制,因为放置在此文件夹中的所有代码将自动应用到使用此包的任何应用程序中。

包的使用

应用如有需要使用包, 方式是在app.json中加入:

{
    "name": "MyApp",
    "requires": [
        "mypackage"
    ]
}

除此还需要使用sencha app build 或者sencha app refresh 命令让导入生效。一般运行sencha app refresh较多。
运行之后, 会下载包到 packages/remote 目录下。

包的版本

在文件package.json中,有两个版本的属性:version (版本) 和compatVersion (兼容版本),
版本定义规范:

x.y.z.b
x-大版本
y-小版本
z-补丁
b-构建编号

包的框架和主题

设定包的框架和主题, 在package.json文件中加入:

"framework": "ext"
"theme": "theme-triton"

构建包

发布包,切换到包的目录下,执行命令:

sencha package build

运行之后会在包路径下产生一个 build 目录。在开发模式运行的时候需要这个目录。
同时会在 build目录下产生一个包名的子目录,里面有一个包名的 .pkg文件。
以上面为例:
mypackage/mypackage.pkg

猜你喜欢

转载自blog.csdn.net/oscar999/article/details/84997253