項目中如果管理前端文件CSS和JS


如何管理CSS和JS文件,一直是前端一個熱門的話題。下面將簡單分享一下使用心得,歡迎大家吐槽、拍磚和提供更好的實現方式。


一、管理CSS文件,本博客將討論less管理。

iReset.less、iButton.less、iCss3.less、iIcon.less、iTab.less、iMenu.less、iDialog.less、iForm.less、iDatagrid.less等等文件、以上文件都是最小模塊文件。
把上面的文件按實際需要合並成一個iBase.less文件。如:打算將iReset.less、iButton.less合並在iBase.less中。

在iBase.less中引入如下文件即可:
@import "iReset.less";
@import "iButton.less";

頁面級的管理,把頁面中設計到的模塊引入進來,和當前頁面的樣式引入進來。
例如:頁面中用到了iCss3.less,iDialog.less、iDemo.less。
在iDemo.less中引入:
@import "iCss3.less";
@import "iDialog.less";
/*  頁面中獨立的樣式  */

最后通過編譯生成需要的CSS文件。



2、管理JS文件。
iJquery.js、iString.js、iArray.js、iDate.js、iBrowser.js、iUITab.js、iUIMenu.js、iUIDialog.js、iUIForm.js、iUIDatagrid.js等等。
JS部分大體可以分為兩類,一類是常用的操作函數封裝、另一類是基本UI的封裝。

依賴jquery.js框架。在當前頁面移入iJquery.js。

頁面級的管理,iDemo.js中用到了 iString.js和iUIDialog.js和頁面中對DOM的操作。

JS如何向java、php等后端語言一樣引入呢????????????

本博客提供一種方式:
依賴gruntjs構建,將js文件引入到jade文件中,在將jade文件的名稱轉換成js(即改變后綴名)到一個目錄中,在將這個目錄的js文件壓縮成生成目標文件。
例如:
iDemo.jade中包含 iString.js、iUIDialog.js、iDemoDom.js
在iDemo.jade中引入如下文件:
include iString.js
include iUIDialog.js
include iDemoDom.js

將編譯iDemo.jade 生成iDemo.js,iDemo.js文件中所需要的js了,然后在將這個文件壓縮成目標文件。

這個管理JS方法,借用了jade的include作用允許插入文件內容到另一個文件中。

感興趣的前端愛好者可以試試哦。。。。。。。

確實很方便

本人水貨專長,歡迎大家吐槽和拍磚。。。。。。。。。

哈哈,本博客給懂的人寫的,你懂得!









 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM