प्रौद्योगिकी साझेदारी

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

जावास्क्रिप्ट् पुस्तकालयानाम् गहन अन्वेषणम्: कार्याणि, विन्यासानि, अनुप्रयोगपरिदृश्यानि च

प्रस्तावना

आधुनिकजालविकासे जावास्क्रिप्टपुस्तकालयाः महत्त्वपूर्णां भूमिकां निर्वहन्ति, येन विकासकानां कोडस्य सरलीकरणे, कार्यक्षमतायाः उन्नयनं, उत्तमप्रयोक्तृअनुभवं प्राप्तुं च सहायता भवति । अयं लेखः मॉड्यूल् लोडिंग् पुस्तकालयाः, डाटा बाइंडिंग् पुस्तकालयाः, फ्रंट-एण्ड् फ्रेमवर्क्स् च समाविष्टाः अनेकाः सामान्यतया प्रयुक्ताः जावास्क्रिप्ट् पुस्तकालयाः चर्चां करिष्यति, पाठकान् तेषां मूलकार्यं, उपयोगपरिदृश्यं, संस्थापनं विन्यासं च, एपिआइ अवलोकनं च परिचययिष्यति

स्तम्भस्य सदस्यतां प्राप्तुं स्वागतम्:जावास्क्रिप्ट स्क्रिप्ट ब्रह्माण्ड

1. नॉकआउट् : एकं साधनं यत् सरलं तथापि शक्तिशाली द्विपक्षीयदत्तांशबन्धनस्य उपयोगं कर्तुं शक्नोति

१.१ परिचयः

Knockout इति लघुजावास्क्रिप्ट् पुस्तकालयः अस्ति यत् भवन्तं सुरुचिपूर्णं MVVM (Model-View-ViewModel) प्रतिमानं कार्यान्वितुं सहायकं भवति । एतत् शक्तिशालीं द्विपक्षीयदत्तांशबन्धनक्षमतां प्रदाति, येन दत्तांशस्य UI च मध्ये समन्वयनं सुलभं भवति ।

१.१.१ मूलकार्यम्

• यदा दत्तांशः परिवर्तते तदा स्वयमेव UI अद्यतनीकर्तुं द्विपक्षीयदत्तांशबन्धनं प्रदाति तथा च विपरीतम् ।
• दत्तांशपरिवर्तनानि सम्बन्धित-UI-तत्त्वेषु सम्यक् प्रसारयितुं शक्यन्ते इति सुनिश्चित्य निर्भरता-निरीक्षणस्य समर्थनं करोति ।
• जटिलदत्तांशसम्बन्धानां संसाधनं सुलभं कर्तुं अवलोकनीयवस्तूनि गणितगुणानि च प्रदाति ।

१.१.२ उपयोगपरिदृश्यानि

नॉकआउट् जाल-अनुप्रयोगानाम् निर्माणार्थं अतीव उपयुक्तम् अस्ति यस्य कृते बहुधा आँकडा-बन्धनस्य, अन्तरक्रियायाः च आवश्यकता भवति, विशेषतः प्रसंस्करण-प्रपत्रेषु, सूचीषु, आँकडा-प्रस्तुतिषु च इत्यादिषु परिदृश्येषु

१.२ संस्थापनं विन्यासश्च

१.२.१ संस्थापनमार्गदर्शिका

भवन्तः निम्नलिखितरीत्या Knockout इत्यस्य परिचयं कर्तुं शक्नुवन्ति ।

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/output/knockout-latest.js"></script>
1

१.२.२ मूलभूतविन्यासः

HTML मध्ये Knockout इत्यस्य परिचयं कृत्वा भवन्तः योजयितुं शक्नुवन्तिdata-bindदत्तांशबन्धनं कार्यान्वितुं गुणाः।

१.३ एपिआइ अवलोकनम्

१.३.१ दत्तांशबन्धनसेटिंग्स्

<div data-bind="text: message"></div>

<script>
    var viewModel = {
        message: ko.observable('Hello, Knockout!')
    };

    ko.applyBindings(viewModel);
</script>
1
2
3
4
5
6
7
8
9

१.३.२ घटनानियन्त्रणम्

नॉकआउट् इवेण्ट् बाइण्डिङ्ग् इत्यस्य समर्थनं अपि करोति, यथा क्लिक् इवेण्ट्स्:

<button data-bind="click: handleClick">Click Me</button>

<script>
    var viewModel = {
        handleClick: function() {
            alert('Button clicked!');
        }
    };

    ko.applyBindings(viewModel);
