ملخص الأساليب العملية لجافا سكريبت

مقدمة:

لا يفسر هذا الفصل بعض المبادئ الأساسية لـ JS في العمق ، مثل هذا المؤشر والنطاق والنموذج الأولي. إنه يتضمن بعضهم يفضي إلى تبسيط الكود وتحسين كفاءة التنفيذ أثناء التطوير ، أو يمكن استخدامها كطريقة تجريبية. الطول ليس طويلًا ، وتتيح لك الخطوات الصغيرة قراءة المقالة بأكملها وتجربة فرحة البرمجة.

احصل على أرقام عشوائية خلال فترتين

نسخة الكود كما يلي:

وظيفة getRandomNum (دقيقة ، كحد أقصى) {// احصل على أرقام عشوائية خلال فترتين

// @南南南南南南 يشير إلى أن المعلمة الأولى أكبر من المعلمة الثانية ، لذا فإن إضافة حكم أكثر موثوقية

إذا (min> max)

max = [min ، min = max] [0] ؛ // تبادل بسرعة قيمتين متغيرتين

var range = max - min + 1 ؛

var rand = math.random () ؛

إرجاع min + math.floor (Rand * Range) ؛

} ؛

إرجاع معلمة إيجابية/سلبية بشكل عشوائي

نسخة الكود كما يلي:

وظيفة getRandomxy (num) {// إرجاع معلمة إيجابية/سلبية عشوائية

num = number (num) ؛

if (Math.Random () <= 0.5)

num = -num ؛

عودة NUM ؛

}

SetInterval () أو معلمة تمرير وظيفة Timer SetTimeTimeOut ()

نسخة الكود كما يلي:

var s = 'أنا معلمة' ؛

وظيفة fn (args) {

console.log (args) ؛

}

var a = setInterval (fn (s) ، 100) ؛ // خطأ xxxxx xxxxxx

var b = setInterval (function () {// تصحيح ، اتصل بالوظيفة المحددة مع دالة مجهولة المصدر

fn (s) ؛

} ، 100) ؛

setInterval () أو setTimeOut () مؤقت يسمى بشكل متكرر

نسخة الكود كما يلي:

var s = صحيح ؛

وظيفة FN2 (A ، B) {// الخطوة 3

إذا (s) {

ClearInterval (A) ؛

Clearinterval (B) ؛

}

} ؛

وظيفة fn (a) {// الخطوة 2

var b = setInterval (function () {

FN2 (A ، B) // تمر في توقيتتين

} ، 200)

} ؛

var a = setInterval (function () {// الخطوة 1

fn (a) ؛ // B يمثل المؤقت نفسه ، والذي يمكن تمريره على معلمات المقعد

} ، 100) ؛

تحويل السلسلة إلى الرقم

نسخة الكود كما يلي:

// لا حاجة إلى رقم جديد (سلسلة) ولا رقم (سلسلة) فقط قم بطرح الأصفار من السلسلة

var str = '100' ؛ // str: سلسلة

var num = str - 0 ؛ // num: number

الحكم القيمة الخالية

نسخة الكود كما يلي:

var s = '' ؛ // سلسلة فارغة

إذا تم تحويل (! s)

إذا (s! = null) // لكن سلسلة فارغة! = خالية

إذا (s! = غير محدد) // سلسلة فارغة هي أيضا! = غير محددة

طريقة IE Browser Parseint ()

نسخة الكود كما يلي:

// التحويل التالي هو 0 في IE ، والمتصفحات الأخرى هي 1. وهذا يرتبط بتفسير متصفح IE للأرقام.

var inum = parseint (01) ؛

// إذن ، الكتابة المتوافقة هي

var num = parseint (رقم جديد (01)) ؛

Firebug تصحيح رمز JS بشكل مريح

نسخة الكود كما يلي:

// يحتوي Firebug على كائن وحدة تحكم مدمج ، يوفر طرقًا مدمجة لعرض المعلومات

