编写高质量代码－－Web前端开发修炼之道 读书笔记

重构的本质应该是构建一个前端灵活的MVC 框架，即 HTML 作为信息模型（Model） ，CSS 控制样式（View） ，JavaScript 负责调度数据和实现某种展现逻辑（Controller） 。

 

前端开发的门槛其实非常低，与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢。所以，对于从事 IT 工作的人来说，前端开发是个不错的切入点。

 

/* 推荐基本样式base.css */

/* css reset */

 

/* 文字排版 */

.f12{font-size:12px;}

.f14{font-size:14px;}

.f16{font-size:16px;}

.f20{font-size:20px;}

.fn{font-weight:bold;}

.t2{text-indent:2em;}

.lh150{line-height:150%;}

.lh180{line-height:180%;}

.lh200{line-height:200%;}

.unl{text-decoration:underline;}

.no_unl{text-decoration:none;}

 

/* 定位 */

.tl{text-align:left;}

.tc{text-align:center;}

.tr{text-align:right;}

.fl{float:left;display:inline;}

.fr{float:right;display:inline;}

.cb{clear:both;}

.cl{clear:left;}

.cr{clear:right;}

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}

.clearfix{display:inline-block;}

* html .clearfix{height:1%;}

.clearfix{display:block;}

.vm{vertical-align:middle;}

.pr{position:relative;}

.pa{position:absolute;}

.zoom{zoom:1}

.hidden{visibility:hidden}

.none{display:none}

 

/* 长度高度 */

.w10{width:10px}

.w20{width:20px}

.w{width:100%}

.h50{height:50px}

.h{height:100%}

 

/* 边距 */

.m10{margin:10px}

.mt10{margin-top:10px}

.mb10{margin-bottom:10px}

.ml10{margin-left:10px}

.mr10{margin-right:10px}

.p10{padding:10px;}

 

 

/* EG : css命名加前缀*/

.ad-timeList{}

.ad-timeList li{}

 

.zx-timeList{}

.zx-timeList li{}

 

.box .box-hd{}

.box .box-bd{}

.box .box-ft{}

 

 

/* 布局 */

.header{}

.sidebar{}

.main{}

.footer{}

 

/* 应对复杂变化 */

.content-lr-7025 .main{}

.content-lr-7025 .sidebar{}

.content-lr-6025 .main{}

.content-lr-6025 .sidebar{}

 

 

 

 

<script>

// 利用全局作用域实现各功能通信   

var str;

var GLOBAL = {

   str2 : "a"

};

 

// 多级命名空间

GLOBAL.A.CAT = {};

GLOBAL.A.DOG = {};

</script>

 

<script>

// 使用闭包避免JS冲突

(function(){

   var a,b;

   do(str);

})()

</script>

 

<script>

// 使用闭包避免JS冲突

(function(){

   var a,b;

   do(str);

})()

</script>

 

<script>

// 给程序统一的入口：window.onload , DOMReady

 

function init(){

 

// ========

// 功能A

// 工程师甲

// ========

(function(){

   var a,b;

   do(str);

})()

// ========

// 功能B

// 工程师乙

// ========

 

(function(){

   var a,b;

   do(str);

})()

 

 

}

 

 

init();

</script>

 

 

<script>

// 用hash对象传参

 

function test(a,b,c){}

 

function test2(config){

   var oA = config.a || 1,

         oB = config.b || 2,

         oC = config.c || 3

}

</script>

 

 

规范

 

<!-- 头部{ -->

<!-- }头部 -->