zoukankan      html  css  js  c++  java
  • 项目中如果管理前端文件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作用允许插入文件内容到另一个文件中。

    感兴趣的前端爱好者可以试试哦。。。。。。。

    确实很方便

    本人水货专长,欢迎大家吐槽和拍砖。。。。。。。。。

    哈哈,本博客给懂的人写的,你懂得!









  • 相关阅读:
    AIZU 0005
    Android Studio 1.0 (稳定版) 完全攻略
    android studio中avd sdk路径
    vim强大探究之光标移动
    Android项目打第三方jar包
    Android导出jar包后的资源使用问题
    混淆Android JAR包的方法
    Layout_margn与padding的区别
    Android软件开发之盘点自定义View界面大合集(二)
    Android软件开发之盘点所有Dialog对话框大合集(一)
  • 原文地址:https://www.cnblogs.com/kuikui/p/3551819.html
Copyright © 2011-2022 走看看