1. 程式人生 > >js的動態載入、快取、更新以及複用(二)

js的動態載入、快取、更新以及複用(二)

  上一篇發出來後得到了很多回復,在此首先感謝大家的熱情捧場!有的推薦第三方框架,比如 In.js、requrieJS、sea.js、lab.js等。這個開闊了眼界,以前只知道sea.js,省去了自己搜尋的麻煩。也用了點時間簡單看了一下,因為每一個都是大塊頭,都有自己的理念,如果只是簡單使用的話,那麼誰便找一個就可以了,但是我習慣把原理弄清楚。因為我覺得雖然不知道原理也可以使用,但是知道了原理後,可以用的更好

  主要看的是sea.js,目前簡單的理解是:一個載入js的機制 + 模組化程式設計(CMD規範)的理念。這個是淘寶用的,肯定很強大、很結實了。那麼我是不是拿來用呢?這就要看看我到底想要什麼,以及改動量大小。

  那麼我想要啥呢?第一步只想要一個可以動態載入js的程式碼,越簡單越好。為啥呢?越簡單就越不需要修改。為啥要求不需要修改呢?因為我想達到的效果是,每個頁面只需要 <script type="text/javascript" src="/boot.js"></script> 這麼一行,就可以把所有的共用的js檔案都統統的載入進來,並且可以自動更新。

  不知道大家有沒有發現一個問題,boot.js 可以搞定其他js檔案的更新,但是他自己的更新如何搞定呢?有兩個方法,一個是在後面加個隨機數作為引數;另一個就是一輩子都不需要修改。我不想用前者,因為每次都要去伺服器載入,和初衷不符。我想用後者,當然我也知道,不可能一輩子不變,只能儘量延遲修改的時間。所以就需要——簡單。越簡單越不需要修改,也就可以保持更長的時間。所以我起名叫做 boot。就是一個簡單的引導(載入)的功能。

  第二步才開始真正的管理js檔案。這時候可以考慮使用第三方框架,當然也可以自己寫。因為我可以用boot.js來確保載入哪些檔案,以及載入最新的檔案。在第二步就需要確定一個解決方案。我的想法就是做一個js檔案服務。由這個服務實現載入js、更新js、載入順序(依賴),還有複用。

  如果我們要做五個專案,每個專案都是一個獨立的站點,那麼對於共用的js檔案是怎麼處理的呢?1、每個專案站點都放一份,引用自己站點裡的。2、做一個獨立的站點存放共用的js,然後其他的專案都統一到這裡引用。我用的是第二個方法,你們呢?

  突然想到一個問題,我們寫js到底要達到什麼目的(效果)?基礎功能(jQuery、my97、editor等)、UI(easyUI等)、處理業務邏輯(做點判斷了啥的)。還有其他的啥。我們每寫一個js檔案,都需要考慮要引用哪些檔案嗎?目前我做的專案是,由js檔案服務來搞定js檔案的載入,然後寫點處理業務邏輯的程式碼就ok了。

  想說的還有很多,只是思路有點亂。後續要上具體的程式碼了,不知道大家是不是喜歡。

ps:

面對的問題。引用 https://github.com/seajs/seajs/issues/547

惱人的命名衝突

我們從一個簡單的習慣出發。我做專案時,常常會將一些通用的、底層的功能抽象出來,獨立成一個個函式,比如

function each(arr) {
  // 實現程式碼
}

function log(str) {
  // 實現程式碼
}

並像模像樣地把這些函式統一放在 util.js 裡。需要用到時,引入該檔案就行。這一切工作得很好,同事也很感激我提供了這麼便利的工具包。

直到團隊越來越大,開始有人抱怨。

小楊:我想定義一個 each 方法遍歷物件,但頁頭的 util.js 裡已經定義了一個,我的只能叫 eachObject 了,好無奈。

小高:我自定義了一個 log 方法,為什麼小明寫的程式碼就出問題了呢?誰來幫幫我。

抱怨越來越多。團隊經過一番激烈的討論,決定參照 Java 的方式,引入名稱空間來解決。於是 util.js 裡的程式碼變成了

