الفرق بين المراجعتين لصفحة: «ReactNative/javascript environment»
إضافة الصّفحة |
لا ملخص تعديل |
||
| سطر 21: | سطر 21: | ||
====ES6==== | ====ES6==== | ||
* الدوال السهمية: <code><C onPress={() => this.setState({pressed: true})}</code> | * [[JavaScript/Arrow Functions|الدوال السهمية]]: <code><C onPress={() => this.setState({pressed: true})}</code> | ||
* نطاق الكتل (Block scoping): <code>let greeting = 'hi';</code> | * [[JavaScript/let|نطاق الكتل]] (Block scoping): <code>let greeting = 'hi';</code> | ||
* النشر: <code>Math.max(...array);</code> | * [[JavaScript/Spread Operator|النشر]]: <code>Math.max(...array);</code> | ||
* الأصناف: <code>class C extends React.Component { render() { return <View />; } }</code> | * [[JavaScript/class|الأصناف]]: <code>class C extends React.Component { render() { return <View />; } }</code> | ||
* الثوابت: <code>const answer = 42;</code> | * [[JavaScript/const|الثوابت]]: <code>const answer = 42;</code> | ||
* التفكيك: <code>var {isActive, style} = this.props;</code> | * [[JavaScript/Destructuring Assignment|التفكيك]]: <code>var {isActive, style} = this.props;</code> | ||
* <code>for...of</code>: <code>for (var num of [1, 2, 3]) {}</code> | * <code>[[JavaScript/for...of|for...of]]</code>: مثل <code>for (var num of [1, 2, 3]) {}</code> | ||
* الوحدات: <code>import React, { Component } from 'react';</code> | * [[JavaScript/import|الوحدات]]: <code>import React, { Component } from 'react';</code> | ||
* الخاصيات المحسوبة: <code>var key = 'abc'; var obj = {[key]: 10};</code> | * [https://babeljs.io/docs/en/learn#enhanced-object-literals الخاصيات المحسوبة]: <code>var key = 'abc'; var obj = {[key]: 10};</code> | ||
* توابع الكائنات الموجزة (Object Concise Method) : <code>var obj = { method() { return 10; } };</code> | * [http://babeljs.io/docs/learn-es2015/#enhanced-object-literals توابع الكائنات الموجزة] (Object Concise Method) : <code>var obj = { method() { return 10; } };</code> | ||
* الصيغة المختصرة للكائنات (Object Short Notation): <code>var name = 'vjeux'; var obj = { name };</code> | * [[JavaScript/Object|الصيغة المختصرة للكائنات]] (Object Short Notation): <code>var name = 'vjeux'; var obj = { name };</code> | ||
* معاملات البقيّة (Rest Params): <code>function(type, ...args) { }</code> | * [[JavaScript/Rest Parameters|معاملات البقيّة]] (Rest Params): <code>function(type, ...args) { }</code> | ||
* بيانات القوالب الحرفيّة (Template Literals): <code>var who = 'world'; var str = `Hello ${who}`;</code> | * [[JavaScript/String#.D8.A7.D9.84.D9.82.D9.88.D8.A7.D9.84.D8.A8|بيانات القوالب الحرفيّة]] (Template Literals): <code>var who = 'world'; var str = `Hello ${who}`;</code> | ||
====ES8==== | ====ES8==== | ||
* الفاصلة الإضافية في الدوال: <code>function f(a, b, c,) { }</code> | * [https://github.com/jeffmo/es-trailing-function-commas الفاصلة الإضافية في الدوال]: <code>function f(a, b, c,) { }</code> | ||
* الدوال غير المتزامنة: <code>async function doStuffAsync() { const foo = await doOtherStuffAsync(); };</code> | * [[JavaScript/async function|الدوال غير المتزامنة]]: <code>async function doStuffAsync() { const foo = await doOtherStuffAsync(); };</code> | ||
====المرحلة 3 (Stage 3)==== | ====المرحلة 3 (Stage 3)==== | ||
نشر الكائنات: <code>var extended = { ...obj, a: 10 };</code> | [[JavaScript/Spread Operator|نشر الكائنات]]: <code>var extended = { ...obj, a: 10 };</code> | ||
====خاصّة (Specific)==== | ====خاصّة (Specific)==== | ||
JSX: مثل <code><View style={{color: 'red'}} /></code> | [[React/introducing jsx|JSX]]: مثل <code><View style={{color: 'red'}} /></code> | ||
Flow: مثل <code>function foo(x: ?number): string {}</code> | Flow: مثل <code>function foo(x: ?number): string {}</code> | ||
| سطر 51: | سطر 51: | ||
====المتصفح==== | ====المتصفح==== | ||
* <code>console.{log, warn, error, info, trace, table, group, groupEnd}</code> | * [[JavaScript|<code>console.{log, warn, error, info, trace, table, group, groupEnd}</code>]] | ||
* <code>require</code> الخاصة بمُحمِّل الوحدات CommonJS | * [[Node.js/modules|<code>require</code>]] الخاصة بمُحمِّل الوحدات CommonJS | ||
* <code>XMLHttpRequest, fetch</code> | * [[ReactNative/network|<code>XMLHttpRequest, fetch</code>]] | ||
* <code>{set, clear}{Timeout, Interval, Immediate}, {request, cancel}AnimationFrame</code> | * [[ReactNative/timers|<code>{set, clear}{Timeout, Interval, Immediate}, {request, cancel}AnimationFrame</code>]] | ||
* <code>navigator.geolocation</code> | * [[ReactNative/geolocation|<code>navigator.geolocation</code>]] | ||
==== ES6 ==== | ==== ES6 ==== | ||
* <code>Object.assign</code> | * [[JavaScript/Object/assign|<code>Object.assign</code>]] | ||
* <code>String.prototype.{startsWith, endsWith, repeat, includes}</code> | * [[JavaScript/String|<code>String.prototype.{startsWith, endsWith, repeat, includes}</code>]] | ||
* <code>Array.from</code> | * [[JavaScript/Array/from|<code>Array.from</code>]] | ||
* <code>Array.prototype.{find, findIndex}</code> | * [[JavaScript/Array|<code>Array.prototype.{find, findIndex}</code>]] | ||
==== ES7 ==== | ==== ES7 ==== | ||
* <code>Array.prototype.{includes}</code> | * [[JavaScript/Array|<code>Array.prototype.{includes}</code>]] | ||
==== ES8 ==== | ==== ES8 ==== | ||
* <code>Object.{entries, values}</code> | * [[JavaScript/Object|<code>Object.{entries, values}</code>]] | ||
==== خاصّة (Specific) ==== | ==== خاصّة (Specific) ==== | ||
* <code>__DEV__</code> | * <code>__DEV__</code> | ||
مراجعة 12:04، 21 فبراير 2019
بيئة JavaScript
برنامج وقت التشغيل (JavaScript Runtime)
عند استخدام React Native، ستُشغَّل شيفرة JavaScript في بيئتين:
- في معظم الحالات، سيستخدم React Native مُحرّكَ JavaScriptCore، وهو محركُ JavaScript الذي يعتمد عليه متصفح Safari. لاحظ أنه على نظام iOS، لا يستخدم محرّك JavaScriptCore ميّزة JIT نظرًا لعدم وجود ذاكرة قابلة للكتابة والتنفيذ (writable executable memory) في تطبيقات iOS.
- عند استخدام منقّح Chrome، تُشغَّل جميع شيفرات JavaScript داخل متصفح Chrome نفسه، والتواصل مع الشيفرة الأصيلة عبر تقنية WebSockets. يستخدم Chrome محرك V8 لتشغيل JavaScript.
في حين أن البيئتين متشابهتان للغاية، قد تحصُل بعض التضاربات (inconsistencies). من المرجّح أن يعتمد مشروع React Native على محركات JavaScript أخرى مستقبلًا، لذا من الأفضل تجنب الاعتماد على ميّزات خاصّة بأي مُحرّك معيّن.
محولات بنية (Syntax Transformers) لغة JavaScript
تجعل محوّلات البنية كتابةَ الشيفرة أمْتعَ وأرْيحَ من خلال السماح لك باستخدام بنية JavaScript الجديدة دون الحاجة إلى انتظار الدعم الكامل لها. يأتي React Native مع مترجم Babel. انظر توثيق Babel لمزيد من التفاصيل حول التحويلات المدعومة.
إليك قائمة كاملة بالتحويلات المُمَكَّنة في React Native.
ES5
الكلمات المحجوزة: promise.catch(function() { });
ES6
- الدوال السهمية:
<C onPress={() => this.setState({pressed: true})} - نطاق الكتل (Block scoping):
let greeting = 'hi'; - النشر:
Math.max(...array); - الأصناف:
class C extends React.Component { render() { return <View />; } } - الثوابت:
const answer = 42; - التفكيك:
var {isActive, style} = this.props; -
for...of: مثلfor (var num of [1, 2, 3]) {} - الوحدات:
import React, { Component } from 'react'; - الخاصيات المحسوبة:
var key = 'abc'; var obj = {[key]: 10}; - توابع الكائنات الموجزة (Object Concise Method) :
var obj = { method() { return 10; } }; - الصيغة المختصرة للكائنات (Object Short Notation):
var name = 'vjeux'; var obj = { name }; - معاملات البقيّة (Rest Params):
function(type, ...args) { } - بيانات القوالب الحرفيّة (Template Literals):
var who = 'world'; var str = `Hello ${who}`;
ES8
- الفاصلة الإضافية في الدوال:
function f(a, b, c,) { } - الدوال غير المتزامنة:
async function doStuffAsync() { const foo = await doOtherStuffAsync(); };
المرحلة 3 (Stage 3)
نشر الكائنات: var extended = { ...obj, a: 10 };
خاصّة (Specific)
JSX: مثل <View style=قالب:color: 'red' />
Flow: مثل function foo(x: ?number): string {}
شيفرات Polyfill
تتوفر العديد من الدوال القياسية كذلك في جميع محرّكات JavaScript المدعومة.
المتصفح
-
console.{log, warn, error, info, trace, table, group, groupEnd} -
require الخاصة بمُحمِّل الوحدات CommonJS -
XMLHttpRequest, fetch -
{set, clear}{Timeout, Interval, Immediate}, {request, cancel}AnimationFrame -
navigator.geolocation
ES6
-
Object.assign -
String.prototype.{startsWith, endsWith, repeat, includes} -
Array.from -
Array.prototype.{find, findIndex}
ES7
ES8
خاصّة (Specific)
-
__DEV__