前端工程师修炼之道-----高质量js笔记

                                      高质量的js

 1. 良好的编程习惯

 2.Js分层和js库

 3.面向对象编程

 4.编程实用技巧

 

 ☞良好的编程习惯

 1.切记不要全局变量泛滥（会产生冲突）

方法：用匿名方法将脚本包起来，将变量的作用域控制在匿名函数内（function(){})();

2.匿名函数变量的通信

方法：我们使用一个{}对象类型的变量作为全局变量，需要多个全局变量做通信桥梁的，可以将这些变量作为全局对象的属性，这样保证了全局变量的个数足够少，同时扩展性非常好，一般用 GLOBAL

缺点：如果命名比较简单，还是很容易覆盖的

解决方法：采用命名空间

JavaScript 的命名空间（最新版本的JavaScript还是不支持命名空间，

在JavaScript中，类机制使用了原型（prototype）模式。）

并不是真正的命名空间, 只是在脚本内部创建一个封闭的小空间, 必须通过特定的空间名称才能对空间内部的代码进行访问, 这样可以防止同名函数和变量发生冲突, 也可以更方便地管理代码, 就像 .NET 的命名空间 (namespace) 和 Java 的包 (package) 一样.

(function{  

  function $(id) 

{ return document.getElementById(id); }  

// 显示对应 ID 的对象的节点类型名字 

function myMethod(id) { alert($(id).nodeName); 

} 

  // 这是对外的接口

 window['myNamespace']= {} window['myNameSpace']['$'] = $; })();

 

    ☞生成命名空间的函数

Var GLOBAL={}（没看懂）

GLOBAL.namespace=function(str)

{ 

   Var arr=str.split(“.”),

o=GLOBA;

for(i=(i=arr[0]==”GLOBAL”)?1:0;i<arr.length;i++)

{

    o[arr[i]]=o[arr[i]]||{};

    o=o[arr[i]];

}

 

}

注意添加注释，很重要

 

Js是脚本语言，浏览器下载到哪就执行到哪

关于js css在文档中的顺序

因为浏览器是从上到下加载的

则顺序最好是css html js---------然后就是压缩（所谓压缩是指指去掉空格和换行，去掉注释，将复杂变量名替换为简单的变量名）

☞js分层与js库

 一般分为base common和page

Base层：()

作用：1.完成浏览器兼容问题  2.扩展js底层提供的接口

      为common和page提供接口

Common层

作用：依赖base层提供的接口，为page层提供组件

Page层

作用：依赖前两层，完成页面内的功能需求

HTML DOM nodeType 属性

获得 body 元素的节点类型：

document.body.nodeType;               //1

 

如果节点是元素节点，则 nodeType 属性将返回 1。

如果节点是属性节点，则 nodeType 属性将返回 2。

代表元素或属性中的文本内容。返回3

Base层第二个提供接口

Trim（）

Function trim(oStr)

{     return oStr.replace(/^\s+|\s+$/g, “”);

} 

Function isNumber(s)

{ 

  Return  !isNaN(s)

}

Function isString(s)

{   return typeof s==”string”

}

Function isArray(s)

{

   Return instanceof Array;

}  

Function getByClass(oParent,sClass)

{

   var aResult=[];

   Var childNodes=oParent.getElementsByTagName(“*”);

   Var re=new RegExp(“\\b”+sClass+”\\b”,”i”);

For(var i=0;i<childNodes.length;i++)

{     

       If(re.test(childNodes[i].className))

       {

         aResult.push(childNodes[i]);

       }

 

 

    }

 

  Return aResult;

} 

补 网站重构的原因：

1.根据W3c标准进行重构后，可以让前端代码组织更有序，显著改善网站的性能，对搜索引擎也友好

2.重构后的网站带来更好的用户体验，用XHTML+CSS的布局，文件更小，下载速度更快

☞编程实用技巧

1.弹性

Tab制作

var tabMenus=document.getElementById("tab_menuWrapper").getElementsByTagName("li");

 var tabcontent=document.getElementById("tab_contentWrapper").getElementsByTagName("div");

 for( var i=0;i<tabMenus.length;i++)

 {

     tabMenus[i].index=i;

  tabMenus[i].οnclick=function()

  {

  for(var j=0;j<tabMenus.length;j++)

  {

  tabcontent[j].style.display="none";

  }

 

  tabcontent[this.index].style.display="block";

  }

 }

在遍历数组时对DOM元素的监听事件的索引值始终等于遍历后的值

不懂（问题）

还有一个办法是利用闭包

js中(function(){…})()立即执行函数写法理解

函数声明和函数表达式不同之处在于，

一、Javascript引擎在解析javascript代码时会‘函数声明提升’（Function declaration Hoisting）当前执行环境（作用域）上的函数声明，而函数表达式必须等到Javascirtp引擎执行到它所在行时，才会从上而下一行一行地解析函数表达式，

二、函数表达式后面可以加括号立即调用该函数，函数声明不可以，只能以fnName()形式调用 。以下是两者差别的两个例子。

fnName();

function fnName(){

    ...

}//正常，因为‘提升’了函数声明，函数调用可在函数声明之前

  

fnName();

var fnName=function(){

    ...

}//报错，变量fnName还未保存对函数的引用，函数调用必须在函数表达式之后

 

var fnName=function(){

    alert('Hello World');

}();//函数表达式后面加括号，当javascript引擎解析到此处时能立即调用函数

