أصبحت JavaScript أكثر وأكثر شعبية. لقد أصبح الخيار الأول للتنمية الأمامية. مع Nodejs على أساس لغة JavaScript ، يمكننا أيضًا تطوير خدمات خلفية عالية الأداء. لقد رأيت حتى JavaScript تظهر في مجال برمجة الأجهزة. تتطور JavaScript تدريجياً إلى لغة تنمية شاملة.
لكن ليس من السهل استخدام JavaScript جيدًا. بالإضافة إلى إتقان بناء الجملة ومعرفة كيفية كتابة رمز عالي الجودة ، تحتاج أيضًا إلى فهم كيفية حل سيناريوهات الاحتياجات التي سيتم مواجهتها في كل مشروع تقريبًا ، مثل: تواريخ الحكم ، وتسليط الضوء على النص ، أو الحد من عدد الشخصيات ، وما إلى ذلك. منتفخة وستؤثر أيضًا على أداء النظام. نهجي هو جمع واستخدام مقتطفات JavaScript الشائعة واستخدامها أولاً كلما لزم الأمر. فيما يلي 10 قطع من رمز JavaScript العملي الذي جمعته. بناءً على ذلك ، يمكنك أيضًا إنشاء مكونات JS أكثر قوة أو وظائف وظيفية.
1. تحديد ما إذا كان التاريخ صالحًا
لا تزال وظيفة التاريخ المدرجة في JavaScript بسيطة للغاية ، ومن الصعب تلبية احتياجات تحليل تنسيقات تاريخ مختلفة والحكم عليها في مشاريع حقيقية. لدى JQuery أيضًا مكتبات طرف ثالث لجعل المعالجة المتعلقة بالتاريخ بسيطة ، ولكن في بعض الأحيان قد تحتاج فقط إلى وظيفة بسيطة للغاية دون تقديم مكتبة ضخمة من طرف ثالث. في هذا الوقت ، يمكنك استخدام رمز التحقق من التاريخ التالي ، والذي يسمح لك بتخصيص تنسيق التاريخ والتحقق من صحة التاريخ.
وظيفة isValidDate (القيمة ، userformat) {// تعيين التنسيق الافتراضي إذا لم يتم توفير تنسيق userFormat = userFormat || 'mm/dd/yyyy' ؛ // العثور على محدد مخصص عن طريق استبعاد // أحرف الشهر واليوم والسنة var delimiter =/budap^mdy/.exec(userformat budap0] ؛ // قم بإنشاء صفيف مع الشهر واليوم والسنة // حتى نعرف ترتيب التنسيق بواسطة index var theformat = userFormat.split (delimiter) ؛ // إنشاء صفيف من تاريخ المستخدم var thedate = value.split (delimiter) ؛ وظيفة isDate (التاريخ ، التنسيق) {var m ، d ، y ، i = 0 ، len = format.length ، f ؛ لـ (i ؛ i <len ؛ i ++) {f = format [i] ؛ if (/m/.test(f)) m = date [i] ؛ if (/d/.test(f)) d = date [i] ؛ if (/y/.test(f)) y = date [i] ؛ } return (m> 0 && m <13 && y && y.length === 4 && d> 0 && // تحقق مما إذا كان يومًا صالحًا من الشهر d <= date (y ، m ، 0)). getDate ()) ؛ } إرجاع isdate (thedate ، theformat) ؛}كيفية استخدام:
تعيد المكالمة التالية كاذبة لأنه لا يوجد 31 يومًا في نوفمبر
isvaliddate ('DD-MM-Yyyy' ، '31/11/2012 ')
2. احصل على أقصى عرض أو ارتفاع مجموعة من العناصر
الوظيفة التالية مفيدة للغاية للمطورين الذين يحتاجون إلى إجراء تخطيط ديناميكي.
var getMaxHeight = function ($ elms) {var maxheight = 0 ؛ $ elms.each (function () {// في بعض الحالات قد ترغب في استخدام Outerheight () بدلاً من ذلك var height = $ (this) .hight () ؛ if (height> maxheight) {maxheight = height ؛}}) ؛ إرجاع maxheight ؛} ؛كيفية استخدام:
$ (عناصر) .hight (getMaxHeight ($ (عناصر))) ؛
3. تسليط الضوء على النص
هناك العديد من مكتبات JQuery من طرف ثالث يمكنها تنفيذ وظيفة تسليط الضوء على النص ، لكنني أفضل استخدام جزء صغير من رمز JavaScript لتنفيذ هذه الوظيفة. إنه قصير جدًا ويمكن تعديله بمرونة وفقًا لاحتياجاتي ، ويمكنك تحديد أسلوب تسليط الضوء بنفسك. يمكن أن تساعدك وظيفتان التاليتان على إنشاء مكون إضافي لتسليط الضوء على النص الخاص بك.
تمييز الوظيفة (النص ، الكلمات ، العلامة) {// العلامة الافتراضية إذا لم يتم توفير علامة tag = tag || 'فترة'؛ var i ، len = words.length ، re ؛ لـ (i = 0 ؛ i <len ؛ i ++) {// global regex لتسليط الضوء على جميع المطابقات re = new regexp (الكلمات [i] ، 'g') ؛ if (re.test (text)) {text = text.replace (re ، '<' + tag + '> $ & </' + tag + '>') ؛ }} نص الإرجاع ؛}ستحتاج أيضًا إلى عدم وجود وظائف عالية الضوء:
دالة uniGlight (نص ، علامة) {// العلامة الافتراضية إذا لم يتم توفير علامة tag = علامة || 'فترة'؛ var re = new regexp ('(<'+tag+'.+؟> | <//' tag+'>)' ، 'g') ؛ إرجاع text.replace (Re ، '') ؛}كيفية استخدام:
$ ('p'). html (تسليط الضوء ($ ('p'). html () ، // the text ['foo' ، 'bar' ، 'baz' ، 'hello world'] ، // list للكلمات أو العبارات لتسليط الضوء على 'strong' // custom tag)) ؛4. تأثير حركة النص
في بعض الأحيان تريد إضافة حركة إلى فقرة من النص الخاص بك بحيث يمكن أن تتحرك كل كلمة. يمكنك استخدام رمز المكونات الإضافية التالية لتحقيق هذا التأثير. بالطبع تحتاج إلى الجمع بين نمط انتقال CSS3 لتحقيق نتائج أفضل.
دولار. var letters = text.split ('') ؛ return this.each (function () {var $ this = $ (this) ؛ $ this.html (text.replace (/./ g ، '<span> $ & </span>')) ؛ $ this.find ('span.tleter'). كل (i ، el) {setTimeout (function () {el) }) ؛كيفية استخدام:
$ ('p'). AnimateText (15 ، 'foo') ؛
5. إخفاء العناصر واحدة تلو الأخرى
يمكن لمكون jQuery التالي إخفاء مجموعة من العناصر واحدة تلو الأخرى وفقًا لطول الخطوة (وقت الفاصل) الذي قمت بتعيينه. المستخدمة في إعادة تحميل عناصر قائمة يمكن أن تحقق نتائج جيدة.
$ .fn.fadeall = function (ops) {var o = $ .extend ({delay: 500 ، // delay بين العناصر السرعة: 500 ، // الرسوم المتحركة سهولة: 'swing' var $ el = this ؛ لـ (var i = 0 ، d = 0 ، l = $ el.length ؛ i <l ؛ i ++ ، d+= o.delay) {$ el.eq (i) .delay (d) .fadein (o.speed ، o.ease) ؛ } إرجاع $ el ؛}كيفية استخدام:
$ (عناصر) .fadeall ({تأخير: 300 ، السرعة: 300}) ؛
6. الحد من عدد الكلمات في النص
يتيح لك البرنامج النصي أدناه اعتراض النص وفقًا لطول الحرف المحدد. إذا تم اعتراض النص ، فسوف يتبعه تلقائيًا عن طريق القطع.
excerpt function (str ، nwords) {var words = str.split ('') ؛ الكلمات. إرجاع الكلمات.7. تحديد القدرة على التكيف الحالية في التصميم المقابل
اعتمدت العديد من التصميمات تخطيطات سريعة الاستجابة للتكيف مع عرض الموقع أو التطبيق على أجهزة مختلفة. غالبًا ما تحتاج إلى تحديد التكيف مع الشاشة الذي تتواجده حاليًا في الكود.
وظيفة isBreakPoint (bp) {// نقاط التوقف التي قمت بتعيينها في css var bps = [320 ، 480 ، 768 ، 1024] ؛ var w = $ (window) .width () ؛ var min ، max ؛ لـ (var i = 0 ، l = bps.length ؛ i <l ؛ i ++) {if (bps [i] === bp) {min = bps [i-1] || 0 ؛ max = bps [i] ؛ استراحة؛ }} return w> min && w <= max ؛}كيفية استخدام:
if (isBreakPoint (320)) {// نقطة الإيقاف عند 320 أو أقل}} if (isBreakPoint (480)) {// نقطة الإيقاف بين 320 و 480} ...8. العد العالمي
في بعض سيناريوهات الألعاب أو الإعلان ، تحتاج إلى تسجيل عدد مرات النقر على المستخدم على زر في الصفحة الحالية. في هذا الوقت ، يمكنك استخدام وظيفة JQuery's .data () للتعامل معها:
$ (element) .data ('counter' ، 0) // start counter at Zero .Click (function () {var counter = $ (this) .data ('counter') ؛ // get $ (this) .data ('counter' ، counter + 1) ؛9. تضمين فيديو Youku
دالة embedyouku (الرابط ، ops) {var o = $ .extend ({width: 480 ، الارتفاع: 320 ، params: ''} ، ops) ؛ var id = //؟v/==(/w+)/.exec(link) budap1] ؛ return '<inmbed pleassfullScreen = "true" id = "inmbedid" Quality = "High" align = "middle" levisplicAccess = "penerated" type = "application/x-shockwave-flash" src = "'+id+'؟كيفية استخدام:
embedyouku ('http://static.youku.com/v/swf/qplayer.swf' ، {'wintype = adshow & videoids = xmte3nzq0ntky & isautoplay = false & isShowReledVideo = false'}) ؛10. قم بإنشاء قائمة ديناميكية أو قائمة منسدلة
في العديد من السيناريوهات ، نحتاج إلى إنشاء قوائم أو قوائم منسدلة أو سرد عناصر ديناميكيًا. فيما يلي جزء من رمز أساسي لتنفيذ الوظائف المذكورة أعلاه ، ويمكنك توسيعها وفقًا للاحتياجات الفعلية.
دالة makemenu (العناصر ، العلامات) {العلامات = العلامات || ['ul' ، 'li'] ؛ // العلامات الافتراضية var parent = tags [0] ؛ var child = tags [1] ؛ var item ، value = '' ؛ لـ (var i = 0 ، l = items.length ؛ i <l ؛ i ++) {item = items [i] ؛ // منفصل العنصر والقيمة إذا كانت القيمة موجودة إذا (/:/. القيمة = العناصر [i] .split (':') [1] ؛ }. } إرجاع '<' + parent + '>' + items.join ('') + '</' + parent + '>' ؛}كيفية استخدام:
// SELECT SELECT MONTERMAKEMENU (["يناير: يناير" ، "فبراير: فبراير" ، "مارس: MAR"] ، // العنصر: القيمة ["Select" ، "الخيار") ؛ // قائمة بقالة Groceriesmakemenu (["الجزر" ، "الخس" ، "Tomatos" ، "الحليب" ، ["OL" ، "LI") ؛
ما سبق هو مجرد جزء صغير من مقتطفات رمز JavaScript العملية. أوصي أيضًا بأن تنتبه إلى جمع أو كتابة قصاصات الرمز الأساسية بنفسك. يمكن استخدامها في العديد من المشاريع أو توفير وظائف أكثر اكتمالا من خلال بعض التعديلات. سيوفر لك استخدام مقتطفات الرمز هذه الكثير من وقت التطوير.