JSPatch原理解析(二)

由于執行了demo.js這個js文件,接下來就要轉到這個文件中去查看它的調用過程,demo.js里面寫了兩個方法調用,第一個就是給那個實現了那個在oc沒有實現的按鈕點擊事件,第二個就是添加了一個JPTableViewController類然后實現了相關的方法,我們先看是如何實現那個點擊事件的

defineClass('JPViewController', {
handleBtn: function(sender) {
var tableViewCtrl = JPTableViewController.alloc().init()
self.navigationController().pushViewController_animated(tableViewCtrl, YES)
}
})
defineClass('JPTableViewController : UITableViewController <UIAlertViewDelegate>', ['data'], {...})

這里調用了defineClass這個匿名函數穿進去了2個參數,一個類名字符串'JPViewController',以及一個對象,對象里面有鍵值對handleBtn并對應了一個方法實現,注意這里的鍵和oc里面的未實現的方法名相同,defineClass是在JSPatch中定義的

defineClass

1.判斷傳進來的值
首先在JSPatch中給全局變量global添加了一個defineClass對應一個匿名函數,這個匿名函數干的第一件事就是判斷傳進來的參數,在參數全部填滿的情況下應該是傳進來一個declaration=>字符串(剛才調用時傳進來的JPViewController),properties=>數組,instMethods(剛才傳進來的包含handleBtn方法的對象)、clsMethods=>對象,向剛才這種調用的情況下只傳了兩個值,一個類名,一個類方法,而js是不支持方法重載的之后的同名方法會覆蓋第一個,這里就用了一個聰明的方法,因為創建類,類名是肯定會傳的但是可以沒有變量于是一進來就判斷一下傳進來的properties到底是不是變量名(是不是字符串),如果像剛才傳進來的是類方法的話其實傳進來的第二個變量是一個對象,那么說明沒有傳進來變量名,那么就讓instMethods,clsMethods都等于前一個傳進來的變量然后把變量properties置為空就是實現了本來方法重載應該實現的功能

global.defineClass = function(declaration, properties, instMethods, clsMethods) {
var newInstMethods = {}, newClsMethods = {}
if (!(properties instanceof Array)) {
clsMethods = instMethods
instMethods = properties
properties = null
}
...}

2.給要生成的類設置變量

if (properties) {
properties.forEach(function(name){
if (!instMethods[name]) {
instMethods[name] = _propertiesGetFun(name);
}
var nameOfSet = "set"+ name.substr(0,1).toUpperCase() + name.substr(1);
if (!instMethods[nameOfSet]) {
instMethods[nameOfSet] = _propertiesSetFun(name);
}
});
}

首先遍歷這個變量名數組,然后去傳進來的類方法里面找有沒有實現這個變量名對應的get方法和set方法,如果沒有就給它生成一個,比如說我一開始傳入了‘data’變量名,在這里這個變量名會在這里被處理成一個叫以setData為鍵,其方法實現為值的數據存在instMethods數組中,設置方法實現的這個過程要看_propertiesSetFun,_propertiesGetFun這兩個方法一個是實現set方法一個是實現get方法,兩個的實現差不多用_propertiesSetFun來講一下過程,這個方法因為有傳參所以比較有代表性

var _propertiesSetFun = function(name){
return function(jval){

var slf = this;
if (!slf.__ocProps) {
var props = _OC_getCustomProps(slf.__obj)
if (!props) {
props = {}
_OC_setCustomProps(slf.__obj, props)
}
slf.__ocProps = props;
}
slf.__ocProps[name] = jval;
};
}

根據上述代碼可以得出其返回了一個匿名函數,放在剛才 instMethods[nameOfSet] = _propertiesSetFun(name);實際上就是給這個變量生成了一個set/get方法。
這個方法中的slf=this請參看基礎篇中的this講解,由于JSPatch對于變量的set和get方法和oc中是一致的,也就是說都是調用的本類的set方法比如self.setData,所以在這里實際指代的是調用set/get方法的類(JPViewController),而__ocProps則是用來存儲改類變量的數組,所以這個方法做的事就是先判斷該類有沒有生成這個屬性數組如果有就看看這個調用set或者get方法的屬性有沒有在oc中和這個類關聯如果有就加到屬性數組中沒有就關聯一下在添加到JS模擬oc類的屬性數組中。這個方法中屬性property關聯oc類對象就是維護oc的類,而將屬性添加到屬性列表就是在維護js中的模擬oc類,通過這樣的操作可以保持js中的模擬oc類和oc中的類保持一致。
_OC_setCustomProps傳入的參數就是當前調用set方法的js對象,這個對象在_OC_setCustomProps中會通過formatJSToOC這個方法變為OC的對象并把屬性值關聯到這個對象上,之后通過 slf.__ocProps[name] = jval;給該對象的屬性數組中添加一個name屬性并賦值。
舉例:

defineClass('testViewController',['objctA'],...,...)

在這個例子中slf就是testViewController對象,該對象有一個屬性列表__ocProps,_propertiesSetFun的作用就是
3.獲取到真實的類名
因為傳進來的有可能是例如‘JPTableViewController : UITableViewController <UIAlertViewDelegate>’所以要按冒號分割取第一個值,trim的作用是去除左右空格

var realClsName = declaration.split(':')[0].trim()

4.格式化方法

    _formatDefineMethods(instMethods, newInstMethods, realClsName)
    _formatDefineMethods(clsMethods, newClsMethods, realClsName)
var _formatDefineMethods = function(methods, newMethods, realClsName) {
    for (var methodName in methods) {
      if (!(methods[methodName] instanceof Function)) return;
      (function(){
        var originMethod = methods[methodName]
        newMethods[methodName] = [originMethod.length, function() {
          try {
            var args = _formatOCToJS(Array.prototype.slice.call(arguments))
            var lastSelf = global.self
            global.self = args[0]
            if (global.self) global.self.__realClsName = realClsName
            args.splice(0,1)
            var ret = originMethod.apply(originMethod, args)
            global.self = lastSelf
            return ret
          } catch(e) {
            _OC_catch(e.message, e.stack)
          }
        }]
      })()
    }
  }

這個方法針對你寫在JS文件中的模擬OCclass中的方法進行格式化,讓你每個方法實現變成一個數組,數組中第一個成員是originMethod.length也就是該方法傳進來的參數的數量,第二個成員是這個匿名函數,這個匿名函數接受這個方法在運行時傳進來的參數(注意是運行時傳進來的,你在定義方法時顯式聲明的入參沒有作用,顯式聲明多少都沒用,最后傳進來的是實際運行時傳進來的值),而在運行時調用的時候傳進任何一個方法中的參數都比實際多一個,這個參數就是調用者本身,比如出了handleBtn這個點擊事件,它的arguments數組中第一個對象是JPViewController自身,第二個對象是傳進來的sender也就是UIButton,所以在把這些參數交給js方法來執行前需要傳進去實際需要的參數,調用者本身就不需要了,所以有了 args.splice(0,1)這句話的意思是從下標0開始刪除1個數組元素也就是刪掉了調用者本身,同時這里設定了self的值為調用者本身
5.把參數交給OC的運行時去動態生成這個class

    var ret = _OC_defineClass(declaration, newInstMethods, newClsMethods)
    var className = ret['cls']
    var superCls = ret['superCls']

這一部分js做的事情很少,就只是把創建類所需要的參數交給oc來處理,然后oc會返回一個字典,第一項是該類的類名,第二項是它的父類的類名,這兩項在后面創建對應的oc模擬類的時候會用到,接下來看一下_OC_defineClass具體做了什么

