Skip to content

hao123-fe/her-preprocessor-fispadaptor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

##使用方法## ###1.安装插件###

npm install her-preprocessor-fispadaptor -g

###2.配置fis-conf###

fis.config.get('modules.preprocessor.tpl').unshift('fispadaptor')

##FISP模块迁移文档##

###1.替换smarty运行时插件###

下载最新的Her smarty运行时插件

其中plugin目录是smarty运行时插件,javascript目录是前端amd和bigpipe运行时,js_helper是一些有用的业务代码实现(例如bigRender.js)

复制plugin目录下所有文件到原fisp的plugin目录,并删除fisp同名的编译插件compiler.require.php、compiler.script.php、compiler.widget.php

注意: {html}插件会根据是否quickling请求决定是否输出DOCTYPE

<!DOCTYPE html>

所以不需要在模板中输出DOCTYPE,需要删除模板中直接输出的DOCTYPE。

###2.替换前端运行时框架###

前端运行时框架在javascript目录,main.js是框架运行必须的代码,需要在{html}标签初始化,例如:

// in tpl
{strip}
{html framework="path/to/main.js" lang="zh-cn"}
{head}

注意: 为了性能优化,Her前端运行时根据资源的依赖关系使用loader异步加载资源,默认只有框架js和{pagelet}外依赖的css是同步输出到页面的。

所以对于公用的库(例如jquery),建议用依赖管理的方式使用,即使用jquery的时候都要声明依赖:

require('common:static/jquery.js');
// then use $ or jQuery as global namespace

// or
var $ = require('common:static/jquery.js');
// then use $ as local variable (recommend)

如果不想每次使用jquery的时候都声明依赖,可以把jquery inline到lib.js中,这样jquery会同步加载,之后的js都可以直接使用$ or jQuery全局变量。但是从性能优化的角度,不建议这样做。

###3.安装预处理插件和配置fis-conf### 按上面的使用方法安装her-preprocessor-fispadaptor和配置fis-conf。

###4.用her release命令发布模块### 运行

$ her release -c

发布模块。至此你的模块已经可以run起来,你可以继续按下面的步骤进行性能优化。 注意: {script}标签内的js执行是在包含它的pagelet load之后,所以不能在{script}使用documet.write(),如果一定要使用documet.write(),在{pagelet}外可以直接写<script>标签。{pagelet}中的内容都不是同步输出的,不能使用documet.write()

###5.性能优化###

####5.1使用{pagelet}将页面分块(wiki)####

{pagelet}将页面分块,并收集其中的html、css、js。{pagelet}中的内容都通过js渲染。建议将非首屏内容都添加{pagelet},异步渲染。

####5.2 非首屏内容使用bigrender#### 在pagelet加载之前用js阻止,并在需要的时候手动调用pagelet.load()加载pagelet,即可实现bigrender。

依赖bigRender.js、lazy.js和jquery

{pagelet}
	...
	{script on="beforeload"}
		return !require('common:static/bigRender.js').add(this);
	{/script}
	...
{/pagelet}

####5.3 除框架js之外的所有业务js都使用require.defer(wiki)####

require.defer 会将模块的加载推迟到页面 onload 之后,以防止对首屏速度的影响。

###6.高级功能###

####6.1 Quickling局部刷新####

可以使用 BigPipe.fetch(pagelets[, url, cache]) 函数实现Quickling局部刷新。

同时我们也提供了 pageEmulator.js 监听a标签点击实现局部刷新

require.defer('common:static/pageEmulator.js',function(emulator){
    emulator.start();
});

About

A plugin made "Her" compatible with fisp projects.

Resources

Stars

Watchers

Forks

Packages

No packages published