简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Rumah
Artikel
Soal Jawab
Kursus
Topik
Muat turun
Permainan
Kamus
kemas kini terkini

Rumah  >  Artikel  >  hujung hadapan web  >  Contoh penggunaan menggunakan perpustakaan RequireJS dalam ASP.NET MVC projects_javascript tips

Contoh penggunaan menggunakan perpustakaan RequireJS dalam ASP.NET MVC projects_javascript tips

WBOY
WBOYasal
2016-05-16 15:15:331884semak imbas

RequireJS ialah alat popular untuk pembangunan modular bahagian hadapan Ia ialah fail perpustakaan Javascript, iaitu require.js.
Fungsi utama RequireJs:

(1) Laksanakan pemuatan tak segerak bagi fail js untuk mengelakkan halaman web kehilangan respons;

(2) Uruskan kebergantungan antara modul untuk memudahkan penulisan dan penyelenggaraan kod.

Terdapat banyak alatan untuk pembangunan modular bahagian hadapan, yang secara amnya dibahagikan kepada dua kategori Satu ialah alatan canggih seperti dojo, yang mempunyai komponen pembangunan modular terbina dalam selepas dojo v1.8; memerlukan .js, sea.js ialah alat yang memfokuskan pada pembangunan modular.

Daripada peraturan pembahagian modular, ia terbahagi terutamanya kepada dua kategori: AMD dan CMD dan require.js mengikut yang pertama, manakala sea.js mengikut spesifikasi CMD.

require berfungsi dengan baik dalam aplikasi satu halaman Walau bagaimanapun, untuk aplikasi berbilang halaman tradisional, penggunaan memerlukan boleh menjadi agak mengelirukan dan menyusahkan.

Artikel ini menerangkan cara menggunakan keperluan dalam struktur ASP.NET MVC dan menyediakan skrip mampatan untuk mencapai pemampatan separa automatik.

Kod js berasingan
Secara umumnya, laluan dalam ASP.NET MVC sepadan dengan paparan Struktur fail paparan mungkin seperti berikut: 


Views
 |--Shared
 |--_layout.cshtml
 |--Home
 |--Index.cshtml
 |--Blog
 |--Create.cshtml
 |--Edit.cshtml
 |--Detail.cshtml
 |--Index.cshtml
Adalah diandaikan bahawa _layout.cshtml dikongsi oleh semua halaman. Dalam keadaan biasa, kami akan merujuk perpustakaan js awam dalam _layout, seperti jQuery, bootstrap, dll., supaya halaman lain tidak perlu merujuk perpustakaan ini lagi, yang meningkatkan kecekapan pengekodan. Walau bagaimanapun, halaman yang berbeza akhirnya akan bergantung pada js yang berbeza, terutamanya js tersuai yang melaksanakan fungsi halaman itu sendiri Dengan cara ini, kita perlu merujuk js khas di halaman lain, atau menulis js terus dalam halaman, seperti yang berikut. kod Selalunya muncul dalam Paparan: 

<script type="text/javascript">
 $(function(){...});
</script>
Ini akan menyebabkan halaman menjadi mengelirukan dan kod dalam teg 855348821b2e8f2cc4b633bf98f064df tidak boleh dicache oleh penyemak imbas, yang meningkatkan panjang kod halaman. Kelemahan yang lebih penting ialah perpustakaan seperti jQuery akan melaksanakan fungsi tanpa nama selepas dimuatkan ke dalam halaman, yang mengambil sedikit masa Jika sesetengah halaman tidak memerlukan jQuery sama sekali, selagi halaman menggunakan _layout sebagai halaman susun atur, maka jQuery The. kod permulaan pasti akan dilaksanakan, yang merupakan satu pembaziran. Sebenarnya, idea pemuatan modular JavaScript adalah untuk menyelesaikan masalah ini.

Seterusnya kami gunakan keperluan untuk merancang js kami dan membina direktori js dengan struktur berikut


js
|--app
 |--home.index.js
 |--blog.create.js
 |--blog.edit.js
 |--blog.detail.js
 |--blog.index.js
|--jquery.js
|--bootstrap.js
|--underscore.js
|--jquery.ui.js
|--jquery.customplugin.js
|--config.js
|--require.js
Letakkan modul js peringkat perpustakaan awam terus dalam direktori js dan letakkan js peringkat halaman dalam subdirektori apl. Ambil perhatian bahawa dalam apl, setiap halaman mempunyai fail js, yang bermaksud bahawa kita perlu mengekstrak js setiap halaman Walaupun ini meningkatkan kerumitan struktur, ia mengelakkan tabiat buruk menulis teg 855348821b2e8f2cc4b633bf98f064df Selain itu, perpustakaan awam dalam direktori js, sebagai tambahan kepada perpustakaan pihak ketiga, juga termasuk perpustakaan yang dibangunkan sendiri, dan fail yang dipanggil config.js ini sangat kritikal dan akan dibincangkan kemudian.