static NSDictionary *defineClass(NSString *classDeclaration, JSValue *instanceMethods, JSValue *classMethods)
{
    NSScanner *scanner = [NSScanner scannerWithString:classDeclaration];
    
    NSString *className;
    NSString *superClassName;
    NSString *protocolNames;
    [scanner scanUpToString:@":" intoString:&className];
    if (!scanner.isAtEnd) {
        scanner.scanLocation = scanner.scanLocation + 1;
        [scanner scanUpToString:@"<" intoString:&superClassName];
        if (!scanner.isAtEnd) {
            scanner.scanLocation = scanner.scanLocation + 1;
            [scanner scanUpToString:@">" intoString:&protocolNames];
        }
    }
    
    if (!superClassName) superClassName = @"NSObject";
    className = trim(className);
    superClassName = trim(superClassName);
    
    NSArray *protocols = [protocolNames length] ? [protocolNames componentsSeparatedByString:@","] : nil;
    Class cls = NSClassFromString(className);
    if (!cls) {
        Class superCls = NSClassFromString(superClassName);
        if (!superCls) {
            _exceptionBlock([NSString stringWithFormat:@"can't find the super class %@", superClassName]);
            return @{@"cls": className};
        }
        cls = objc_allocateClassPair(superCls, className.UTF8String, 0);
        objc_registerClassPair(cls);
    }
    if (protocols.count > 0) {
        for (NSString* protocolName in protocols) {
            Protocol *protocol = objc_getProtocol([trim(protocolName) cStringUsingEncoding:NSUTF8StringEncoding]);
            class_addProtocol (cls, protocol);
        }
    }

這一大段只做了一件事就是把類名,繼承的類名,協議從聲明字符串里面取出來然后判斷一下該類存不存在不存在就要生成一個,生成前先看一下父類存不存在不存在就報錯,然后添加協議

for (int i = 0; i < 2; i ++) {
        BOOL isInstance = i == 0;
        JSValue *jsMethods = isInstance ? instanceMethods: classMethods;
        
        Class currCls = isInstance ? cls: objc_getMetaClass(className.UTF8String);
        NSDictionary *methodDict = [jsMethods toDictionary];
        for (NSString *jsMethodName in methodDict.allKeys) {
            JSValue *jsMethodArr = [jsMethods valueForProperty:jsMethodName];
            int numberOfArg = [jsMethodArr[0] toInt32];
            NSString *selectorName = convertJPSelectorString(jsMethodName);
            
            if ([selectorName componentsSeparatedByString:@":"].count - 1 < numberOfArg) {
                selectorName = [selectorName stringByAppendingString:@":"];
            }
            
            JSValue *jsMethod = jsMethodArr[1];
            if (class_respondsToSelector(currCls, NSSelectorFromString(selectorName))) {
                overrideMethod(currCls, selectorName, jsMethod, !isInstance, NULL);
            } else {
                BOOL overrided = NO;
                for (NSString *protocolName in protocols) {
                    char *types = methodTypesInProtocol(protocolName, selectorName, isInstance, YES);
                    if (!types) types = methodTypesInProtocol(protocolName, selectorName, isInstance, NO);
                    if (types) {
                        overrideMethod(currCls, selectorName, jsMethod, !isInstance, types);
                        free(types);
                        overrided = YES;
                        break;
                    }
                }
                if (!overrided) {
                    if (![[jsMethodName substringToIndex:1] isEqualToString:@"_"]) {
                        NSMutableString *typeDescStr = [@"@@:" mutableCopy];
                        for (int i = 0; i < numberOfArg; i ++) {
                            [typeDescStr appendString:@"@"];
                        }
                        overrideMethod(currCls, selectorName, jsMethod, !isInstance, [typeDescStr cStringUsingEncoding:NSUTF8StringEncoding]);
                    }
                }
            }
        }
    }

這一段也很簡單,就是給生成的類分別添加類方法和實例方法,其中做了一個判斷,判斷一下當前類是不是已經有了這個方法,如果是的話就復寫這個方法

    class_addMethod(cls, @selector(getProp:), (IMP)getPropIMP, "@@:@");
    class_addMethod(cls, @selector(setProp:forKey:), (IMP)setPropIMP, "v@:@@");

最后這點就是添加了兩個方法,這兩個方法用于在生成類以后動態的給該類添加屬性,比如說你想在handleBtn里面聲明一個類的屬性你就要用這兩個方法進行存取
6.最后一件事是生成該類對應的JS模擬OC類

    var className = ret['cls']
    var superCls = ret['superCls']

    _ocCls[className] = {
      instMethods: {},
      clsMethods: {},
    }

    if (superCls.length && _ocCls[superCls]) {
      for (var funcName in _ocCls[superCls]['instMethods']) {
        _ocCls[className]['instMethods'][funcName] = _ocCls[superCls]['instMethods'][funcName]
      }
      for (var funcName in _ocCls[superCls]['clsMethods']) {
        _ocCls[className]['clsMethods'][funcName] = _ocCls[superCls]['clsMethods'][funcName]
      }
    }

這里就用到了剛才oc處理完的返回值中的類名和父類名,然后把這些方法實現都添加到ocCls這個存儲方法實現的數組中,上述代碼的第二段的是用來判斷js的模擬oc類有沒有實現該類的父類,如果有就也要把這個父類的方法添加到子類中去,這就實現了方法查找,在oc中的實現是先在該類中查找該方法沒有就去父類查找,這里直接把子類沒有的父類方法都添加到了子類,實現效果是一樣的

    _setupJSMethod(className, instMethods, 1, realClsName)
    _setupJSMethod(className, clsMethods, 0, realClsName)

最后就是把這些實例方法和類方法都添加到_ocCls數組中去了
返回值是require(classname),這個require在bang大神的官方解釋中也說明了,就是給這個類名添加一個js的全局變量,不然js在使用沒有定義變量時會報錯

總結

最后梳理一下思路,在JS里面定義的類實際上只有方法沒有變量,變量是用set和get方法來實現的,所以JS中的模擬OC類只需要一個三維數組就能實現了_ocCls[類名][方法類型][方法名]這個數組中存放的都是開發者在js中定義的oc類在處理該類的時候回保證與oc一致,先去oc里面創建類添加方法然后再把這個方法實現添加到_ocCls,而在js中調用的方法都會被轉發到__c這個方法上,這個方法會去查找你的方法名是不是在__ocCls表里面有這個實現,有的話直接調用這個方法,沒有就去oc的運行時找有沒有這個實現

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,936評論 6 535
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,744評論 3 421
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,879評論 0 381
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,181評論 1 315
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,935評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,325評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,384評論 3 443
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,534評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,084評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,892評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,067評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,623評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,322評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,735評論 0 27
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,990評論 1 289
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,800評論 3 395
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,084評論 2 375

推薦閱讀更多精彩內容