背景
問題描述
如下圖所示,
想到的可能的解決方案
<一>
將所有類的名字特異唯一化。
比如:
doc --- action --- MyClass.js / ExtendsMyClass.js
cat --- action --- MyClass1.js / ExtendsMyClass1.js
pig --- ...
mouse --- ...
...
這是“超級XX”的方法,不予理會!
<二>
模塊化,不是有AMD,CMD嘛?
抱歉,沒接觸過。
收集資料,看了,沒有理解透。
能否解決我的問題,需要朋友們指點。
<三>
把dog結構下所有“類”文件的內容都定義在一個文件中,且用
var moduleDog = new Object{ ... dog的全部內容 ... }
包裹起來。
cat也是如此。
這種“模塊化”在有“類繼承”的本例中是否可行?需要朋友們指點。
<四>
其他方案未知,需要朋友們指點。
代碼
cat的 MyClass.js
function MyAction()
{
this.name = 'cat' ;
}
cat的 ExtendsMyClass.js
function ExtendsMyAction()
{
this.name = 'extends cat' ;
}
ExtendsMyAction.prototype = new MyAction() ;
ExtendsMyAction.prototype.constructor = ExtendsMyAction ;
dog的 MyClass.js
function MyAction()
{
this.name = 'dog' ;
}
dog的 ExtendsMyClass.js
function ExtendsMyAction()
{
this.name = 'extends dog' ;
}
ExtendsMyAction.prototype = new MyAction() ;
ExtendsMyAction.prototype.constructor = ExtendsMyAction ;
ES6
的超集,支持async
、Promise
、yield
等新語法
適合面向對象的場景
最終會編譯成 es5
的js
代碼,也就是任何瀏覽器可以執(zhí)行的JS
使用編輯器 Visual Studio Code
無縫編輯,編譯也只要運行 tsc
即可輸出目標js文件
我一般開啟嚴格模式,強類型模式,這樣在編寫過程中就可以知道是否有錯,避免一些低級錯誤
下面例子中:
namespace
命名空間abstract
虛類、虛函數extends
繼承: number
參數類型: boolean
返回類型x: number = 0
默認參數值public x
類變量以及作用域public position
類作用域constructor
構造函數public get
getter setter/ui/base.ts
namespace ui {
abstract class Base {
public x: number;
public y: number;
constructor(x: number = 0, y: number = 0)
{
this.setTo(x, y);
}
public abstract position(x: number, y: number);
}
}
/ui/sharp.ts
namespace ui {
class Sharp extends Base {
public position(x: number, y: number)
{
this.x = x;
this.y = y;
}
}
}
/ui/sharp/rect.ts
namespace ui.sharp
{
class Rect extends ui.Sharp {
public width: number;
public height: number;
public get empty(): boolean {
return this.height == 0 || this.width == 0;
}
constructor(x: number = 0, y: number = 0, width: number = 0, height: number = 0)
{
super(x, y);
this.width = width;
this.height = height;
}
}
}
調用方式 無特殊,js
即可
let rect = new ui.sharp.Rect();
console.log(rect.empty); // true
決定采用“偽命名空間”的方式解決本問題。
理由:
===========================================
“偽命名空間示例”
var myNamespace =
{
a:{
function func1()
{
...
} ,
function func2()
{
...
}
...
}
b:{
function func1()
{
...
} ,
function func2()
{
...
}
...
}
}
===========================================
個人理解(未必正確)
無論TS或ES6,都是通過語法糖的形式為原生jS做了一層包裝,最終都要轉譯為JS原生代碼。
那么,掌握原生JS解決下面問題的方法,是深入JS所必須的:
像Java,C#那樣,用面向對象的思路來設計復雜的庫(或軟件系統(tǒng))。該系統(tǒng)要能夠
- 從代碼文件結構上合理組織(比如Java的packge包結構)
- 能夠在不同的packge中包>含相同類名的js類
- 作為功能庫,在被引入時,不能夠與其他任何庫產生命名沖突
今后需學習的地方:
沒有TS或ES6開發(fā)的經驗,不好做判斷。但是,僅僅通過TS和ES6中對“類”,“類繼承”,“模塊化”的淺顯了解,個人感覺這些語法糖使得原本簡單的JS代碼變得復雜起來,這也是是代價。
希望有實戰(zhàn)經驗的朋友們對TS或ES6在解決本問題上做“能”或“不能”的判斷,如果能夠提供簡單示例代碼,那將非常感謝。
此問題暫時不關閉,等待有實戰(zhàn)經驗的朋友們給予指點!
首先你這個例子不應該出現類名重復的情況.為什么不在構造函數中傳入參數來實例化.
記住在編寫代碼之前,先保證設計的合理性!不要試圖解決錯誤的邏輯.
還有現在是 es6 的時代,請自行學習 es6 的語法.來定義類.推薦 阮一峰 es6 入門
此外前端以進化到編譯型.請學習 webpack 來打包代碼.自行參看官方文檔.
所以我的建議是.
北大青鳥APTECH成立于1999年。依托北京大學優(yōu)質雄厚的教育資源和背景,秉承“教育改變生活”的發(fā)展理念,致力于培養(yǎng)中國IT技能型緊缺人才,是大數據專業(yè)的國家
北大青鳥中博軟件學院創(chuàng)立于2003年,作為華東區(qū)著名互聯網學院和江蘇省首批服務外包人才培訓基地,中博成功培育了近30000名軟件工程師走向高薪崗位,合作企業(yè)超4
中公教育集團創(chuàng)建于1999年,經過二十年潛心發(fā)展,已由一家北大畢業(yè)生自主創(chuàng)業(yè)的信息技術與教育服務機構,發(fā)展為教育服務業(yè)的綜合性企業(yè)集團,成為集合面授教學培訓、網
達內教育集團成立于2002年,是一家由留學海歸創(chuàng)辦的高端職業(yè)教育培訓機構,是中國一站式人才培養(yǎng)平臺、一站式人才輸送平臺。2014年4月3日在美國成功上市,融資1
曾工作于聯想擔任系統(tǒng)開發(fā)工程師,曾在博彥科技股份有限公司擔任項目經理從事移動互聯網管理及研發(fā)工作,曾創(chuàng)辦藍懿科技有限責任公司從事總經理職務負責iOS教學及管理工作。
浪潮集團項目經理。精通Java與.NET 技術, 熟練的跨平臺面向對象開發(fā)經驗,技術功底深厚。 授課風格 授課風格清新自然、條理清晰、主次分明、重點難點突出、引人入勝。
精通HTML5和CSS3;Javascript及主流js庫,具有快速界面開發(fā)的能力,對瀏覽器兼容性、前端性能優(yōu)化等有深入理解。精通網頁制作和網頁游戲開發(fā)。
具有10 年的Java 企業(yè)應用開發(fā)經驗。曾經歷任德國Software AG 技術顧問,美國Dachieve 系統(tǒng)架構師,美國AngelEngineers Inc. 系統(tǒng)架構師。