1. 开源软件
  2. Web应用开发
  3. Web框架
  4. fis-pure

fis-pure - 前端模块化解决方案

Web框架
未知
跨平台
JavaScript

软件简介

fis-pure 是基于FIS的纯前端模块化解决方案pure

pure是基于FIS二次封装能力封装而成的解决方案，可以直接使用，也可以参考fis-pure自行封装或组合使用插件来构建属于自己的一体化解决方案。

模块化开发

  • 不仅仅是脚本模块化，pure带给你模版、脚本、样式的组件化方案。

  • 自动加载模块化依赖，无需手动引入静态资源。

  • 与Node.js风格一致的模块化开发体验，告别 define。

[](https://github.com/fex-team/fis-

pure#%E8%87%AA%E5%8A%A8%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96)自动性能优化

pure可以自动压缩、合并页面引用到的所有资源，配置灵活，一个命令完成性能优化，轻松实践雅虎14条优化规则。并且这一切优化无需 任何
后端框架或服务支持。

[](https://github.com/fex-team/fis-

pure#%E5%89%8D%E7%AB%AF%E8%AF%AD%E8%A8%80%E6%94%AF%E6%8C%81)前端语言支持

  • 直接编写less文件，无需额外编译工具支持。

  • 可以直接在脚本中通过 var template = __inline('path/to/template.tmpl'); 引用经过了预编译的underscore模版，无需异步请求和解析。

  • 更多的前端语言支持可以参考辅助开发

[](https://github.com/fex-team/fis-

pure#%E6%9C%AC%E5%9C%B0%E8%B0%83%E8%AF%95%E7%8E%AF%E5%A2%83)本地调试环境

  • 通过 pure server start 就能开启本地调试服务器。

  • 通过 fis release --watch --live 实现监听文件修改，自动刷新页面等功能。更多内容可以参考辅助开发。

[](https://github.com/fex-team/fis-

pure#%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8)如何使用

安装

  • 安装 nodejs&npm

  • 安装pure

    npm install fis-pure -g

    pure -v

[](https://github.com/fex-team/fis-

pure#%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B)快速上手

快速上手请参考前端模块化

[](https://github.com/fex-team/fis-

pure#%E6%A8%A1%E5%9D%97%E5%8C%96%E5%8A%A0%E8%BD%BD)模块化加载

如何使用模块化加载可以参考fis-pure-demo，大致需要以下几个步骤

  • 在需要模块化资源管理的页面，如index.html中引用Mod，注意Mod需放在lib文件夹内，因为这是模块化加载库，不能被模块化。 示例

  • modules目录下添加页面脚本，如main.js，在页面中则可以通过require('main')加载静态资源。 示例

  • 需要引用其他模块，以jquery.js为例，只要在modules目录中添加代码，在main.js中就可以通过var $ = require('jquery')加载，在通过pure release发布后，页面就会自动加载jquery.js与main.js。

[](https://github.com/fex-team/fis-

pure#%E7%9B%AE%E5%BD%95%E8%A7%84%E8%8C%83)目录规范

pure自带了一个非常简单的目录规范

  • 所有组件化的脚本、样式、图片均放在modules目录中，可以按照组件划分目录，非模块化的脚本放在lib目录中。

  • page目录下的页面文件会发布到根目录，静态资源会发布到static目录。

任何 目录规范、部署规范、编译规范 都是可配置的（配置代码）。

如果希望调整目录规范，建议将配置代码中roadmap.path的部分整体复制到项目的fis-
conf.js中再进行调整，避免配置不符合预期的问题。

内置的规范包括：

  1. modules 目录下的js、css、less文件都是模块化文件，脚本会自动包装define，无需手动添加。使用require.async或者require加载模块的时候id与文件的对应规则是这样的：
文件 引用id 举个例子
/modules/main.js main var main = require('main');
/modules/jquery/jquery.js jquery var $ = require('jquery');
/modules/jquery/jquery.scroll.js jquery/jquery.scroll require('jquery/jquery.scroll');
  1. lib 目录下的文件不被认为是模块化的，请直接在页面上使用script或link标签引用。

配置

参考fis配置

[](https://github.com/fex-team/fis-

pure#%E6%9B%B4%E5%A4%9A%E8%B5%84%E6%96%99)更多资料

软件首页