function fnName(){

    alert('Hello World');

}();//不会报错，但是javascript引擎只解析函数声明，忽略后面的括号，函数声明不会被调用

 

 要在函数体后面加括号就能立即调用，则这个函数必须是函数表达式，不能是函数声明。

Id和标签名都是取得元素的最佳选择，最好用class

2，可复用性

组件需要指定一个根节点，以保证每个组件之间的独立性

3.避免产生副作用（即在DOM元素有多个类时删除一个，或者添加一个）

 Function addClass(node,str)

{   var  re=new RegExp(“\\b”+str+”\\b”);

    If(!re.test(node.className))

{     node.className=node.className+” ”+str;

} 

}

  Function removeClass(node,str)

{

 var  re=new RegExp(“\\b”+str+”\\b”);

Str.replace(re,””);

Node.className=str;

}

4.this详解

 1.settimeout/setintetval中的this指向window

 2.函数中的this是指新建的对象

3.DomNode.XXX中this指向dom节点

5 hash传参数（即参数是json）

☞面向对象编程

面向过程编程：将数据和处理函数分为两部分，程序以处理函数为核心

面向过程的思维是描述一个个动作，而面向对象是描述一个个物件（即对象）对象是由属性和行为组成对应可观世界的状态和动作

属性的本质是变量，行为的本质是函数

面向对象（OO）包裹面向对象分析（OOA），面向对象设计(OOD)，面向对象编程(OOP)

优秀的程序是高内聚（类对外提供的接口很简单易懂，用户知道的底层的细节越少，聚合度越高），低耦合（类和类之间的关联和依赖程度）

Js语言分析

Js是基于原型的，属性和和行为来自两部分，一部分来自构造函数，另一部分来自原型（我们声明一个类，同时生成一个对应的原型 class.protoType）class.protoType.constructor=class(实际是构造函数)

构造函数中的属性和行为的优先级要高于原型中定义的属性和行为

关于变量的私有和公有，js是通过作用域实现的

Function animal(name)

{ this.name=name;//此处是公有属性

 Var a=20;//私有属性

 var   move=function()

{}

 

}

写在原型中的行为一定是公有的，而且无法访问私有属性，把行为写在原型中可以减少内存（因为是引用）写在构造函数中实例化的时候是复制一份

Function animal（name）

{    //set和get的使用

     This.setname=function(o)

{       name=o;

}

  This.getname=function()

 {     return name;

}

}

 

Js中的传值与传址

Var  a=10;

Var  b=a;//此处是将a的值复制一份给b

Var  c=[1,2,3];

Var d=c; //此处是传址，将变量c指向的数据的内存地址传给变量d

对复杂的数据类型（数组和hash）进行赋值控制，需要做的是

Var a=[1,2,3];

Var  b={name:”aDam”,sex:”famle”};

Var c=[],d=[];

For(var p in a)

{

   c[p]=a[p];

}

b同

对于数组另一种赋值的方法是

c=a.slice();或者 a.concat();

Prototype实质上也是hash对象，对于它除了使用for循环以外，还可以是 subClass=new oParent();

对于内置类：date array 等，我们可以扩展内置类的方法，也可以重写内置类的方法

Var a=[1,2,3];

Alert(a); //得到的是 1,2,3

在alert(a)时，自动调用了a的tostring方法，在需要字符串时，对象隐式调用tostring

内置类的方法可以重写，但是属性确不能重写

例如数组中的length不能更改

在js中包括内置类和自定义类，所有类的祖先都是object，如果对所有的对象都扩展方法，通过修改object的原型即可

Object.prototype.test=function()

{

   Alert(“ok”)

 

}

则下面的对象如论是数组，字符串等，都可以用，但是这种修改内置类的方法不适合多人合作

另一种方法是 新建一个内置类，将内置类的实例作为参数传递给构造函数，在自定义类里扩展方法，这种做法的思想是将内置类在封装一层，以此保护内置类的原型不被污染。

标签的自定义属性

定义在html标签中的属性，在js里也可获得，获取方式两种：

1.node.getAttribute()方法

2.Node.shuxing

其中第二种比第一种的跨浏览器兼容性更好

关于html中自定义的属性，在js中获取的时候IE下使用node.***=;FF下用node.getAttribute();

总结：对于常规属性，统一使用node.xxx的方式读取，对于自定义属性，统一使用node.getAttribute

将复杂的数据类型转化为字符串，称为数据的序列化，其逆操作是数据的反序列化

其中反序列化用的最多的是ajax

字符串的反序列化是通过eval实现的，字符串长的像数组或者json就会转化为相应的格式

例如  info=(“(”+info+”)”);

Function handler()

 {

  Alert(“123”);

}

If(document.all)

{ 

   node.attachEvent(“onclick”,handler);

}

Esle

{ 

    node.addEventListener(“click”,handler,false);

} 

改变DOM节点的三种方式

1.使用style

2.设置类

3.用js新建一个css

   Function  addStyleNode(str)

{

Vat styleNode=document.createElement(“style”);

  styleNode.type=”text/css”;

 If(styleNode.styleSheet)

{

    styleNode.styleSheet.cssText=str;//此处的str可以是css语句

}

Esle

{

    StyleNode.innerHTML=str;

}

}

转载于:https://www.cnblogs.com/wenyan/p/4881439.html