經典開場
// Layui
;! function (win) {
var Lay = function () {
this.v = '2.5.5';
};
win.layui = new Lay();
}(window);
// Jquery
(function (global, factory) {
"use strict";
if (typeof module === "object" && typeof module.exports === "object") {
module.exports = global.document ?
factory(global, true) :
function (w) {
if (!w.document) {
throw new Error("jQuery requires a window with a document");
}
return factory(w);
};
} else {
factory(global);
}
})(typeof window !== "undefined" ? window : this, function (window, noGlobal) {
var jQuery = function (selector, context) {
return new jQuery.fn.init(selector, context);
};
return jQuery;
});
這是一種很經典的開場方式，以 ! 定義一個函式并立即執行，并且將物件賦值到全域 window 變數上，當然除了 ! 還有 ~ 等符號都可以定義后面的這個函式，而 ; 應該是為了防止其他的代碼對本身造成影響，
實際上( function (window) { "use strict"; } )( window )的寫法更被我們理解，如Jquery未壓縮的原始碼，而!定義函式的方法唯一優勢就是代碼相對較少，所以壓縮后的Js代碼大多數會以!開頭，
動態加載
Lay.prototype.link = function (href, fn, cssname) {
var that = this,
link = doc.createElement('link'),
head = doc.getElementsByTagName('head')[0];
if (typeof fn === 'string')
cssname = fn;
var app = (cssname || href).replace(/\.|\//g, '');
var id = link.id = 'layuicss-' + app,
timeout = 0;
link.rel = 'stylesheet';
link.href = https://www.cnblogs.com/carelessboy/p/href + (config.debug ?'?v=' + new Date().getTime() : '');
link.media = 'all';
if (!doc.getElementById(id)) {
head.appendChild(link);
}
if (typeof fn != 'function') return that;
(function poll() {
if (++timeout > config.timeout * 1000 / 100) {
return error(href + ' timeout');
};
if (parseInt(that.getStyle(doc.getElementById(id), 'width')) === 1989) {
fn();
} else {
setTimeout(poll, 100);
}
}());
return that;
}
先來看看官方檔案：
方法：layui.link(href)
href 即為 css 路徑，注意：該方法并非是你使用 layui 所必須的，它一般只是用于動態加載你的外部 CSS 檔案，
雖然官方只給出了一個引數，但是我們看原始碼的話可以知道后兩個引數是加載完后運行的函式和自定義的Id，
有趣的是，臨時創建的 poll函式 如果parseInt(that.getStyle(doc.getElementById(id), 'width')) === 1989判斷為 false ，也就是樣式沒有被引入的時候會重新呼叫 poll函式 最后要么加載成功回圈結束，要么加載超時呼叫 Layui hint 列印出超時資訊，
因為同樣的手段在加載 module 時也同樣使用到，所以如果你使用過 Layui 那么[module] is not a valid module這樣的警告或多或少能遇到幾次，
模塊引入
用過 Layui 的兄dei應該對 layui.use 不陌生，先來看官方檔案：
方法：layui.use([mods], callback)
layui 的內置模塊并非默認就加載的，他必須在你執行該方法后才會加載，
對于用了 Layui 有段時間的我來說，也只是按照官方的例子使用，并不知道實作的原理，
接下來就是見證遺跡的時候，看看 layui.use 做了什么：
Lay.fn.use = function (apps, callback, exports) {
function onScriptLoad(e, url) {
var readyRegExp = navigator.platform === 'PLaySTATION 3' ? /^complete$/ : /^(complete|loaded)$/;
if (e.type === 'load' || (readyRegExp.test((e.currentTarget || e.srcElement).readyState))) {
config.modules[item] = url;
head.removeChild(node);
(function poll() {
if (++timeout > config.timeout * 1000 / 4) {
return error(item + ' is not a valid module');
};
config.status[item] ? onCallback() : setTimeout(poll, 4);
}());
}
}
function onCallback() {
exports.push(layui[item]);
apps.length > 1 ? that.use(apps.slice(1), callback, exports) : (typeof callback === 'function' && callback.apply(layui, exports));
}
var that = this,
dir = config.dir = config.dir ? config.dir : getPath;
var head = doc.getElementsByTagName('head')[0];
apps = typeof apps === 'string' ? [apps] : apps;
if (window.jQuery && jQuery.fn.on) {
that.each(apps, function (index, item) {
if (item === 'jquery') {
apps.splice(index, 1);
}
});
layui.jquery = layui.$ = jQuery;
}
var item = apps[0],
timeout = 0;
exports = exports || [];
config.host = config.host || (dir.match(/\/\/([\s\S]+?)\//) || ['//' + location.host + '/'])[0];
if (apps.length === 0 || (layui['layui.all'] && modules[item]) || (!layui['layui.all'] && layui['layui.mobile'] && modules[item])) {
return onCallback(), that;
}
if (config.modules[item]) {
(function poll() {
if (++timeout > config.timeout * 1000 / 4) {
return error(item + ' is not a valid module');
};
if (typeof config.modules[item] === 'string' && config.status[item]) {
onCallback();
} else {
setTimeout(poll, 4);
}
}());
} else {
var node = doc.createElement('script'),
url = (modules[item] ? dir + 'lay/' : /^\{\/\}/.test(that.modules[item]) ? '' : config.base || '') + (that.modules[item] || item) + '.js';
node.async = true;
node.charset = 'utf-8';
node.src = https://www.cnblogs.com/carelessboy/p/url + function () {
var version = config.version === true ? config.v || (new Date()).getTime() : config.version ||'';
return version ? '?v=' + version : '';
}();
head.appendChild(node);
if (!node.attachEvent || (node.attachEvent.toString && node.attachEvent.toString().indexOf('[native code]') < 0) || isOpera) {
node.addEventListener('load', function () {
onScriptLoad(e, url);
}, false);
} else {
node.addEventListener('onreadystatechange', function (e) {
onScriptLoad(e, url);
});
}
config.modules[item] = url;
}
return that;
};
首先跳過前兩個創建的函式，經過一堆巴拉巴拉的賦值后來到第2個if中我們直接可以判斷陳述句apps.length === 0，根據檔案可知我們第一個引數是一個陣列 [mods] ，當然前面的賦值apps = typeof apps === 'string' ? [apps] : apps;可以看出即使你傳的是一個字串也會被封裝成陣列，
很明顯第一次進來apps.length === 0和下面的if ( config.modules[item] ) 也必為 false ，那么我們直接移步到 else 內，
創建一個 script 元素并賦予屬性和模塊的地址，通過 appendChild 追加到 head 之后留下一個 addEventListener 監聽 script 的加載（ ps：attachEvent 是給非人類使用的瀏覽器準備的 ）并將開始創建的 function onScriptLoad(e, url)函式拋進去，然后整段代碼除了return that到這里戛然而止，
再來看看function onScriptLoad(e, url)函式，首先開幕雷擊 "PLaySTATION 3" === navigator.platform ？
僅關心PC端瀏覽器的部分e.type === 'load'， 因為監聽的是 load 所以這里必為 true 并執行config.modules[item] = url后將追加的 script 元素移除，剩余的代碼就是動態加載時使用的技巧，直到 config.status[item] 為 true 時回圈結束，
定義模塊
由于config.status[item]不會自動變成 true，之后的騷操作由 layui.define 接手，
先看官方檔案：
方法：layui.define([mods], callback)
通過該方法可定義一個 layui 模塊，引數 mods 是可選的，用于宣告該模塊所依賴的模塊，callback 即為模塊加載完畢的回呼函式，它回傳一個 exports 引數，用于輸出該模塊的介面，
以比較常用的 laypage.js 模塊為例，基礎原始碼如下：
// Laypage 模塊的部分代碼（部分變數名為猜測，但不影響內容本身）
layui.define(function (exports) {
'use strict';
var MOD_NAME = 'laypage',
LayPage = function (options) {
var that = this;
that.config = options || {}, that.config.index = ++laypage.index, that.render(true);
};
var laypage = {
render: function (options) {
var laypage = new LayPage(options);
return laypage.index
},
index: layui.laypage ? layui.laypage.index + 10000 : 0,
on: function (elem, even, fn) {
return elem.attachEvent ? elem.attachEvent("on" + even, function (param) {
param.target = param.srcElement, fn.call(elem, param)
}) : elem.addEventListener(even, fn, false), this
}
};
exports(MOD_NAME, laypage);
});
因為 Layui 已經注冊了全域的變數，所以當模塊檔案通過元素追加的方式引入時，呼叫了 layui.define 方法：
Lay.fn.define = function (deps, callback) {
var that = this,
type = typeof deps === 'function',
mods = function () {
var e = function (app, exports) {
layui[app] = exports;
config.status[app] = true;
}
typeof callback === 'function' && callback(function (app, exports) {
e(app, exports);
config.callback[app] = function () {
callback(e);
}
});
return this;
};
type && (callback = deps, deps = []);
if (!layui['layui.all'] && layui['layui.mobile']) {
return mods.call(that);
} else {
that.use(deps, mods);
return that;
}
};
因為不管你在定義的模塊中有沒有引入其他模塊，如 laypage 和 laytpl 這些 Layui 本身提供的模塊都會因 (callback = deps, deps = []) 回到 [mods], callback 的引數格式，
再經過一系列巴拉巴拉的步驟回到定義的 mods 方法中，由layui[app] = exports, config.status[app] = true給全域 layui 變數添加屬性(app)且給屬性賦值(exports)，并把 status 改為 true 至此模塊加載完成，
總結
正如 Layui 官方所說：我們認為，這恰是符合當下國內絕大多數程式員從舊時代過渡到未來新標準的最佳指引，
作為一個后端的作業者（以后可能要接觸前端框架的人）沒有接觸過前端框架，只對原生態的 HTML / CSS / JavaScript 有所了解，那么 Layui 無非是較優的選擇，
而寫這篇文章無非就是為了感謝 Layui 對非前端作業者做出的貢獻，也可能是我對使用了兩年多 Layui 最后的告別吧，感謝賢心，
相關網站
- Layui - 經典模塊化前端 UI 框架
- UglifyJS - JS壓縮器
其他
如果你沒有接觸過 UglifyJS 或其他 JS 壓縮器，而你又恰巧使用 Visual Studio Code 工具開發，那么 Minify 擴展插件就已經足夠日常使用了，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/265068.html
標籤：JavaScript
下一篇：JS實作點擊圖片放大、關閉效果