当前位置:  软件>JavaScript软件

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

    来源:    发布时间:2015-01-03

    本文导语:  fis-pure 是基于FIS的纯前端模块化解决方案pure pure是基于FIS二次封装能力封装而成的解决方案,可以直接使用,也可以参考fis-pure自行封装或组合使用插件来构建属于自己的一体化解决方案。 模块化开发 不仅仅是脚本模块化,pu...

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

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

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

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

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

自动性能优化

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

前端语言支持
  • 直接编写less文件,无需额外编译工具支持。

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

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

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

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

如何使用 安装 快速上手

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

模块化加载

如何使用模块化加载可以参考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。

目录规范

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

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

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

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

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

内置的规范包括:

  • 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');
  • lib 目录下的文件不被认为是模块化的,请直接在页面上使用script或link标签引用。

  • 配置

    参考fis配置

    更多资料



        
     
     
     
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行
  • 什么叫前端??
  • Web前端设计:Html强制不换行<nobr>标签用法代码示例
  • 前端集成解决方案 F.I.S
  • Web前端设计:html上标<sup>标签与下标<sub>标签详解
  • 前端解决方案 OniUI
  • 数据库前端管理工具 VFront
  • 后盾网HDJS前端库 HDJS
  • 前端验证组件 DESTINY Validator
  • GTK窗口前端显示及GTK窗口闪烁
  • UI前端解决方案 KoalaUI
  • pfcalc的图形化前端 Qpfcalc
  • MPlayer 的图形化前端 ExMplayer
  • CUPS 的图形化前端工具 GtkLP
  • Linux图形化登录前端 gRuijieClient
  • syslog日志的Web前端 LogAnalyzer
  • Web 开发前端工具 hood.ie
  • 企业级前端应用开发平台 EDP
  • 前端开发框架 Furatto
  • 前端UI解决方案 Bootswatch
  • 网易前端JS框架 NEJ


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3