ToolKit JS
1.0.0
حسنًا، لقد قمت بإلغاء الإصدار 1 والإصدار 2، وذلك ببساطة لأن الهدف النهائي وراء ToolKitMin هو تقديم مجموعة من الأدوات، وليس بالضرورة إطارًا لكل قول، بل مكتبة. يمكنك التفكير في ToolKitMin كمكتبة للمساعدة في تطوير تطوير تطبيقات الواجهة الأمامية. ToolKitMin هي أداة قوية للمبتدئين في التعلم، حيث أنها تتضمن بعضًا مما يلي:
فيما يلي مثال لبعض التعليمات البرمجية ...
var app = ToolKit ;
app . DOM . ready ( function ( ) {
console . log ( app ) ;
app . Session . set ( 'user_id' , { user_id : 1 } ) ;
console . log ( app . Session . get ( 'user_id' ) ) ;
// Query demo.
var queryString = "age GTE 20" ;
var queryCols = [ "age" , "name" ] ;
var queryData = [ { "age" : "30" , "name" : "Jack" } , { "age" : "20" , "name" : "Jay" } , { "age" : "12" , "name" : "Stacy" } ] ;
app . Query . setColumns ( queryCols ) ;
app . Query . setTable ( queryData ) ;
app . Query . select ( queryString ) ;
app . Query . onComplete ( function ( records ) {
console . log ( 'Complete query' ) ;
console . log ( records ) ;
} ) ;
// AJAX demo.
app . Service ( {
url : window . location . href ,
method : "GET" ,
success : function ( data ) {
console . log ( data ) ;
app . Query . exe ( ) ;
}
} ) ;
// Component demo.
window . appState = {
name : 'Will I Am'
} ;
var component = {
name : 'demo' ,
state : window . appState ,
root : app . Utils . $one ( "body" ) ,
template : '<h1><% data.name %></h1>' ,
onStateChange : function ( ) {
console . log ( "State changed!" ) ;
} ,
onRender : function ( ) {
console . log ( "Rendered!" ) ;
}
} ;
app . Component . registerComponent ( component ) ;
app . Router . add ( / home / , function ( ) {
console . log ( 'Home page.' ) ;
} ) ;
app . Router . add ( / about / , function ( ) {
console . log ( 'About page' ) ;
} ) ;
app . Router . add ( function ( ) {
console . log ( '404 Error?!' ) ;
} ) ;
} ) ;
// Wait 2 seconds to see the component update.
setTimeout ( function ( ) {
window . appState . name = "Will Smith" ;
} , 2000 ) ;
// Test the router.
setTimeout ( function ( ) {
app . Router . navigate ( 'home' ) ;
} , 1000 ) ;
setTimeout ( function ( ) {
app . Router . navigate ( 'about' ) ;
} , 2000 ) ;
setTimeout ( function ( ) {
app . Router . navigate ( '404test' ) ;
} , 3000 ) ;ToolKitMin هو ما قد يوحي به الاسم، فهو عبارة عن مجموعة من الأدوات التي تم تجميعها معًا، وتم تجريد الكثير من الأداة (الأدوات) فقط إلى جوهرها، مع التأكد من بقاء ToolKitMin-JS خفيف الوزن قدر الإمكان، مع تقديم الكثير من الوظائف.
تحديث الوثائق وما إلى ذلك!
طريقة الخدمة هي ببساطة تطبيق ToolKit لـ ajax.
يقوم هذا بتنفيذ قالب يتعامل مع بعض قوالب DHTML عبر محرك القالب، كما أنه يتعامل أيضًا مع حالته الخاصة التي يمكن معالجتها خارج المكون، كما في المثال. وأخيرًا، يمكنه إرسال وحدة التحكم الخاصة به من خلال الاستفادة من الخاصية/الوظيفة "onRender".
هذه مجرد مساحة اسم للطرق المفيدة/البسيطة، وليس أكثر من ذلك بكثير.
يسمح لك هذا بتنفيذ "استعلام" على مجموعة من الكائنات، ويتم تشغيله من خلال الاستفادة من رد الاتصال لضمان عدم حظر مؤشر ترابط التنفيذ الرئيسي أبدًا عن طريق التكرار عبر مجموعة بيانات كبيرة.
يسمح لك بالحصول على عناوين URL مختلفة داخل الواجهة الأمامية، مما يسمح بوجود SPA، وهو يسمح حاليًا فقط بعناوين URL المستندة إلى التجزئة، ولا يراقب تغييرات عنوان URL بشكل افتراضي، أي يحاول المستخدم الانتقال إلى عنوان URL مختلف. على الرغم من أن هذه الميزة مبسطة جدًا لدرجة أنني أعتقد أنها قد تعود إلى قرار المطور (المطورين) بتنفيذ هذه الميزة أم لا، إلا أنها في نهاية المطاف تعني أن تكون خفيفة الوزن.
يستخدم حاليًا محرك قالب مشابهًا إلى حد ما لـ EJS، على الرغم من أنه أصغر بكثير وبسيط.
هذه مجرد أدوات بسيطة يمكن استخدامها إذا لزم الأمر أم لا.
مساحة الاسم للميزات المتعلقة بـ DOM.
ببساطة console.log ، على الرغم من أنه يتطلب ضبط وضع التطوير على true.
يسمح لك بتخزين البيانات في جلسة المستخدم، ويعرف أيضًا باسم غطاء تخزين الجلسة.
يسمح لك بتخزين البيانات في وحدة التخزين المحلية.
