fis3 php cgi,FIS3

高级使用

静态资源映射表

记录文件依赖、打包、URL等信息的表结构,在 FIS2 中统称 map.json。在 FIS3 中默认不产出 map.json,FIS3 中为了方便各种语言下读取 map.json,对产出 map.json 做了优化。

当某个文件包含字符 __RESOURCE_MAP__,就会用表结构数据替换此字符。这样的好处是不再固定把表结构写入某一个特定文件,方便定制。

比如在

php

$_map = json_decode('__RESOURCE_MAP__', true);

?>

js

var _map = __RESOURCE_MAP__;

假设上面的 php 和 js 为分析静态资源映射表的程序,那么就省去了读 map.json 的过程。

当然,如果你想继续像 FIS2 一样的产出 map.json,只需要在模块下新建文件 map.json,内容设置为 __RESOURCE_MAP__ 即可。

模块化开发

模块化开发是工程实践的最佳手段,分而治之维护上带来了很大的益处。

说到模块化开发,首先很多人都会想到 AMD、CMD,同时会想到 require.js、sea.js 这样的前端模块化框架。主要给 js 提供模块化开发的支持,之后也增加了对 css、前端模板的支持。这些框架就包含了组件依赖分析、保持加载并保持依赖顺序等功能。

但在 FIS 中,依赖本身在构建过程中就已经分析完成,并记录在静态资源映射表中,那么对于线上运行时,模块化框架就可以省掉依赖分析这个步骤了。

在声明依赖内置语法中提到了几种资源之间标记依赖的语法,这样模板可以依赖 js、css,js 可以依赖某些 css,或者某个类型的组件可以互相依赖。

另外,考虑到 js 还需要有运行时支持,所以对于不同前端模板化框架,在 js 代码中 FIS 编译分析依赖增加了几种依赖函数的解析。这些包括

AMD

define()

require([]);

require('');

seajs

define()

require('')

sea.use([])

mod.js (extends commonjs)

define()

require('')

require.async('')

require.async([])

考虑到不可能一个框架运用多个模块化框架(因为全都占用同样的全局函数,互斥),所以编译支持这块分成三个插件进行支持。

// vi fis-conf.js

fis.hook('commonjs');

插件 README 有详细的使用文档。

如上面说到的,这个编译插件只是对编译工具做一下扩展,支持前端模块化框架中的组件与组件之间依赖的函数,以及入口函数来标记生成到静态资源映射表中;另外一个功能是针对某些前端模块化框架的特性自动添加 define。

有了依赖表,但如何把资源加载到页面上,需要额外的FIS 构建插件或者方案支持。

假设以纯前端(没有后端模板)的项目为例,对于依赖组件的加载就靠插件 fis3-postpackager-loader 。其是一种基于构建工具的加载组件的方法,构建出的 html 已经包含了其使用到的组件以及依赖资源的引用。

// npm install -g fis3-postpackager-loader

fis.match('::package', {

postpackager: fis.plugin('loader', {})

});

为了方便、统一管理组件以及合并时便利,需要把组件统一放到某些文件夹下,并设置此目录下的资源都是组件资源。

// widget 目录下为组件

fis.match('/widget/**.js', {

isMod: true

});

通过以上三步,纯前端的模块化开发就可实现。

总结一下;

编译工具扩展:根据不同前端模块化框架,扩展声明依赖能力

静态资源管理:解析静态资源映射表加载页面用到的组件及其组件的依赖

目录规范:设置某个文件夹下资源标记为依赖

工具扩展、目录规范,前后端的前端工程项目都需要,其不同之处就在于静态资源管理这部分。

资源映射表的模块化方案设计

解决方案封装

解决方案:解决一系列特定问题的工具、规范、开发、上线支持的方案,被称为 解决方案。前端工程的解决方案一般包括:

研发规范 + 模块化框架 + 测试套件 + 辅助开发工具

FIS3 中的包装解决方案,就是把这些集成到一个工具中。

一个解决方案就是继承自 FIS3 并且支持特定模块化开发、特定模板语言、特定处理流程、研发规范的构建工具。

封装解决方案的必要性规范开发,对于特定团队业务,应该有特定的目录规范、模块化框架等

FIS3 只提供一个方便定制前端工程的构建系统,每个团队需要怎么样去处理工程需要自己定制,定制会引入大量的 FIS3 插件,解决方案可统一规定引入哪些插件

树立独立技术品牌

解决方案封装

准备

方案名 foo

构建工具名字 foo

模板语言 PHP

模块化框架选择 require.js

特定目录规范

目录规范

/static # 静态资源

/page # 页面

/widget # 组件

/fis-conf.js # 配置文件

部署规范

/template # 所有的 PHP 模板

/static # 所有的静态资源

构建工具

foo

foo/bin/foo.js

foo/index.js

package.json

基于 FIS3 配置目录规范和部署规范

//vi foo/index.js

var fis = module.exports = require('fis3');

fis.require.prefixes.unshift('foo');

fis.cli.name = 'foo';

fis.cli.info = require('./package.json');

fis.match('*', {

release: '/static/$0' // 所有资源发布时产出到 /static 目录下

});

fis.match('*.php', {

release: '/template/$0' // 所有 PHP 模板产出后放到 /template 目录下

});

// 所有js, css 加 hash

fis.match('*.{js,css,less}', {

useHash: true

});

// 所有图片加 hash

fis.match('image', {

useHash: true

});

// fis-parser-less

