成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

前端模塊化的那些事兒

aaron / 2897人閱讀

摘要：規(guī)范異步模塊聲明規(guī)范公共模塊聲明模塊化的核心價值模塊化最核心的價值在于解決不同文件之間的分工和調(diào)用問題，即依賴關系。

一、什么是模塊？

定義：具有相同屬性和行為的事物的集合
在前端中：將一些屬性比較類似和行為比較類似的內(nèi)容放在同一個js文件里面，把這個js文件稱為模塊
目的：為了每個js文件只關注與自身有關的事情，讓每個js文件各行其職

二、什么是模塊化？CommonJS是什么？AMD和CMD又是什么？

①模塊化：指的就是遵守commonjs規(guī)范，解決不同js模塊之間相互調(diào)用問題
②CommonJS：

A.js文件中調(diào)用另一個B.js文件，一定要在A.js中引入B.js
require("B.js");

另一個被調(diào)用的js，也就是B.js一定要對外提供接口。
module.exports=B;

過程如下：
B.js

var b = "Hello,I"m module B.";
module.exports = b;//暴露一個接口，與b對接。這個接口既可以是函數(shù)，也可以是對象，甚至是數(shù)組。

A.js

var _b = require("./B.js");//實際過程中應當是B.js相對于A.js的路徑，這比使用絕對路徑去獲取要規(guī)范得多
//此時_b獲得了B.js的接口，這個接口指向B.js中的變量b
console.log( _b );//"Hello,I"m module B.";

這就實現(xiàn)了一個簡單的模塊化工作方式，即：
模塊間相互調(diào)用，協(xié)同工作，實現(xiàn)某特定功能。

④AMD規(guī)范：Async Module Define 異步模塊聲明
⑤CMD規(guī)范：Common Module Define 公共模塊聲明

⑥模塊化的核心價值：模塊化最核心的價值在于解決不同文件之間的分工和調(diào)用問題，即依賴關系。

三、模塊化的一些工具

gulp + browerify

構建步驟：

安裝gulp

``npm install gulp --save-dev //要安裝全局還是本地依賴根據(jù)實際情況來``

安裝browserify --save--dev
npm install browserify --save--dev

安裝文件輸出流工具
npm install vinyl-source-stream --save-dev

在gulpfile里編寫任務實現(xiàn)模塊化
gulpfile.js

