自制前端前端框架 Day10. expression操作scope

最簡單的是绎签,通過一個key名來操作scope蛙埂。

var fn = parse('age');
fn({age:18})==18 //true

現(xiàn)在parse出來的fn是可以接受一個scope對象作為參數(shù)的,所以要改一下代碼

  return Function('scope',this.state.body.join(' '));

這樣一來生成的函數(shù)就是這樣:

function (scope){.....}

接下來要擴充AST.primary方法都毒,使他可以處理identifier類型的token:

ASTBuilder.prototype.primary=function(){
  if(ASTBuilder.Constants.hasOwnProperty(this.tokens[0].text)){
    return ASTBuilder.Constants[this.consume().text];
  }else if (this.expect("[")) {
    return this.arrayDeclaration();
  }else if (this.expect("{")) {
    return this.object()
  }else if (this.peek().identifier) {
    return this.identifier()
  }else{
    return this.constant();
  }
}

這樣一來粤蝎,產生的AST格式應該是這樣:

{
type:program,
body:{
    type:ASTBuilder.Identifier,
    name:'age'
  }
}

下一步可以進入compile階段。
在recurse方法里面增加處理Identifier類型的節(jié)點:

  case ASTBuilder.Identifier:
      return 'scope.'+ast.name;//這里的scope和生成函數(shù)的參數(shù)對應function(scope){.....}

這樣走下來喇颁,沒意外的話漏健,生成的函數(shù)是可以通過測試案例的。經過測試橘霎,確實通過了蔫浆。第一步開了個好頭。
接下來是增加健壯性姐叁,如果執(zhí)行下面的測試案例瓦盛,目前的代碼會報錯:

it('通過name操作對象',function () {
    var fn = parse('age');
    expect(fn()).toBe(18);
  })
age屬性沒定義

如果要是能在生成的函數(shù)里面加上這么一段代碼,就可以了:

function (scope){
  var v0;
  if(scope){
   v0= scope.age;
  }
  return v0;
}

先寫一個輔助方法外潜,用于給生成的函數(shù)增加一個if語句:

Compiler.prototype.if_=function(test,consequent){
  this.state.body.push('if(',test,')','{',consequent,'}');
}

利用這個函數(shù)改造compile方法:

case ASTBuilder.Identifier:
      this.state.body.push('var v0;');
      this.if_('scope','v0='+'scope.'+ast.name+';')//這里的scope和生成函數(shù)的參數(shù)對應function(scope){.....}
      return 'v0';

這段代碼看起來很復雜原环,其實用腦子用心好好看一看,腦子里想一想代碼是怎么跑的处窥,其實很容易理解嘱吗。
接下來的事情就是把代碼美化一下了。先寫一個工具函數(shù)滔驾,用于生成一個賦值語句:

Compiler.prototype.assign=function(id,value){
  return id+'='+value+';';
}

把compile里面那一段臟亂差的代碼美化一下:

this.if_('scope',this.assign('v0','scope'+ast.name))//這里的scope和生成函數(shù)的參數(shù)對應function(scope){.....}

好了谒麦,今天大概就寫到這吧俄讹。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市绕德,隨后出現(xiàn)的幾起案子颅悉,更是在濱河造成了極大的恐慌,老刑警劉巖迁匠,帶你破解...
    沈念sama閱讀 211,561評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件剩瓶,死亡現(xiàn)場離奇詭異,居然都是意外死亡城丧,警方通過查閱死者的電腦和手機延曙,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,218評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來亡哄,“玉大人枝缔,你說我怎么就攤上這事∥霉撸” “怎么了愿卸?”我有些...
    開封第一講書人閱讀 157,162評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長截型。 經常有香客問我趴荸,道長,這世上最難降的妖魔是什么宦焦? 我笑而不...
    開封第一講書人閱讀 56,470評論 1 283
  • 正文 為了忘掉前任发钝,我火速辦了婚禮,結果婚禮上波闹,老公的妹妹穿的比我還像新娘酝豪。我一直安慰自己,他們只是感情好精堕,可當我...
    茶點故事閱讀 65,550評論 6 385
  • 文/花漫 我一把揭開白布孵淘。 她就那樣靜靜地躺著,像睡著了一般歹篓。 火紅的嫁衣襯著肌膚如雪瘫证。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,806評論 1 290
  • 那天滋捶,我揣著相機與錄音痛悯,去河邊找鬼。 笑死重窟,一個胖子當著我的面吹牛载萌,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 38,951評論 3 407
  • 文/蒼蘭香墨 我猛地睜開眼扭仁,長吁一口氣:“原來是場噩夢啊……” “哼垮衷!你這毒婦竟也來了?” 一聲冷哼從身側響起乖坠,我...
    開封第一講書人閱讀 37,712評論 0 266
  • 序言:老撾萬榮一對情侶失蹤搀突,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后熊泵,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體仰迁,經...
    沈念sama閱讀 44,166評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,510評論 2 327
  • 正文 我和宋清朗相戀三年顽分,在試婚紗的時候發(fā)現(xiàn)自己被綠了徐许。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,643評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡卒蘸,死狀恐怖雌隅,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情缸沃,我是刑警寧澤恰起,帶...
    沈念sama閱讀 34,306評論 4 330
  • 正文 年R本政府宣布,位于F島的核電站趾牧,受9級特大地震影響检盼,放射性物質發(fā)生泄漏。R本人自食惡果不足惜武氓,卻給世界環(huán)境...
    茶點故事閱讀 39,930評論 3 313
  • 文/蒙蒙 一梯皿、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧县恕,春花似錦、人聲如沸剂桥。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,745評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽权逗。三九已至美尸,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間斟薇,已是汗流浹背师坎。 一陣腳步聲響...
    開封第一講書人閱讀 31,983評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留堪滨,地道東北人胯陋。 一個月前我還...
    沈念sama閱讀 46,351評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親遏乔。 傳聞我的和親對象是個殘疾皇子义矛,可洞房花燭夜當晚...
    茶點故事閱讀 43,509評論 2 348

推薦閱讀更多精彩內容

  • 寫到這兒的時候其實思路就有點亂了,很大部分的原因是之前的代碼寫了太久盟萨,有的地方確實忘了凉翻。所以今天打算趁機總結一下回...
    蚊子爸爸閱讀 543評論 0 1
  • 前兩天可以通過傳入一個整數(shù),拿到token和AST了捻激。今天打算把AST編譯一下制轰,得到一個函數(shù)。還是利用昨天提到的責...
    蚊子爸爸閱讀 522評論 0 1
  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具(例如配置管理胞谭,服務發(fā)現(xiàn)艇挨,斷路器,智...
    卡卡羅2017閱讀 134,633評論 18 139
  • 無論你是年收入不到1萬元的洗碗工.還是年薪過百萬的白領,你都是用一份時間去換一份金錢泉瞻。如果你被解雇脉漏,或因患病、受傷...
    跟誰學財經閱讀 459評論 0 1
  • 2017-02-01 仁者以天下萬物為一體袖牙,如果有一物不得其所侧巨,那是因為仁德還不完備。無論是一個企業(yè)家鞭达,或分店店長...
    郁萍閱讀 1,645評論 0 2