天，小妖先給大家獻上又一個“利器”。在之前的每一個 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