NativeScript - Native API ที่ใช้ JavaScript
ส่วนนี้จะอธิบายเกี่ยวกับภาพรวมของการเข้าถึง Native API โดยใช้ JavaScript
มาร์แชลลิง
NativeScript Runtime ให้การแปลงประเภทโดยนัยสำหรับทั้งแพลตฟอร์ม Android และ iOS แนวคิดนี้เรียกว่ามาร์แชลลิ่ง ตัวอย่างเช่น NativeScript- iOS paltform สามารถแปลงชนิดข้อมูล JavaScript และ Objective-C โดยปริยายได้เช่นเดียวกัน Java / Kotlin สามารถแมปกับประเภทและค่าโครงการ JavaScript ได้อย่างง่ายดาย ขอให้เราเข้าใจวิธีการทำมาร์แชลในแต่ละประเภทโดยสังเขป
ค่าตัวเลข
เราสามารถแปลงประเภทข้อมูลตัวเลข iOS และ android เป็นหมายเลข JavaScript ได้อย่างง่ายดาย การแปลงตัวเลขอย่างง่ายสำหรับ iOS เป็น JavaScript ถูกกำหนดไว้ด้านล่าง -
console.log(`max(7,9) = ${max(7,9)}`);
ที่นี่
ฟังก์ชัน native max () ถูกแปลงเป็นหมายเลข JavaScript
สภาพแวดล้อม Android
Java รองรับประเภทตัวเลขต่างๆเช่น byte, short, int, float, double และ long JavaScript มีเฉพาะประเภทตัวเลข
พิจารณาคลาส Java ง่ายๆที่แสดงด้านล่าง -
class Demo extends java.lang.Object {
public int maxMethod(int a,int b) {
if(a>b) {
return a;
} else {
return b;
}
}
}
ที่นี่
โค้ดด้านบนประกอบด้วยอาร์กิวเมนต์จำนวนเต็มสองอาร์กิวเมนต์ เราสามารถเรียก code object ด้านบนโดยใช้ JavaScript ดังรูปด้านล่าง -
//Create an instance for Demo class
var obj = new Demo();
//implicit integer conversion for calling the above method
obj.maxMethod(7,9);
สตริง
สตริง Android ถูกกำหนดใน java.lang.string และสตริง iOS ถูกกำหนดใน NSSring ให้เราดูวิธีดำเนินการมาร์แชลในทั้งสองแพลตฟอร์ม
Android
สตริงไม่เปลี่ยนรูป แต่บัฟเฟอร์สตริงรองรับสตริงที่เปลี่ยนแปลงได้
โค้ดด้านล่างนี้เป็นตัวอย่างสำหรับการทำแผนที่อย่างง่าย -
//Create android label widget
var label = new android.widget.Label();
//Create JavaScript string
var str = "Label1";
//Convert JavaScript string into java label.setText(str);
// text is converted to java.lang.String
คลาสบูลีนถูกกำหนดใน java.lang.Boolean คลาสนี้รวมค่าบูลีนในอ็อบเจ็กต์ เราสามารถแปลงบูลีนเป็น String และในทางกลับกันได้อย่างง่ายดาย ตัวอย่างง่ายๆถูกกำหนดตามที่ระบุด้านล่าง -
//create java string
let data = new java.lang.String('NativeScript');
//map java String to JavaScript string,
let result = data.startsWith('N');
//return result
console.log(result);// true
สภาพแวดล้อม iOS
คลาส NSString ไม่เปลี่ยนรูป แต่คลาสย่อย NSMutableString ไม่เปลี่ยนรูป คลาสนี้ประกอบด้วยชุดวิธีการทำงานกับสตริง มีการประกาศดังต่อไปนี้ -
class NSString : NSObject
พิจารณาการประกาศวัตถุประสงค์ -c ง่ายๆดังที่แสดงด้านล่าง -
NSString *str = @"nativescript";
//convert the string to uppercase
NSString *str1;
str1 = [str uppercaseString];
NSLog(@"Uppercase String : %@\n", str1 );
NSStrings สามารถแมปกับสตริง JavaScript ได้อย่างง่ายดาย
อาร์เรย์
ส่วนนี้จะอธิบายเกี่ยวกับวิธีดำเนินการมาร์แชลในอาร์เรย์ มาดูตัวอย่างสภาพแวดล้อม iOS กันก่อน
การประกาศอาร์เรย์
class NSArray : NSObject
ที่นี่
NSArray ใช้เพื่อจัดการคอลเลกชันของอ็อบเจ็กต์ตามลำดับที่เรียกว่าอาร์เรย์ ใช้เพื่อสร้างอาร์เรย์แบบคงที่ คลาสย่อยของมันNSMutableArray ใช้เพื่อสร้างอาร์เรย์แบบไดนามิก
พิจารณาวัตถุ NSArray ที่สามารถสร้างได้โดยใช้ตัวอักษรอาร์เรย์ดังที่แสดงด้านล่าง -
let array: NSArray = ["React","Vue","TypeScript"]
ตอนนี้เราสามารถแมปอาร์เรย์นี้กับ JavaScript ดังที่แสดงด้านล่าง -
//create native array
let nsArr = NSArray.arrayWithArray("React","Vue","TypeScript"]);
//create simple javascript array
let jsArr = ["Hello,World","NativeScript"];
//Now compare the two arrays,
let compare = nsArr.isEqual(jsArr);
console.log(comapre);
สิ่งนี้จะส่งคืนผลลัพธ์เป็นเท็จ
การประกาศอาร์เรย์ Android
อาร์เรย์ Java ถูกกำหนดไว้ใน java.util.Arrays. คลาสนี้ประกอบด้วยเมธอดต่างๆในการจัดการอาร์เรย์ ตัวอย่างแสดงด้านล่าง -
//javascript array
let data = [12,45,23,56,34,78,50];
//create java array
let result = ns.example.Math.maxElement(data);
console.log(result);
คลาสและวัตถุ
Classes and Objects เป็นแนวคิดพื้นฐานของ Object Oriented Programming คลาสคือต้นแบบที่ผู้ใช้กำหนดเอง วัตถุเป็นตัวอย่างของคลาส คลาสแสดงถึงชุดของคุณสมบัติหรือวิธีการที่ใช้ร่วมกันกับอ็อบเจ็กต์ทั้งหมดประเภทหนึ่ง ให้เราเข้าใจคลาสดั้งเดิมและอ็อบเจ็กต์สำหรับทั้งสภาพแวดล้อมการพัฒนาอุปกรณ์เคลื่อนที่
สภาพแวดล้อม Android
คลาส Java และ Kotlin มีตัวระบุเฉพาะที่แสดงโดยชื่อแพ็กเกจแบบเต็ม
ตัวอย่างเช่น,
android.view.View- เป็นคลาสอินเทอร์เฟซผู้ใช้พื้นฐานสำหรับการจัดวางหน้าจอและการโต้ตอบกับผู้ใช้ เราสามารถเข้าถึงคลาสนี้ได้ใน JavaScript ดังรูปด้านล่าง -
const View = android.view.View;
ขั้นแรกเรานำเข้าคลาสโดยใช้คำสั่งด้านล่าง -
import android.view.View;
ถัดไปสร้างคลาสตามที่ระบุด้านล่าง -
public class MyClass {
public static void staticMethod(context) {
//create view instance
android.view.View myview = new android.view.View(context);
}
}
ในคลาสเดียวกันข้างต้นเราสามารถเข้าถึงฟังก์ชัน JavaScript โดยใช้รหัสด้านล่าง -
const myview = new android.view.View(context);
ในทำนองเดียวกันเราสามารถเข้าถึงอินเทอร์เฟซค่าคงที่และการแจงนับภายในแพ็คเกจ java.lang
สภาพแวดล้อม iOS
คลาส Objective-C ถูกกำหนดเป็นสองส่วน @interface และ @implementation นิยามคลาสเริ่มต้นด้วยคีย์เวิร์ด@interface ตามด้วย interface(class)ชื่อ. ใน Objective-C คลาสทั้งหมดมาจากคลาสพื้นฐานที่เรียกว่า NSObject
เป็นซูเปอร์คลาสของคลาส Objective-C ทั้งหมด คลาส Simple Circle ถูกกำหนดตามที่แสดงด้านล่าง -
@interface Circle:NSObject {
//Instance variable
int radius;
}
@end
พิจารณาคลาสด้วยวิธีการเดียวดังที่แสดงด้านล่าง -
@interface MyClass : NSObject
+ (void)baseStaticMethod;
@end
คลาสนี้สามารถแปลงเป็นจาวาสคริปต์โดยใช้โค้ดด้านล่าง -
function MyClass() { /* native call */ };
Object.setPrototypeOf(MyClass, NSObject);
BaseClass.baseStaticMethod = function () { /* native call */ };
JavaScript instanceofตัวดำเนินการถูกใช้เพื่อตรวจสอบว่าวัตถุสืบทอดจากคลาสที่กำหนดหรือไม่ สามารถกำหนดได้ว่า -
var obj = MyClass.alloc().init(); // object creation
console.log(obj instanceof NSObject); //return true
ที่นี่
อินสแตนซ์ Objective-C ถูกสร้างขึ้นโดยใช้การจัดสรรเริ่มต้นหรือวิธีการใหม่ ในตัวอย่างข้างต้นเราสามารถสร้างการเริ่มต้นวัตถุโดยใช้วิธีการใหม่ดังต่อไปนี้ -
var obj = MyClass.new();
ในทำนองเดียวกันคุณสามารถเข้าถึงวิธีการและคุณสมบัติแบบคงที่