var org = {};
org.CoolSite = {};
org.CoolSite.Utils = {};

org.CoolSite.Utils.each = function (arr) {
  // 實現程式碼
};

org.CoolSite.Utils.log = function (str) {
  // 實現程式碼
};

引用結束。

現在我採用的也是名稱空間的方式,當然是按照.net的習慣來的。

好的js檔案艾

不知不覺居然寫了這麼多。用名稱空間確實便於管理。尤其是管理原始碼。另外也應該學習一下CMD、AMD都是啥,自己寫的程式碼也應該規範一點。

相關推薦

js動態載入快取更新以及

  上一篇發出來後得到了很多回復,在此首先感謝大家的熱情捧場!有的推薦第三方框架,比如 In.js、requrieJS、sea.js、lab.js等。這個開闊了眼界,以前只知道sea.js,省去了自己搜尋的麻煩。也用了點時間簡單看了一下,因為每一個都是大塊頭,都有自己的理念,如果只是簡單使用的話,那麼誰便

js動態載入快取更新以及

總體思路 1、  建立一個js服務,該服務實現通用js檔案的載入、依賴、快取、更新以及複用。 2、  各個專案如果使用通用js,可(bi)以(xu)使用js服務實現載入。 3、  Js服務只提供通用的js,比如jQuery、my97、easyUI等(可根據實際情況設定具體的js檔案)。 4、  其他針

js動態載入快取更新以及

  本來想一氣呵成,把載入的過程都寫了,但是卡著呢,所以只好在分成兩份了。   1、頁面裡使用<script>來載入 boot.js 。   2、然後在boot.js裡面動態載入 bootLoad.js。以時間作為標識 var dateVer = date.getYear() + '_

js動態載入快取更新以及

使用範圍:   OA、MIS、ERP等資訊管理類的專案,暫時不考慮網站。 遇到的問題:   完成一個專案,往往需要引用很多js檔案,比如jQuery.js、easyUI等。還有自己寫的一些列js檔案,那麼這些檔案如何方便的載入,如果檔案有變化如何才能讓客戶端及時更新快取?如果能夠提高點執行效率,

IO多路 -- selectpollepoll實現TCP反射程式

接著上文IO多路複用(一)-- Select、Poll、Epoll,接下來將演示一個TCP回射程式,原始碼來自於該博文https://www.cnblogs.com/Anker...,在這裡將其進行了整合,突出select、poll和epoll不同方法之間的比較,但

Android-動態載入外掛化的兩種實現方式:介面

上一篇部落格中http://blog.csdn.net/lxping51/article/details/71480239,主要通過反射的方式來實現動態載入外掛化,今天我們以介面的方式來達到目的。介面的實現比反射更為簡單,而且直接呼叫對效能有很大的提高。但是這也

Jmeter介面測試-簡單分析結果數聚合報告以及圖形結果

簡單分析結果數、聚合報告以及圖形結果 結果樹 取樣器結果:返回值報200,表示執行介面除錯成功 請求:傳送的資料 響應資料:返回的資料 Thread Name:執行緒組名稱 Sample Start: 啟動開始時間 Load time:

PHPMySQL和JavaScript學習手冊筆記

first 超級 轉換 his java post ace put lin 第三章 賦值運算符: $j*=3; 等價於 $j=$j*3; 字符串的單引號雙引號雙引號中的變量可以解析,單引號就是絕對的字符串。 heredoc長字符串 <?php $au

IO多路-- SelectPollEpoll

在上一篇博文中提到了五種IO模型,關於這五種IO模型可以參考博文IO模型淺析-阻塞、非阻塞、IO複用、訊號驅動、非同步IO、同步IO,本篇主要介紹IO多路複用的使用和程式設計。 IO多路複用的概念 多路複用是一種機制,可以用來監聽多種描述符,如果其中任意一個描述符處

QTVS常見bug及解決辦法——VS錯誤 2 error LNK1120: 1 個無法解析的外部命令