Kemudian, kami boleh memadamkan semua rujukan js dalam _layout dan menggunakan arahan @RenderSection untuk menghendaki subhalaman menyediakan rujukan js, _layout.cshtml:

<head>
...
@RenderSection("require_js_module", false)
...
</head>
Dengan cara ini, permintaan untuk js diasingkan kepada setiap halaman paparan Menurut penggunaan require, kita perlu merujuk require.js dalam setiap sub-View dan menentukan modul utama, dan modul utama ini berada dalam. direktori aplikasi di atas Setiap js

@section require_js_module{
 <script src="@Url.Content("~/js/require.js")" data-main="@Url.Content("~/js/app/home.index.js")" ></script>
}
Semua kod js akan ditulis ke dalam js di bawah apl, yang menyeragamkan js dan menjadikan halaman lebih bersih. Lebih penting lagi, js ini juga boleh dimampatkan dan dicache oleh penyemak imbas untuk meningkatkan lagi kecekapan pelaksanaan

Konfigurasi awam

Kami tahu bahawa selain menggunakan kaedah memerlukan, modul utama selalunya perlu mengkonfigurasi laluan modul lain melalui require.config, dan juga memerlukan shim Sebagai contoh, kod berikut sering muncul pada permulaan utama modul: 

require.config({
 paths: {
 "jquery": "lib/jquery.min",
 "underscore": "lib/underscore.min",
 "backbone": "lib/backbone.min"
 },
 shim: {
 'underscore':{
  exports: '_'
 },
 'backbone': {
  deps: ['underscore', 'jquery'],
  exports: 'Backbone'
 }
 }
});
Untuk aplikasi satu halaman, selalunya terdapat hanya satu modul utama, jadi anda boleh menulis kod di atas sekali. Walau bagaimanapun, dalam kes berbilang halaman, terdapat berbilang modul utama, dan setiap modul utama mesti mengandungi kod sedemikian Bukankah ia tidak saintifik? Jadi, saya harap ada tempat konfigurasi bersatu, tetapi bagaimana saya harus menulisnya? Kami fikir kami boleh menggunakan konfigurasi ini sebagai modul config.js dan membiarkan modul utama lain bergantung pada modul ini, seperti config.js berikut: 
requirejs.config({
 paths: {
 "jquery": "/js/jquery.min",
 "bootstrap": "/js/bootstrap"
 },
 shim: {
 'bootstrap': {
  deps: ['jquery'],
  exports: "jQuery.fn.popover"
 }
 }
});
Tiada apa-apa yang istimewa tentang cara config.js ditulis. Seterusnya, hanya petikan
dalam home.index.js 

require(['../config','jquery', 'bootstrap'], function () {
 //main module code here

});
Namun, masih salah untuk menulis dengan cara ini, kerana apabila modul yang bergantung kepada modul utama (config, jquery, bootstrap di sini) dimuatkan, susunan pemuatan tidak pasti, tetapi modul konfigurasi perlu dimuatkan sebelum modul lain, apa yang perlu dilakukan? Penyelesaian kompromi ialah mengubah suai home.index.js menjadi kod berikut:

使用一个命名的模块home.index2作为过渡，在主模块中手动require，这样可以保证config在主模块执行之前加载，也就使得home.index2在加载的时候已经加载了config了。

压缩
require提供一个压缩工具，用于压缩和合并js，详情请移步至http://requirejs.org/docs/optimization.html。简单的说，require提供一个叫r.js的文件，通过本地的node程序（Node.js），执行这个r.js并传入一些参数，即可自动分析模块互相之间的依赖，以达到合并和压缩的目的。同样的，这对于单页面应用来说是容易的，因为主模块只有一个，但是对于多页面又如何做呢？好在这个压缩工具支持用一个配置文件来指导压缩，这样的话，我们可以编写下面的配置脚本build.js：

