مناقشة موجزة حول القوالب المخصصة في جافا سكريبت

/*** تم إنشاؤه بواسطة المسؤول في 15-1-19. */function functionUtil () {} functionUtil = {// هل لديك عقدة dom لها سمة معينة hasattr: function (el ، name) {var atrate = el.getAttributEnode && el.getattributenode (name) ؛ إرجاع attr؟ attr.pecified: false} ، // احصل على العنصر وفقًا للفئة getByclass: function (sclass ، oparent) {oparent = oparent || وثيقة؛ if (! oparent.getElementSbyClassName) {return oparent.getElementSbyClassName (sclass) ؛ } var arr = [] ؛ var aele = oparent.getElementSbyTagName ('*') ؛ var reg = new regexp ('(^| // s)' + sclass + '(// s | $)') ؛ // var reg = new regexp ('(^| [// x20 // t // r/n // f])' + sclass + '([// x20 // t // r // n // f] | $)') ؛ لـ (var i = 0 ؛ i <aele.length ؛ i ++) {if (reg.test (aele [i] .className)) {arr.push (aele [i]) ؛ }} return arr ؛ } ، // إضافة ديناميكي ورقة addSheetFile: function (path) {var fileRef = document.createElement ("link") fileRef.rel = "STYLESHEET" ؛ fileref.type = "text/css" ؛ fileref.href = path ؛ fileref.media = "screen" ؛ var headobj = document.getElementSbyTagName ('head') [0] ؛ headobj.appendchild (fileref) ؛ } ، // BIND JSON DATA وفقًا للتنسيق المحدد مثل $ {name} loadjsondata: function (sparent ، ojson) {var oparent = document.getElementById (sparent) ؛ if (Ojson مثيل Array) {var str = oparent.innerhtml ؛ لـ (var i = 0 ؛ i <ojson.length - 1 ؛ i ++) {oparent.innerhtml+= str ؛ } لـ (var d في Ojson) {oparent.children [d] .innerhtml = oparent.children [d] .innerhtml.replace (// $/{(/w+)/}/g ، function (str ، $ 1) {d] [d] [$ 1]؟ }} آخر {oparent.innerhtml = oparent.innerhtml.replace (// $/{(/w+)/}/g ، الدالة (str ، $ 1) {return ojson [$ 1]؟ ojson [$ 1]: '' ؛}) ؛ }} ، // bind json data ther the the themate is is <٪ ... ٪> templateengine: function (html ، reports) {html = html.replace (/(>) | var re =/<٪ ([^٪>]+)؟ ٪>/g ، reexp =/(^()؟ (if | for | else | switch | case | break | {|})) (.*)؟/g ، code = 'var r = [] var add = function (line ، JS) {JS؟ (رمز + = line.match (reexp)؟ line + '/n': 'R.Push (' + line + ') ؛/n'): (code + = line! = ''؟ الإرجاع إضافة ؛ } بينما (match = re.exec (html)) {add (html.slice (المؤشر ، match.index)) (Match [1] ، true) ؛ المؤشر = match.index + match [0] .Length ؛ } إضافة (html.substr (المؤشر ، html.length - المؤشر)) ؛ الكود += 'return R.Join ("") ؛' ؛ إرجاع وظيفة جديدة (code.replace (/[/r/t/n]/g ، '')). تطبيق (خيارات) ؛ }}

1. الطريقة الأولى: $ {key}

PORCENTUTIL.LOADJSONDATA (العنصر ، البيانات) ؛

رمز "HTML":

 <div id = "data"> <viv> الاسم: $ {name} <br/> العمر: $ {Age} <br/> المهنة: $ {Job} <br/> <br/> </viv> </viv>

رمز JavaScript:

 var data = [{name: 'xu lei' ، العمر: 24 ، الوظيفة: 'it'} ، {name: 'li lei' ، age: 23 ، Job: 'Translation'}]

نتائج التنفيذ:

2. الطريقة الثانية <code ٪>

POSTROMUTIL.TemplateEngine (سلسلة ، كائن) ؛

رمز "HTML":

 <div id = "test3"> <٪ if (this.isshow) {for (var i in this.data) {٪> <p href = "#"> الاسم: <٪ this.data [i] <٪ this.data [i] .job ٪> </p> <br/> <٪}} ٪> </viv>

رمز JavaScript:

 var person = {data: [{name: 'xu lei' ، العمر: 24 ، المهمة: 'it'} ، {name: 'li lei' ، age: 23 ، job: 'translation'}] ، isShow: true} document.getElementById ("test3"). innerhtml = functionUtil.templateengine (documentBymentByEdedbyid ("test3").

نتيجة:

ما سبق هو المحتوى الكامل لهذه المقالة. هل اكتسبت فهمًا جديدًا لقوالب JavaScript بعد قراءتها؟ أتمنى أن يعجبك.