Kemahiran SeaJS_javascript untuk pembangunan modular JavaScript

Kata Pengantar

SeaJS ialah rangka kerja pemuatan modul JavaScript yang mengikut spesifikasi CommonJS dan boleh merealisasikan pembangunan modular dan mekanisme pemuatan JavaScript. Menggunakan SeaJS boleh meningkatkan kebolehbacaan dan kejelasan kod JavaScript, menyelesaikan masalah biasa seperti kekeliruan kebergantungan dan keterjeratan kod dalam pengaturcaraan JavaScript semasa, dan memudahkan penulisan dan penyelenggaraan kod.

SeaJS sendiri dibangunkan mengikut konsep KISS (Keep it Simple, Stupid), dan kemas kini versi seterusnya juga mendesak untuk bergerak ke arah ini.

Cara menggunakan SeaJS

Saya tidak akan menerangkan butiran di sini tentang memuat turun dan pemasangan Jika anda tidak faham, sila semak tapak web rasmi.

Prinsip Pembangunan Asas
•Semuanya adalah modul: Konsep modul dalam SeaJS agak serupa dengan kelas dalam berorientasikan objek - modul boleh mempunyai data dan kaedah, data dan kaedah boleh ditakrifkan sebagai awam atau peribadi, dan data dan kaedah awam boleh dipanggil oleh orang lain. modul.

•Setiap modul hendaklah ditakrifkan dalam fail js yang berasingan, iaitu, satu sepadan dengan satu modul.

Definisi dan penulisan modul

Fungsi definisi modul menentukan

Gunakan fungsi define dalam SeaJS untuk menentukan modul. define boleh menerima tiga parameter:

/**
* Defines a module.
* @param {string=} id The module id.
* @param {Array.|string=} deps The module dependencies.
* @param {function()|Object} factory The module factory function.
*/
fn.define = function(id, deps, factory) {
  //code of function…
}

Parameter yang menentukan boleh menerima ialah ID modul, tatasusunan modul bergantung dan fungsi kilang.

•Jika hanya terdapat satu parameter, tetapkan ia kepada kilang

•Jika terdapat dua parameter, yang kedua ditetapkan kepada kilang, yang pertama ditetapkan kepada deps jika ia adalah tatasusunan, jika tidak ia ditetapkan kepada id

•Jika terdapat tiga parameter, tetapkan nilai secara berasingan

Walau bagaimanapun, hampir semua tempat di mana define digunakan, termasuk contoh tapak web rasmi SeaJS, hanya menghantar fungsi kilang ke dalamnya, serupa dengan kod berikut:

define(function(require,exports,module){
  //code of the module
}) 

Secara peribadi, adalah disyorkan untuk mengikuti piawaian contoh rasmi SeaJS dan mentakrifkan modul dengan penentuan parameter. Jadi apa yang akan berlaku kepada id dan deps?

id ialah rentetan pengenalan modul Apabila define hanya mempunyai satu parameter, id akan diberikan laluan mutlak fail js ini secara lalai. Jika define digunakan untuk mentakrifkan modul dalam fail a.js di bawah example.com, ID modul ini akan diberikan nilai http://example.com/a.js Adalah disyorkan untuk tidak meneruskannya jika tiada id keperluan khas. Secara amnya, deps tidak perlu dihantar masuk. Modul yang perlu digunakan boleh dimuatkan dengan memerlukan.

Analisis kilang fungsi kilang

  Fungsi kilang ialah badan utama dan fokus modul. Tiga parameternya ialah:

•memerlukan: fungsi pemuatan modul, digunakan untuk merekod modul bergantung
•Eksport: Titik antara muka, data atau kaedah yang ditakrifkan padanya akan terdedah kepada panggilan luaran
•Modul: Metadata modul

Tiga parameter ini boleh dipaparkan dan ditentukan mengikut keperluan.

Modul ialah objek yang menyimpan meta-maklumat modul, seperti berikut:
•module.id: ID modul
•module.dependencies: tatasusunan yang menyimpan senarai ID semua modul yang bergantung kepada modul ini.
•module.exports: menunjuk ke objek yang sama seperti eksport

Tiga mod penulisan modul

Yang pertama ialah mod berasaskan eksport:

define(function(require,exports,module){
  var a=require('a');
  var b=require('b'); //引入模块
  var data1=1; //私有数据
  var fun1=function(){//私有方法
    return a.run(data1);
  }
  exports.data2=2; //公有数据
  exports.fun2=function(){
    return 'hello';
  }
})

Di atas adalah corak definisi modul yang agak "tulen". Selain melampirkan data awam dan kaedah untuk mengeksport, anda juga boleh terus mengembalikan modul perwakilan objek Sebagai contoh, kod berikut mempunyai fungsi yang sama seperti kod di atas:

define(function(require){
  var a=require('a');
  var b=require('b'); //引入模块
  var data1=1;
  var fun1=function(){
    return a.run(data1);
  }
  return{
    data2:2,
    fun2:function(){
      return 'hello';
    }
  }
})