var build = {
 appDir: '../js',
 baseUrl: '.',
 dir: '../js-built',
 mainConfigFile: '../js/config.js',
 modules: [
 //First set up the common build layer.
 {
  //module names are relative to baseUrl
  name: 'config',
  //List common dependencies here. Only need to list
  //top level dependencies, "include" will find
  //nested dependencies.
  include: ["bootstrap", "config","jquery"]
 },
 //Now set up a build layer for each page, but exclude
 //the common one. "exclude" will exclude nested
 //the nested, built dependencies from "common". Any
 //"exclude" that includes built modules should be
 //listed before the build layer that wants to exclude it.
 //"include" the appropriate "app/main*" module since by default
 //it will not get added to the build since it is loaded by a nested
 //require in the page*.js files.
 {
 name:"app/home.index",
 exclude:["config"]
 },
 {
 name:"app/blog.create",
 exclude:["config"]
 },
 ...
 ]
}

通过这个命令来执行压缩，压缩的结果将被保存到js-build目录：

node.exe r.js -o build.js

build.js脚本实际上是一个js对象，我们将config加入公共模块，而在各个主模块中将其排除。这样，所有的公共库包括config将压缩成一个js，而主模块又不会包含多余的config。这样可想而知，每个页面在加载时最多只会下载两个js，而且公共模块的代码会“按需执行”。

执行上面的脚本压缩，需要安装有node。可以在从这里下载。

自动脚本
但是，随着主模块的增加，需要随时跟踪和修改这个build文件，这也是很麻烦的。于是，笔者基于node.js开发了一个叫build-build.js的脚本，用来根据目录结构自动生成build.js：

fs = require('fs');
var target_build = process.argv[2];
//console.log(__filename);
var pwd = __dirname;
var js_path = pwd.substring(0,pwd.lastIndexOf('\\')) + '\\js';
console.log('js path : ' + js_path);
var app_path = js_path + '\\app';
console.log('js app path : ' +app_path);

var app_modules = [];
var global_modules = [];

//build json object
var build = {
 appDir: '../js',
 baseUrl: '.',
 dir: '../js-built',
 modules: [
 //First set up the common build layer.
 {
  //module names are relative to baseUrl
  name: 'config',
  //List common dependencies here. Only need to list
  //top level dependencies, "include" will find
  //nested dependencies.
  include: []
 }
 ]
}

fs.readdir(app_path,function (err,files) {
 // body...
 if (err) throw err;
 for(var i in files){
 //put module in app_modules
 var dotindex = files[i].lastIndexOf('.');
 if(dotindex >= 0){
  var extension = files[i].substring(dotindex+1,files[i].length);
  if(extension == 'js'){
  app_modules.push({
   name: 'app/' + files[i].substring(0,dotindex),
   exclude: ['config']
  });
  }
 }
 }

 for(var j in app_modules){
 build.modules.push(app_modules[j]);
 }
 
 fs.readdir(js_path,function (err,files){
 if (err) throw err;
 for(var i in files){
  //put module in app_modules
  var dotindex = files[i].lastIndexOf('.');
  if(dotindex >= 0){
  var extension = files[i].substring(dotindex+1,files[i].length);
  if(extension == 'js'){
   global_modules.push(files[i].substring(0,dotindex));
  }
  } 
 }

 build.modules[0].include = global_modules;
 //console.log(build);
 var t = pwd + '\\' + target_build;
 console.log(t);
 var fd = fs.openSync(t, 'w');
 fs.closeSync(fd);
 var json = JSON.stringify(build);
 fs.writeFileSync(t, json);
 });
});

这里的代码并不复杂，主要是遍历目录，生成对象，最后将对象序列化为build.js。读者可以自行阅读并修改。最后，编写一个bat，完成一键压缩功能，build.bat：

@echo off
set PWD=%~p0
set PWD=%PWD:\=/%
cd "D:\node"
node.exe %PWD%build-build.js build.js
node.exe %PWD%r.js -o %PWD%build.js
cd %~dp0

这样，我们就简单实现了一个方便的多页面require方案，最后项目目录可能是这样的：

Views
 |--Shared
 |--_layout.cshtml
 |--Home
 |--Index.cshtml
 |--Blog
 |--Create.cshtml
 |--Edit.cshtml
 |--Detail.cshtml
 |--Index.cshtml

build
|--build.js
|--r.js
|--build-build.js
|--build.bat

js
|--app
 |--home.index.js
 |--blog.create.js
 |--blog.edit.js
 |--blog.detail.js
 |--blog.index.js
|--jquery.js
|--bootstrap.js
|--underscore.js
|--jquery.ui.js
|--jquery.customplugin.js
|--config.js
|--require.js


Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Ringkasan menggunakan kaedah tatasusunan dalam petua JavaScript_javascriptArtikel seterusnya：Ringkasan menggunakan kaedah tatasusunan dalam petua JavaScript_javascript

Artikel berkaitan

Lihat lagi