关于前端代码组织一些粗陋看法

对于中小项目来说，轻量级的组织结构还是比较好；

html:语义优先原则

css:推荐base.css、 common.css、  page.css；

　　组织风格有效的管理整个项目的css,尽量划分好模块，有一定的命名空间的概念，如：.timeList-lastItem;

　　多用组合少用继承（甚至不用）；

　　低权重原则（尽量使用class）;

　　雪碧技术减少请求；

　　常用三种hack方法：ie条件注释法，选择符前缀法，样式属性前缀法；

　　触发hasLayout;

　　js：有一个命名空间的概念，可以封装一个GLOBAL对象；

　　　　程序有一个统一入口

　　　　分层概念，base common page

　　　　js库选择：jq基本能应付98%的开发任务

　　　　一些常见兼容问题，重点是事件 node bom dom方面,this、闭包之类。。。

　　构建工具用的不多，试试gulp

　　　　

时间： 2024-08-06 11:58:28

关于前端代码组织一些粗陋看法的相关文章

Effective前端5：减少前端代码耦合

什么是代码耦合?代码耦合的表现是改了一点毛发而牵动了全身,或者是想要改点东西,需要在一堆代码里面找半天.由于前端需要组织js/css/html,耦合的问题可能会更加明显,下面按照耦合的情况分别说明: 1. 避免全局耦合 这应该是比较常见的耦合.全局耦合就是几个类.模块共用了全局变量或者全局数据结构,特别是一个变量跨了几个文件.例如下面,在html里面定义了一个变量: 在html里面定义全局变量 XHTML 1 2 3 4 5 <script> varPAGE=20; </script&g

前端代码编码和设计规范系列——JavaScript编程规范

1文档信息 条目 内容 项目编号 通用 项目名称 通用 标题 JavaScript编程规范 类别 规范文档 当前 试用草稿 摘要 当前版本 V1.0 日期 2015/11/9 作者 徐维坚(xuweijian) 文档拥有者 内部公开 文件 前端规范系列-JavaScript篇.docx 2修改历史 编号 修订人 修订内容简述 修订 日期 修订前 版本号 修订后 版本号 V0001 徐维坚 编程规范文件编写,草稿试用版公布 2015/11/10 V1.0 规范前言 良好的编程规范对于软件的开发与维

前端代码9种标准最佳实践：CSS

前端工程师对写标准的前端代码的重视程度很高.这些最佳标准实践并不是那个权威组织发布的,而是由大量的前端工程师们在实践过程中的经验总结,目的在于提高代码的可读性,可维护性和性能.那么接着上一篇,我们再来谈谈CSS代码的一些标准实践. 1,命名 和其他语言规范一样,css的命名也讲究命名要有意义,命名要尽可能短但是要足够表达含义:命名的词用连字符连接. 不规范的命名: 1 #navigation{ 2 } 3 .demoimage{ 4 } 5 .error_status{ 6 } 规范的命名: 1

我和我的广告前端代码（二）：突发需求，广告法，加标识，打补丁

概述: 在重构广告‘老代码’的初期发生了一个突发的需求,下面我简单介绍一下,可能文中更多的是思路和结构上的东西.具体的业务实现也会简单说一些,但说的不多. 仅用文章纪录一下,保存我于广告项目珍贵的记忆. 突发事件: 上一篇文章——我和我的广告前端代码(一):打碎重来.化零为整,中提到我在将业务线甲的广告代码重构的事情,但是开发的过程中,有了一个小插曲——加标志.由于我国新出台的广告法规定,所有的广告必须注明“广告”.要求一周内,连开发带测试,打败这个半路杀出来的‘程咬金’. 应急方案: 这本是一

Web 前端代码规范

Web 前端代码规范 最后更新时间:2017-06-25 原始文章链接:https://github.com/bxm0927/web-code-standards 此项目用于记录规范的.高可维护性的前端代码,这是通过分析 Github 众多前端代码库,总结出来的前端代码书写规范. 目录 前端普适性规范 HTML 规范 CSS 规范 JS 规范 License public domain, Just take it. Thanks @Ruan YiFeng: https://github.com/

从HTML看代码组织与优化

随着Web2.0概念的普及和W3C组织的推广,人们对用户体验的要求越来越高,前端开发难度越来越大,前端开发工程师这一职业终于总设计和制作部分的局面中独立出来.随之而来的是对代码可读性要求的提高,编写高质量代码逐渐成为前端开发工程师不可或缺的一项技能.这里根据资料整理了一些HTML相关代码编写规范. 网页语义 根据web内容的不同含义或场景,选择合适的标签(代码语义化)来承载内容,便于开发者阅读和写出更优雅的代码的同时,让浏览器的爬虫和机器很好地解析.比如一段普通纯文本,可以使用P标签,但如果文本

减少前端代码耦合

什么是代码耦合?代码耦合的表现是改了一点毛发而牵动了全身,或者是想要改点东西,需要在一堆代码里面找半天.由于前端需要组织js/css/html,耦合的问题可能会更加明显,下面按照耦合的情况分别说明: 这应该是比较常见的耦合.全局耦合就是几个类.模块共用了全局变量或者全局数据结构,特别是一个变量跨了几个文件.例如下面,在html里面定义了一个变量: <script> var PAGE = 20; </script> <script src="main.js"

关于前端代码编写的一点心得

在此次团队项目中,我一直都是处于学习状态,能够写出一些稍微有点水平的前端页面,但是还是很菜,在此次的前端页面中,有一个地方我觉得特别要注意,就是前端代码的规范编写,规范编写代码对每一个程序员都十分重要,在这里,我将自己收集到的一些关于html和css的编写规范列在下面: 在任何一个项目或者系统开发之前都需要定制一个开发约定和规则,这样有利于项目的整体风格统一.代码维护和扩展.由于Web项目开发的分散性.独立性.整合的交互性等,所以定制一套完整的约定和规则显得尤为重要. 第一节 CSS样式文件的命

编写灵活、稳定、高质量的前端代码的规范二（推荐收藏）

编写灵活.稳定.高质量的HTML代码的规范二 一.代码组织 1.1 注意 (1)以组件为单位组织代码段. (2)制定一致的注释规范. (3)使用一致的空白符将代码分隔成块,这样利于扫描较大的文档. (4)如果使用了多个 CSS 文件,将其按照组件而非页面的形式分拆,因为页面会被重组,而组件只会被移动. 1.2 Example 二.声明顺序 2.1 相关属性一组 相关的属性声明应当归为一组,并按照下面的顺序排列: (1)Positioning(元素位置) (2)Box model(盒子模型) (3