資訊專欄INFORMATION COLUMN
摘要：為了有更好的代碼組織結(jié)構(gòu)和讓程序耦合度更低我們可以嘗試的把他組織成一個(gè)模塊。測(cè)試結(jié)果運(yùn)行兩個(gè)程序，可以很明顯的發(fā)現(xiàn)第二種比第一種的速度快很多，因?yàn)榈诙N調(diào)用，避免了全局變量，畢竟全局變量的查找是比較耗時(shí)的，并且降低了程序的耦合度。
前言：在平常我們實(shí)現(xiàn)代碼的過(guò)程中可能有一塊功能能多帶帶成為一個(gè)模塊包含幾個(gè)方法或是幾個(gè)參數(shù)。為了有更好的代碼組織結(jié)構(gòu)和讓程序耦合度更低我們可以嘗試的把他組織成一個(gè)模塊。
關(guān)于IIFE：在把功能模塊化之前，我們先來(lái)了解一個(gè)概念I(lǐng)IFE(立即調(diào)用函數(shù)表達(dá)式)，看一下下面這兩段程序。
console.time()
var s = 0;
for (var i = 0; i < 1000000; i++) {
s += i;
};
console.log(s);
console.timeEnd();
console.time();
(function x() {
var s = 0;
for (var i = 0; i < 1000000; i++) {
s += i;
};
console.log(s);
})();
console.timeEnd();
測(cè)試結(jié)果：
default: 17.2ms; default: 3.9ms;
運(yùn)行兩個(gè)程序，可以很明顯的發(fā)現(xiàn)第二種比第一種的速度快很多，因?yàn)榈诙NIIFE調(diào)用，避免了全局變量，畢竟全局變量的查找是比較耗時(shí)的，并且降低了程序的耦合度。
進(jìn)入正題，假設(shè)我們要實(shí)現(xiàn)一個(gè)人的功能（自我介紹，穿。。。）現(xiàn)在我們來(lái)編寫(xiě)這模塊。
var person = (function() {
var name = "",
age = 0;
//初始化
function init(username, userage) {
name = username;
age = userage;
}
//自我介紹
function selfintro() {
console.log("我是" + name + "今年" + age);
}
//吃
function eat(food) {
console.log("我是" + name + "我在吃" + food);
}
//方法集成為一個(gè)對(duì)象
var personAPI = {
init : init,
selfintro : selfintro,
eat : eat
};
//暴露對(duì)外接口
return personAPI;
})();
//調(diào)用，先對(duì)這個(gè)人進(jìn)行初始化，在調(diào)用行為函數(shù)
person.init("cws", 18);
person.selfintro();
person.eat("西瓜");
測(cè)試結(jié)果：
我是cws今年18 我是cws我在吃西瓜
這樣是不是把我們的人的模塊獨(dú)立出來(lái)了，讓程序更加的清晰，降低了耦合度。
這只是比較簡(jiǎn)單的一個(gè)功能，我把一個(gè)原生的大圖滾動(dòng)用模塊化封裝了一下，具體可參考：原生實(shí)現(xiàn)大圖滾動(dòng)模塊化demo
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/91161.html
摘要：一個(gè)復(fù)雜的應(yīng)用都是由簡(jiǎn)單的應(yīng)用發(fā)展而來(lái)的隨著越來(lái)越多的功能加入項(xiàng)目代碼就會(huì)變得越來(lái)越難以控制本文章主要探討在大型項(xiàng)目中如何對(duì)組件進(jìn)行組織讓項(xiàng)目具備可維護(hù)性系列目錄類型檢查組件的組織樣式的管理組件的思維狀態(tài)管理目錄組件設(shè)計(jì)的基本原則基本原則高 一個(gè)復(fù)雜的應(yīng)用都是由簡(jiǎn)單的應(yīng)用發(fā)展而來(lái)的, 隨著越來(lái)越多的功能加入項(xiàng)目, 代碼就會(huì)變得越來(lái)越難以控制. 本文章主要探討在大型項(xiàng)目中如何對(duì)組件進(jìn)行組...
摘要：也可以和預(yù)處理器混用目前看下來(lái)，它只對(duì)名做哈希，也就是說(shuō)然而這個(gè)算是一個(gè)有意思的方式，首先它依賴于，而并不局限于的開(kāi)發(fā)，任何前端項(xiàng)目都可以使用，那么就也都可以使用的概念，不知道這個(gè)會(huì)有怎么樣的發(fā)展，感覺(jué)可以嘗試。 React的組件式開(kāi)發(fā)，讓我們可以利用其Component Model，專注于單個(gè)組件的邏輯開(kāi)發(fā)，其中還包括組織組件的樣式。先聲明，本文并不是webpack配置教程，不會(huì)介紹...
摘要：自從年提出以來(lái)。它就成為一個(gè)領(lǐng)先的模塊系統(tǒng)，用來(lái)組織你的代碼方式之一。換句話說(shuō)，你的樣式中盡量不要使用標(biāo)簽或者標(biāo)識(shí)符。我們必須使用來(lái)創(chuàng)建對(duì)象，通過(guò)在類中調(diào)用，將其合在一起。如果你不在刻意在中追求語(yǔ)義化，你仍然可以使用。 自從2008年Nicole Sullivan提出Object-Oriented CSS(OOCSS)以來(lái)。它就成為一個(gè)領(lǐng)先的模塊系統(tǒng)，用來(lái)組織你的CSS代碼方式之一。 ...
閱讀 3915·2021-11-24 09:38
閱讀 3251·2021-11-15 11:37
閱讀 867·2021-11-12 10:36
閱讀 3624·2021-10-21 09:38
閱讀 3303·2021-09-28 09:36
閱讀 2505·2021-09-22 16:01
閱讀 5162·2021-09-22 15:09
閱讀 1316·2019-08-30 15:55
