前沿拓展:
ie6 下載
百度 IE6 之后就能找到你要的東西了,不過還要在你電腦里設置上不 。初始化組件對象讓組件在相應的地方渲染
額外提示:在 JavaScript 中書寫 HTML 片段對維護來說是不友好的,我們可以通過 WebPack、AMD plugin、異步請求等方式管理。這里為了例子的簡單就寫在一起了。
從官方文檔可以大致了解了San是如何工作的,以及如何使用!
相關特性
San一共包含了九大特性,我們一起來了解下:
HTML模板
聲明式的模板,在編寫視圖時就像是在寫一個普通的頁面,更符合 HTML 開發(fā)人員的習慣。
數據驅動
修改數據,視圖引擎會根據綁定關系自動刷新視圖,從此擺脫手工調用 DOM API 的繁瑣與可能的遺漏。
組件化
組件是數據、邏輯與視圖的聚合體。通過組件,我們封裝**的功能區(qū)塊,小到輸入組合,大到一個頁面。
高性能視圖
通過修改數據的方法,視圖引擎能夠直接刷新需要變更的視圖區(qū)域,無需進行任何檢測,性能更高。
組件反解
為首屏時間優(yōu)化,服務端通常直接輸出HTML。我們能從現(xiàn)有的元素中反向解析出組件,并構建綁定關系。
體積小巧
小于15k (gzipped) 的體積,無需擔心對頁面下載帶來負擔。體積強迫癥患者的福音。
良好的兼容性
通過方法修改數據的另一好處是,可以獲得更好的瀏覽器兼容性。畢竟有時我們產品的受眾用戶有點**板。
模塊管理自由
項目中可以任意選擇 ESNext Module 或 AMD 管理模塊。當然,如果你想要用全局變量也是支持的。
引用方便
支持多種引用方式:NPM、GitHub、下載、HTTP 與 HTTPS CDN,讓開發(fā)和線上引用更便利。
文檔簡介
官方提供了非常詳細的文檔,而且文檔中都帶有示例,也就相當于是教程,下面是一個最簡單的San組件:
一個語法如下的 .san 文件,就是一個 San component:
<template>
<div >hello {{msg}}</div>
</template>
<script>
export default {
initData () {
return {
msg: ‘world’
};
}
}
</script>
<style>
.hello {
color: blue;
}
</style>
文檔大致是這些,就不再詳細的去看了,有需求的可以直接到官網查看:
周邊支持
San提供了提高生產力的相關周邊:
DevTool
提供了類似于Vue和React的那種基于Chrome擴展的開發(fā)者工具
San-mui
一套為開發(fā)者、設計師和產品經理準備的基于 san 框架的組件庫,遵循 material design 規(guī)范,融入了開發(fā)常用的ui組件,幫助你快速搭建網站,開源的 San-MUI 來自百度 EFE。
Router
支持hash和html5模板的router。單頁面或同構的Web應用一般都需要它
Store
應用狀態(tài)管理套件,理念類似于flux的單向流
Update
Immutable的對象更新庫,和san-store配合進行應用狀態(tài)數據更新
小編綜合來說
San是一個傳統(tǒng)意義上的MVVM框架,優(yōu)秀的兼容性提升了其使用價值,完善的周邊支持可共開發(fā)者選擇,如果你有類似的需求,當然可以選擇它!
拓展知識:
原創(chuàng)文章,作者:九賢生活小編,如若轉載,請注明出處:http:///37215.html