scrat- WEBAPP 模块化开发框架

网友投稿 822 2022-10-20

foo.css

css也能模块化

.foo {  font-size: 12px;}.foo-title {  /* 使用相对路径引用资源 */  background: url(icon.png) no-repeat;  padding-left: 30px;  font-size: 15px;}.foo-content {  padding: 10px;}

将源码中的相对路径构建后替换为部署后的绝对路径，是模块独立性的基本保证。只有将模块所需的样式、结构、逻辑都维护在一起，并且部署后还能定位到，才能保证模块独立可用。

关于工程模块的一些约定：

与目录同名的js为模块主文件。即foo.js是foo模块的主文件。与js同名的css文件会自动建立依赖关系。比如foo.js自动依赖foo.css。任何文件命名没有约束，主文件的与目录同名要求只是为了引用方便而已。在代码中使用工程相对路径开发，scrat构建会后自动替换成绝对路径。

安装生态模块

使用生态模块可以提高开发效率，scrat采用 component规范作为生态规范，因此用户可以从component生态中直接-组件供项目使用。

从生态安装模块之前，需要先在工程中创建一个 component.json 文件，内容为空的json内容 {} 即可：

project  ├─ component_modules (生态模块目录)  ├─ components  ├─ views  ├─ component.json    (生态依赖描述)  ├─ ...

component有很丰富的组件生态，比如 FortAwesome/Font-Awesome字体图标库，可以使用scrat直接从GitHub-放到项目中使用。

在项目目录下执行：

scrat install FortAwesome/Font-Awesome

安装完成后，component_modules目录下下会出现font-awesome模块的安装文件：

project  ├─ component_modules (生态模块目录)  │  └─ FortAwesome-Font-Awesome  │      └─ 4.1.0  │         ├─ component.json  │         ├─ css  │         │  └─ font-awesome.css  │         └─ fonts  │            ├─ FontAwesome.otf  │            ├─ fontawesome-webfont.eot  │            ├─ fontawesome-webfont.svg  │            ├─ fontawesome-webfont.ttf  │            └─ fontawesome-webfont.woff  ├─ components  ├─ views  ├─ component.json    (生态依赖描述)  ├─ ...

component.json文件也记录了安装的模块名及其版本：

{  "dependencies": {    "FortAwesome/Font-Awesome": "4.1.0"  }}

这样，一个来自生态的模块就可以在项目中直接使用了。

有关模块生态的更多内容请阅读 这里。

引用模块

开发或安装好一个模块之后，需要做的仅仅就是使用它们。由于资源分为模块化和非模块化两类，因此在不同的资源下引用模块是有所不同的。

在模块化js中引用模块

如nodejs般使用require函数就可以了

// 引用其他模块var foo = require('foo');// 引用当前目录下的文件var conf = require('./conf.js');// 调用模块接口foo.render(document.body);

在模块化css中引用模块

使用注释中的@require xxx来标记依赖

/** * 引用模块 * @require font-awesome * * 引用文件 * @require ./bar.css */.foo .fa {    font-size: 20px;}

在非模块化文件中使用模块

非模块化文件通过 模块化框架 来异步加载需要的模块，比如项目的主页面：

......

模块化框架的具体工作原理请阅读这里。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。