1. 程式人生 > >從零開始寫JavaScript框架(一)

從零開始寫JavaScript框架(一)

1. 模組的定義和載入

1.1 模組的定義

一個框架想要能支撐較大的應用,首先要考慮怎麼做模組化。有了核心和模組載入系統,外圍的模組就可以一個一個增加。不同的JavaScript框架,實現模組化方式各有不同,我們來選擇一種比較優雅的方式作個講解。

先問個問題:我們做模組系統的目的是什麼?如果覺得這個問題難以回答,可以從反面來考慮:假如不做模組系統,有什麼樣的壞處?

我們經歷過比較粗放、混亂的前端開發階段,頁面裡充滿了全域性變數,全域性函式。那時候要複用js檔案,就是把某些js函式放到一個檔案裡,然後讓多個頁面都來引用。

考慮到一個頁面可以引用多個這樣的js,這些js互相又不知道別人裡面寫了什麼,很容易造成命名的衝突,而產生這種衝突的時候,又沒有哪裡能夠提示出來。所以我們要有一種辦法,把作用域比較好地隔開。

JavaScript這種語言比較奇怪,奇怪在哪裡呢,它的現有版本里沒package跟class,要是有,我們也沒必要來考慮什麼自己做模組化了。那它是要用什麼東西來隔絕作用域呢?

在很多傳統高階語言裡,變數作用域的邊界是大括號,在{}裡面定義的變數,作用域不會傳到外面去,但我們的JavaScript大人不是這樣的,他的邊界是function。所以我們這段程式碼,i仍然能打出值:

JavaScript
1234for(vari=0;i<5;i++){//do something}alert(i);

那麼,我們只能選用function做變數的容器,把每個模組封裝到一個function裡。現在問題又來了,這個function本身的作用域是全域性的,怎麼辦?我們想不到辦法,拔劍四顧心茫然。

我們有沒有什麼可參照的東西呢?這時候,腦海中一群語言飄過: C語言飄過:“我不是面嚮物件語言哦~不需要像你這麼組織哦~”,“死開!” Java飄過:“我是純面嚮物件語言哦,連main都要在類中哦,編譯的時候通過裝箱清單指定入口哦~”,“死開!” C++飄過:“我也是純面嚮物件語言哦”,等等,C++是純面向物件的語言嗎?你的main是什麼???main是特例,不在任何類中!

啊,我們發現了什麼,既然無法避免全域性的作用域,那與其讓100個function都全域性,不如只讓一個來全域性,其他的都由它管理。

本來我們打算自己當上帝的,現在只好改行先當個工商局長。你想開店嗎?先來註冊,不然封殺你!於是良民們紛紛來註冊。店名叫什麼,從哪進貨,賣什麼的,一一登記在案,為了方便下面的討論,我們連進貨的過程都讓工商局管理起來。

店名,指的就是這裡的模組名,從哪裡進貨,代表它依賴什麼其他模組,賣什麼,表示它對外提供一些什麼特性。

好了,考慮到我們的這個註冊管理機構是個全域性作用域,我們還得把它掛在window上作為屬性,然後再用一個function隔離出來,要不然,別人也定義一個同名的,就把我們覆蓋掉了。

JavaScript
1 2 3 4 5 6 7 (function(){ window.thin={ define:function(name,dependencies,factory){ //register a module } }; })();

在這個module方法內部,應當怎麼去實現呢?我們的module應當有一個地方儲存,但儲存是要在工商局內部的,不是隨便什麼人都可以看到的,所以,這個儲存結構也放在工商局同樣的作用域裡。

用什麼結構去儲存呢?工商局備案的時候,店名不能跟已有的重複,所以我們發現這是用map的很好場景,考慮到JavaScript語言層面沒有map,我們弄個Object來存。

JavaScript
12345678910111213141516(function(){varmoduleMap={};window.thin={define:function(name,dependencies,factory){if(!moduleMap[name]){varmodule={name:name,dependencies:dependencies,factory:factory};

相關推薦

開始JavaScript框架

1. 模組的定義和載入 1.1 模組的定義 一個框架想要能支撐較大的應用,首先要考慮怎麼做模組化。有了核心和模組載入系統,外圍的模組就可以一個一個增加。不同的JavaScript框架,實現模組化方式各有不同,我們來選擇一種比較優雅的方式作個講解。 先

開始JavaWeb框架第二章節

oca ext span logs http ioe 請求方法 servlet 類型 這一章太多了。。。好累,不想寫那麽細了,就做一點總結吧。 package org.smart4j.chapter2.controller; import java.io.IOExcep

[Golang] 開始Socket Server1: Socket-Client框架

第一次跑到網際網路公司實習 。。感覺自己進步飛快啊~第一週剛寫了個HTTP伺服器用於微信公共號的點餐系統~ 第二週就直接開始一邊自學GO語言一邊寫用於Socket的伺服器了。。。 因為發現Golang這一塊資料挺少的,接下來我會在Blog裡把整個Server的Coding,還有遇到的坑都記錄

[Golang] 開始Socket Server3: 對長、短連接的處理策略模擬心跳

microsoft ted 每次 range 點擊 關閉 ade 而在 href 通過前兩章,我們成功是寫出了一套湊合能用的Server和Client,並在二者之間實現了通過協議交流。這麽一來,一個簡易的socket通訊框架已經初具雛形了,那麽我們接下來做的

開始學習OpenCL開發架構

處理器 多媒體 c++ stl context 實驗 通用 必看 是你 同時存在 1 異構計算、GPGPU與OpenCL OpenCL是當前一個通用的由很多公司和組織共同發起的多CPU\GPU\其他芯片 異構計算(heterogeneous)的標準,它是跨平臺的。旨在充

開始學Linux系統

系統啟動 linux 自定義 管理 如果 level 技術 int 沒有 Linux系統:分時多用戶多任務的操作系統; Linux系統引導流程: inittab配置文件中: 定義了linux系統的運行的7個級別:從0~6 0、6:分別代表關機和重啟,不建議設置為默認的

[Golang] 開始Socket Server6【完結】:日誌模組的設計與定時任務模組模組

好久沒寫文章啦。。。今天把golang挖的這個坑給補完吧~ 作為一個Server,日誌(Log)功能是必不可少的,一個設計良好的日誌模組,不論是開發Server時的除錯,還是執行時候的維護,都是非常有幫助的。 因為這裡寫的是一個比較簡化的Server框架,因此我選擇對Golang本

[Golang] 開始Socket Server5:Server的解耦—通過Router+Controller實現邏輯分發

       在實際的系統專案工程中中,我們在寫程式碼的時候要儘量避免不必要的耦合,否則你以後在更新和維護程式碼的時候會發現如同深陷泥潭,隨便改點東西整個系統都要變動的酸爽會讓你深切後悔自己當初為什麼非要把東西都寫到一塊去(我不會說我剛實習的時候就是這麼幹

[Golang] 開始Socket Server4:將執行引數放入配置檔案XML/YAML

    為了將我們寫好的Server釋出到伺服器上,就要將我們的程式碼進行build打包,這樣如果以後想要修改一些程式碼的話,需要重新給程式碼進行編譯打包並上傳到伺服器上。     顯然,這麼做過於繁瑣。。。因此常見的做法都是將Server執行中

[Golang] 開始Socket Server2: 自定義通訊協議

        在上一章我們做出來一個最基礎的demo後,已經可以初步實現Server和Client之間的資訊交流了~ 這一章我會介紹一下怎麼在Server和Client之間實現一個簡單的通訊協議,從而增強整個資訊交流過程的穩定性。  

開始Vue專案實戰-準備篇

從前參與過一個react專案的程式碼編寫,大神搭建的框架,我主要負責業務邏輯程式碼編寫,現在回想起來似乎又什麼都不會,現在為了鞏固前端知識,決定用Vue來做這個專案的移動端網站,我本人Vue是從零開始的,一邊學習一邊寫程式碼,在這裡記錄一下過程。 專案說明: 主要功能實現一個投資平臺,會員身份為融資人或投

開始學習敏捷開發

一、敏捷開發--歷史背景:   20世紀60年代:軟體作坊,軟體規模小,以作坊式開發為主;  70年代:軟體危機,硬體飛速發展,軟體規模和複雜度激增,引發軟體危機;  80年代:軟體過程控制,引入成熟生產製造管理方法,以“過程為中心”分階段來控制軟體開發(瀑布模型),一定程度上緩解了軟體危機;  90年代:

開始學Socket:服務端和客戶端建立

上篇我提到Socket是TCP/IP的抽象介面。所以我們直接使用就好,沒必要知其甚解。 1.開啟VS 新建專案 名稱,位置隨意 這裡名稱是Server 框架選.NET 4.5(在這篇部落格裡也無所謂) 注意引用 using System.Net; using

Vue + Spring Boot開始搭建個人網站 之 專案前端Vue.js環境搭建

前言:         最近在考慮搭建個人網站,想了想決定採用前後端分離模式         前端使用Vue,負責接收資料         後端使用Spring Boot,負責提供前端需要的API         就這樣開啟了我邊學習邊實踐之旅 Vue環境搭建步驟:         1、安裝node.js

開始做SSH專案

  1.資料庫指令碼 使用者表 CREATE TABLE `ybl`.`userinfo`( `id` INT NOT NULL AUTO_INCREMENT, `email` VARCHAR(64) NOT NULL, `identity` INT NOT NUL

開始shell指令碼1--shell初體驗

初識shell 計算機智慧理解 0 和 1 組成的二進位制語言。 早期計算機通過二進位制語言來執行指令,對人類來說難以理解,讀寫都很不友好。後來,作業系統裡提供了一種叫做shell的特殊的程式。shell接受你的英文格式(大多數情況下是英文)指令,如果指令有

【平行計算-CUDA開發】開始學習OpenCL開發架構

本文將作為我《從零開始做OpenCL開發》系列文章的第一篇。 1 異構計算、GPGPU與OpenCL   OpenCL是當前一個通用的由很多公司和組織共同發起的多CPU\GPU\其他晶片 異構計算(heterogeneous)的標準,它是跨平臺的。旨在充分利用G

開始學習Kinect程式設計 4.20

今天是第一天開始學習Kinect 之前並沒有接觸過這個東西 1,Kinect是什麼?–百度找的 =.= Kinectfor Xbox 360,簡稱 Kinect,是由微軟開發,應用於Xbox 360 主機的周邊裝置。它讓玩家不需要手持或踩踏控制器,而是使用

開始微信機器人:wxpy簡介登入、訊息傳送、註冊回覆

在過去的幾個月中,由於在新生群中回答問題費時費力,同時又有許多重複而又有固定答案的回答,我受到一些知乎文章的啟發,維護了一個基於itchat的群聊機器人。從剛開始接入圖靈機器人時只會尬聊的機器人,之後又加入了api.ai的按照訊息內容自動回覆,而後再加入了回覆表情功能

[Golang] 開始Socket Server3: 對長、短連線的處理策略模擬心跳

    通過前兩章,我們成功是寫出了一套湊合能用的Server和Client,並在二者之間實現了通過協議交流。這麼一來,一個簡易的socket通訊框架已經初具雛形了,那麼我們接下來做的,就是想辦法讓這