</script>
1
2
3
4
5
6
7
8
9
10
11

आधिकारिकजालस्थलम् : १.नकआउट्

2. प्रणालीJS

SystemJS अन्यः लोकप्रियः गतिशीलः मॉड्यूल् लोडरः अस्ति, यः मॉड्यूल् लोडिंग् पुस्तकालयः इति विषयगतः अस्ति । इदं ES मॉड्यूल्, एएमडी, CommonJS इत्यादीनां विविधमॉड्यूलस्वरूपाणां समर्थनं करोति, तथा च गतिशीलरूपेण मॉड्यूल्स् लोड् कर्तुं शक्नोति तथा च मॉड्यूल् मध्ये निर्भरतां स्वयमेव समाधातुं शक्नोति ।

२.१ MobX

MobX इति राज्यप्रबन्धनाधारितं जावास्क्रिप्ट् पुस्तकालयः, यस्य विषयः आँकडाबन्धनपुस्तकालयः इति अस्ति । एतत् अनुप्रयोगस्थितिं अन्तरफलकं च प्रभावीरूपेण संयोजयितुं केन्द्रीक्रियते, तथा च प्रतिक्रियाशीलं आँकडाबन्धनतन्त्रं कार्यान्वितं करोति येन राज्यपरिवर्तनानि स्वयमेव सम्बन्धितघटकेषु प्रतिबिम्बितुं शक्यन्ते

२.१.१ मूलकार्यम्

MobX इत्यस्य मूलकार्यं भवति Observable State, Computed Values, Actions and Reactions इति । एतैः विशेषताभिः विकासकाः अत्यन्तं प्रतिक्रियाशीलाः अनुप्रयोगाः सहजतया निर्मातुं शक्नुवन्ति ।

२.१.२ उपयोगपरिदृश्यानि

MobX सर्वप्रकारस्य जावास्क्रिप्ट् अनुप्रयोगानाम् कृते उपयुक्तः अस्ति, तथा च जटिलदत्तांशस्थितिप्रबन्धनसमस्यानां नियन्त्रणे विशेषतया उत्तमः अस्ति । भवेत् तत् React, Angular अथवा Vue इत्यादिरूपरेखा भवतु, विकासदक्षतां उपयोक्तृअनुभवं च सुधारयितुम् MobX इत्यनेन सह मिलित्वा तस्य उपयोगः कर्तुं शक्यते ।

२.२ संस्थापनं विन्यासश्च

२.२.१ संस्थापनमार्गदर्शिका

npm मार्गेण MobX संस्थापनं कुर्वन्तु:

npm install mobx
1

२.२.२ मूलभूतविन्यासः

परियोजनायां MobX इत्यस्य परिचयं कुर्वन्तु:

import { observable, action, computed, reaction } from 'mobx';
1

२.३ एपिआइ अवलोकनम्

२.३.१ स्थितिप्रबन्धनसेटिंग्स्

MobXpassed इतिobservableअवलोकनीयस्थितिं परिभाषितुं नमूनासङ्केतः निम्नलिखितरूपेण भवति ।

import { observable } from 'mobx';

const store = observable({
    count: 0,
});
1
2
3
4
5

२.३.२ प्रतिक्रियाशीलः डिजाइनसमर्थनम्

MobX प्रदातिcomputedfunction to create calculated values, नमूनासङ्केतः निम्नलिखितरूपेण भवति ।

import { observable, computed } from 'mobx';

const store = observable({
    count: 0,
    get doubledCount() {
        return this.count * 2;
    },
});

console.log(store.doubledCount); // 输出结果为 0
store.count = 5;
console.log(store.doubledCount); // 输出结果为 10
1
2
3
4
5
6
7
8
9
10
11
12

उपर्युक्त उदाहरणानां माध्यमेन MobX data binding पुस्तकालयस्य परिचयः, संस्थापनं, विन्यासः, API अवलोकनं च प्रदर्शितं भवति । MobX इत्यस्य शक्तिशालिनः कार्याणि अग्रभागस्य विकासं अधिकं सुलभं कुशलं च कुर्वन्ति, तथा च एकं उत्तमं राज्यप्रबन्धनतन्त्रं प्रदाति, यत् विविधजावास्क्रिप्ट् अनुप्रयोगानाम् विकासाय उपयुक्तं भवति

3. Vue.js: उपयोक्तृ-अन्तरफलकानां निर्माणार्थं प्रगतिशील-रूपरेखा

३.१ परिचयः

