現(xiàn)在JavaScript的發(fā)展速度很快，有了很多的功能，被用到了更多的領(lǐng)域。JS社區(qū)的人已經(jīng)瘋了，提出了JoT的概念，即“JavaScript of Things”，萬(wàn)物皆用JavaScript，是不是很熟悉？對(duì)的對(duì)的，最近一直大熱的物聯(lián)網(wǎng)（Internet of Things，簡(jiǎn)稱IoT）便是他們的下一個(gè)發(fā)展的目標(biāo)，而這次主角只有一個(gè)弱類型語(yǔ)言——JavaScript，企圖統(tǒng)一世界。作為JS的好姬友，HTML也升級(jí)成HTML5而成為開發(fā)者的新寵兒。再來看看同是三劍客之一的CSS，雖然CSS3有了很多新特性，但是由于CSS本身的功能局限性，以及模塊化困難而造成的諸多不便，使很多開發(fā)者走向了極端，即舍棄CSS，改用JS和JSON來編寫樣式（CSS：你咋不上天?。谑钦Q生了諸如 reactcss，Radium，jsxstyle，react-style 之類的模塊化樣式。此外，還有一種主流的CSS模塊化解決方案是，將CSS與JS結(jié)合，用JS來管理CSS模塊，比如CSS Modules。這些模塊化的樣式為管理樣式帶來了便利，同時(shí)也為CSS注入了新活力。
react.js中的CSS模塊化實(shí)現(xiàn)方法
今天我們先來談?wù)剅eact.js中自帶的CSS模塊化語(yǔ)法（注意這里的CSS模塊化寫法是react內(nèi)有的，和reactCSS與react-style這些可維護(hù)模塊不一樣），這是一個(gè)完全使用JavaScript來定義樣式的方法。與曾經(jīng)的鏈入外部樣式表不同，react.js更提倡inline style，即內(nèi)嵌式樣式表。
* BEFORE！*
首先，我們得入門 react.js，得引入react三件套：
<!-- react -->
<script type="text/javascript" src="js/browser.min.js" ></script>
<script type="text/javascript" src="js/react.min.js" ></script>
<script type="text/javascript" src="js/react-dom.min.js" ></script>
一定要注意** 順序**！
* START！*
- ** 第一種**，也是最容易理解的一種寫法，即普通地使用class選擇器來寫CSS樣式：
/*common.css*/
.forExample {
background-color: skyblue;
color: white;
}
/*common.js*/
var ForExample = React.createClass({
render: function() {
return (
<div className="forExample">
Just for Fun!
</div>
);
}
});
ReactDOM.render(
<ForExample />,
document.getElementById("select1")
);
- ** 第二種**，也是最直接的寫法，直接在虛擬DOM上寫入內(nèi)聯(lián)樣式，即inline style：
var ForExample = React.createClass({
render: function() {
return (
<div style={{
backgroundColor: "skyblue",
color: "white"
}}>
Just for Fun!
</div>
);
}
});
ReactDOM.render(
<ForExample />,
document.getElementById("select2")
);
- ** 第三種**，稍微復(fù)雜點(diǎn)，但是可以重復(fù)利用，維護(hù)起來很方便，而且也很美觀：
var forExample = {
backgroundColor: "skyblue",
color: "white"
}
var ForExample = React.createClass({
render: function() {
return (
<div style={forExample}>
Just for Fun!
</div>
);
}
});
ReactDOM.render(
<ForExample />,
document.getElementById("select3")
);
- ** 第三種 plus**，一種充分利用JSON結(jié)構(gòu)來寫的樣式，更有條理，易于維護(hù)和引用：
var colour = {
text: {
red: {
color: "#e65051",
},
gray: {
color: "#a0a0a0",
},
white: {
color: "#FFFFFF",
}
},
bg: {
red: {
backgroundColor: "#e65051",
},
gray1: {
backgroundColor: "#ededed",
},
gray2: {
backgroundColor: "#f7f7f7",
},
},
};
var ForExample = React.createClass({
render: function() {
return (
<div style={colour.text.red}>
Just for Fun!
</div>
);
}
});
ReactDOM.render(
<ForExample />,
document.getElementById("select3s")
);
當(dāng)然，如果你想對(duì)一個(gè)目標(biāo)引用多個(gè)樣式的話，就要用到JSON數(shù)據(jù)的拼接。方便點(diǎn)，可以引入jQuery文件，使用extend()方法，如：
var ForExample = React.createClass({
render: function() {
return (
<div style={$.extend({}, colour.text.red, colour.bg.red)}>
Just for Fun!
</div>
);
}
});
- 第四種，更復(fù)雜的動(dòng)態(tài)樣式，這就要用到react中的state來重新觸發(fā)渲染，以下就是一個(gè)點(diǎn)擊（onClick）后文字變色變大的demo：
var ChangeGame = React.createClass({
getInitialState: function() {
return {colorX: "skyblue", fontSizeX: "20px"};
},
guessWhat: function(event) {
this.setState({colorX: "blue", fontSizeX: "50px"});
},
render: function() {
return (
<div onClick={this.guessWhat} style={{color: this.state.colorX, fontSize: this.state.fontSizeX}}>
變色，變大！
</div>
);
}
});
ReactDOM.render(
<ChangeGame />,
document.getElementById("select4")
);
這里的觸發(fā)事件也很多，比如onKeyDown、onCopy等等，同樣可以做到模擬CSS各事件。
* TO BE CONTINUED！*
然而，這些并不是實(shí)際react工程中常用的編寫樣式的方式，常用的一般是文章開始時(shí)提到的一些CSS模塊化組件。這些，我們下次再說吧！( ?? ω ?? )y
