前端開發中常見模組規範

2021-07-23 21:57:06 字數 1228 閱讀 1253

主要是正像服務端(後端)的模組規範,尤其是在nodejs發展起來後得到快速發展。

事例1:

//file a modulea

//模組通過module.exports匯出對外的變數或介面

module.exports = function( value )

//-------- 分割線 ----

//fileb

//通過 require() 來匯入其他模組的輸出到當前模組作用域中

var fs = require('fs');

// ea6 語法

import fs from 'fs';

//using

fs.readfile('/path/file_a.js', (err, data) => );

常見與requirejs中,特點:宣告載入前置,能很好的表明載入間的依賴關係,也有很好的包裝特性。

缺點是在專案中資源前置載入導致阻塞載入引起的頁面載入緩慢問題。

define(id?: string, dependencies?: string, factory: function|object);

//定義

define('mymodule', ['jquery'], function

($) );

// 使用

define(['mymodule'], function

(mymodule) {});

常見與seajs中,由阿里玉伯推動。特點,也就是常說的懶載入,就近宣告就近載入。

// define(function(require, exports, module) {})

//cmd

define(function (requie, exports, module)

});

為了相容以上規範,一些常見的js庫使用這種規範,如:jquery/zepto/underscore等

(function

(window, factory) else if (typeof define === 'function' && define.amd) else

})(this, function () )

;

參考:

commonjs規範

amd, cmd, commonjs和umd —- 我是豆腐不是渣

layui模組規範

預先載入 開門見山,還是直接說使用比較妥當。layui的模組載入採用核心的 layui.use mods,callback 方法,當你的js 需要用到layui模組的時候,我們更推薦你採用預先載入,因為這樣可以避免到處寫layui.use的麻煩。你應該在最外層如此定義 demo1.js 使用layu...

AMD,CMD,UMD 三種模組規範 寫法格式

一下三塊均以 foo.js 為示例檔名,以 jquery,underscore 為需求元件 adm 非同步模組規範,requirejs 的支援格式 1 檔名 foo.js 2 define jquery underscore function 私有方法,因為沒有被返回 見下面 5function b...

前端開發規範

前端開發 lang zh cn name renderer content webkit 錯誤示例 body html dom 上面的 會導致一下問題 names 2 插入頁面後,推薦的angularjs寫法 3.4.4 jquey呼叫angularjs的方法 思路 取得angularjs作用域下的...