AngularJS 2.0會有哪些新特性？

ngularJS已然成為Web應用開發世界里最受歡迎的開源JavaScript框架。自成立以來，見證其成功的是驚人的經濟增長以及團體的支持與采用——包括個人開發者、企業、社區。

Angular已經變成一個構建復雜單頁面應用的客戶端MVW框架（Model-View-Whatever）。它在應用測試和應用編寫方面都扮演重要角色，同時簡化了開發過程。

Angular目前的版本為1.3，該版本穩定，并被谷歌（框架維護者）用于支持眾多應用（據估計，在谷歌有超過1600個應用運行于Angular1.2或1.3）。Angular 2.0正式宣布與去年10月份的尼日利亞會議上，該版本不會是一個復雜的重大更新。

為什么推出Angular 2.0？

在進一步討論Angular 2.0（估計發布日期為2015年底）之前，讓我們簡單的思考下新版本背后的哲學。Angular 2.0開發始于解決以下問題：

移動：新的版本將專注于移動應用的開發。依據是它更容易處理桌面方面的事情，一旦挑戰涉及到移動（性能、加載時間），注重這方面會使問題得到解決。
模塊化：各個模塊將從Angular的核心中移除，從而獲得更好的性能。這意味著你可以選擇你需要的零件。
現代化：Angular 2.0將把ES6和“常青”現代瀏覽器（自動更新到最新版本）作為目標。這意味著開發者可以專注于業務領域相關的代碼。

有哪些爭議？

在尼日利亞會議上并沒有提及遷移到2.0版本的途徑。同時也指出跳轉到2.0版本將會打破原有的1.3版本應用，不會有任何的向后兼容性。自從那時開始開發者社區一直充斥著不確定性和猜測，一些開發者也開始質疑是否值得開始一個新的Angular 1.3項目。

有哪些改變？

AtScript

AtScript是ES6的一個父集，被用于開發Angular 2.0。它是由Traceur編譯器（連同ES6）處理來生成ES5代碼并用TypeScript類型語法來生成執行時間的斷言，以此來代替編譯時的檢查。不過AtScript并不是強制的，你仍然能夠使用純JavaScript/ES5代碼代替AtScript來編寫Angular應用。

改善依賴入駐（DI）

依賴注入（Dependency injection ）模式的基本思想是客戶類Client不用自己來初始化它所依賴的成員變量IServer，使用一個獨立的對象創建IServer適當的實現類并將它賦值給Client的成員變量。它對模塊開發與組件隔離特別有益。Angular 2.0將會解決Angular 1.X所存在的這個方面的問題。添加丟失的的特性，如child injectors和lifetime/scope控制。

Annotations

AtScript提供工具關聯元數據和功能。這有助于構建提供必要信息到DI庫的對象實例（檢查相關元數據時調用一個函數或創建一個類的實例）。它還容易通過提供一個注解重載參數數據。

Child Injectors

一個child injector繼承了其父類的所有性能服務。根據要求，不同類型的對象可以被調用，并且自動覆蓋不同的范圍。

實例范圍

改進的DI庫將以實例范圍為特性，這在使用Child Injectors和自己的范圍標識符時變得更加強大。

模板和數據綁定

在開發應用中，模板和數據綁定將齊頭并進。

動態載入

這是當前Angular版本所缺失的一個特性，不過將在Angular 2.0中出現。這將讓開發者可以在忙碌中添加新的指令或控制器。

模板

在Angular 2.0中，模板編譯過程將是異步的。由于代碼是基于ES6模塊規格，該模塊加載器將通過簡單的引用組件定義來加載依賴關系。

指令

在Angular 2.0中將會出現三種指令：

組件指令——這些將通過JavaScript、HTML或一個可選的CSS樣式表的封裝邏輯創建可重復使用的組件。
裝飾指令——這些指令將被用來裝飾元素（例如添加一個工具提示，或使用ng-show/ng-hide來顯示/隱藏元素）。
模板指令——這些將把HTML改變為可重復使用的模板。模板的實例化以及嵌入到DOM可以完全由指令控制。這樣的例子包括ng-if和ng-repeat。

