<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          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ù)支持。

          前端語言支持

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

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

          • 更多的前端語言支持可以參考輔助開發(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)
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  三级片亚亚洲无码 | 蜜桃成人无码 | 曰本道东京热 | 一区二区三区四区在线 | 特级黄色A片 |