/**

* 1: console.log () ، والتي يمكن استخدامها بدلاً من التنبيه () أو المستند. write () ، يدعم الناتج النائب ، الأحرف (٪ s) ، الأعداد الصحيحة (٪ d أو ٪ i) ، أرقام النقطة العائمة (٪ f) والكائنات (٪ o). على سبيل المثال: console.log ("٪ d year ٪ d month d day" ، 2011 ، 3 ، 26)

* 2: إذا كان هناك الكثير من المعلومات ، فيمكنك عرضها في مجموعات. الأساليب المستخدمة هي Console.group () و console.groupend ()

* 3: console.dir () يمكن عرض جميع خصائص وطرق كائن ما

* 4: console.dirxml () يستخدم لعرض رمز HTML/XML الموجود في عقدة صفحة ويب

* 5: console.assert () تأكيد ، يستخدم لتحديد ما إذا كان التعبير أو المتغير صحيحًا

* 6: console.trace () يستخدم لتتبع مسار المكالمة للوظيفة

* 7: console.time () و console.timeend () تستخدم لعرض وقت تشغيل الرمز

* 8: تحليل الأداء (Profiler) هو تحليل وقت تشغيل كل جزء من البرنامج لمعرفة عنق الزجاجة. الطريقة المستخدمة هي console.profile () .... fn .... console.profileend ()

*/

خذ بسرعة المللي ثانية الحالية

نسخة الكود كما يلي:

// t == قيمة النظام الحالي للمللي ثانية ، السبب: سيتم استدعاء مشغل Sign + ، وسيتم استدعاء طريقة التاريخ ().

var t = +new Date () ؛

خذ بسرعة قطع عدد صحيح عشري

نسخة الكود كما يلي:

// x == 2 ، قيم x التالية هي 2 ، ويمكن أيضًا تحويل الأرقام السالبة

var x = 2.00023 | 0 ؛

// x = '2.00023' | 0 ؛

اثنين من القيم المتغيرة تبادل (لا يوجد مبلغ وسيطة)

نسخة الكود كما يلي:

var a = 1 ؛

var b = 2 ؛

a = [b ، b = a] [0]

تنبيه (A+'_'+b) // تم تبديل قيم النتيجة 2_1 و a و b.

منطقي أو '||' المشغل

نسخة الكود كما يلي:

// B ليس فارغًا: a = b ، b هو NULL: a = 1.

var a = b || 1 ؛

// الاستخدام الأكثر شيوعًا هو تمرير المعلمات لطريقة الإضافات والحصول على عناصر هدف الحدث: الحدث = الحدث || Window.event

// ie لديه نافذة. كائن event ، ولكن FF لا.

فقط كائن الطريقة لديه خصائص النموذج الأولي

نسخة الكود كما يلي:

// تحتوي الطريقة على خاصية النموذج الأولي للكائن ، في حين أن البيانات الأصلية لا تحتوي على هذه الخاصية ، مثل var a = 1 ، لا تحتوي A على خاصية نموذج أولي

وظيفة person () {} // مُنشئ الإنسان

person.prototype.run = function () {Alert ('run ...') ؛ } // طريقة تشغيل النموذج الأولي

person.run () ؛ // خطأ

var p1 = شخص جديد () ؛ // سيتم تعيين طريقة تشغيل النموذج الأولي لـ P1 فقط عند استخدام المشغل الجديد.

p1.run () ؛ // يجري...

احصل بسرعة على يوم الأسبوع

نسخة الكود كما يلي:

// الوقت الحالي لنظام الحساب هو الأسبوع

var week = "اليوم IS: Week" + "اليوم الأول ، والاثنان ، والثلاث ، والرابع ، والخمسة ، والستة". Charat (تاريخ جديد (). getDay ()) ؛

إغلاق التحيز

نسخة الكود كما يلي:

/**

* الإغلاق: يمكن تسمية أي هيئة طريقة JS بمثابة إغلاق ، لا يحدث ذلك فقط إذا كانت الدالة المضمنة تشير إلى معلمة أو خاصية معينة لوظيفة خارجية.

* يحتوي على نطاق مستقل ، حيث يمكن أن توجد عدة أقراص فرعية (أي أساليب متداخلة للأسلوب) ، وأخيراً نطاق الإغلاق هو نطاق الطريقة الخارجية.

* يحتوي على معلمات طريقة نفسه ومعلمات الطريقة لجميع الوظائف المدمجة. لذلك ، عندما يكون للدالة المضمنة مرجع خارجيًا ، يكون نطاق المرجع هو نطاق الطريقة (المستوى الأعلى) حيث توجد وظيفة المرجع.

*/

