天,小妖先給大家獻上又一個“利器”。在之前的每一個 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
*請認真填寫需求信息,我們會在24小時內與您取得聯系。