总结
css架构结构 :  
 
  base  :   共用样式
  common: 通用控件样式
  page: 页面级样式
 
js 架构结构:
 
base 位于三层最底层,职责一是封装不同浏览器下js的差异,提供统一的接口,依靠它来完成跨浏览器兼容的工作,职责二是扩展js语言底层提供的接口,让它提供 更多更为易用的接口,base层是给common层和page层提供接口。
 
common 位于三层的中间,依赖于base层提供的接口,common提供可供复用的组件,它是典型mvc模式中的M,和页面内的具体功能没直接关系,common层的功能是给page层提供组件。可以复用的
 
page层,
 位于三层的最顶端 ,这一层和页面里的具体功能需求直接相关,是mvc模式的c,page层依敕于base层和common层,page层的功能是完成页面内的功能需求。
 
javascript: 对象编程
 
反方法写在原型里,可以被所有实例共享,实例化的时候,并不会在实例的内存中再复制 一份,而写在类里的行为,实例化的时候会在每个实例里复制一份。把实例写在内存消耗,没有特殊原因,推荐尽量把行为写在原型里。
 
用this._age来定义表明是私有的,不能当成公有的属性来调用 。提醒而已。
 
用get,set 方法来访问属性需要将相关的方法都 放到构造函数和里,和所有方法以都放到原型相比,这么做会占用更多的内存,但它可以更好地保护 属性,
 
function Animal(name){
   var name;
   this.getName=function(){
    return name;
   }
   this.setName=function(o){
     name=o;
   }
}
 
function有两种不同的用法,作为函数,
直接使用 函数名()调用,this指向window作为类的构造函数,使用new 函数名()调用。this指向实例
 
命名空间
 
var GLOBAL={};
GLOBAL.namespace=function(str){
   var arr=str.split("."),o=GLOBAL;
   for(i=(arr[0]=="GLOBAL")?1:0;i<arr.length;i++){
      o[arr[i]]=o[arr[o]]||{};
     o=o[arr[i]];
   }
}
 
GLOBAL.namespace("Dom");   //调用
 
继承代码
 
function extend(subClass,superClass){
    var F=function();
    F.prototype=superClass.prototype;
    subClass.prototype=new F();
    subClass.protype.constructor=subClass;
    subClass.superclass=superClass.prototype;
    if(superClass.protope.constructor==Object.prototype.constructor){
      superClass.prototype.constructor=superClass;
   }
   }
 
