前端开发组织结构及文件命名

一个前端项目的通用目录组织如下：

css文件夹

css文件命名用"-"分隔单词，与bootstrap文件命名类似（bootstrap-theme.css）

目录组织结构详细如下：

js文件夹

js文件命名用"-"分隔单词，与jquery文件命名类似（jquery-2.1.4.js）同css文件命名一致

目录组织结构详细如下：

plugins文件夹

此文件夹存放所有相关插件，每一个插件都新建一个对应的文件夹存放即可

详细目录结构如下：

views文件夹

此文件夹存放所有相关html页面，可能这里会有人有疑问，怎么不直接放在项目的根目录下？

假如项目页面不多，页面可放在根目录下，不会有什么问题，

如果是一个大型项目，页面非常多（上百个），全部放根目录管理起来会非常困难。

所以新建一个文件夹来专门存放会更容易查看维护。

详细目录结构如下：

时间： 2024-10-24 07:58:52

前端开发组织结构及文件命名的相关文章

web前端开发企业级CSS常用命名，书写规范总结

1.常用命名 标题: title 摘要: summary 箭头: arrow 商标: label 网站标志: logo 转角/圆角: corner 横幅广告: banner 子菜单: subMenu 搜索:search 搜索框: searchBox 登录: login 登录条:loginbar 工具条: toolbar 下拉: drop 标签页: tab 当前的: current 列表: list 滚动:scroll 服务: service 提示信息: msg 热点:hot 新闻: news 小

Web前端开发规范之文件存储位置规范

文件存放位置规范 1   文件夹说明 flash存放flash文件 p_w_picpaths存放图片文件 inc存放include文件 library存放DW库文件 media存放多媒体文件 script存放javascript脚本 css存放css文件 2   网站页面位置存放 2.1   客户端 web 网站根目录 2.2   服务器端 admin 原文地址;https://blog.51cto.com/lakaodekaola/1979706 原文地址:https://www.cnblog

前端开发环境之GRUNT自动WATCH压缩JS文件与编译SASS文件

前端开发环境之GRUNT-JAVASCRIPT任务运行器 前言: 1.sass编译为css文件,早先时刻写css,后来看了sass挺不错的,于是在新的项目中开始使用上了sass. 原方法: ①安装ruby ②编译sass文件(eg:style) sass style.scss style.css ③监控文件/文件夹的变化来自动编译sass文件 sass --watch style.scss:style.css #file sass --watch cssFilePath            

web前端开发规范

本文原创,这里首先声明,转载注明本文出处,翻版必究! web前端开发规范的现实意义 1.提高团队的协作能力 2.提高代码的重复利用率 3.可以写出质量更高,效率更好的代码 4.为后期维护提供更好的支持 5.可读性高 一.命名规则 1.html命名规则: a.文件名称命名规则:统一使用小写英文字母.数字.下划线的组合,不得包含汉字空格和特殊字符 2.命名原则:方便理解.方便查找 b.索引文件命名原则:index.html.index.htm.index.asp.index.aspx.index.j

web前端开发笔记（2）

web前端开发笔记(1) 一.HTML标签书写有哪些规范? 页面编码. 文档声明. 关键字与描述. 行内元素不能包含块级元素. a标签不能嵌套a标签. 标签名和属性必须用小写字母书写,属性必须加引号,标签必须闭合,单标签页必须闭合. 页面中不要用 进行缩进,如需缩进,用css控制. html标签使用必须语义化. 要为img标签填写alt和title属性. 二.HTML静态页面出现中文乱码如何解决? 引入<meta charset="UTF-8"> 三.通常情况下块属性标签和

合理使用前端开发工具来避免不必要的错误

前端开发工作中,难免会因为自身的一些粗心大意而照成一些错误,比如说单词拼写.路径引用.符号写错等等,对于这些问题往往自己很难发现,然而通过给前端IDE添加插件是可以解决的. 顺便总结一下常见代码问题(待更新): 1. json和数组为空判断(不要直接判断是否为空) 1 //json 2 var a = {}; 3 a && Object.keys(a).length 4 //array,特别是接口返回数组数据时不要直接判断其长度 5 var a = []; 6 a && a

合理使用前端开发工具以避免不必要的错误

前端开发工作中,难免会因为自身的一些粗心大意而照成一些错误,比如说单词拼写.路径引用.符号写错等等,对于这些问题往往自己很难发现,然而通过给前端IDE添加插件是可以解决的. 顺便总结一下常见代码问题(待更新): 1. json和数组为空判断(不要直接判断是否为空) 1 //json 2 var a = {}; 3 a && Object.keys(a).length 4 //array,特别是接口返回数组数据时不要直接判断其长度 5 var a = []; 6 a && a

一探前端开发中的JS调试技巧

前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今天,如何在前端开发中降低开发成本,提升工作效率,掌握前端开发调试技巧尤为重要. 本文将一一讲解各种前端JS调试技巧,也许你已经熟练掌握,那让我们一起来温习,也许有你没见过的方法,不妨一起来学习,也许你尚不知如何调试,赶紧趁此机会填补空白. 骨灰级调试大师Alert 那还是互联网刚刚起步的时代,网页前

WEB前端开发规范文档

规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改. 基本准则 符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度. 文件规范 1. html, css, js, images文件均归档至约定的目录中;