الوظيفة A (x) {

الوظيفة B () {

تنبيه (x) ؛ // معلمات الوظيفة الخارجية المرجعية

}

العودة ب ؛

}

var run = a ('Run ...') ؛

// بسبب توسيع نطاق ، يمكن الرجوع وعرض متغيرات الوظيفة الخارجية A

يجري()؛ // ALERT (): RUN ..

احصل على سلسلة معلمة العنوان وتحديث توقيت

نسخة الكود كما يلي:

// الحصول على علامة استفهام؟ يتضمن المحتوى التالي علامة الاستفهام

var x = window.location.search

// احصل على المحتوى وراء رقم المنبه # ، بما في ذلك رقم #

var y = window.location.hash

// يمكن تحقيق تحديث صفحة الويب التلقائية مع المؤقت

window.location.reload () ؛

فارغة وغير محددة

نسخة الكود كما يلي:

/**

* النوع غير المحدد له قيمة واحدة فقط ، أي ، غير محدد. عند عدم تهيئة المتغير المعلن ، تكون القيمة الافتراضية للمتغير غير محددة.

* نوع فارغ يحتوي أيضًا على قيمة واحدة فقط ، أي فارغة. يتم استخدام NULL لتمثيل كائن لم يكن موجودًا بعد ، وغالبًا ما يتم استخدامه لتمثيل وظيفة تحاول إعادة كائن غير موجود.

* يعتقد ecmascript أن غير المحدد مشتق من فارغة ، لذلك يتم تعريفها على أنها متساوية.

* ولكن ، إذا كان علينا في بعض الحالات التمييز بين هاتين القيمتين ، فماذا يجب أن نفعل؟ يمكن استخدام الطريقتين التاليتين

* عند إصدار الأحكام ، من الأفضل استخدام "===" حكم قوي عند الحكم على ما إذا كان للكائن قيمة وفقًا للاحتياجات.

*/

var a ؛

تنبيه (a === null) ؛ // خطأ ، لأن A ليس كائنًا فارغًا

تنبيه (A === غير محدد) ؛ // صحيح ، لأنه لم يتم تهيئته ، فإن القيمة غير محددة

// يقدم

تنبيه (فارغ == غير محدد) ؛ // صحيح ، لأن مشغل "==" سيؤدي تحويل النوع ،

// بصورة مماثلة

تنبيه (1 == '1') ؛ // حقيقي

تنبيه (0 == خطأ) ؛ // صحيح ، يتحول كاذب إلى نوع الرقم 0

إضافة معلمات ديناميكية إلى الطريقة

نسخة الكود كما يلي:

// الطريقة A لها معلمة أخرى 2

الوظيفة A (x) {

var arg = array.prototype.push.call (الوسائط ، 2) ؛

التنبيه (الوسائط [0]+'__'+وسيطات [1]) ؛

}

تخصيص نمط الحدود

نسخة الكود كما يلي:

<!-انسخ إلى الصفحة لتجربة التأثير ، يمكنك تخصيص النمط حسب الرغبة->

<span style = "الحدود: 1 بكسل صلب أحمر ؛ الموضع: المطلق ؛ تجاوز: مخفي ؛" >

<Select Style = "Margin: -2px ؛">

<Poort> مخصص حدد النمط الحدودي </option>

<Point> 222 </Option>

<Poort> 333 </Option>

</select>

</span>

أسهل لوحة ألوان

نسخة الكود كما يلي:

<!-JS لاستخراج قيمتها وضبط أي لون على أي كائن->

<نوع الإدخال = اللون />

وظائف ، الكائنات هي صفيف؟

نسخة الكود كما يلي:

var anobject = {} ؛ // كائن

anobject.aproperty = "خاصية الكائن" ؛ // خاصية للكائن

anobject.amethod = function () {Alert ("طريقة الكائن")} ؛ // طريقة للكائن

// التركيز على ما يلي:

ALERT (anobject ["Aproperty"]) ؛ // يمكنك الوصول إلى السمة كصفيف مع اسم السمة كخفر

anobject ["amethod"] () ؛ // يمكنك استدعاء طريقة كصفيف مع اسم الطريقة كصاحب فردي

لـ (var s في anobject) // نقل جميع خصائص وطرق الكائن للمعالجة التكرارية

التنبيه (s + "هو" + typeof (anobject [s])) ؛

// هو نفسه لكائن نوع الوظيفة:

var afunction = function () {} ؛ // وظيفة

Afunction.Aproperty = "خاصية الوظيفة" ؛ // خاصية الوظيفة

afunction.amethod = function () {Alert ("method of function")} ؛ // طريقة الوظيفة

// التركيز على ما يلي:

تنبيه (Aftunction ["Aproperty"]) ؛ // يمكنك الوصول إلى الخصائص كصفيف مع اسم السمة كمنفذ المفروض

afunction ["amethod"] () ؛ // يمكنك استدعاء طريقة باستخدام اسم الطريقة كمرجع عند استخدام وظيفة كصفيف لمصفوقة

لـ (var s في الوظيفة) // قم بتكرار جميع خصائص وطرق وظيفة اجتياز المعالجة التكرارية

التنبيه (S + "هو" + typeof (Afunction [s])) ؛

نسخة الكود كما يلي:

/**

* نعم ، يمكن الوصول إلى الكائنات والوظائف ومعالجتها مثل المصفوفات ، باستخدام أسماء السمات أو أسماء الأسلوب كاشتراكات.

* إذن ، هل يجب اعتبارها صفيفًا أو كائنًا؟ نحن نعلم أنه ينبغي اعتبار المصفوفات هياكل بيانات خطية. تحتوي هياكل البيانات الخطية عمومًا على قواعد معينة ، وهي مناسبة لعمليات تكرار الدُفعات الموحدة ، وما إلى ذلك ، والتي تشبه إلى حد ما الموجات.

* الكائنات عبارة عن هياكل بيانات منفصلة مناسبة لوصف الأشياء المتناثرة والشخصية ، مما يشبه الجسيمات قليلاً.

* لذلك ، يمكننا أيضًا أن نسأل: هل الكائنات في موجات جافا سكريبت أو جزيئات؟ إذا كانت هناك نظرية كمية كائن ، فيجب أن تكون الإجابة هي: ثنائية الجسيمات الموجية!

* لذلك ، فإن الوظائف والكائنات في JavaScript لها خصائص الكائنات والصفائف. يُطلق على المصفوفة هنا "قاموسًا" ، وهي مجموعة من أزواج القيمة التي يمكن تمديدها وتكثيفها بشكل تعسفي. في الواقع ، فإن التنفيذ الداخلي للكائن والوظيفة هو بنية قاموس ، لكن هيكل القاموس هذا يظهر مظهرًا غنيًا من خلال قواعد اللغة الدقيقة والرائعة. مثلما تستخدم ميكانيكا الكم الجسيمات لشرح المشكلات والتعامل معها في بعض الأماكن ، في حين أن الأمواج لشرح المشكلات في الآخرين والتعامل معها. يمكنك أيضًا اختيار استخدام الكائنات أو المصفوفات بحرية لشرح المشكلات والتعامل معها عند الحاجة. طالما أنك جيد في استيعاب هذه الميزات الرائعة من JavaScript ، يمكنك كتابة الكثير من التعليمات البرمجية الموجزة والقوية.

*/

يمكن أن يؤدي النقر على منطقة فارغة

نسخة الكود كما يلي:

/**

* في بعض الأحيان ، تحتوي الصفحة على قائمة منسدلة أو شيء ما ، مما يتطلب من المستخدم إخفاءه عند النقر فوق فارغ أو النقر على عناصر أخرى.

* يمكن تشغيل حدث نقرة وثيقة عالمية

* param {object} "كائن الهدف"

*/

$ (document) .click (function (e) {

$ ("الكائن الهدف"). Hide () ؛

}) ؛

/**

* ولكن عيب واحد هو أنه عند النقر على العنصر وتريد عرضه

* إذا لم تمنع الحدث من فقاعة إلى كائن المستند العالمي الذي ينقر في الوقت المناسب ، فسيتم تنفيذ الطريقة أعلاه

*/

$ ("الكائن الهدف"). انقر فوق (وظيفة (حدث) {

الحدث = الحدث || window.event ؛

event.stoppropagation () ؛ // عند النقر على الكائن المستهدف ، منع الحدث من الفقاعات في الوقت المناسب

$ ("الكائن الهدف"). Toggle () ؛

}) ؛

ما ورد أعلاه بعض أساليب جافا سكريبت شائعة الاستخدام التي ملخصتها لي. أتمنى أن تعجبك.