天，小妖先给大家献上又一个“利器”。在之前的每一个 Demo 中，我们都不厌其烦地创建场景、创建相机、创建光源。。。经过几次的实践，大家现在应该也对这个流程十分熟悉了。现在，我们想摆脱这些烦杂的设置，更专注于每一篇的新知识点。于是，小妖封装了这些基本的方法，简化了初始化的流程。源码见本篇 Demo : http://xngeer.frostbelt.cn/itemthreedemo/5.mgr.2.html 中引入的 ThreeMgr.js，依赖于 jQuery

这个 ThreeMgr.js，提供了哪些方法呢？我们先对比一下 5.mgr.1.html 和 5.mgr.2.html 两个 Demo 页的代码：

1. 初始化

查看 ThreeMgr 源码，我们自己有一套默认设置 defaultConfig，init 时只需要设置部分值覆盖默认值即可。省略了烦杂的初始化过程，代码更简洁易记。

2. 光源

从上面也可以看到，ThreeMgr 有一个 addLight 方法，支持创建 4 种常用的光源

3. dat.GUI

小妖也封装了上一篇讲到的 dat.GUI，见 链接。

从这里看代码量并没有减少，但是不是逻辑清晰一些，可读性强一些？

4. Stats

每次都要复制过来的帧率。。简化为一行代码

5. 动画

ThreeMgr.render(Boolean is_loop, Function animate); is_loop 定义是否每帧重绘，animate 定义重绘前对场景中各元素如何修改。

嗯。。确实没什么技术含量，只是对一些常用方法的简单封装，世界是由懒人创造的嘛。除了上述方法，ThreeMgr 还封装了其它一些常用方法，感兴趣的同学可以去查看下源码，以后有用到时小妖也还会单独说明。

装Encapsulation

如下代码,这就算是封装了

(function (windows, undefined) {
 var i = 0;//相对外部环境来说,这里的i就算是封装了
})(window, undefined);

继承Inheritance

(function (windows, undefined) {
 //父类
 function Person() { }
 Person.prototype.name = "name in Person";
 //子类
 function Student() { }
 Student.prototype = new Person(); //修复原型
 Student.prototype.constructor = Student; //构造函数
 Student.prototype.supr = Person.prototype; //父类
 //创建子类实例
 var stu = new Student();
 Student.prototype.age = 28;
 Student.prototype.name = "name in Student instance";
 //打印子类成员及父类成员
 console.log(stu.name); //name in Student instance
 console.log(stu.supr.name); //name in Person
 console.log(stu.age); //28
})(window, undefined);

运行结果如下：

多态Polymorphism有了继承,多态就好办了

//这就是继承了
(function (windows, undefined) {
 //父类
 function Person() { }
 Person.prototype.name = "name in Person";
 Person.prototype.learning = function () {
 console.log("learning in Person")
 }
 //子类
 function Student() { }
 Student.prototype = new Person(); //修复原型
 Student.prototype.constructor = Student; //构造函数
 Student.prototype.supr = Person.prototype; //父类
 Student.prototype.learning = function () {
 console.log("learning in Student");
 }
 //工人
 function Worker() { }
 Worker.prototype = new Person(); //修复原型
 Worker.prototype.constructor = Worker; //构造函数
 Worker.prototype.supr = Person.prototype; //父类
 Worker.prototype.learning = function () {
 console.log("learning in Worker");
 }
 //工厂
 var personFactory = function (type) {
 switch (type) {
 case "Worker":
 return new Worker();
 break;
 case "Student":
 return new Student();
 break;
 }
 return new Person();
 }
 //客户端
 var person = personFactory("Student");
 person.learning(); //learning in Student
 person = personFactory("Worker");
 person.learning(); //learning in Worker
})(window, undefined);

运行结果如下：

对前端的技术，架构技术感兴趣的同学关注我的头条号，并在后台私信发送关键字：“前端”即可获取免费的架构师学习资料

知识体系已整理好，欢迎免费领取。还有面试视频分享可以免费获取。关注我，可以获得没有的架构经验哦！！

.id选择器

<div id="box"></div>


function byId(id){
 return typeof(id) === "string"?document.getElementById(id):id;
}

使用方法 直接调用函数: byId("box")


function $(selector){
 var c=selector.substring(0,1);//获取第一个字符
 if(c=="#"){ 
 //返回相应的元素 
 return document.getElementById(selector.substring(1,selector.length)); 
 }
}
使用方法 直接调用函数: $("#box")

1.class选择器

<div class="box">
 <p class="box">dom</p>
 </div>

function byClass(selector){ 
 var className=selector.substring(1); 
 if(document.getElementsByClassName){ 
 return document.getElementsByClassName(className);
 }else{ 
 var reg=new RegExp('^|\\s'+className+'$|\\s'); 
 var elems=document.getElementsByTagName("*"); 
 var arr=[]; 
 for(var i=0;i<elems.length;i++){ 
 if(reg.test(elems[i].className)){ 
 arr.push(elem[i]); 
 } 
 } 
 return arr; 
 } 
}

使用方法 直接调用函数: byClass(".box") 返回的是一个数组

3.封装标签选择器

 function byTagName(element){ 

 return document.getElementsByTagName(element); 

 } 
选择返回也是一个数组

4.向当前元素末尾追加一个元素

function append(newEle, container) {
 container.appendChild(newEle);
} 

5.向当前元素之前追加一个元素

function prepend(newEle, container) {
var firstEle = this.firstChild(container);
if(firstEle) {
container.insertBefore(newEle, firstEle);
return;
}
this.append(newEle, container);
} 

6.DOM添加class和移除class