Vue.js इति अन्तरक्रियाशीलं प्रतिक्रियाशीलं च उपयोक्तृ-अन्तरफलकं निर्मातुं लोकप्रियं अग्र-अन्त-जावास्क्रिप्ट्-रूपरेखा अस्ति । अस्मिन् सरलं सुलभं च टेम्पलेट्-वाक्यविन्यासं तथा च आँकडा-सञ्चालितं घटक-प्रणालीं उपयुज्यते ।

३.१.१ मूलकार्यम्

• दत्तांशबन्धनम्
• घटक विकास
• आभासी डोम
• गणितगुणाः
• निर्देशः
• जीवनचक्र हुक इत्यादि।

३.१.२ उपयोगपरिदृश्यानि

Vue.js इत्यस्य उपयोगः एकपृष्ठीय-अनुप्रयोगानाम् (SPA), जटिलजाल-अनुप्रयोगानाम्, मोबाईल-अनुप्रयोगानाम् अन्यपरिदृश्यानां च निर्माणार्थं कर्तुं शक्यते ।

३.२ संस्थापनं विन्यासश्च

३.२.१ संस्थापनविधिः

CDN मार्गेण Vue.js इत्यस्य परिचयं कुर्वन्तु:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
1

३.२.२ मूलभूतसेटिंग्स्

HTML मध्ये एकं पात्रं रचयन्तु :

<div id="app">
  {{ message }}
</div>
1
2
3

Vue उदाहरणसङ्केतः लिखन्तु:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
});
1
2
3
4
5
6

३.३ एपिआइ अवलोकनम्

३.३.१ घटकविकासः

Vue.js घटक-आधारितरूपेण उपयोक्तृ-अन्तरफलकानां निर्माणस्य समर्थनं करोति प्रत्येकं घटकं स्वकीयं टेम्पलेट्, शैली, तर्कं च समाविष्टं भवति, यत् उत्तमं कोड-पुनः उपयोगं, परिपालनं च प्राप्तुं शक्नोति ।

Vue.component('my-component', {
  template: '<div>{{ msg }}</div>',
  data: function () {
    return {
      msg: 'This is my component.'
    };
  }
});
1
2
3
4
5
6
7
8

३.३.२ प्रतिक्रियाशीलदत्तांशबन्धनम्

Vue.js प्रतिक्रियाशीलं दत्तांशबन्धनतन्त्रं प्रदाति यदा दत्तांशः परिवर्तते तदा दृश्यं स्वयमेव अद्यतनं भविष्यति ।

var data = { message: 'Hello, Vue!' };

var vm = new Vue({
  el: '#app',
  data: data
});

data.message = 'Updated message.';
1
2
3
4
5
6
7
8

आधिकारिकदस्तावेजलिङ्कः : १.Vue.js

4. Redux: अनुप्रयोगस्थितेः प्रबन्धनार्थं पूर्वानुमानीयः अवस्थापात्रः

Redux एकं राज्यप्रबन्धनसाधनं React पारिस्थितिकीतन्त्रे व्यापकरूपेण प्रयुक्तं भवति एतत् अनुप्रयोगानाम् स्थितिं एकरूपेण प्रबन्धयित्वा राज्यपरिवर्तनं अधिकं पूर्वानुमानीयं करोति तथा च त्रुटिनिवारणं सुलभं करोति ।

४.१ परिचयः

४.१.१ मूलकार्यम्

Redux इत्यस्य कोरमध्ये Store (भण्डारणस्थितिः), Action (वस्तु यत् अवस्थापरिवर्तनस्य वर्णनं करोति) तथा Reducer (कार्यं यत् राज्यपरिवर्तनं नियन्त्रयति), यत् एकदिशायाः आँकडाप्रवाहद्वारा अनुप्रयोगस्थितिं प्रबन्धयति

// Redux 核心概念示例
const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

४.१.२ उपयोगपरिदृश्यानि

Redux बृहत् जटिलानां च अनुप्रयोगानाम् कृते उपयुक्तम् अस्ति, विशेषतः यदा बहुघटकाः अवस्थां साझां कुर्वन्ति, स्थितिं स्थायित्वस्य आवश्यकतां अनुभवन्ति, अथवा समययात्रा त्रुटिनिवारणं कुर्वन्ति ।

४.२ संस्थापनं विन्यासश्च

४.२.१ संस्थापननिर्देशाः

npm मार्गेण Redux संस्थापनं कुर्वन्तु:

npm install redux
1

४.२.२ मूलभूतविन्यासः

Redux Store रचयन्तु तथा Reducer इत्यस्य इन्जेक्ट् कुर्वन्तु:

import { createStore } from 'redux';

const store = createStore(counterReducer);
1
2
3

४.३ एपिआइ अवलोकनम्

४.३.१ स्थितिप्रबन्धनसेटिंग्स्

Redux प्रदाति getState() वर्तमानस्थितिं प्राप्तुं विधिः उपयुज्यते,dispatch(action) क्रियाणां प्रेषणार्थं विधिः प्रयुज्यते, तथा चsubscribe(listener) राज्यपरिवर्तनस्य सदस्यतां ग्रहीतुं विधिः।

store.dispatch({ type: 'INCREMENT' });
console.log(store.getState()); // 输出：{ count: 1 }
1
2

४.३.२ मध्यवेयरविस्तारः

मध्यवेयरस्य उपयोगेन Redux कार्याणि विस्तारयितुं शक्यन्ते, यथा logging, asynchronous operations इत्यादीनि ।सामान्यतया प्रयुक्ताः मध्यवेयरः अन्तर्भवतिredux-thunk(अतुल्यकालिकक्रियाणां निबन्धनं) तथा redux-logger(Record action log) इत्यादि।

import thunk from 'redux-thunk';
import logger from 'redux-logger';

const middleware = [thunk, logger];
const store = createStore(counterReducer, applyMiddleware(...middleware));
1
2
3
4
5

आधिकारिकजालस्थललिङ्कः : १.रेडक्स

5. UAParser.js

५.१ परिचयः

UAParser.js इति User-Agent स्ट्रिंग् इत्यस्य विश्लेषणार्थं JavaScript पुस्तकालयः अस्ति । उपयोक्तृ एजेण्ट् स्ट्रिंग् इत्यस्य विश्लेषणं कृत्वा भवान् उपयोक्तृयन्त्रस्य विषये प्रासंगिकसूचनाः प्राप्तुं शक्नोति, यथा प्रचालनतन्त्रम्, ब्राउजर् प्रकारः इत्यादयः ।

५.१.१ मूलकार्यम्

UAParser.js इत्यस्य मूलकार्यं उपयोक्तृ-एजेण्ट्-स्ट्रिंग्-विश्लेषणं कृत्वा उपकरण-सम्बद्ध-सूचनाः निष्कासयितुं भवति, यत्र ऑपरेटिंग्-प्रणाली, ब्राउजर्-नाम, उपकरण-प्रकारः इत्यादयः सन्ति ।

५.१.२ उपयोगपरिदृश्यानि

• विकासकानां आगन्तुकयन्त्रसूचनाः अवगन्तुं सहायतार्थं वेबसाइट् सांख्यिकीयविश्लेषणाय उपयुक्तम्
• विभिन्नयन्त्रप्रकारानाम् आधारेण अनुकूलितपृष्ठप्रदर्शनम्

५.२ संस्थापनं विन्यासश्च

५.२.१ संस्थापननिर्देशाः

भवान् npm मार्गेण एतत् पुस्तकालयं संस्थापयितुं शक्नोति अथवा UAParser.js इत्यस्य CDN पतां प्रत्यक्षतया आयातयितुं शक्नोति ।

<script src="https://cdn.jsdelivr.net/npm/ua-parser-js/dist/ua-parser.min.js"></script>
1

५.२.२ मूलभूतविन्यासः

UAParser.js इत्यस्य परिचयस्य अनन्तरं, भवान् प्रत्यक्षतया UAParser ऑब्जेक्ट् निर्मातुम् अर्हति यत् तस्य उपयोगं आरभ्यतुं शक्नोति ।

const parser = new UAParser();
const result = parser.getResult();
console.log(result);
1
2
3

५.३ एपिआइ अवलोकनम्

५.३.१ उपयोक्तृ-एजेण्ट् विश्लेषणम्

const parser = new UAParser();
const uaString = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36';
parser.setUA(uaString);
const result = parser.getResult();
console.log(result.browser.name); // Output: Chrome
1
2
3
4
5

५.३.२ यन्त्रसूचनानिष्कासनम्

const parser = new UAParser();
const uaString = 'Mozilla/5.0 (Linux; Android 11; Pixel 4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Mobile Safari/537.36';
parser.setUA(uaString);
const result = parser.getResult();
console.log(result.os.name); // Output: Android
1
2
3
4
5

आधिकारिकजालस्थललिङ्कः : १.UAParser.js

6. Backbone.js: एकः लघुः जावास्क्रिप्ट् पुस्तकालयः यः MVC संरचनायाः कृते एकं रूपरेखां प्रदाति

