لا تتطلب JavaScript تجميعًا ، مما يجعل التطبيقات التي بناها JavaScript مرنة للغاية. يمكننا تحميل البرامج النصية JavaScript ديناميكيًا من الخادم حسب الحاجة لإنشاء واجهة المستخدم والتحكم فيها للتفاعل مع المستخدمين. فيما يلي مزيج من Ext JS لتوضيح كيفية تحميل البرامج النصية JS ديناميكيًا من الخادم لإنشاء نموذج ديناميكيًا.
1 هيكل المشروع:
هيكل المشروع على النحو التالي: يتم استخدام معالج Getjsui العام للاستيلاء على تكوين واجهة المستخدم من جدول قاعدة البيانات وإعادته إلى العميل ؛ يتم استخدام ملفات HTML ومكتبات JS في مجلد المحتويات.
2 هيكل جدول قاعدة البيانات
يمكنك استخدام SQL التالي لإنشاء جدول في MSSQL ، حيث يقوم حقل JavaScriptContent بتخزين نصوص JS محددة.
إنشاء جدول [dbo]. [أساسي]
بعد الإنشاء ، يمكنك تهيئة البيانات:
بعد الإنشاء ، يمكنك تهيئة البيانات:
4 برمجة getjsui
باستخدام النظام ؛ باستخدام system.collections.generic ؛ باستخدام system.linq ؛ باستخدام system.web ؛ باستخدام cmclouddbhelper ؛ مساحة الاسم extjs6.services {/// <summary> /// المؤلف: jackwangcumt /// "" ؛ context.Response.contentType = "text/plain" ؛ //context.response.contentType = "Text/JavaScript" ؛ CMCDataAccess da = جديد CMCDataAccess () ؛ String sqlforjs = "حدد * من ext_dynamic_form حيث id = '006'" ؛ System.Data.Datatable dt = da.getDatatable (sqlforjs) ؛ if (dt! = null) {if (dt.rows.count == 1) {js = dt.rows [0] ["javaScriptContent"]. toString () ؛ }} // utf-8 context.response.contentEncoding = system.text.encoding.utf8 ؛ context.Response.write (JS) ؛ } bool public isReusable {get {return false ؛ }}}}5 الواجهة الرئيسية HTML
<html> <head> <title> إنشاء نماذج من الخادم JavaScript </title> <!-ملفات المكتبة-> <meta http-equiv = "x-ua-contency" content = "ie = edge" charset = "utf-8" <script type = "text/javaScript" src = "ext6/ext-all-debug.js"> </script> <link rel = "stylesheet" type = "text/css" href = "ext6/classic/theme-triton/resources/theme-triton-all-debug.css"> scip src = "ext6/Classic/theme-triton/theme-triton-debug.js"> </script> <script type = "text/javaScript"> // load *.js file from server function loadscript (url ، callback) {var script = document.createlement ("prict.tript.type = if (script.readyState) {// ie script.onReadyStateChange = function () {if (script.readyState == "loaded" || script.readyState == "COMMUNT") {script.OnReadyStateChange = null ؛ أتصل مرة أخرى()؛ }} ؛ } آخر {// others script.onload = function () {callback () ؛ } ؛ } script.src = url ؛ document.getElementSbyTagName ("Head") [0] .AppendChild (script) ؛ }. //script.async = true ؛ if (script.readyState) {// ie script.onReadyStateChange = function () {if (script.readyState == "loaded" || script.readyState == "COMMUNT") {script.OnReadyStateChange = null ؛ أتصل مرة أخرى()؛ }} ؛ } آخر {// others script.onload = function () {callback () ؛ } ؛ } script.text = JS ؛ console.log (script) ؛ document.getElementSbyTagName ("Head") [0] .AppendChild (script) ؛ // لا يمكن رد الاتصال () ؛ } // ext js 6 ext.onready (function () {//https://www.sencha.com/forum/showthread.php؟268193-how-to-load-content-dynamically-sabpanel var pmain = ext.widget ('panel' ، [{title: 'West' ، المنطقة: 'West' ، العرض: 200 ، الانهيار: true} ، {xtype: 'tabpanel' ، المنطقة: "المركز" ، العناصر: [{title: 'first tab' ، itemId: 'tab01' ،} ، {title: 'tab tab:' fit '، loader: }}]}}) ؛ loadscriptsrc (response.ResponseText ، function () {ext.msg.alert ("تحميل JS" ، "تحميل JS من الخادم") ؛ var gp = ext.create ("gpview") ؛ //loadscript("dynamicloadjs2.js "، function () {// ext.msg.alert (" loaded ") ؛ // var gp = ext.create (" gpview ") ؛ // //console.log(gp) ؛ // //gp.body.renderto(pmain) ؛ Ext.componentQuery.query ('#tab01') [0]. </script> </head> <body> </body> </html>6 تشغيل
وبهذه الطريقة ، يمكننا إنشاء إطار رئيسي ، ثم بناء نظام عام مثل القوائم والأذونات. من خلال تكوين القوائم وواجهة المستخدم في قاعدة البيانات ، يمكننا توسيع التطبيق ديناميكيًا.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.