路由方案

初始的Angular路由是被設計用于處理一些簡單的情況。然而，隨著框架的發展，越來越多的功能被添加。在Angular 2.0中路由已經是可擴展的，它將包含以下基本功能：

簡單的基于json路由配置；
優于配置的可選協定；
靜態的。參數化的路由模式；
URL解析器；
支持查詢字符串；
使用推送狀態或Hashchange；
導航模型（生成一個導航UI）；
文檔標題更新；
404路由處理；
位置服務；
歷史操作。

現在，讓我們來看看那些讓Angular 2.0達到新高度的路由特性：

子路由

子路由將把應用的每個組件通過為它們提供各自路由的方式轉換成更小的應用，這將有助于封裝整個應用的特性集。

屏幕激活

這將幫助開發者通過一組can*回調更出色的控制導航的生命周期：

canActivate——允許/阻止導航到新的控制器；
activate——響應成功到新的控制器的導航；
canDeactivate——允許/阻止導航遠離舊的控制器；
deactivate——響應成功遠離舊的控制器的導航；

這些回調將允許開發者返回Boolean值或一個命令（為了更低層次上的控制）。

設計

所有的這些邏輯都是使用流水線結構構建的，使得它非常容易將自己的步驟添加到流水線中或移除默認的東西。此外，它的異步特性將允許開發者使用服務器請求進行身份驗證或為控制器加載數據，不過這還在規劃中。

日志

Angular 2.0將包含一個被稱為diary.js的日志服務——一個非常有用的特性，測量你在應用中時間花費在哪里。

Scope

$scope將從Angular 2.0中移除，取而代之的是ES6類。

結論

隨著發布日期的臨近，圍繞Angular 2.0的興奮和聲音將會加劇。是否打破改變是一件好事？我們無法知道，不過反對者感到緊張是可以理解的，因為明顯缺乏遷移的計劃。Duang的一下就來了。不過其既然要來了，我們可以做的就是積極的迎接它。

原文來自：sitepoint

司使用python+selenium+pytest來做UI自動化測試，我經歷了從0開始搭建自動化工程、開發測試報告web服務、編寫測試用例，經過了一段時間的磨合，感覺已經比較順手了，這里梳理下我采用的自動化工程目錄組織結構。

整體目錄結構及說明

整個目錄結構如下，其中第一級目錄和文件有：

conf目錄：主要用來存放項目運行環境、執行環境相關的配置參數
logic目錄：與項目有關的關鍵字、業務邏輯封裝放到此目錄
testsuite目錄：測試用例在此目錄編寫，pytest默認約定test開頭的文件和方法為測試用例，不滿足條件的不會被執行，內部建議按照特性建立文件夾對測試用例進行分類
utils目錄：把與業務無關的實用程序放到此目錄，比如自己寫的輔助方法
.gitignore文件：git提交忽略文件配置文件
conftest.py文件：pytest的fixture方法可以寫在這里，測試用例使用其中的fixture不需要使用import顯示引入，不過目前我沒有使用這個文件
pytest.ini文件：可以針對pytest進行一些配置，如日志格式和級別等，后面會展示其配置內容
requirements.txt文件：把需要安裝的python第三方庫寫入此文件，需要使用該工程時只需要執行pip install -r requirements.txt就可以一次性安裝全部依賴
runall.py文件：執行全部用例入口，主要用來給jenkins等CI/CD工具拉起自動化任務使用，后面會展示其內容
README.md文件：自動化工程說明文檔

project_name
	conf
		settings.py
	logic
		__init__.py
		logic.py
		mysql.py
	testsuite
		feature01
			test_feature01.py
		feature02
			test_feature02.py
	utils
		utils.py
	.gitignore
	conftest.py
	pytest.ini
	requirements.txt
	runall.py
	README.md

目錄組織示例

pytest.ini配置

下面的配置主要是針對日志格式和級別進行了設置，log_cli開頭的配置是針對控制臺輸出設置的，log_file開頭的是針對輸出到日志文件來設置的，會生成run.log日志文件，在./log目錄下，如果log目錄不存在會自動創建。