fis.match('*.less', {

parser: fis.plugin('less'),

rExt: '.css'

});

fis.match('*.js', {

optimizer: fis.plugin('uglify-js')

});

fis.match('*.{css,less}', {

optimizer: fis.plugin('clean-css')

});

fis.match('*.png', {

optimizer: fis.plugin('png-compressor')

});

fis.match('widget/*.{php,js,css}', {

isMod: true

});

fis.match('::package', {

spriter: fis.plugin('csssprites')

});

//fis3-hook-module

fis.hook('module', {

mode: 'amd' // 模块化支持 amd 规范,适应 require.js

});

实现 /bin/foo.js

#!/usr/bin/env node

// vi foo/bin/foo.js

var Liftoff = require('liftoff');

var argv = require('minimist')(process.argv.slice(2));

var path = require('path');

var cli = new Liftoff({

name: 'foo', // 命令名字

processTitle: 'foo',

moduleName: 'foo',

configName: 'fis-conf',

// only js supported!

extensions: {

'.js': null

}

});

cli.launch({

cwd: argv.r || argv.root,

configPath: argv.f || argv.file

}, function(env){

var fis;

if (!env.modulePath) {

fis = require('../');

} else {

fis = require(env.modulePath);

}

// 配置插件查找路径,优先查找本地项目里面的 node_modules

// 然后才是全局环境下面安装的 fis3 目录里面的 node_modules

fis.require.paths.unshift(path.join(env.cwd, 'node_modules'));

fis.require.paths.push(path.join(path.dirname(__dirname), 'node_modules'));

fis.cli.run(argv, env);

});

以上代码 copy 过来即可,不需要做大的改动,感兴趣可研究其原理。

依赖的 NPM 包,需要在 package.json 中加上依赖:

fis-parser-less 解析 less

fis-optimizer-uglify-js 压缩 js,fis3 已内置

fis-optimizer-clean-css 压缩 css,fis3 已内置

fis-optimizer-png-compressor 压缩 png 图片,fis3 已内置

fis3-hook-module 模块化支持插件

fis3 fis3 核心

minimist

liftoff

package.json 需要添加

"bin": {

"foo": "bin/foo.js"

}

发布 foo 到 NPM

通过以上步骤可以简单封装一个解决方案,FIS3 提供了大量的插件,已经几乎极其简单的配置方式来搞定研发规范的设置,很轻松即可打造完整的前端集成解决方案。

基于Smarty的解决方案

fis3-smarty 集成了 fis-plus 的目录规范以及处理插件。实现对 Smarty 模板解决方案的工程构建工具支持。

基于纯PHP的解决方案

解决问题

支持模块化的开发,使用commonJS或者AMD方案来控制前端JS资源的加载

支持组件化开发,使用组件时能自动加载对应依赖的静态资源

自动分析资源依赖关系,确保依赖资源正常下载

自动把css放顶部、JS放底部输出,提升页面渲染性能

支持收集组件中的内嵌样式或脚本,合并输出

基于Laravel的解决方案文档内容有误,可提 PR,文档地址: /doc/docs/lv3.md

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
graduation 毕业设计代码,还没完成!但可以跑哦~ Fis3+Es6+Smarty+Tmpl 项目实战 阅读以下部分假定你已经了解: 构建工具 Fis3 基于Smarty的解决方案 Fis-Smarty 一些杂碎 Less, Tmpl, Es6 ... 微薄网站的设计与实现 功能 展示,留言,评论,评论量,访问量 后台CMS 瀑布流展示,懒加载数据 接入微博组件等 技术方案 前后端分离 构建: Fis3 结构: HTML,TMPL,Smarty 样式: Less 类库/框架: jQuery util: urlParam ... 数据: 假数据模拟,后期发布开发机联调 目录结构 前端目录 └─graduation ├─ README.md ├─ home └─ common ├─ plugin # Smarty 的插件放入这个目录 ├─ smarty.conf # 本地测试的 Smarty 引擎的配置文件 ├─ fis-conf.js # fis3 的配置文件 ├─ page # 放一些页面 ├─ server.conf # 本地测试的URL转发规则配置文件 ├─ static # 非组件静态资源 ├─ test # 假数据 └─ widget # 放一些 widget,里面代码最终会被组件化封装 ├─ header # 头部模块 │ ├─ header.js # js文件es6 │ ├─ header.less # css预处理 │ ├─ header.tmpl # JS模板 │ └─ header.tpl # Smarty 复用还是挺方便的 ├─ nav # 导航模块 ├─ article # 文章模块 └─ footer # 尾部模块 目录文件不是都必须需要,一般都会包含page、widget俩目录 前端预览或发布到本地模拟开发机预览该项目 发布到本地模拟开发机预览该项目 修改 fis-global-conf.js const RECEIVER = 'http://127.0.0.1/graduation-rd/receiver.php'; const to_path = '/graduation-rd'; const base_url = '/Applications/XAMPP/xamppfiles/htdocs/graduation-rd/'; 安装 npm install -g fis3 npm install -g fis3-smarty 后端环境下载 启动 fis3 release -r common xuecheng fis3 release -r home xuecheng fis3 release -r ... 发布成功后目录 └─ htdocs └─graduation-rd ├── application ├── home.php ├── license.txt ├── receiver.php ├── system ├── user_guide ├── template # .tpl 发布位置 ├── static # 静态资源发布位置 ├── plugin # plugin/*.php 发布位置 └── config # config/*.json 发布位置

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值