//基本模塊引入
var gulp = require("gulp");
var brow = require("browerify");
var source = require("vinyl-source-stream");
//任務編寫
gulp.task("bundle", function() {
//將任務交付給browserify
//brow讀取入口文件后，能自動查找相互之間有依賴的關系的模塊
 return brow("./entry.js")
 .bundle()//輸出一個文件流變量（gulp的工作機制）
 .pipe(source("bundle.js"))//將文件流變量輸出為文件
 .pipe(gulp.dest("js"));//將文件最終輸出
}

webpack
參考webpack的配置及使用

requireJS

模塊聲明規(guī)范：AMD

聲明模塊

參數(shù)1：id 是這個模塊的名稱，它是一個可選參數(shù)，默認為require加載此模塊時指定的名稱，若定義這個參數(shù)，那么這個模塊名應當為“頂級”的，不允許相對名稱。

參數(shù)2：數(shù)組，為這個模塊所依賴的其他模塊

匿名函數(shù)參數(shù)：為依賴模塊在這個模塊中的接口，它們是一一對應的，因此即便不需要某個模塊的接口，但若是需要它后面模塊的接口，那也必須給它增加一個用于占位的參數(shù)。

define( "id", [ "module1", "module2" ], function( m1, m2 ) {
  return {
    arg1: m1,
    arg2: m2
  }
  //返回值即是module3的接口
});

使用步驟

下載requireJS
bower install requirejs//根據(jù)個人習慣選擇下載方式，只要保證后續(xù)引入的路徑正確

配置config文件和main.js
config.js

require.config( {
  base: "",//引入模塊的起始路徑
  //paths對象為要引入的模塊的名稱及路徑，且不需.js后綴，require默認會為文件添加.js后綴
  paths: {
    "jquery": "./jquery-1.11.0"http://這就引入了juery作為一個模塊。 PS：jquery自己已經(jīng)實現(xiàn)了AMD，并且"jquery"是一個頂級模塊名。
  }
} );

main.js

require(["jquery"], function( $ ) {
  $(document).css("background", "#000");//這就實現(xiàn)了引入使用jquery模塊，并用它進行dom操作
});

在頁面中引入

//main即是主邏輯入口文件

SeaJS

模塊聲明規(guī)范：CMD

聲明模塊

define( function( require, exports, module ) {
  var c = require("./Controller.js");
  c();
})

使用步驟

下載seajs
bower install seajs//這里根據(jù)個人習慣下載seajs的包，只要引入時路徑正確就行

配置seajs.config

seajs.config({
  base: "./", //模塊起始路徑
})
seajs.use("./main");//使用主邏輯入口文件，相當于requirejs中的data-main文件

requireJS和SeaJS都是在前端實現(xiàn)模塊化，相當于一個前端的js模塊化加載器，和webpack不一樣，webpack是通過nodejs將文件打包的。

四、模塊化案例 前端mvc架構

Vue 組件化&模塊化

React 組件化&模塊化

node.js 每個文件都是模塊

什么是MVC

后端開發(fā)的一種概念
即view( html + js + css + img ) + controller( 控制層 ) + model( 數(shù)據(jù)模型 )

前端演變了一套MVC體系：

veiw( html + css + js )
寫靜態(tài)頁面 css、js、img及效果

controller( 專注于實現(xiàn)服務和邏輯控制的層面叫做控制器 )
監(jiān)聽頁面中請求和事件，處理請求和事件；向model請求數(shù)據(jù)，得到數(shù)據(jù)后綁定到頁面

model ( 數(shù)據(jù)變量 || ajax從服務端取回的數(shù)據(jù) )
對外提供一些數(shù)據(jù)

體現(xiàn)了一種分層的概念，讓每個層面只做自己該做的行為，減少代碼耦合和冗余

為什么使用MVC？

低耦合：
MVC將業(yè)務分為三層，減少了數(shù)據(jù)與業(yè)務的耦合性，增強了各層次功能的獨立性，使得在需求改變時可能只需要改變其中一層就能完成服務；

復用性高：
三層業(yè)務功能分明，耦合度低，使各模塊可以獨立完成自身功能，降低了依賴性，具有很高的復用性。

利于批量生產(chǎn)和擴展：
復用性高使得在批量生產(chǎn)的時候可以根據(jù)需求進行模塊的重用，加快了生產(chǎn)效率。并且模塊化使得擴展也非常方便，模塊只需根據(jù)規(guī)范進行編寫，經(jīng)審核后引入便可以實現(xiàn)擴展。

利于協(xié)作開發(fā)：
擴展性強使協(xié)作開發(fā)也變得非常方便，每個人根據(jù)自己的分工設計自己的模塊，不與他人沖突，引入時也各行其職。

推廣普及度高：
由于對協(xié)作開發(fā)的友好，使得MVC模式大受開發(fā)者的歡迎，使用這個模式的產(chǎn)品的推廣和普及變得容易得多。

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.hztianpu.com/yun/80843.html

相關文章

  • seajs和requirejs的那些事兒

    摘要：遵循的是異步模塊定義規(guī)范，遵循的是通用模塊定義規(guī)范。規(guī)范的不同，導致了兩者的不同。在嘗試讓第三方類庫修改自身來支持，目前只有少數(shù)社區(qū)采納。是沒有明顯的，是明顯沒有。無這方面的支持。 發(fā)布之后發(fā)現(xiàn)存在一個顯示的問題，大家可以移步到我的簡書參考，謝謝大家?。?！我的簡書《seajs和requirejs技術指導文檔》 昨天到今天，老衲翻閱數(shù)十篇技術文檔，為了搞明白seajs（CMD）和 req...

    zorpan 評論0 收藏0

  • 2019前端面試那些事兒

    摘要：雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總新特性，語義化瀏覽器的標準模式和怪異模式和的區(qū)別使用的好處標簽廢棄的標簽，和一些定位寫法放置位置和原因什么是漸進式渲染模板語言原理盒模型，新特性，偽 雖然今年沒有換工作的打算 但為了跟上時代的腳步 還是忍不住整理了一份最新前端知識點 知識點匯總1.HTMLHTML5新特性，語義化瀏覽器的標準模式和怪...

    JeOam 評論0 收藏0

  • 2019前端面試那些事兒

    摘要：雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總新特性，語義化瀏覽器的標準模式和怪異模式和的區(qū)別使用的好處標簽廢棄的標簽，和一些定位寫法放置位置和原因什么是漸進式渲染模板語言原理盒模型，新特性，偽 雖然今年沒有換工作的打算 但為了跟上時代的腳步 還是忍不住整理了一份最新前端知識點 知識點匯總1.HTMLHTML5新特性，語義化瀏覽器的標準模式和怪...

    QLQ 評論0 收藏0

  • 說說跨域那些事兒

    摘要：首先糾正一個誤區(qū)，跨域并非瀏覽器限制了發(fā)起跨站請求的這種能力，恰恰相反，我們可以發(fā)出請求，服務端也可以接收到請求并正常返回數(shù)據(jù)，只不過在返回之后瀏覽器會阻止非同源數(shù)據(jù)，從而在控制臺打出一系列報錯信息。 首先糾正一個誤區(qū)，跨域并非瀏覽器限制了發(fā)起跨站請求的這種能力，恰恰相反，我們可以發(fā)出請求，服務端也可以接收到請求并正常返回數(shù)據(jù)，只不過在返回之后瀏覽器會阻止非同源數(shù)據(jù)（response...

    MadPecker 評論0 收藏0

  • [聊一聊系列]聊一聊WEB前端安全那些事兒

    摘要：所以今天，就和大家一起聊一聊前端的安全那些事兒。我們就聊一聊前端工程師們需要注意的那些安全知識。殊不知，這不僅僅是違反了的標準而已，也同樣會被黑客所利用。 歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog... 隨著互聯(lián)網(wǎng)的發(fā)達，各種WEB應用也變得越來越復雜，滿足了用戶的各種需求...

    AZmake 評論0 收藏0

發(fā)表評論

0條評論

aaron

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<