[pytest]
log_cli=1
log_cli_level=INFO
log_cli_date_format=%Y-%m-%d-%H-%M-%S
log_cli_format=%(asctime)s - %(filename)s - %(module)s - %(funcName)s - %(lineno)d - %(levelname)s - %(message)s
log_file=./log/run.log
log_file_level=INFO
log_file_date_format=%Y-%m-%d-%H-%M-%S
log_file_format=%(asctime)s - %(filename)s - %(module)s - %(funcName)s - %(lineno)d - %(levelname)s - %(message)s

requirements.txt

列舉依賴的python第三方庫，可以指定版本，也可以不指定，不指定的情況下默認安裝最新版本。文件示例內容如下，其中selenium、pytest、pytest-html、pytest-xdist是必須的，其他需要根據自己的項目情況來定。

xlrd >=1.2.0
openpyxl >=3.0.4
requests >=2.24.0
psutil >=5.7.2
pymysql >=0.10.0
selenium
pytest
pytest-html
pytest-repeat
elasticsearch
pyyaml
jsonpath
python-dateutil
paramiko
pytest-xdist
xlwt
pandas

runall.py

runall.py文件主要是給jenkins等CI/CD工具拉起自動化任務使用的，它的主要作用就是執行pytest.main方法來使用pytest框架來收集并執行測試用例，最終會生成html和xml兩份報告。

import os
import time
import pytest

from conf.settings import *

def new_report_dir():
    return time.strftime("%Y-%m-%d")

def new_report_name(project="demo", file_type="html"):
    """file_type： 文件后綴名，默認為html
    """
    now=time.strftime("%Y-%m-%d_%H-%M-%S")
    report_name="{2}_{0}.{1}".format(now, file_type, project)
    return report_name

if __name__=="__main__":
    report_base_dir=r".\report"
    report_html=os.path.join(report_base_dir, new_report_dir(), new_report_name())
    report_xml=os.path.join(report_base_dir, new_report_dir(), new_report_name("demo", "xml"))
    pytest.main(["--html={0}".format(report_html), 
                "--junit-xml={0}".format(report_xml), 
                "-n {0}".format(CPU_NUM),
                "--dist=loadfile"])

但是，pytest默認生成的html報告并不友好，如果還想把歷史數據做下統計分析就需要使用生成的xml報告了。比如通過flask框架可以快速定制開發出web服務，通過持續采集解析xml報告寫入數據庫作為數據源，不僅能更好地展現單次測試報告的數據，而且還能分析歷史數據的統計曲線。

瀏覽器中實現用戶界面時，請盡可能減少瀏覽器帶來的差異，以使用戶界面具有可預測性。跟蹤所有這些差異很困難，因此，我整理了一些常見問題及其解決方案方便大家查看。

1.重置button和input元素的背景

添加一個按鈕時，重置它的背景，否則它會在不同的瀏覽器中看起來不同。在下面的例子中，同樣的按鈕在 Chrome 和 Safari 中，后者添加了默認的灰色背景。

重置按鈕的樣式可以解決些問題：

button {
  appearance: none;
  background: transparent;
}

事例源碼：https://codepen.io/shadeed/pen/MzWBYv

2.Overflow: scroll Vs auto

要限制元素的高度并允許用戶在其中滾動，可以添加overflow: scroll-y。在 macOS 上的Chrome上會很好看。然而，在 Windows上，滾動條總是在那里(即使內容很短)。這是因為無論內容如何，scroll-y都會顯示滾動條，這時候我們可以使用overflow: auto，它只會在需要時顯示滾動條。

.element {
    height: 300px;
    overflow-y: auto;
}

事例源碼：https://codepen.io/shadeed/pen/vQYwXj

3.添加 flex-wrap

對包含多個子元素使用 display: flex，如果元素過多，所有子元素會被壓縮，如下所示：

<div class="wrapper">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>


.wrapper {
  display: flex;
}

.item {
  flex: 0 0 120px;
  height: 100px;
}

面的例子在大屏幕上非常有用。在移動設備上，瀏覽器會顯示一個水平滾動條。

