1. fis-pure前端模塊化解決方案

        聯(lián)合創(chuàng)作 · 2023-09-20 11:58

        fis-pure 是基于FIS的純前端模塊化解決方案pure

        pure是基于FIS二次封裝能力封裝而成的解決方案,可以直接使用,也可以參考fis-pure自行封裝或組合使用插件來構(gòu)建屬于自己的一體化解決方案。

        模塊化開發(fā)

        • 不僅僅是腳本模塊化,pure帶給你模版、腳本、樣式的組件化方案。

        • 自動(dòng)加載模塊化依賴,無需手動(dòng)引入靜態(tài)資源。

        • 與Node.js風(fēng)格一致的模塊化開發(fā)體驗(yàn),告別 define。

        自動(dòng)性能優(yōu)化

        pure可以自動(dòng)壓縮、合并頁(yè)面引用到的所有資源,配置靈活,一個(gè)命令完成性能優(yōu)化,輕松實(shí)踐雅虎14條優(yōu)化規(guī)則。并且這一切優(yōu)化無需任何后端框架或服務(wù)支持。

        前端語(yǔ)言支持

        • 直接編寫less文件,無需額外編譯工具支持。

        • 可以直接在腳本中通過 var template = __inline('path/to/template.tmpl'); 引用經(jīng)過了預(yù)編譯的underscore模版,無需異步請(qǐng)求和解析。

        • 更多的前端語(yǔ)言支持可以參考輔助開發(fā)

        本地調(diào)試環(huán)境

        • 通過 pure server start 就能開啟本地調(diào)試服務(wù)器。

        • 通過 fis release --watch --live 實(shí)現(xiàn)監(jiān)聽文件修改,自動(dòng)刷新頁(yè)面等功能。更多內(nèi)容可以參考輔助開發(fā)

        如何使用

        安裝

        • 安裝 nodejs&npm

        • 安裝pure

          npm install fis-pure -g
          pure -v

        快速上手

        快速上手請(qǐng)參考前端模塊化

        模塊化加載

        如何使用模塊化加載可以參考fis-pure-demo,大致需要以下幾個(gè)步驟

        • 在需要模塊化資源管理的頁(yè)面,如index.html中引用Mod,注意Mod需放在lib文件夾內(nèi),因?yàn)檫@是模塊化加載庫(kù),不能被模塊化。 示例

        • modules目錄下添加頁(yè)面腳本,如main.js,在頁(yè)面中則可以通過require('main')加載靜態(tài)資源。 示例

        • 需要引用其他模塊,以jquery.js為例,只要在modules目錄中添加代碼,在main.js中就可以通過var $ = require('jquery')加載,在通過pure release發(fā)布后,頁(yè)面就會(huì)自動(dòng)加載jquery.js與main.js。

        目錄規(guī)范

        pure自帶了一個(gè)非常簡(jiǎn)單的目錄規(guī)范

        • 所有組件化的腳本、樣式、圖片均放在modules目錄中,可以按照組件劃分目錄,非模塊化的腳本放在lib目錄中。

        • page目錄下的頁(yè)面文件會(huì)發(fā)布到根目錄,靜態(tài)資源會(huì)發(fā)布到static目錄。

        任何 目錄規(guī)范、部署規(guī)范編譯規(guī)范 都是可配置的(配置代碼)。

        如果希望調(diào)整目錄規(guī)范,建議將配置代碼中roadmap.path的部分整體復(fù)制到項(xiàng)目的fis-conf.js中再進(jìn)行調(diào)整,避免配置不符合預(yù)期的問題。

        內(nèi)置的規(guī)范包括:

        1. modules 目錄下的js、css、less文件都是模塊化文件,腳本會(huì)自動(dòng)包裝define,無需手動(dòng)添加。使用require.async或者require加載模塊的時(shí)候id與文件的對(duì)應(yīng)規(guī)則是這樣的:

          文件 引用id 舉個(gè)例子
          /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');
        2. lib 目錄下的文件不被認(rèn)為是模塊化的,請(qǐng)直接在頁(yè)面上使用script或link標(biāo)簽引用。

        配置

        參考fis配置

        更多資料


        瀏覽 22
        點(diǎn)贊
        評(píng)論
        收藏
        分享

        手機(jī)掃一掃分享

        編輯 分享
        舉報(bào)
        評(píng)論
        圖片
        表情
        推薦
        點(diǎn)贊
        評(píng)論
        收藏
        分享

        手機(jī)掃一掃分享

        編輯 分享
        舉報(bào)
          
          

            1. 国产精品国产三级国产专区53 | 丁香成人五月天 | 国产20页| 男女裸体性婬乱视频免费看 | 天天操中文网 |