function Animal(name){
   this.name=name;
   this.type="animal";
 
Animal.prototype={
    say:function(){
       alert("i'm a(an)"+this.type+",my name is "+this.name);
   }
}
 
function Bird(name){
     this.constructor.superclass.constructor.apply(this,autuments);
     this.type="bird";
}
 
extend(Bird,Animal);
Bird.prototype.fly=function(){
   alert("i'm flying");
}
 
var canary=new Bird("xiaocui");
canary.say();     // i'm a(an) bird,my name is xiaocui
 
Array
 
Array.prototype.each=function(fun){
   for(var i=0,n=this.length,i<n;i++){
          fun(this[i],i);
   }
}
 
Array.prototype.clone=function(){
   var o=[];
   this.each(function(v,k){
     o[k]=v;
   })
  return o;
}
 
Array.prototype.map=function(fun){
    var o=[];
    this.each(function(v,k){
        o[k]=fun(v,k);
     })
   return o;
}
Array.prototype.Delete=function(a){
   var o=this.clone();
   for(var i=o.length,n=0;i>n;i--){
      if(o[i]==a){
         a.splice(i,1);
      }
   }
}
javascript 提供了一些内置类:Array,String,Function等。在javascript中,所有的内置类和自定义类,所有类的祖先类都是Object.如果想对所有对象都扩展方法,可以通过修改Object类的原型实现。
 
 
无论在类的构造 函数中还是在原型中,this都指向实例化的对象。
内置类的方法可以重写,但属性却不能重写。
 
修改内置类的原理型 非常方便,缺点是可能会带来冲突隐患,自定义的可以保护原型不修改,但它需要用new来实例化自定义类,相对麻烦 一些。
如果是小应用,不用过多浮头考虑可维护性,推荐使用前者,如果是大中型应用,需要考虑可维护性,推荐使用后者。
 
var node=document.getElementById("a");
typeof node         //  object;
 
对于常规属性,统一使用 node.xxxxx,对于自定义属性,统一使用 node.getAttribute("XXXX");
 
目标对象    e.target||e.srcElement
 
 
 好的可维护 性的代码从四个方面获得:
    代码的松耦合,高度模板化,将页面内的元素视为一个个模块,相互独立,尽量避免耦合过高的代码,从html,css,javascript,三个层面考虑模块化
   良好的注释
   注意代码的弹性,在性能和弹性的选择上,一般 情况下以弹性为优先考虑条件
   严格按照规范编写代码

"编写高质量代码"一书笔记的更多相关文章

  1. 每周一书-编写高质量代码:改善C程序代码的125个建议

    首先说明,本周活动有效时间为2016年8月28日到2016年9月4日.本周为大家送出的书是由机械工业出版社出版,马伟编著的<编写高质量代码:改善C程序代码的125个建议>. 编辑推荐 10 ...

  2. 《编写高质量代码--Web前端开发修炼之道》读书笔记

    前言 这两周参加公司的新项目,采用封闭式开发(项目成员在会议室里开发),晚上加班到很晚,所以没时间和精力写原创博客了,今天就分享下这篇<编写高质量代码--Web前端开发修炼之道>读书笔记吧 ...

  3. C# 《编写高质量代码改善建议》整理&amp;笔记 --(一)基本语言篇

     题记:这是自己的观后感,工作两年了,本来打算好好学习设计模式,或者作为客户端深入了解GPU编程的,但是突然发现还有这么一本书. <编写高质量代码改善建议>,感觉这正是自己需要的. 我是做 ...

  4. 《编写高质量代码:Web 前端开发修炼之道》 笔记与读后感

    编写高质量代码:Web 前端开发修炼之道/曹刘阳著. —北京:机械工业出版社,2010.5 第一版 涉及到的知识点: 1. CSS Sprites 在国内很多人叫css精灵,是一种网页图片应用处理方式 ...

  5. 编写高质量代码_改善C++程序的150个建议 读书笔记

    这几天看了下这本书<编写高质量代码_改善C++程序的150个建议>,觉的蛮有收获的,再次记录下自己以前不清晰的知识点,以供学习. 编写符合标准的main函数 C语言标准规定了main函数的 ...

  6. 编写高质量代码改善C#程序的157个建议——导航开篇

    前言 由于最近工作重心的转移,原来和几个同事一起开发的项目也已经上线了,而新项目就是在现有的项目基础上进行优化延伸扩展.打个比方,现在已经上线的项目行政案件的Web管理网站(代码还没那么多相比较即将要 ...

  7. 编写高质量代码--改善python程序的建议(一)

    原文发表在我的博客主页,转载请注明出处! 初衷 python是一个入门十分容易的编程语言,但是想要写好python却是一件不容易的事情,如果不是专业使用python的人,只是将python作为一个脚本 ...

  8. 编写高质量代码:Web前端开发修炼之道(一)

    最近老大给我们买来一些技术方面的书籍,其实很少搬着一本书好好的完整的看完过,每每看电子档的,也是打游击式的看看这章,瞅瞅那章,在那5本书中挑了一本比较单薄的<编写高质量代码web前端开发修炼之道 ...

  9. 编写高质量代码改善java程序的151个建议——导航开篇

    2014-05-16 09:08 by Jeff Li 前言 系列文章:[传送门] 下个星期度过这几天的奋战,会抓紧java的进阶学习.听过一句话,大哥说过,你一个月前的代码去看下,慘不忍睹是吧.确实 ...

随机推荐

  1. 什么是XA事务

    什么是XA事务 分布式事务处理是指一个事务可能涉及多个数据库操作分布式事务处理的关键是必须有一种方法可以知道事务在任何地方所做的所有动作,提交或回滚事务必须产生一致的结果(全部提交或全部回滚). XA ...

  2. css3 transition属性变化与animation动画的相似性以及不同点

    下面列子中的2个图片的效果. http://zqtest.e-horse.cn/DongXueImportedCar/assets/mouseOverAnimate.html 第一个为transiti ...

  3. PHP isset()与empty()的区别

    PHP的isset()函数 一般用来检测变量是否设置 格式:bool isset ( mixed var [, mixed var [, ...]] ) 功能:检测变量是否设置 返回值: 若变量不存在 ...

  4. 深入浅出 JavaScript 变量、作用域和内存 v 0.5

    本文主要从原理入手分享变量和作用域的相关知识,最后结合本文所分享知识,再次深入了解下闭包的运行原理. 主要参考<JS高级程序设计> <JS权威指南> <高性能 JS> ...

  5. awk实践积累

    #cat iii |awk '{max=$2;min=$2;for (i=2;i<=NF;i++) if ($i>max) max=$i fi} {for (i=2;i<=NF;i+ ...

  6. 写个点击input框 下方弹出月份时间等

    <input type="text" name="test" id="test" value="" "& ...

  7. pdo 封装增删改查类

    <?php/** * Class model * @package Core\lib */class model{    protected $pdo = null;      // 连接数据库 ...

  8. python_如何设置文件缓冲类型

    案例: 将文件内容写入到硬件设备时候,使用系统调用,这类IO操作时间长,为了减小IO操作,通常会使用缓冲区(有足够多数据才能调用). 文件缓冲行为分为:全缓冲,行缓冲,无缓冲 如何解决? open(' ...

  9. springboot +thymeleaf+myql 记录

    thymeleaf官方文档: https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.pdf demo案例:https://github. ...

  10. BZOJ.3992.[SDOI2015]序列统计(DP NTT 原根)

    题目链接 \(Description\) 给定\(n,m,x\)和集合\(S\).求\(\prod_{i=1}^na_i\equiv x\ (mod\ m)\)的方案数.其中\(a_i\in S\). ...