解決方法就是使用 flex-wrap: wrap，這樣當水平空間不夠時，瀏覽器會幫我們自動換行。

事例源碼：https://codepen.io/shadeed/pen/JejVLG

4. 當 Flex 項目的數量是動態的時，不要使用justify-content: space-between

當將justify-content: space-between應用于flex容器時，它將分配元素并在元素之間留出相等的空間。我們的示例有8個卡片項，它們看起來不錯。如果，由于某種原因，項目的數量是7呢?第二行元素看起來與第一行不同。

在這種情況下，使用CSS網格會更合適。

事例源碼：https://codepen.io/shadeed/pen/XyWLLo

5. 長單詞和鏈接

當在移動屏幕上閱讀一篇文章時，一個長單詞或內聯鏈接可能會導致出現水平滾動條。使用CSS word-break可以防止這種情況的發生

解決方法：

.article-content p {
    word-break: break-all;
}

6.透明漸變

當漸變是以 transparent 開始或者結束的時候，在Safari中看起來會有點黑。這是因為Safari不能識別關鍵字transparent，這里可以通過rgba(0,0,0,0)來解決該問題。請注意下面的截圖：

出問題的代碼:

.section-hero {
  background: linear-gradient(transparent, #d7e0ef), #527ee0;
  /*Other styles*/
}

解決方式:

.section-hero {
  background: linear-gradient(rgba(0, 0, 0,0), #d7e0ef), #527ee0;
  /*Other styles*/
}

7.關于CSS網格中auto-fit和auto-fill之間的差異的誤解

在CSS grid中，repeat函數可以創建響應列布局，而不需要使用媒體查詢。要做到這一點，使用auto-fill或auto-fit即可。

.wrapper {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

簡而言之，auto-fill將在不擴展列寬的情況下對列進行排列，而auto-fit只會在列為空的情況下將列折疊到零寬度。

8. 當視口不夠高時將元素固定在屏幕頂部

如果將元素固定在屏幕頂部，如果視口不夠高會發生什么情況?很簡單:它會占用屏幕空間，因此，用戶瀏覽網站時可用的垂直區域就會變小，這會影響用戶的體驗。解決方法不是當用戶往下劃動的時候，固定頭部需要回到文檔中跟隨屏幕滾動，可以使用position: sticky來快速達到該效果。

@media (min-height: 500px) {
    .site-header {
        position: sticky;
        top: 0;
        /*other styles*/
    }
}

在上面的代碼段中，我們告訴瀏覽器僅在視口的高度等于或大于 500`像素時才標題固定在頂部。

使用 position: sticky 還需要指定 top 值，不然它無法正常工作。

事例源碼：https://codepen.io/shadeed/pen/oQLYmg

9.設置圖像的最大寬度

當添加圖像時，定義max-width: 100%，這樣當屏幕很小時圖像就會改變大小。否則，瀏覽器將顯示一個水平滾動條。

img {
    max-width: 100%;
}

10. 使用 CSS grid 定義 main 和 aside 元素

CSS grid 常規布局中 main 和 aside 部分，為了讓布局更加的完美，我們應該讓 aside 高度等于 main 高度，即使 aside 內容為空。

要解決這個問題，將aside元素對齊到其父元素的開始位置，這樣它的高度就不會擴大。

.wrapper {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-gap: 20px;
}

// align-self will tell the aside element to align itself with the start of its parent.
aside {
  grid-column: 1 / 4;
  grid-row: 1;
  align-self: start;
}

main {
  grid-column: 4 / 13;
}

事例源碼: https://codepen.io/shadeed/pen/yQJgXr

11. 向 SVG 添加 fill

有時，在使用 SVG 時，如果在 SVG 中以內聯方式添加了fill屬性，填充就不會像預期的那樣工作。要解決這個問題，可以從SVG本身刪除fill屬性，也可以覆蓋fill: color。

舉個例子：

.some-icon {
    fill: #137cbf;
}

如果 SVG 具有內聯fill，這將不起作用，應該這樣寫:

.some-icon path {
    fill: #137cbf;
}

12. 使用偽元素

我經常使用偽元素，它們為我們提供了一種創建偽造元素的方法，主要用于裝飾目的，而無需將其添加到HTML中。

使用它們時，我們經常會忘記下面這些步驟：

添加content: ""屬性
設置 width 和 height 時沒有設置 display 導致 width 和 height無效

在使用偽元素的時候，記得要添加 content 屬性，不然會無法顯示其內容，別外也需要定義 display ，設置寬高才有效。

13. 使用 display: inline-block 會出現怪異的空格

為多個元素設置 display: inline-block或 display: inline，會在每個元素之間創建一個很小的空格。之所以會添加空格，是因為瀏覽器將元素解釋為單詞，因此在每個元素之間添加了一個字符空間。

在下面的示例中，每個項目的右側都有8px的空間，但是由于使用display：inline-block導致增加了一個空格，最后結果是12px，這不是期望的結果。

一個簡單的修復方法是在父元素上設置font-size: 0。

ul {
    font-size: 0;
}

li {
    font-size: 16px;
}

事例源碼：https://codepen.io/shadeed/pen/qQYPxV

14. 為 input 元素配置 label 記得加上 for="ID"

在處理表單元素時，可以為label元素分配一個id，這將增加表單的可訪問性，當label 元素被點擊時，對應的 input 也會獲取焦點。

<label for="emailAddress">Email address:</label>
<input type="email" id="emailAddress">

15. 字體與交互式HTML元素不兼容

當為整個文檔設置字體時，它們不會應用于input、button、select和textarea等元素。它們在默認情況下不會繼承，因為瀏覽器將默認系統字體應用于它們。

要修復此問題，需要我們手動分配字體屬性：

input, button, select, textarea {
  font-family: your-awesome-font-name;
}

16. 水平滾動條

由于元素的寬度，有些元素會導致出現水平滾動條。

找到這個問題的原因最簡單的方法就是使用 「CSS outline」。Addy Osmani 分享了一個非常方便的腳本，可以添加到瀏覽器控制臺，列出頁面上的每個元素。

[].forEach.call($$("*"), function(a) {
  a.style.outline="1px solid #" + (~~(Math.random() * (1 << 24))).toString(16);
});

17. 壓縮或拉伸圖像

在CSS中調整圖像大小時，如果寬高比與圖像的寬度和高度不一致，則可能會對其進行壓縮或拉伸。

解決方法很簡單:使用CSS object-fit，它的功能類似于ackground-size: cover用于背景圖像。

img {
    object-fit: cover;
}

使用object-fit并不是在所有情況下都適用。有些圖片需要在沒有裁剪或調整大小的情況下顯示，有些平臺會強制用戶上傳或裁剪一個定義大小的圖片。例如，Dribbble接受以800 * 600像素上傳的縮略圖。

18. 為 input 添加正確的 type

為 input 添加正確的 type，會增強移動瀏覽器中的用戶體驗，并使其更易于用戶訪問。

假設有如下的 HTML 代碼：

<form action="">
  <p>
    <label for="name">Full name</label>
    <input type="text" id="name">
  </p>
  <p>
    <label for="email">Email</label>
    <input type="email" id="email">
  </p>
  <p>
    <label for="phone">Phone</label>
    <input type="tel" id="phone">
  </p>
</form>

下面是每個 input 元素在移動端輸入的樣子。

19. RTL 布局的電話號

在從右到左的布局中添加電話號碼(如+ 972-123555777)時，加號將定位在電話號碼的末尾。要解決這個問題，重新分配電話號碼的方向即可。

p {
    direction: ltr;
}

總結

里提到的所有問題都是我在前端開發工作中遇到的最常見的問題，希望能對你們有些幫助。

作者：Chidume Nnamdi 譯者：前端小智來源：smashingmagazine

原文：https://www.reddit.com/r/css/comments/aakwgr/common_css_issues_for_frontend_proects/

在線咨詢

上一篇：手把手教你寫一個簡易的微前端框架
下一篇：網絡安全之邏輯漏洞(越權)

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商