Jika definisi modul tidak mempunyai kod lain dan hanya mengembalikan objek, ia juga boleh dipermudahkan seperti berikut:

define({
  data2:2,
    fun2:function(){
      return 'hello';
    }
  }) 

Cara penulisan ketiga sangat sesuai untuk modul yang mentakrifkan data JSON tulen.

Bergantung pada senario aplikasi yang berbeza, SeaJS menyediakan tiga API untuk memuatkan modul, iaitu: seajs.use, require dan require.async.

seajs.use

seajs.use digunakan terutamanya untuk memuatkan modul kemasukan. Modul kemasukan adalah bersamaan dengan fungsi utama bahasa C dan juga merupakan punca keseluruhan pepohon pergantungan modul. seajs.use
Penggunaannya adalah seperti berikut:

//第一模式
seajs.use('./a');
//回调模式
seajs.use('./a',function(a){
  a.run();
})
//多模块模式
seajs.use(['./a','./b'],function(a,b){
  a.run();
  b.run();
}) 

Penggunaan berbilang modul adalah serupa dengan kaedah pemuatan modul dalam KISSY Tidak hairanlah ia ditulis oleh satu orang!

Secara amnya seajs.use hanya digunakan untuk memuatkan modul entri pada halaman SeaJS akan menghuraikan semua modul bergantung di sepanjang modul kemasukan dan memuatkannya. Jika hanya terdapat satu modul kemasukan, anda juga boleh meninggalkan seajs.use dengan menambahkan atribut "data-main" pada teg skrip yang memperkenalkan seajs Contohnya, ia ditulis seperti berikut:

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>TinyApp</title>
</head>
<body>
  <p class="content"></p>
  <script src="./sea.js" data-main="./init"></script>
</body>
</html> 
require

require ialah kaedah pemuatan modul utama seajs Apabila modul lain diperlukan dalam modul, require biasanya digunakan untuk memuatkan:

var m=require('./a'); 
require.async

上文说过seajs会在html页面打开时通过静态分析一次性记载所有需要的js文件，如果想要某个js文件在用时才加载，可以使用require.async。

 这样只有在用到这个模块时，对应的js文件才会被下载，也就实现了JavaScript代码的按需加载。

SeaJS的全局配置

seajs提供了一个seaj.configd的方法可以设置全局配置，接收一个表示全局配置的配置对象，具体方法如下：

seajs.config({
base:'path',
alias:{
  'app':'path/app/'
},
charset:'utf-8',
timeout:20000,
debug:false
})

其中，

 •base表示基址路径
 •alias可以对较长的常用路径设置缩写
 •charset表示下载js时script标签的charset属性。
 •timeout表示下载文件的最大时长，以毫秒为单位。

Seajs如何与现有的JS库配合使用

要将现有的JS库与seajs一起使用，只需根据seajs的模块定义规则对现有库进行一个封装。例如，下面是对jQuery的封装方法：

define(function(){
  /*
  此处为jquery源码
  */
  }) 

一个完整的例子：

 上文说了那么多，知识点比较分散，所以最后我打算用一个完整的SeaJS例子把这些知识点串起来，方便朋友们归纳回顾。这个例子包含如下文件：
 •index.html 主页面

 •sea.js
 •jquery.js
 •init.js init模块，入口模块，依赖data、jquery、style三个模块，又主页面载入
 •data.js data模块，纯json数据模块
 •style.css css样式表

html：
<!DOCTYPE HTML>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="content">
  <p class="author"></p>
  <p class="blog"><a href="#">Blog</a></p>
</div>
<script src="sea.js"></script>
<script>
    seajs.use('init');
</script>
</body>
</html> 
javascript:
//init.js
define(function(require, exports, module) {
  var $ = require('./jquery');
  var data = require('./data');
  var css = require('./style.css');
  $('.author').html(data.author);
  $('.blog').attr('href', data.blog);
});
//data.js
define({
  author: 'ZhangYang',
  blog: 'http://blog.codinglabs.org'
}); 
css:
.author{color:red;font-size:10pt;}
.blog{font-size:10pt;} 

请注意：

1.请讲jquery.js源码文件包含在seajs模块加载代码中；

2.在Sea.js < 2.3.0版本之前是可以加载css文件的，新版本中此功能移除，为了兼容考虑，加载css功能将作为一个插件存在。

使用方法

 •可以在sea.js标签后引入这个插件使用
 •也可以将插件代码混入sea.js当中
 •和seajs-style的区别 •seajs-css是使 Sea.js 能够加载一个css文件，和link标签一样
 •seajs-style是指提供一个seajs.importStyle方法用于加载一段 css 字符串

以上内容是小编给大家分享的JavaScript模块化开发之SeaJS，希望对大家学习javascript模块化开发有所帮助，谢谢大家一直以来对脚本之家网站的支持。！