६.१ परिचयः

Backbone.js इति लघुजावास्क्रिप्ट् पुस्तकालयः अस्ति यत् MVC (Model-View-Controller) संरचनायां कोडं व्यवस्थितुं मार्गं प्रदाति । एतत् विकासकानां कृते अग्रे-अन्त-अनुप्रयोगानाम् तर्कस्य उत्तम-प्रबन्धने सहायकं भवति ।

६.१.१ मूलकार्यम्

Backbone.js इत्यस्य मूलकार्यं Model, View, Collection, Router च सन्ति । एतेषां कार्याणां माध्यमेन विकासकाः स्पष्टसंरचनायाः सुलभतया च अनुरक्षणेन सह जाल-अनुप्रयोगानाम् निर्माणं सुलभतया कर्तुं शक्नुवन्ति ।

६.१.२ उपयोगपरिदृश्यानि

Backbone.js तादृशानां परियोजनानां कृते उपयुक्तम् अस्ति येषु MVC संरचनायाः अनुसारं अग्रे-अन्त-अनुप्रयोगानाम् आयोजनस्य आवश्यकता भवति । एतत् विकासकानां कृते अग्रे-अन्त-विकास-प्रक्रियायाः समये आँकडानां दृश्यानां च सम्बन्धं उत्तमरीत्या प्रबन्धयितुं विकास-दक्षतां च सुधारयितुं साहाय्यं कर्तुं शक्नोति ।

६.२ संस्थापनं विन्यासश्च

Backbone.js इत्यस्य उपयोगाय प्रथमं भवद्भिः परियोजनायां Backbone.js सञ्चिकां प्रवर्तयितुं आवश्यकम् । प्रत्यक्षतया सञ्चिकायाः ​​अवतरणं कृत्वा अथवा CDN इत्यस्य उपयोगेन तस्य परिचयः कर्तुं शक्यते ।

६.२.१ संस्थापनविधिः

Backbone.js सञ्चिकां प्रत्यक्षतया डाउनलोड् कुर्वन्तु:मेरुदण्ड.ज

<script src="path/to/backbone.js"></script>
1

६.२.२ मूलभूतसेटिंग्स्

Backbone.js इत्यस्य परिचयस्य अनन्तरं भवान् स्वस्य परियोजनायां Backbone.js इत्यनेन प्रदत्तानां कार्याणां उपयोगं आरभुं शक्नोति ।

६.३ एपिआइ अवलोकनम्

Backbone.js इत्यस्मिन् सामान्यतया प्रयुक्तानां APIs इत्यस्य संक्षिप्तपरिचयः निम्नलिखितम् अस्ति ।

६.३.१ आदर्शाः संग्रहाः च

Backbone.js इत्यस्मिन् मॉडल् अनुप्रयोगस्य दत्तांशं प्रतिनिधियति, संग्रहाः च मॉडल् इत्यस्य क्रमबद्धसङ्ग्रहाः सन्ति ।

var Book = Backbone.Model.extend({
    defaults: {
        title: '',
        author: ''
    }
});

var Library = Backbone.Collection.extend({
    model: Book
});
1
2
3
4
5
6
7
8
9
10

6.3.2 दृश्यानि मार्गनिर्धारणं च

दृश्यानि पृष्ठे आदर्शदत्तांशं प्रतिपादयितुं उत्तरदायी भवन्ति, यदा तु URL-दृश्यानां च मध्ये मैपिंगसम्बन्धं नियन्त्रयितुं मार्गनिर्देशनं उत्तरदायी भवति ।

var BookView = Backbone.View.extend({
    el: '#app',
    
    initialize: function() {
        this.render();
    },
    
    render: function() {
        var template = _.template($('#book-template').html());
        this.$el.html(template(this.model.toJSON()));
    }
});

var AppRouter = Backbone.Router.extend({
    routes: {
        '': 'home',
        'books/:id': 'showBook'
    },

    home: function() {
        // 渲染主页
    },

    showBook: function(id) {
        // 根据id显示书籍详情
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

उपर्युक्तसङ्केत-उदाहरणानां संक्षिप्तपरिचयस्य च माध्यमेन, भवान् अग्रभागविकासे Backbone.js इत्यस्य भूमिकायाः ​​उपयोगस्य च प्रारम्भिकबोधं प्राप्तुं शक्नोति ।विस्तृतं दस्तावेजं उदाहरणानि च द्रष्टुं शक्यन्तेBackbone.js आधिकारिक वेबसाइट。