這個問題的原因是有標頭檔案,但是找不到實現。 有兩個原因: 1.只包含了標頭檔案,只有這個函式的宣告,沒有包含這個函式的實現(實現一般放在cpp檔案中的)。所以只能通過編譯,連線不成功。 2.另一個原因是函式的宣告和實現都放在標頭檔案中了,一般要把宣告放標頭檔案中,實現放在c

PHP擴充套件開發之動態載入so模組與靜態重編譯PHP

動態載入so模組:利用ext_skel工具編譯生成so模組,修改php.ini檔案,動態載入即可 靜態編譯:將編寫的模組靜態編譯到PHP,需要重新編譯PHP 假設要編寫一個my_dynamic擴充套件,呼叫my_dynamic函式後輸出字串“The Best

JDBC資料庫連線池連線資料庫及資料庫操作DAO層設計通用更新及查詢方法

上篇文章主要介紹了通過資料庫連線池連線資料庫,然後設計了對資料庫通用更新和查詢方法,本篇文章主要通過例項介紹上篇文章定義的對資料庫操作的幾個方法的使用:     首先我們先在資料庫建立一個學生資訊表Student欄位如圖: 建立好表將配置檔案的資訊改好然後需要建立一

Tomcat配置與優化以及遠端debug

Tomcat IO優化 1.BIO方式 BIO方式適用於連線數目比較小且固定的架構,即阻塞式I/O操作, 基於JAVA的HTTP/1.1聯結器  ,這種方式對伺服器資源要求比較高,併發侷限於應用中,JDK1.4以前的唯一選擇,但程式直觀簡單易理解.一個執行緒處理一個請求。缺點:

更新】Essential Studio for ASP.NET MVC更新至2018 v4

下載Essential Studio for ASP.NET MVC最新版本 Essential Studio for ASP.NET MVC控制元件包是一款MVC介面開發包,它包含了幾乎所有企業級Web應用程式開發所需要的控制元件,如Grids、 Charts、Gauges、Menus、Cal

搶紅包案例分析以及程式碼實現 侵立刪

轉自:https://mp.weixin.qq.com/s/F1U1nUK2KF5R0nxT8lmfBg   概述 上一篇文章中使用ssm+mysql實現,存在併發超發問題,這裡我們使用悲觀鎖的方式來解決這個邏輯錯誤,並驗證資料一致性和效能狀況。 超發問題分析 針對

[持續更新]HTML5學習筆記

1.  元素分類 元資料元素(metadata element):由此可見主要是<meta>元素中的事情了,向瀏覽器提供資訊和指示; 流元素(flow element):聽名字怪異,但是其實是規定這些元素可以成為父元素; 短語元素(phrasing elemen

對於node.js開發指南中部落格案例的修改實現--程式碼

OK,廢話少說,直接上程式碼 首先是app.js,裡面很多與書中介紹的不同,不過看起來都很容易懂。首先是各種模組引用,然後就是使用session儲存狀態。 var express = require('express'); var path = require('path

[持續更新]CSS3學習筆記漸變&圓角&陰影&變換&動畫

1.  顏色模式 在網頁中常見的顏色模式有:RGB,HSLA。 RGB 大家不陌生,分別代表red,green,blue。使用6位16進位制數表示。#00FF00; RGBA 就說多了一個Aplha透明通道。這個數值用0~1的數字來表示。rbga(255,255,255,0

延遲載入快取spring與宣告式事務

什麼是延遲載入 延遲載入又稱(懶載入) resultMap中的 association 和 collection 標籤就具有延遲載入的功能(一對一,一對多的關係自帶延遲載入,在開發裡面最常用的) - 作用是:什麼時候用什麼時候載入 設定延遲載入 <!

cssjs載入與執行

1:一個網站在瀏覽器端是如何進行渲染的呢? 2: HTML渲染過程的一些特點 (1)順序執行、併發載入 順序執行:運用詞法分析能力從頭開始順序解析, 併發載入:引入的外部資源,css,js,可以進行優化,單個域名併發載入有限,CDN上設定三到四個。 (2)是否阻塞 (css載入是否阻塞js載入,