基于fis扩展的fis-plus

##扩展了些什么？

fis-plus也是调用fis模块
fis-plus是添加了一些推荐的文件夹规范和fis配置（fis-conf.js）

也就是fis-plus的一些规范，例如将页面tpl文件(page)发布(release)到template文件夹，将widget下面的js+css发布到static/widget/页面名称/模块名称/文件夹下，将widget的tpl文件夹发布到/template/页面名称/widget/模块名称/文件夹下,map.json放到config`目录。

基于smarty做了一些便于模块化的插件(plugin)，扩展插件DEMO（http://zhangnan.baidu.com/dropbox/code/smarty/Smarty-3.1.18/demo/

），这里的插件和fis没有任何牵扯，仅仅使用了map.json资源表. 通过自定义标签收集资源放到对应的位置，根据使用了那些资源。知道页面中用了哪些资源，通过map.json查看已经打包了哪些资源，直接使用打包的资源放在头部(css)或者底部(js)

+ require:直接加载一个静态资源

    + 实际是收集一个资源到资源池，这里会第一次使用时，获取`map.json`。

+ script:是内嵌一个js代码

    + 收集内嵌的js，方便之后进行`renderScriptPool`

+ widget:是加载tpl+js+css

    + 收集一个模块的三大资源(tpl+js+css)

+ html+head+body等标签主要是控制结构，全局控制页面（例如把script到body底部位置、css放到head位置）

    + `head`插件负责放置一个`css hook`（`<!--[FIS_CSS_LINKS_HOOK]-->`）

    + `body`1、插件负责页面把所有内联的`script`放到这里执行（`renderScriptPool`）。2、`mod.js(小型js模块加载工具)`和将异步js的map资源变为`resorce map`内联到页面中还有所有需要的同步的js资源放进页面中。这里已经获取过map资源表，查看如果已经打包的就仅仅记载打包的文件。

分当前页（home）模块和基础模块(common)
- 这是前端所难以完成的
测试数据
- test
数据资源重定向（rewrite）
- 为这个DEMO写了一下详细的注释(fisp server open)
- 思路是写了一个路由(router)，获取url，再获取server-confi/下面的文件.conf来一行行读取，逐个匹配，成功就去获取数据然后赋值显示。
特别注意：只有模块化才可以用require

前端文件完整生命：

模块化（一个个模块文件）--->编译完（模板缓存php文件）----->php解析（用户访问php解析成字符串）---->html+css+js（浏览器请求过来）---->浏览器视图（UI）

随机推荐

webpack相关知识
能够处理JS文件的互相依赖关系能够处理JS的兼容问题安装全局安装 npm install webpack -g 项目安装 npm install webpack --save-
Javascript基础和ES6
HTML的基础事件 onmouseover、onmouseout表示JS事件的鼠标移入鼠标移出 document.getElementById('id') JS中选择HTML的ID元素<in
JavaScript编码规则
JavaScript编码规则目的：改善协作编码、代码质量。 var 声明变量必须用var。防止变量变为全局变量，污染全局环境。常量基本类型number、string、boolean是常量值。对
JavaScript获取和设置CSS属性
获取样式元素对象的宽高位置距离等属性如offsetWidht、cilentWidht、scrollWidth…… let oWidth=obj.offsetWidth; 注意：只能获取属
javascript作用域、上下文、this和闭包详解
词法作用域lexical scope 定义在词法阶段的作用域。词法作用域是变量和语句块在定义时所处的位置决定的。全局块级：在{}之内是一个块级作用域（ES6之前没有块级作用于只有函数内的局部作用

技术文档网

基于fis扩展的fis-plus

相关文章

随机推荐