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

简介: 如何管理CSS和JS文件,一直是前端一个热门的话题。下面将简单分享一下使用心得,欢迎大家吐槽、拍砖和提供更好的实现方式。一、管理CSS文件,本博客将讨论less管理。iReset.less、iButton.less、iCss3.less、iIcon.less、iTab.less、iMenu.less、iDialog.less、iForm.less、iDatagrid.less等等文件、以上文件都是最小模块文件。

如何管理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作用允许插入文件内容到另一个文件中。

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

确实很方便

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

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









 

目录
相关文章
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
863 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
JavaScript 前端开发 API
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
16775 23
|
前端开发 JavaScript 数据可视化
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
908 8
|
JavaScript 安全 前端开发
关于Node.js,一定要学这个10+万Star项目 !!
一篇关于Node.js的宝藏项目——Node.js Best Practices。该项目在GitHub上已有102k Star,汇集了100+条最佳实践,涵盖架构、安全、性能等多方面。每条实践不仅有简明说明和详细解释,还附带代码示例及资源链接。文中通过三个实战案例(利用CPU多核、避免阻塞事件循环、使用中间件处理错误)展示了其实际应用价值,并推荐了几条对前端转Node.js开发者特别有用的最佳实践。强烈建议每位Node.js开发者学习此项目,理解“怎么做”与“为什么要这么做”,以提升开发能力。
555 3
|
JavaScript 前端开发 Java
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(二)
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(二)
935 0
|
前端开发 数据安全/隐私保护
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(一)
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(一)
482 0
|
前端开发
前端知识学习案例10-tailWind Css+vite2.0-部署项目
前端知识学习案例10-tailWind Css+vite2.0-部署项目
381 0
前端知识学习案例10-tailWind Css+vite2.0-部署项目
|
前端开发
前端知识学习案例8-tailWind Css+vite2.0-前后端连接
前端知识学习案例8-tailWind Css+vite2.0-前后端连接
181 0
前端知识学习案例8-tailWind Css+vite2.0-前后端连接

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    719
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    585
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    586
  • 4
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
    359
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    675
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    858
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1696
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    405
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1401
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    706