国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

小而合理的前端理論:rscss和rsjs

amuqiao / 1451人閱讀

摘要:對命名方式的解釋推薦的短橫線作為前綴的名可能會讓你有一點驚訝,可以這樣寫的嗎答案是的確可以,而且搭配得還相當巧妙。如果是多個組件使用的數(shù)據(jù),可以使用里的標簽。所有第三方庫的代碼可以集中到一個類似的文件,并和站點本身的代碼各自獨立。

在前端開發(fā)中,我們會嘗試去定一些規(guī)則和約定,來讓項目質(zhì)量更高,更易于維護。而對于這些規(guī)則和約定,我們也會希望它內(nèi)容簡單,容易理解。

rscssrsjs是一套比較新,也比較小巧的前端開發(fā)規(guī)則和約定,其中rs代表Reasonable System,所以可以理解為,追求“合理”的css和js。本文除了介紹它們,還會有一點補充以及我自己的看法,也推薦你點擊鏈接閱讀原作者給出的完整內(nèi)容。

從css的疑問開始

rscss希望有效地改善寫css中的這樣幾個常見問題(css哲學三問):

這個class到底什么意思?

這個class還有地方用到嗎?

我新寫的這個class,會有沖突嗎?

組件原則

rscss首先推崇的是以組件Components)為基礎(chǔ)的思考方式。在各類前端框架中,幾乎都可以看到組件,如Bootstrap和Materialize:

一個組件是這樣的感覺:

小到一個按鈕,大到整個web應(yīng)用,可見的視覺元素都可以這樣當做一個組件。

組件的命名

rscss推薦組件至少使用兩個單詞的命名,中間用短橫線(-)連接:

.search-form { /* ... */ }
.article-card { /* ... */ }
組件的元素

組件內(nèi)部的更細小的部分,當做組件的元素Elements)。

元素的命名

為了和前面的組件區(qū)分開來,元素的命名只使用一個單詞。

顯然,只有一個單詞是很容易沖突的,因此rscss建議以關(guān)系選擇符把元素和組件關(guān)聯(lián)起來:

.search-form > .field { /* ... */ }
.search-form > .action { /* ... */ }

推薦子選擇符 > 而不是包含選擇符 (空格),以更好地避免沖突:

.article-card .title { /* okay */ }
.article-card > .author { /* ? better */ }

如果確實需要用到多個單詞,直接連接它們(不使用短橫線等分隔符),以體現(xiàn)區(qū)別:

.profile-box > .firstname { /* ... */ }

為每一個組件的元素使用class名,不要使用標簽選擇符。有名字的元素會更有語義。

多種屬性或狀態(tài)

無論是組件還是元素,都可以有多種屬性或狀態(tài)Variants,也可以叫變體):

屬性或狀態(tài)的命名

使用短橫線(-)開頭來命名表示屬性或狀態(tài)的class。

/* component variants */
.like-button.-wide { /* ... */ }
.like-button.-disabled { /* ... */ }

/* element variants */
.shopping-card > .title.-small { /* ... */ }
對命名方式的解釋

rscss推薦的短橫線作為前綴的class名可能會讓你有一點驚訝,可以這樣寫的嗎?答案是的確可以,而且搭配得還相當巧妙。為什么這么說呢?請看w3c對css標識符的解釋:

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+0080 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit.

其中ISO 10646等同于Unicode??梢钥吹?,w3c特意在css標識符一般使用的英文字母、數(shù)字以及一部分Unicode字符(U+0080以上)之外,提到了短橫線(-)和下劃線(_)也是可用的。

以短橫線作為前綴的class名相當于有了一個特殊的標記,一眼就可以提醒你這是一個表示屬性或狀態(tài)的class。

組件嵌套

組件是可以嵌套的。

對應(yīng)html類似這樣:

...

...

...

嵌套中的屬性或狀態(tài)

當一個組件位于另一個組件內(nèi)部的時候,可能會想要這個組件表現(xiàn)得特別一點。這個時候,建議不要使用關(guān)系選擇符把它們耦合在一起:

.article-header > .vote-box > .up { /* ? avoid this */ }

建議的做法是為組件增加一個屬性或狀態(tài)class:

...
...

然后以這個class為基礎(chǔ)來定義特別的樣式:

.vote-box.-highlight > .up { /* ... */ }

這樣做的目的是讓一個組件的樣式不依賴其所處的位置。OOCSS的原則之一,Separate container and content,也是這樣的理念。

布局思想

rscss推薦除一些具有固定寬高的特定元素(如頭像,logo)外,
組件本身不定義任何影響布局位置的屬性:

定位(position、top、left、rightbottom

浮動(float、clear

外邊距(margin

尺寸(widthheight

這樣做的意思是說,如果把組件看做一個整體,它應(yīng)該是自適應(yīng)的。

需要定義布局位置屬性的情況

如果要定義組件的影響布局位置的屬性,建議使用關(guān)系選擇符把組件和它所處的環(huán)境關(guān)聯(lián)起來:

.article-list > .article-card {
    width: 33.3%;
    float: left;
}

.article-card { /* ... */ }
.article-card > .image { /* ... */ }
.article-card > .title { /* ... */ }
.article-card > .category { /* ... */ }

在上面這段代碼可以注意到,“組件本身的外觀”與“組件在某一環(huán)境中的位置”被明確地分離了。

輔助類

rscss推薦輔助類Helpers)多帶帶存放一個文件,且class名以下劃線(_)開頭。輔助類也常會用到!important,對應(yīng)的,應(yīng)盡可能少使用輔助類。

._pull-left { float: left !important; }
._pull-right { float: right !important; }

下劃線(_)作為前綴的class名,如前文已經(jīng)解釋過的那樣,也是作為一個特殊的標記提醒你這是一個輔助類,請謹慎使用它。

輔助類在前端框架中也很常見。

rscss與其他css理論的比較

rscss的組件(Component),元素(Element)等概念,在BEM、SMACSS這些css理論中也有類似的存在。它們比較起來是這樣的:

RSCSS BEM SMACSS
Component Block Module
Element Element Sub-Component
Layout ? Layout
Variant Modifier Sub-Module & State

關(guān)于BEM、SMACSS以及前文出現(xiàn)過的OOCSS的介紹,可以參考以前的這篇文章。

以上就是rscss的主要內(nèi)容了,下面來看看rsjs。

關(guān)注傳統(tǒng)web應(yīng)用的rsjs

rsjs關(guān)注的是非單頁應(yīng)用(non-SPA web application),也就是我們通常理解的有很多頁,主要使用jQuery,而且每個頁都可以有自己的.js文件的傳統(tǒng)網(wǎng)站。

現(xiàn)在已經(jīng)有了可遵循的JavaScript代碼本身的風格指南,因此,rsjs只對一些其他的要點提出建議,如命名空間,文件組織方式。

行為原則

rsjs推薦把由JavaScript實現(xiàn)的交互功能當做一次只影響一個組件(Component)的行為(Behavior)。下面是一個參考示例:


/* Behavior - behaviors/collapsible-nav.js */

$(function () {
  var $nav = $("[data-js-collapsible-nav]");
  if (!$nav.length) return;

  $nav
    .on("click", "[data-js-expand]", function () {
      $nav.addClass("-expanded");
    })
    .on("mouseout", function () {
      $nav.removeClass("-expanded");
    });
});

這其中包含了多項建議。

使用data屬性

建議使用html5的data自定義屬性data-js-___來標記和一個行為有關(guān)的DOM元素。

相比用ID和class來選取元素,這種data屬性的形式一方面更具有明確的意義,提醒你這是一個和交互行為有關(guān)的元素,另一方面更易于復用,在任何DOM結(jié)構(gòu)里添加這樣的data屬性即可獲得對應(yīng)的行為。

為每個行為多帶帶建立文件

建議每一個行為對應(yīng)的JavaScript代碼都分離到多帶帶的文件里,并以文件名明示。文件名可以參照data-js-___這個屬性名里的對應(yīng)名稱,這樣,根據(jù)屬性名就很容易找到對應(yīng)的JavaScript代碼。

一個可能的文件目錄結(jié)構(gòu):

└── javascripts/
    └── behaviors/
            ├── collapsible-nav.js
            ├── avatar-hover.js
            ├── popup-dialog.js
            └── notification.js
不使用行內(nèi)JavaScript

在html中不要以onclick=""等形式添加行內(nèi)JavaScript代碼。通過保持行為的邏輯代碼獨立于html,可以使代碼更易于維護。

從rsjs的內(nèi)容來看,在已有React、Vue等庫的今天,“行為獨立于內(nèi)容”的約定仍然對傳統(tǒng)的以jQuery為主的Web應(yīng)用有一定意義。

初始數(shù)據(jù)的獲取方式

傳統(tǒng)Web站點的一個常見的場景是,后端語言在頁面中預先輸出某些數(shù)據(jù),然后JavaScript會取用它們。你可能見到過下面這樣

rsjs建議的方案是,如果這些數(shù)據(jù)只需要一個組件使用,可以利用之前提到的data屬性(保存為值),由行為的JavaScript代碼來自行取出。


如果是多個組件使用的數(shù)據(jù),可以使用里的meta標簽。


  ...
  
  

  
  
  
命名空間

rsjs建議使用盡可能少的全局變量。共用的類,函數(shù),放到單個Object里,比如叫App

if (!window.App) window.App = {};

App.Editor = function() {
  // ...
};

在多個行為之間可復用的幫助方法,可以多帶帶建立Object,并將它們分文件保存在helpers/

/* helpers/format_error.js */
if (!window.Helpers) window.Helpers = {};

Helpers.formatError = function (err) {
  return "" + err.project_id + " error: " + err.message;
};
第三方庫的處理

rsjs建議如果引入第三方庫,也做成組件行為的形式。比如,Select2的功能,可以只影響帶有屬性data-js-select2的元素。

// select2.js -- affects `[data-js-select2]`
$(function () {
  $("[data-js-select2]").select2();
});

所有第三方庫的代碼可以集中到一個類似vendor.js的文件,并和站點本身的代碼各自獨立。這樣,當站點更新代碼的時候,用戶可以直接利用緩存,而并不需要再次獲取這些第三方庫代碼。

rsjs對自己的歸納

rsjs認為自身的內(nèi)容更偏向于對開發(fā)者友好,也就是更易于維護,而在性能上(對用戶友好)可能沒有做到最好。以上提到的各項建議,也是有利有弊,rsjs只是在權(quán)衡了利弊的基礎(chǔ)上得到的更利于長期維護的結(jié)論。

rsjs不是萬金油,它不適用于單頁應(yīng)用(SPA)等前端功能很復雜的情況。它關(guān)注的是的那種多個網(wǎng)頁,每個網(wǎng)頁一點JavaScript交互的傳統(tǒng)網(wǎng)站。

結(jié)語

rscss和rsjs所用的“合理”是一個很取巧的表述,不是完美,不是最好,也不是出色,它只是在說希望代碼能“合乎道理”。rscss和rsjs大概就是這樣,以簡約的風格,不長的篇幅,追求著“小而合理”。

目前rsjs還在更新中(work-in-progress),rscss則已經(jīng)比較成熟。很推薦試試其中你也認為合理的建議!

(重新編輯自我的博客,原文地址:http://acgtofe.com/posts/2017...)

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

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/115512.html

相關(guān)文章

  • 小而合理前端理論rscssrsjs

    摘要:對命名方式的解釋推薦的短橫線作為前綴的名可能會讓你有一點驚訝,可以這樣寫的嗎答案是的確可以,而且搭配得還相當巧妙。如果是多個組件使用的數(shù)據(jù),可以使用里的標簽。所有第三方庫的代碼可以集中到一個類似的文件,并和站點本身的代碼各自獨立。 在前端開發(fā)中,我們會嘗試去定一些規(guī)則和約定,來讓項目質(zhì)量更高,更易于維護。而對于這些規(guī)則和約定,我們也會希望它內(nèi)容簡單,容易理解。 rscss和rsjs是一...

    Moxmi 評論0 收藏0
  • 編寫小而美函數(shù)藝術(shù)

    摘要:函數(shù)需要小要避免編寫職責冗雜的龐大函數(shù),而需要將它們分離成很多小函數(shù)。另一方面小而能夠自解釋的函數(shù)讀起來也會讓人愉悅,方便開展之后的工作。最終我們最初的龐大函數(shù)被拆分成下面這些函數(shù)在中嘗試這就是編寫小而美的函數(shù)的藝術(shù)。 原文鏈接:https://dmitripavlutin.com/th...譯者:阿里云-也樹 隨著軟件應(yīng)用的復雜度不斷上升,為了確保應(yīng)用穩(wěn)定且易拓展,代碼質(zhì)量就變的越來...

    Neilyo 評論0 收藏0
  • Web移動開發(fā)基本概念

    摘要:移動客戶端的開發(fā)類型原生,也就是完全使用移動設(shè)備系統(tǒng)語言寫的客戶端,就是純,安卓就是純就是用戶看到的界面體驗到的交互都是原生的。 前端是個很大的概念,我的理解是用戶能夠看到,直接接觸到的層面都算是前端,比如IOS客戶端界面,安卓客戶端界面,網(wǎng)頁界面,甚至PC/MAC 桌面端軟件界面;現(xiàn)在最常見的說法一般是指Web前端,也就是針對于網(wǎng)頁端開發(fā)的工作。 Web App就是以瀏覽器作為客戶端...

    vvpale 評論0 收藏0
  • Web移動開發(fā)基本概念

    摘要:移動客戶端的開發(fā)類型原生,也就是完全使用移動設(shè)備系統(tǒng)語言寫的客戶端,就是純,安卓就是純就是用戶看到的界面體驗到的交互都是原生的。 前端是個很大的概念,我的理解是用戶能夠看到,直接接觸到的層面都算是前端,比如IOS客戶端界面,安卓客戶端界面,網(wǎng)頁界面,甚至PC/MAC 桌面端軟件界面;現(xiàn)在最常見的說法一般是指Web前端,也就是針對于網(wǎng)頁端開發(fā)的工作。 Web App就是以瀏覽器作為客戶端...

    ivan_qhz 評論0 收藏0

發(fā)表評論

0條評論

amuqiao

|高級講師

TA的文章

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