Maison > Article > interface Web > Explication détaillée d'exemples d'intermodulation entre JS et OC
1. JavaScriptClasses de base couramment utilisées
Fonction JavaScriptCore : JavaScriptCore est l'API native d'Apple, utilisée pour JS et OC interactif.
JSContext : environnement d'exécution JS, utilisez-le pour exécuter du code JS et utilisez-le pour obtenir des données en JS
JSValue : utilisé pour recevoir le type de données obtenu en JS, qui peut être n'importe quel objet , méthode.
Essence : les variables et les méthodes ont été définies dans le code JS, obtenez-les via OC et appelez
Étapes :
1. Créer un environnement d'exécution JS
2. Exécuter le code JS
3. Obtenir les données JS (variables, méthodes)
4. Utiliser les données JS, méthodes
2.1 Obtenir les variables définies dans JS
Vous pouvez modifier la valeur des variables dans JS directement via OC
#pragma mark - 获取JS中定义的变量 - (void)getJSVar{ // JS代码 NSString *jsCode = @"var arr = [1,2,3]"; // 创建JS运行环境 JSContext *ctx = [[JSContext alloc] init]; // 执行JS代码 [ctx evaluateScript:jsCode]; // 因为变量直接定义在JS中,所以可以直接通过JSContext获取,根据变量名称获取,相当于字典的Key // 只有先执行JS代码,才能获取变量 JSValue *jsArr = ctx[@"arr"]; jsArr[0] = @5; // 打印结果:5,2,3 NSLog(@"%@",jsArr);}
2.2 Obtenir les méthodes définies dans JS, Et appelez
pour réaliser la méthode JS d'appel OC
#pragma mark - OC调用JS // OC调用JS方法,并获取返回结果 - (void)ocCallJSFunc{ NSString *jsCode =@"function hello(say){" " return say; " "}"; // 创建JS运行环境 JSContext *ctx = [[JSContext alloc] init]; // 因为方法直接定义在JS中,所以可以直接通过JSContext获取,根据方法名称获取,相当于字典的Key // 执行JS代码 [ctx evaluateScript:jsCode]; // 获取JS方法,只有先执行JS代码,才能获取 JSValue *hello = ctx[@"hello"]; // OC调用JS方法,获取方法返回值 JSValue *result = [hello callWithArguments:@[@"你好"]]; // 打印结果:你好 NSLog(@"%@",result); }
dans OC : cela n'existe pas dans JS au début du bloc OC, vous ne pouvez donc pas appeler directement le bloc OC. Vous devez générer la méthode de bloc OC dans JS, puis l'appeler via JS.
Étapes :
1. Créez un environnement d'exécution JS
2. Générez le code OC correspondant dans JS
3. La méthode de bloc générée dans l'environnement peut être appelée dans le bloc d'OC.
3.1 JS appelle le bloc sans paramètres dans OC
Vous voulez appeler le bloc sans paramètres dans OC via JS
#pragma mark - JS调用OC中不带参数的block - (void)jsCallOCBlock1WithNoneArguments{ // 创建JS运行环境 JSContext *ctx = [[JSContext alloc] init]; // JS调用Block方式// 由于JS本身没有OC这个代码,需要给JS中赋值,就会自动生成右边的代码. // 相当于在JS中定义一个叫eat的方法,eat的实现就是block中的实现,只要调用eat,就会调用block ctx[@"eat"] = ^(){NSLog(@"吃东西"); }; // JS执行代码,就会直接调用到block中 NSString*jsCode =@"eat()"; [ctx evaluateScript:jsCode];}
3.2 JS appelle un bloc avec des paramètres en OC
Je souhaite appeler un bloc avec des paramètres en OC via JS
- (void)jsCallOCBlockWithArguments{ // 创建JS运行环境 JSContext *ctx = [[JSContext alloc] init]; // 2.调用带有参数的block // 还是一样的写法,会在JS中生成eat方法,只不过通过[JSContext currentArguments]获取JS执行方法时的参数 ctx[@"eat"] = ^(){ // 获取JS调用参数 NSArray *arguments = [JSContext currentArguments]; NSLog(@"吃%@",arguments[0]); }; // JS执行代码,调用eat方法,并传入参数面包 NSString*jsCode =@"eat('面包')"; [ctx evaluateScript:jsCode]; }
Essence : il n'y a pas de classes OC dans JS au début. Vous devez d'abord générer des classes OC dans JS, puis les appeler via JS.
Étapes
1. La classe OC doit être conforme au protocole JSExport, JS générera cette classe
2. ne suffit pas, il y a des Attributs et méthodes, doivent également être générés en JS
3.JSExport lui-même n'a pas ses propres attributs et méthodes, vous devez personnaliser un protocole, 4 De cette façon, votre classe n'a besoin que d'hériter de son propre protocole, et JS générera automatiquement la classe, y compris les attributs et méthodes déclarés dans son propre protocole4.1 JS appelle la classe personnalisée OCProtocole personnalisé (PersonJSExport)Classe personnalisée (Personne)@protocolPersonJSExport @property(nonatomic, strong) NSString *name; -(void)play; // 调用多个参数的方法,JS函数命名规则和OC还不一样,很可能调用不到对应的JS生成的函数,为了保证生成的JS函数和OC方法名一致,OC提供了一个宏JSExportAs,用来告诉JS应该生成什么样的函数对应OC的方法,这样就不会调错了。 // PropertyName:JS函数生成的名字 // Selector:OC方法名 // JS就会自动生成playGame这个方法JSExportAs(playGame, - (void)playWithGame:(NSString *)gametime:(NSString *)time); @end
Appel de classes personnalisées OC via JS@interfacePerson: NSObject @property(nonatomic, strong) NSString *name; -(void)playWithGame:(NSString*)gametime:(NSString*)time; @end @implementationPerson -(void)play{ NSLog(@"%@玩",_name); } -(void)playWithGame:(NSString*)gametime:(NSString*)time{ NSLog(@"%@在%@玩%@",_name,time,game); } @end
4.1 JS appelant OC classes systèmeProblème : Classes fournies avec le système, que devons-nous faire si nous voulons l'appeler via JS Nous ne pouvons pas modifier les fichiers des propres classes du système Tout comme ? en appelant une classe personnalisée, nous devons également créer un protocole personnalisé pour hériter de JSExport et décrire les attributs qui doivent être exposés (pensez Pour exposer quels attributs de la classe système, déclarez-le dans votre propre protocole) Ajouter un protocole à la classe via l'exécution Protocole personnalisé (UILabelJSExport)#pragmamark - JS调用OC自定义类 - (void)jsCallOCCustomClass{ // 创建Person对象 Person *p = [[Person alloc] init]; p.name = @"zs"; JSContext *ctx = [[JSContext alloc] init]; // 会在JS中生成Person对象,并且拥有所有值 // 前提:Person对象必须遵守JSExport协议, ctx[@"person"] = p; // 执行JS代码 // 注意:这里的person一定要跟上面声明的一样,因为生成的对象是用person引用// NSString *jsCode = @"person.play()"; NSString *jsCode = @"person.playGame('德州扑克','晚上')"; [ctx evaluateScript:jsCode]; }
JS appelle les classes du système OC@protocolUILabelJSExport @property(nonatomic, strong) NSString *text; @end
[Recommandations associées]1.#pragma mark - JS调用OC系统类 - (void)jsCallOCSystemClass{ // 给系统类添加协议 class_addProtocol([UILabel class], @protocol(UILabelJSExport)); // 创建UILabel UILabel *label= [[UILabel alloc] initWithFrame:CGRectMake(50, 50, 100, 100)]; [self.view addSubview:label]; JSContext *ctx = [[JSContext alloc] init]; // 就会在JS中生成label对象,并且用laebl引用 ctx[@"label"] =label; // 利用JS给label设置文本内容 NSString *jsCode = @"label.text = 'Oh Year'"; [ctx evaluateScript:jsCode]; }
Tutoriel vidéo en ligne js gratuit
2Manuel de référence en chinois JavaScript
3. .php.cn Dugu Jiujian (3) - Tutoriel vidéo JavaScript
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!