溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
上周Wijmo 2014 V2版本剛剛發(fā)布(下載地址), 有網(wǎng)友下載后發(fā)現(xiàn)僅僅使用了40個Widgets的一小部分，還需要加載全部的jquery.wijmo-pro.all.3.20142.45.min.js包？ 即對僅使用部分的Widget，有無辦法優(yōu)化而提高網(wǎng)絡(luò)性能呢。
答案是肯定的，有辦法。
其中針對這種情況，使用Require.JS再合適不過了，實際上Wijmo 2013年已經(jīng)開始支持Require.JS了，如下是Wijmo支持的JavaScript類庫的全圖。
本文就通過對比的方式說明使用RequireJs前后網(wǎng)絡(luò)性能，以使用Wijmo表格控件(wijgrid)說明。
RequireJs概述
RequireJS由James Burke創(chuàng)建，他也是AMD規(guī)范的創(chuàng)始人.
RequireJS會讓你以不同于往常的方式去寫JavaScript。你將不再使用script標簽在HTML中引入JS文件，以及不用通過script標簽順序去管理依賴關(guān)系。當然也不會有阻塞（blocking）的情況發(fā)生。
RequireJS不僅僅用于加載模塊依賴和相關(guān)的命令，RequireJS幫助我們寫出模塊化的JavaScript代碼，這非常有利于代碼的可擴展性和重用性。
當加載JavaScript模塊時，就會使用script標簽, 多個依賴的模塊，會按照引入的先后順序加載。故，在使用script標簽時，你需要按照此特定順序安排它們的加載。AMD(異步模塊定義)可以使得JavaScript模塊和它的依賴被異步的加載，同時，又能保證順序的準確。 兩者的對比，如圖所示。
RequireJS API 存在于RequireJS載入時創(chuàng)建的命名空間requirejs下。其主要API主要是下面三個函數(shù):
define– 該函數(shù)用戶創(chuàng)建模塊。每個模塊擁有一個唯一的模塊ID，它被用于RequireJS的運行時函數(shù)，define函數(shù)是一個全局函數(shù)，不需要使用requirejs命名空間.
var wijmo;
define(["./wijmo.widget"function () {
}require– 該函數(shù)用于讀取依賴，全局函數(shù)，不需要使用requirejs命名空間. 用于加載模塊依賴而不是創(chuàng)建一個模塊.
require(["knockout.wijmo", "wijmo.wijgrid", "wijmo.data.ajax"], function () {
}config– 該函數(shù)用于配置RequireJS.
requirejs.config({
baseUrl: "../../../amd-js/",
paths: { "jquery": "jquery-1.11.1.min", "jquery-ui": "jquery-ui-1.11.0.custom.min", "jquery.ui": "jquery-ui", "jquery.mousewheel": "jquery.mousewheel.min", "globalize": "globalize.min", "knockout": "knockout-3.1.0"
}
});
Wijmo的AMD目錄：Wijmo-Pro.3.20142.45\amd-js
不使用RequireJs，使用Wijmo的wijgrid表格控件
添加引用
<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css"> <!--Wijmo Widget CSS--> <link > <script src="http://cdn.wijmo.com/amd-js/jquery-1.9.1.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/amd-js/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/amd-js/jquery.mousewheel.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/amd-js/globalize.min.js" type="text/javascript"></script> <!--Wijmo Widgets JavaScript--> <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20142.45.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20142.45.min.js" type="text/javascript"></script>
在Body中添加table元素
<body> <table id='demo-grid' /> </body>
在頁面加載完成后的ready事件中，添加wijgrid的實現(xiàn)腳本
$(document).ready(function () {
$("#demo-grid").wijgrid({
allowSorting: true,
data: [
[1, "Malkin", "Pit", 7, 2, 6, 8, 0, 29, "20:10", 2, 2],
...
],
columns: [
{ headerText: "ID", dataType: "number", dataFormatString: "n0" },
{ headerText: "Skaters" },
...
]
});
});通過簡單的代碼，實現(xiàn)的表格結(jié)果如圖所示
我們重新刷新--通過Ctrl + F5按鍵，然后觀察Chrome的Network調(diào)試工具欄
可以看到渲染完成，需要800ms左右的時間。
使用RequireJs，使用Wijmo的wijgrid表格控件
添加引用
<link > <!--Wijmo Widget CSS--> <link > <!--RequireJS AMD Loader--> <script src="http://cdn.wijmo.com/external/require.js" type="text/javascript"></script>
配置RequireJs，我們使用wijmo提供的CDN
requirejs.config({
baseUrl: "http://cdn.wijmo.com/amd-js/",
paths: { "jquery": "jquery-1.9.1.min", "jquery-ui": "jquery-ui-1.10.1.custom.min",
"jquery.mousewheel": "jquery.mousewheel.min", "globalize": "globalize.min"
}
});運行結(jié)果如圖所示
總結(jié)，在使用了RequireJs后，性能從800ms提高到400ms，極大的提高了Web運行效率，Wijmo的RequireJs功能可以試試。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