整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
CSS in JS是一種解決css問(wèn)題想法的集合，而不是一個(gè)指定的庫(kù)。從CSS in JS的字面意思可以看出，它是將css樣式寫(xiě)在JavaScript文件中，而不需要獨(dú)立出.css、.less之類(lèi)的文件。將css放在js中使我們更方便的使用js的變量、模塊化、tree-shaking。還解決了css中的一些問(wèn)題，譬如：更方便解決基于狀態(tài)的樣式，更容易追溯依賴(lài)關(guān)系，生成唯一的選擇器來(lái)鎖定作用域。盡管CSS in JS不是一個(gè)很新的技術(shù)，但國(guó)內(nèi)的普及程度并不高。由于Vue和Angular都有屬于他們自己的一套定義樣式的方案，React本身也沒(méi)有管用戶(hù)怎樣定義組件的樣式[1]，所以CSS in JS在React社區(qū)的熱度比較高。
目前為止實(shí)現(xiàn)CSS in JS的第三方庫(kù)有很多:(http://michelebertoli.github.io/css-in-js/)。像JSS[2]、styled-components[3]等。在這里我們就不展開(kāi)贅述了(相關(guān)鏈接已放在下方)，這篇文章的重點(diǎn)是JS in CSS。
在上面我們提到CSS in JS就是把CSS寫(xiě)在JavaScript中，那么JS in CSS我們可以推斷出就是可以在CSS中使用JavaScript腳本，如下所示。可以在CSS中編寫(xiě)Paint API的功能。還可以訪問(wèn)：ctx，geom。甚至我們還可以編寫(xiě)自己的css自定義屬性等。這些功能的實(shí)現(xiàn)都基于CSS Houdini[4]。
.el {
--color: cyan;
--multiplier: 0.24;
--pad: 30;
--slant: 20;
--background-canvas: (ctx, geom) => {
let multiplier = var(--multiplier);
let c = `var(--color)`;
let pad = var(--pad);
let slant = var(--slant);
ctx.moveTo(0, 0);
ctx.lineTo(pad + (geom.width - slant - pad) * multiplier, 0);
ctx.lineTo(pad + (geom.width - slant - pad) * multiplier + slant, geom.height);
ctx.lineTo(0, geom.height);
ctx.fillStyle = c;
ctx.fill();
};
background: paint(background-canvas);
transition: --multiplier .4s;
}
.el:hover {
--multiplier: 1;
}
在如今的Web開(kāi)發(fā)中，JavaScript幾乎占據(jù)了項(xiàng)目代碼的大部分。我們可以在項(xiàng)目開(kāi)發(fā)中使用ES 2020、ES2021、甚至提案中的新特性（如:Decorator[5]），即使瀏覽器尚未支持，也可以編寫(xiě)Polyfill或使用Babel之類(lèi)的工具進(jìn)行轉(zhuǎn)譯，讓我們可以將最新的特性應(yīng)用到生產(chǎn)環(huán)境中（如下圖所示）。
JavaScript標(biāo)準(zhǔn)制定流程.png
而CSS就不同了，除了制定CSS標(biāo)準(zhǔn)規(guī)范所需的時(shí)間外，各家瀏覽器的版本、實(shí)戰(zhàn)進(jìn)度差異更是曠日持久（如下圖所示），最多利用PostCSS、Sass等工具來(lái)幫我們轉(zhuǎn)譯出瀏覽器能接受的CSS。開(kāi)發(fā)者們能操作的就是通過(guò)JS去控制DOM與CSSOM來(lái)影響頁(yè)面的變化，但是對(duì)于接下來(lái)的Layout、Paint與Composite就幾乎沒(méi)有控制權(quán)了。為了解決上述問(wèn)題，為了讓CSS的魔力不在受到瀏覽器的限制，Houdini就此誕生。
CSS 標(biāo)準(zhǔn)制定流程.png
我們上文中提到JavaScript中進(jìn)入提案中的特性我們可以編寫(xiě)Polyfill，只需要很短的時(shí)間就可以講新特性投入到生產(chǎn)環(huán)境中。這時(shí)，腦海中閃現(xiàn)出的第一個(gè)想法就是CSS Polyfill，只要CSS的Polyfill 足夠強(qiáng)大，CSS或許也能有JavaScript一樣的發(fā)展速度，令人可悲的是編寫(xiě)CSS Polyfill異常的困難，并且大多數(shù)情況下無(wú)法在不破壞性能的情況下進(jìn)行。這是因?yàn)镴avaScript是一門(mén)動(dòng)態(tài)腳本語(yǔ)言[6]。它帶來(lái)了極強(qiáng)的擴(kuò)展性，正是因?yàn)檫@樣，我們可以很輕松使用JavaScript做出JavaScript的Polyfill。但是CSS不是動(dòng)態(tài)的，在某些場(chǎng)景下，我們可以在編譯時(shí)將一種形式的CSS的轉(zhuǎn)換成另一種(如PostCSS[7])。如果你的Polyfill依賴(lài)于DOM結(jié)構(gòu)或者某一個(gè)元素的布局、定位等，那么我們的Polyfill就無(wú)法編譯時(shí)執(zhí)行，而需要在瀏覽器中運(yùn)行了。不幸的是，在瀏覽器中實(shí)現(xiàn)這種方案非常不容易。
頁(yè)面渲染流程.png
如上圖所示，是從瀏覽器獲取到HTML到渲染在屏幕上的全過(guò)程，我們可以看到只有帶顏色（粉色、藍(lán)色）的部分是JavaScript可以控制的環(huán)節(jié)。首先我們根本無(wú)法控制瀏覽器解析HTML與CSS并將其轉(zhuǎn)化為DOM與CSSOM的過(guò)程，以及Cascade,Layout,Paint,Composite我們也無(wú)能為力。整個(gè)過(guò)程中我們唯一完全可控制的就是DOM，另外CSSOM部分可控。
CSS Houdini草案中提到，這種程度的暴露是不確定的、兼容性不穩(wěn)定的以及缺乏對(duì)關(guān)鍵特性的支持的。比如，在瀏覽器中的 CSSOM 是不會(huì)告訴我們它是如何處理跨域的樣式表，而且對(duì)于瀏覽器無(wú)法解析的 CSS 語(yǔ)句它的處理方式就是不解析了，也就是說(shuō)——如果我們要用 CSS polyfill讓瀏覽器去支持它尚且不支持的屬性，那就不能在 CSSOM 這個(gè)環(huán)節(jié)做，我們只能遍歷一遍DOM，找到 <style> 或 <link rel="stylesheet"> 標(biāo)簽，獲取其中的 CSS 樣式、解析、重寫(xiě)，最后再加回 DOM 樹(shù)中。令人尷尬的是，這樣DOM樹(shù)全部刷新了，會(huì)導(dǎo)致頁(yè)面的重新渲染（如下如所示）。
即便如此，有的人可能會(huì)說(shuō)：“除了這種方法，我們也別無(wú)選擇，更何況對(duì)網(wǎng)站的性能也不會(huì)造成很大的影響”。那么對(duì)于部分網(wǎng)站是這樣的。但如果我們的Polyfill是需要對(duì)可交互的頁(yè)面呢？例如scroll，resize，mousemove，keyup等等，這些事件隨時(shí)會(huì)被觸發(fā)，那么意味著隨時(shí)都會(huì)導(dǎo)致頁(yè)面的重新渲染，交互不會(huì)像原本那樣絲滑，甚至導(dǎo)致頁(yè)面崩潰，對(duì)用戶(hù)的體驗(yàn)也極其不好。
綜上所述，如果我們想讓瀏覽器解析它不認(rèn)識(shí)的樣式（低版本瀏覽器使用grid布局），然而渲染流程我們無(wú)法介入，我們也只能通過(guò)手動(dòng)更新DOM的方式，這樣會(huì)帶來(lái)很多問(wèn)題，Houdini的出現(xiàn)正是致力于解決他們。
Houdini是一組底層API，它公開(kāi)了CSS引擎的各個(gè)部分，如下圖所示展示了每個(gè)環(huán)節(jié)對(duì)應(yīng)的新API（灰色部分各大瀏覽器還未實(shí)現(xiàn)），從而使開(kāi)發(fā)人員能夠通過(guò)加入瀏覽器渲染引擎的樣式和布局過(guò)程來(lái)擴(kuò)展CSS。Houdini是一群來(lái)自Mozilla，Apple，Opera，Microsoft，HP，Intel和Google的工程師組成的工作小組設(shè)計(jì)而成的。它們使開(kāi)發(fā)者可以直接訪問(wèn)CSS對(duì)象模型（CSSOM），使開(kāi)發(fā)人員可以編寫(xiě)瀏覽器可以解析為CSS的代碼，從而創(chuàng)建新的CSS功能，而無(wú)需等待它們?cè)跒g覽器中本地實(shí)現(xiàn)。
CSS Houdini-API
盡管當(dāng)前已經(jīng)有了CSS變量，可以讓開(kāi)發(fā)者控制屬性值，但是無(wú)法約束類(lèi)型或者更嚴(yán)格的定義，CSS Houdini新的API，我們可以擴(kuò)展css的變量，我們可以定義CSS變量的類(lèi)型,初始值,繼承。它是css變量更強(qiáng)大靈活。
CSS變量現(xiàn)狀：
.dom {
--my-color: green;
--my-color: url('not-a-color'); // 它并不知道當(dāng)前的變量類(lèi)型
color: var(--my-color);
}
Houdini提供了兩種自定義屬性的注冊(cè)方式，分別是在js和css中。
CSS.registerProperty({
name: '--my-prop', // String 自定義屬性名
syntax: '<color>', // String 如何去解析當(dāng)前的屬性，即屬性類(lèi)型，默認(rèn) *
inherits: false, // Boolean 如果是true，子節(jié)點(diǎn)將會(huì)繼承
initialValue: '#c0ffee', // String 屬性點(diǎn)初始值
});
我們還可以在css中注冊(cè)，也可以達(dá)到上面的效果
@property --my-prop {
syntax: '<color>';
inherits: false;
initial-value: #c0ffee;
}
這個(gè)API中最令人振奮人心的功能是自定義屬性上添加動(dòng)畫(huà)，像這樣：transition: --multiplier 0.4s;，這個(gè)功能我們?cè)谇懊娼榻B什么是js in css那個(gè)demo[8]用使用過(guò)。我們還可以使用+使syntax屬性支持一個(gè)或多個(gè)類(lèi)型，也可以使用|來(lái)分割。更多syntax屬性值：
屬性值描述<length>長(zhǎng)度值<number>數(shù)字<percentage>百分比<length-percentage>長(zhǎng)度或百分比,calc將長(zhǎng)度和百分比組成的表達(dá)式<color>顏色<image>圖像<url>網(wǎng)址<integer>整數(shù)<angle>角度<time>時(shí)間<resolution>分辨率<transform-list>轉(zhuǎn)換函數(shù)<custom-ident>ident
Worklets是渲染引擎的擴(kuò)展，從概念上來(lái)講它類(lèi)似于Web Workers[9]，但有幾個(gè)重要的區(qū)別：
Worklet是一個(gè)JavaScript模塊，通過(guò)調(diào)用worklet的addModule方法（它是個(gè)Promise）來(lái)添加。比如registerLayout,registerPaint, registerAnimator 我們都需要放在Worklet中
//加載單個(gè)
await demoWorklet.addModule('path/to/script.js');
// 一次性加載多個(gè)worklet
Promise.all([
demoWorklet1.addModule('script1.js'),
demoWorklet2.addModule('script2.js'),
]).then(results => {});
registerDemoWorklet('name', class {
// 每個(gè)Worklet可以定義要使用的不同函數(shù)
// 他們將由渲染引擎在需要時(shí)調(diào)用
process(arg) {
return !arg;
}
});
Worklets的生命周期
Worklets lifecycle
Typed OM是對(duì)現(xiàn)有的CSSOM的擴(kuò)展，并實(shí)現(xiàn) Parsing API 和 Properties & Values API相關(guān)的特性。它將css值轉(zhuǎn)化為有意義類(lèi)型的JavaScript的對(duì)象，而不是像現(xiàn)在的字符串。如果我們嘗試將字符串類(lèi)型的值轉(zhuǎn)化為有意義的類(lèi)型并返回可能會(huì)有很大的性能開(kāi)銷(xiāo)，因此這個(gè)API可以讓我們更高效的使用CSS的值。
現(xiàn)在讀取CSS值增加了新的基類(lèi)CSSStyleValue，他有許多的子類(lèi)可以更加精準(zhǔn)的描述css值的類(lèi)型：
子類(lèi)描述CSSKeywordValueCSS關(guān)鍵字和其他標(biāo)識(shí)符（如inherit或grid）CSSPositionValue位置信息 (x,y)CSSImageValue表示圖像的值屬性的對(duì)象CSSUnitValue表示為具有單個(gè)單位的單個(gè)值（例如50px），也可以表示為沒(méi)有單位的單個(gè)值或百分比CSSMathValue比較復(fù)雜的數(shù)值，比如有calc，min和max。這包括子類(lèi) CSSMathSum, CSSMathProduct, CSSMathMin,CSSMathMax, CSSMathNegate 和 CSSMathInvertCSSTransformValue由CSS transforms組成的CSSTransformComponent列表，其中包括CSSTranslate, CSSRotate, CSSScale, CSSSkew, CSSSkewX, CSSSkewY, CSSPerspective 和 CSSMatrixComponent
使用Typed OM主要有兩種方法：
使用attributeStyleMap設(shè)置并獲取
myElement.attributeStyleMap.set('font-size', CSS.em(2));
myElement.attributeStyleMap.get('font-size'); // CSSUnitValue { value: 2, unit: 'em' }
myElement.attributeStyleMap.set('opacity', CSS.number(.5));
myElement.attributeStyleMap.get('opacity'); // CSSUnitValue { value: 0.5, unit: 'number' };
在線demo[10]
使用computedStyleMap
.foo {
transform: translateX(1em) rotate(50deg) skewX(10deg);
vertical-align: baseline;
width: calc(100% - 3em);
}
const cs = document.querySelector('.foo').computedStyleMap();
cs.get('vertical-align');
// CSSKeywordValue {
// value: 'baseline',
// }
cs.get('width');
// CSSMathSum {
// operator: 'sum',
// length: 2,
// values: CSSNumericArray {
// 0: CSSUnitValue { value: -90, unit: 'px' },
// 1: CSSUnitValue { value: 100, unit: 'percent' },
// },
// }
cs.get('transform');
// CSSTransformValue {
// is2d: true,
// length: 3,
// 0: CSSTranslate {
// is2d: true,
// x: CSSUnitValue { value: 20, unit: 'px' },
// y: CSSUnitValue { value: 0, unit: 'px' },
// z: CSSUnitValue { value: 0, unit: 'px' },
// },
// 1: CSSRotate {...},
// 2: CSSSkewX {...},
// }
開(kāi)發(fā)者可以通過(guò)這個(gè)API實(shí)現(xiàn)自己的布局算法，我們可以像原生css一樣使用我們自定義的布局（像display:flex, display:table）。在Masonry layout library[11] 上我們可以看到開(kāi)發(fā)者們是有多想實(shí)現(xiàn)各種各樣的復(fù)雜布局，其中一些布局光靠 CSS 是不行的。雖然這些布局會(huì)讓人耳目一新印象深刻，但是它們的頁(yè)面性能往往都很差，在一些低端設(shè)備上性能問(wèn)題猶為明顯。
CSS Layout API 暴露了一個(gè)registerLayout方法給開(kāi)發(fā)者，接收一個(gè)布局名（layout name）作為后面在 CSS中使用的屬性值，還有一個(gè)包含有這個(gè)布局邏輯的JavaScript類(lèi)。
my-div {
display: layout(my-layout);
}
// layout-worklet.js
registerLayout('my-layout', class {
static get inputProperties() { return ['--foo']; }
static get childrenInputProperties() { return ['--bar']; }
async intrinsicSizes(children, edges, styleMap) {}
async layout(children, edges, constraints, styleMap) {}
});
await CSS.layoutWorklet.addModule('layout-worklet.js');
目前瀏覽器大部分還不支持
我們可以在CSS background-image中使用它，我們可以使用Canvas 2d上下文，根據(jù)元素的大小控制圖像，還可以使用自定義屬性。
await CSS.paintWorklet.addModule('paint-worklet.js');
registerPaint('sample-paint', class {
static get inputProperties() { return ['--foo']; }
static get inputArguments() { return ['<color>']; }
static get contextOptions() { return {alpha: true}; }
paint(ctx, size, props, args) { }
});
這個(gè)API讓我們可以控制基于用戶(hù)輸入的關(guān)鍵幀動(dòng)畫(huà)，并且以非阻塞的方式。還能更改一個(gè) DOM 元素的屬性，不過(guò)是不會(huì)引起渲染引擎重新計(jì)算布局或者樣式的屬性，比如 transform、opacity 或者滾動(dòng)條位置（scroll offset）。Animation API的使用方式與 Paint API 和Layout API略有不同我們還需要通過(guò)new一個(gè)WorkletAnimation來(lái)注冊(cè)worklet。
// animation-worklet.js
registerAnimator('sample-animator', class {
constructor(options) {
}
animate(currentTime, effect) {
effect.localTime = currentTime;
}
});
await CSS.animationWorklet.addModule('animation-worklet.js');
// 需要添加動(dòng)畫(huà)的元素
const elem = document.querySelector('#my-elem');
const scrollSource = document.scrollingElement;
const timeRange = 1000;
const scrollTimeline = new ScrollTimeline({
scrollSource,
timeRange,
});
const effectKeyframes = new KeyframeEffect(
elem,
// 動(dòng)畫(huà)需要綁定的關(guān)鍵幀
[
{transform: 'scale(1)'},
{transform: 'scale(.25)'},
{transform: 'scale(1)'}
],
{
duration: timeRange,
},
);
new WorkletAnimation(
'sample-animator',
effectKeyframes,
scrollTimeline,
{},
).play();
關(guān)于此API的更多內(nèi)容：(https://github.com/w3c/css-houdini-drafts/tree/main/css-animation-worklet-1)
允許開(kāi)發(fā)者自由擴(kuò)展 CSS 詞法分析器。
解析規(guī)則：
const background = window.cssParse.rule("background: green");
console.log(background.styleMap.get("background").value) // "green"
const styles = window.cssParse.ruleSet(".foo { background: green; margin: 5px; }");
console.log(styles.length) // 5
console.log(styles[0].styleMap.get("margin-top").value) // 5
console.log(styles[0].styleMap.get("margin-top").type) // "px"
解析CSS：
const style = fetch("style.css")
.then(response => CSS.parseStylesheet(response.body));
style.then(console.log);
它將提供一些方法來(lái)測(cè)量在屏幕上呈現(xiàn)的文本元素的尺寸，將允許開(kāi)發(fā)者控制文本元素在屏幕上呈現(xiàn)的方式。使用當(dāng)前功能很難或無(wú)法測(cè)量這些值，因此該API將使開(kāi)發(fā)者可以更輕松地創(chuàng)建與文本和字體相關(guān)的CSS特性。例如：
Is Houdini ready yet
(https://ishoudinireadyyet.com/)
了解到這里，部分開(kāi)發(fā)者可能會(huì)說(shuō)：“我不需要這些花里胡哨的技術(shù)，并不能帶收益。我只想簡(jiǎn)簡(jiǎn)單單的寫(xiě)幾個(gè)頁(yè)面，做做普通的Web App，并不想試圖干預(yù)瀏覽器的渲染過(guò)程從而實(shí)現(xiàn)一些實(shí)驗(yàn)性或炫酷的功能。”如果這樣想的話，我們不妨退一步再去思考。回憶下最近做過(guò)的項(xiàng)目，用于實(shí)現(xiàn)頁(yè)面效果所使用到的技術(shù)，grid布局方式在考慮兼容老版本瀏覽器時(shí)也不得不放棄。我們想控制瀏覽器渲染頁(yè)面的過(guò)程并不是僅僅為了炫技，更多的是為了幫助開(kāi)發(fā)者們解決以下兩個(gè)問(wèn)題：
幾年過(guò)后再回眸，當(dāng)主流瀏覽器完全支持Houdini的時(shí)候。我們可以在瀏覽器上隨心所欲的使用任何CSS屬性，并且他們都能完美支持。像今天的grid布局在舊版本瀏覽器支持的并不友好的這類(lèi)問(wèn)題，那時(shí)我們只需要安裝對(duì)應(yīng)的Polyfill就能解決類(lèi)似的問(wèn)題。
者：HXGNMSL來(lái)源：CSDN原文：https://blog.csdn.net/HXGNMSL/article/details/89076476
Javascript的歷史來(lái)源
94年網(wǎng)景公司 研發(fā)出世界上第一款瀏覽器。
95年 sun公司 java語(yǔ)言誕生
網(wǎng)景公司和sun合作。
Javascript ===> javascript
JavaScript和ECMAScript的關(guān)系
簡(jiǎn)單來(lái)說(shuō)ECMAScript不是一門(mén)語(yǔ)言，而是一個(gè)標(biāo)準(zhǔn)。符合這個(gè)標(biāo)準(zhǔn)的比較常見(jiàn)的有：JavaScript、Action Script（Flash中用的語(yǔ)言）
JavaScript的基本結(jié)構(gòu)：
JavaScript的語(yǔ)法：
JavaScript的基礎(chǔ)語(yǔ)法
變量的聲明及使用
數(shù)據(jù)類(lèi)型
運(yùn)算符
邏輯控制語(yǔ)句
注釋
語(yǔ)法規(guī)則
變量的聲明語(yǔ)法：
var變量名；
例如：
Var num;
然后進(jìn)行賦值：num = 10;也可以聲明時(shí)直接賦值：
Var num =10;
在JavaScript中，提供了常用的基本數(shù)據(jù)類(lèi)型：
undefined 未定義；
null 空；
string 字符串類(lèi)型；
boolean 布爾類(lèi)型；
number 數(shù)值類(lèi)型；
運(yùn)算符：
算數(shù)運(yùn)算符：+、-、*、/、%、++、–；
比較運(yùn)算符：>、<、> =、< =、==、！=；
邏輯運(yùn)算符：&&、||、！；
賦值運(yùn)算符：=；
邏輯控制語(yǔ)句：
JavaScript的邏輯控制語(yǔ)句也分為兩類(lèi)：條件結(jié)構(gòu)和循環(huán)機(jī)構(gòu)。
條件結(jié)構(gòu)
條件機(jī)構(gòu)分為if結(jié)構(gòu)和switch結(jié)構(gòu)：
If…else
Switch
循環(huán)結(jié)構(gòu)
JavaScript的循環(huán)結(jié)構(gòu)的執(zhí)行順序與Java類(lèi)似，主要包括以下幾種結(jié)構(gòu)：
for循環(huán)
while循環(huán)
do…while循環(huán)
for…inx循環(huán)
示例：
for(var i=0;i<10;i++){
Document.write(“*”);
}
輸出結(jié)果：**********
循環(huán)中斷：
用于循環(huán)中斷的語(yǔ)句有以下兩種：
break.
continue.
與Java用法一樣，break是跳出循環(huán),continue是跳入下一次循環(huán)。
函數(shù)
函數(shù)有兩種：一種是系統(tǒng)函數(shù)，一種是自定義函數(shù)。
常用的系統(tǒng)函數(shù)包括：
parseInt():轉(zhuǎn)換為整數(shù)。
parseFloat():轉(zhuǎn)換為浮點(diǎn)型。
isNaN():判斷非數(shù)字。
Eval():計(jì)算表達(dá)式值。
自定義函數(shù)：
自定義函數(shù)的語(yǔ)法
function 函數(shù)名（參數(shù)1,參數(shù)2,…）{
…//語(yǔ)句
Return 返回值;//可選
}
函數(shù)的調(diào)用：
函數(shù)的調(diào)用方式有以下兩種
事件名=函數(shù)名（傳遞的實(shí)參值），例如：
“函數(shù)名（）”
直接使用函數(shù)名（傳遞的實(shí)參值），例如：
var recult = add(2,3);
匿名函數(shù)
匿名函數(shù)的語(yǔ)法
var sumFun=function(num1,num2){
…
return(nun1,num2);
} ;
在語(yǔ)法中：
var sunFun=function(num1,num2)表示聲明一個(gè)變量等于某個(gè)函數(shù)體。
{…}；是把整個(gè)函數(shù)體放在變量的后面，并把末尾添加一個(gè)分號(hào)。
匿名函數(shù)的調(diào)用:
由于匿名函數(shù)定義的整個(gè)語(yǔ)句，可以像賦值一樣賦給一個(gè)變量進(jìn)行保存，所以可以使用如下方式調(diào)用語(yǔ)法中的匿名函數(shù)：
var sum=sumFun(2,3)
BOM概述
使用BOM可以移動(dòng)窗口，改變狀態(tài)欄中的文本，執(zhí)行其他與頁(yè)面內(nèi)容不直接相關(guān)的動(dòng)作。它包含的對(duì)象主要有以下幾種;
Window對(duì)象
Window對(duì)象是指整個(gè)窗口對(duì)象，可以通過(guò)操作Window對(duì)象的屬性和方法控制窗口，例如，打開(kāi)或關(guān)閉一個(gè)窗口。
History對(duì)象
瀏覽器訪問(wèn)過(guò)的歷史頁(yè)面對(duì)應(yīng)History對(duì)象，通過(guò)History對(duì)象的屬性和方法實(shí)現(xiàn)瀏覽器的前進(jìn)或后退的功能。
Location對(duì)象
瀏覽器的地址欄對(duì)應(yīng)Location對(duì)象，通過(guò)Location對(duì)象的屬性和方法控制頁(yè)面跳轉(zhuǎn)。
Document對(duì)象
瀏覽器內(nèi)的網(wǎng)頁(yè)內(nèi)容對(duì)應(yīng)Document對(duì)象，通過(guò)Document對(duì)象的屬性和方法，控制頁(yè)面元素。
Window常用的屬性有：
history：有關(guān)客戶(hù)訪問(wèn)過(guò)的URL的信息。
location:有關(guān)當(dāng)前URL的信息。
Screen: 有關(guān)客戶(hù)端的屏幕和顯示性能的信息。
Window對(duì)象常用的方法：
prompt():顯示可提示用戶(hù)輸入的對(duì)話框。
alert():顯示帶有一段消息和一個(gè)人“確認(rèn)”按鈕的警告框。
confirm():顯示帶有一段消息以及“確認(rèn)”按鈕“取消”按鈕的對(duì)話框。
close():關(guān)閉瀏覽器窗口。
open():打開(kāi)一個(gè)新的瀏覽器窗口，加載給定URL所指定的文檔。
setTimeout():用于在指定（以毫秒計(jì)）后調(diào)用函數(shù)或計(jì)算表達(dá)式。
setTneerval():按照指定的周期 （以毫秒計(jì)）數(shù)來(lái)調(diào)用函數(shù)或計(jì)算表達(dá)式。
Window對(duì)象常用窗口特征屬性
height、width:窗口文檔顯示區(qū)的高度、寬度，以像素計(jì)。
left、top:窗口的x坐標(biāo)y坐標(biāo)，以像素計(jì)。
toolbar:yes|no|1|0:是否顯示瀏覽器的工具欄，默認(rèn)是yes。
scrollbars =yes|no|1|0:是否顯示滾動(dòng)條，默認(rèn)是yes。
locationyes|no|1|0:是否顯示地址欄，默認(rèn)是yes。
status|no|1|0:是否添加地址欄，默認(rèn)是yes。
menubar|no|1|0:是否顯示菜單欄，默認(rèn)是yes。
resizable|no|1|0:窗口是否可調(diào)節(jié)尺寸，默認(rèn)是yes。
Window對(duì)象的常用事件：
onload:一個(gè)頁(yè)面或一副圖像完成加載。
onmouseover:鼠標(biāo)指針移到某元素之上。
onclick:單擊某個(gè)對(duì)象。
onkeydown:某個(gè)鍵盤(pán)按鍵被按下。
onchange:域的內(nèi)容被改變。
History對(duì)象的方法：
back():加載History對(duì)象列表中的上一個(gè)URL。
forward():加載History對(duì)象列表中的下一個(gè)URL。
go():加載History對(duì)象列表中的某個(gè)具體URL。
Location對(duì)象的屬性：
host：設(shè)置或返回主機(jī)名和當(dāng)前URL的端口號(hào)。
hostname:設(shè)置或返回當(dāng)前URL的主機(jī)名。
href:設(shè)置或返回完整的URL。
Location對(duì)象的方法：
reload():重新加載當(dāng)前文檔。
replace():用新的文檔替換當(dāng)前文檔。
Document對(duì)象常用的屬性：
referrer:返回載入當(dāng)前文檔的URL。
URL：返回當(dāng)前文檔的URL。
Document對(duì)象的常用方法：
getElementById():返回對(duì)擁有指定id的第一個(gè)對(duì)象的引用。
getElementsByName():返回帶有指定名稱(chēng)的對(duì)象的集合。
getElementsByTagName():返回帶有指定標(biāo)簽名的對(duì)象的集合。
write():向文檔寫(xiě)文本、HTML表達(dá)式代碼。
內(nèi)置對(duì)象
系統(tǒng)的內(nèi)置對(duì)象有Date對(duì)象、Array對(duì)象、String對(duì)象和Math對(duì)象等。
Date:用于操作日期和時(shí)間。
Array:用于在單獨(dú)的變量名中儲(chǔ)存一系列的值。
String:用于支持對(duì)字符串的處理。
Math:用于執(zhí)行數(shù)學(xué)任務(wù)，包含了若干數(shù)字常量和函數(shù)。
Date對(duì)象：
1:創(chuàng)建日期對(duì)象
Date對(duì)象包含日期和時(shí)間兩個(gè)信息，創(chuàng)建日期對(duì)象的基本語(yǔ)法有兩種：
創(chuàng)建日期的基本語(yǔ)法1： var 日期實(shí)例化=new Date(參數(shù));
創(chuàng)建日期的基本語(yǔ)法2： var 日期實(shí)例化=new Date();
Date對(duì)象的常用方法：
getDate():從Date對(duì)象返回一個(gè)月中的某一天，其值介于1到31之間。
getDay():從Date對(duì)象返回星期中的某一天，其值介于0到6之間。
getHours():返回Date對(duì)象的小時(shí)，其值介于0到23之間。
getMinutes():返回Date對(duì)象的分鐘，其值介于0到59之間。
getSeconds():返回Date對(duì)象的秒數(shù)，其值介于0到59之間。
getMonth():返回Date對(duì)象的月份，其值介于0到11之間。
getFullYear():返回Date對(duì)象的年份，其值為4位數(shù)。
getTime():返回自某一時(shí)刻（2010年1月1日）以來(lái)的毫秒數(shù)。
DOM概述
什么是DOM
DOM是文檔對(duì)象的縮寫(xiě)，和語(yǔ)言無(wú)關(guān)。它提供了訪問(wèn)、動(dòng)態(tài)修改結(jié)構(gòu)文檔的接口，W3C制定了DOM規(guī)范，主流瀏覽器都支持。
使用Core DOM操作節(jié)點(diǎn)
訪問(wèn)節(jié)點(diǎn)：
使用getElement系列方法訪問(wèn)指定節(jié)點(diǎn)。
getElementById():返回對(duì)擁有指定id的第一個(gè)對(duì)象的引用。
getElementsByName():返回帶有指定名稱(chēng)的對(duì)象的集合。
getElementsByTagName():返回帶有指定標(biāo)簽名的對(duì)象的集合。
使用層次關(guān)系訪問(wèn)節(jié)點(diǎn)。
parenNode:返回節(jié)點(diǎn)的父節(jié)點(diǎn)。
firstChild:返回節(jié)點(diǎn)的首個(gè)節(jié)點(diǎn)。文本和屬性節(jié)點(diǎn)沒(méi)有父節(jié)點(diǎn)，會(huì)返回一個(gè)空數(shù)組，對(duì)于元素節(jié)點(diǎn)，若是沒(méi)有子節(jié)點(diǎn)會(huì)返回null。
lastChild:返回節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)，返回值同firstChild。
操作節(jié)點(diǎn)屬性值
CoreDOM的標(biāo)準(zhǔn)方法包括以下兩種：
getAttribute(“屬性名”)：獲取屬性值。
getAttribute(“屬性名”,“屬性值”)：設(shè)置屬性值
創(chuàng)建和增加節(jié)點(diǎn)：
創(chuàng)建節(jié)點(diǎn)
createElement(tagName):按照給定的標(biāo)簽名稱(chēng)創(chuàng)建一個(gè)新的元素節(jié)點(diǎn)
appendChild(nodeName):向以存在節(jié)點(diǎn)列表的末尾添加新的節(jié)點(diǎn)。
inserBefore(newNode,oldNode):向指定的節(jié)點(diǎn)之前插入一個(gè)新的子節(jié)點(diǎn)。
cloneNode(deep):復(fù)制某個(gè)指定的節(jié)點(diǎn)。
刪除和替換節(jié)點(diǎn)
removeChild(node):刪除指定的節(jié)點(diǎn)。
replaceChild(newNode,oldNode):用其他的節(jié)點(diǎn)替換指定的節(jié)點(diǎn)。
Table對(duì)象的屬性和方法
屬性：
rows[]:返回包含表格中所有行的一個(gè)數(shù)組。
rows[]用于返回表格中所有行的一個(gè)數(shù)組。
方法：
inserRow():在表格中插入一個(gè)新行。
deleteRow():從表格中刪除一行。
數(shù)組
數(shù)組是具有相同數(shù)據(jù)類(lèi)型的一個(gè)或多個(gè)值得集合
創(chuàng)建數(shù)組的語(yǔ)法：
var 數(shù)組名稱(chēng)=new Array(size);
數(shù)組的賦值的兩種方式：
先聲明在賦值
var province = new Array(4);
province[0]=“河北省”;
province[1]=“河南省”；
索引也可以使用標(biāo)識(shí)（字符串），例如：
var province=new Array(4);
province[‘河北省’]=“河北省”；
province[‘河南省’]=“河南省”；
聲明時(shí)同時(shí)初始化
var province=new Array(“河北省”,“河南省”，“湖北省”，“廣東省”)；
Array對(duì)象的常用屬性和方法：
屬性：
length:設(shè)置或返回?cái)?shù)組中元素的數(shù)目。
方法：
join（）:把數(shù)組的所有元素放入一個(gè)字符串，通過(guò)一個(gè)分隔符進(jìn)行分割。
sort():對(duì)數(shù)組的元素進(jìn)行排序。
在本教程中，我們有一個(gè)使用 HTML、CSS 和 JS 制作的待辦事項(xiàng)列表應(yīng)用程序，我們將把它與 Cerbos 集成以向應(yīng)用程序添加授權(quán)。授權(quán)確定用戶(hù)是否可以執(zhí)行特定操作或訪問(wèn)某些資源或數(shù)據(jù)。它使組織能夠控制和保護(hù)對(duì)敏感數(shù)據(jù)庫(kù)、私人和個(gè)人數(shù)據(jù)以及公司資源的訪問(wèn)。在我們的 JS 應(yīng)用程序中，授權(quán)將定義用戶(hù)可以執(zhí)行的操作（創(chuàng)建待辦事項(xiàng)并閱讀待辦事項(xiàng)）以及管理員可以執(zhí)行的操作（創(chuàng)建、閱讀和刪除待辦事項(xiàng)）。
基于角色的訪問(wèn)控制 (RBAC)是一種訪問(wèn)控制方法，它根據(jù)最終用戶(hù)的組織角色為其分配權(quán)限。RBAC 提供細(xì)粒度的控制，提供了一種簡(jiǎn)單、易于管理的訪問(wèn)管理方法，與單獨(dú)分配權(quán)限相比，這種方法不容易出錯(cuò)。
使用 RBAC 的優(yōu)點(diǎn)是管理授權(quán)權(quán)限變得更加容易，因?yàn)橄到y(tǒng)管理員可以批量管理用戶(hù)和權(quán)限，而不是逐個(gè)管理。
我們已經(jīng)定義了 RBAC 策略，并將集成 Cerbos 以根據(jù)用戶(hù)身份授權(quán)創(chuàng)建、讀取和刪除待辦事項(xiàng)。我們對(duì)誰(shuí)可以做什么的業(yè)務(wù)要求如下：
Cerbos 是一個(gè)開(kāi)源授權(quán)層，可讓您輕松實(shí)現(xiàn)應(yīng)用程序的授權(quán)。在Cerbos，我們提供細(xì)粒度的訪問(wèn)控制來(lái)增強(qiáng)安全性，同時(shí)使您的應(yīng)用程序更快、更具可擴(kuò)展性。使用 Cerbos 進(jìn)行授權(quán)具有使用嚴(yán)格的 JS 代碼無(wú)法獲得的各種優(yōu)勢(shì)
當(dāng)組織采用 RBAC 訪問(wèn)模型時(shí)，必須遵守有關(guān)安全和管理的最佳實(shí)踐，并致力于不斷改進(jìn)其訪問(wèn)協(xié)議以防范新出現(xiàn)的威脅。
以下列表包含一些您必須遵循的 RBAC 最佳實(shí)踐：
我們將在示例代碼中使用這些角色來(lái)演示訪問(wèn)控制如何工作。
使用 Cerbos，訪問(wèn)規(guī)則始終面向資源，您編寫(xiě)的策略會(huì)映射到系統(tǒng)中的這些資源。資源可以是任何東西，而您建模策略的方式則由您決定 — 您可以通過(guò)多種方式實(shí)現(xiàn)相同的邏輯結(jié)果：以操作為主導(dǎo)、以角色為主導(dǎo)、以屬性為主導(dǎo)或以它們的組合為主導(dǎo)。
話雖如此，有些模式更適合特定場(chǎng)景——讓我們看看一些不同的方法。考慮這個(gè)權(quán)限模型：
Actions | Roles | ||||
CPO | CTO | Exec-1 | Exec-2 | Exec-3 | |
View | Allowed | Allowed | Allowed | Allowed | Allowed |
Add | Allowed | Allowed | Allowed | Allowed | Allowed |
Delete | Allowed | Allowed | Not Allowed | Not Allowed | Not Allowed |
我們將描述以行動(dòng)為主導(dǎo)的政策，因?yàn)槲覀円呀?jīng)為我們的 JS 應(yīng)用程序?qū)嵤┝艘孕袆?dòng)為主導(dǎo)的政策。
在這里，我們關(guān)注一個(gè)動(dòng)作并列出可以執(zhí)行該動(dòng)作的所有角色。為了更好地理解這一點(diǎn)，我們文檔中列出了一個(gè)示例，如下所示：
# Principals in the following three roles can perform the `run` action
- actions:
- "run"
effect: EFFECT_ALLOW
roles:
- JR_MANAGER
- SR_MANAGER
- CFO
# All principals can perform the `view` action
- actions:
- "view"
effect: EFFECT_ALLOW
roles:
- ["*"]
如果您的系統(tǒng)符合以下任一情況，則此方法可能適用：
構(gòu)建成功后，您應(yīng)該會(huì)看到網(wǎng)頁(yè)在瀏覽器的localhost:5500上加載。
目前，沒(méi)有任何策略，此應(yīng)用程序中的 CPO 和 CTO 被授予刪除待辦事項(xiàng)的權(quán)限，而高管（1、2 和 3）只能查看和添加待辦事項(xiàng)。但是，由于我們尚未將 Cerbos 與應(yīng)用程序集成以進(jìn)行權(quán)限管理，因此 CTO 和 CPO 無(wú)法刪除待辦事項(xiàng)。成功集成 Cerbos 后，CTO 和 CPO 將能夠刪除待辦事項(xiàng)。
要將 Cerbos 集成到我們的 JavaScript 應(yīng)用程序中，我們首先要啟動(dòng) Cerbos Docker 容器。在根目錄 (/to-dolist-cerbos) 中使用以下命令運(yùn)行 Docker 容器：
docker run --rm --name cerbos -d -v $(pwd)/cerbos/policies:/policies -p 3592:3592 -p 3593:3593 ghcr.io/cerbos/cerbos:0.34.0
Cerbos Playground是一款用于在線創(chuàng)建和測(cè)試策略的實(shí)用程序。Cerbos Playground 是了解策略創(chuàng)建甚至生成可用策略的絕佳方式：https://play.cerbos.dev/new ?generator 。
如何使用 RBAC 策略生成器為我們的 javascript 應(yīng)用程序生成策略？
我們有兩個(gè)角色：用戶(hù)和管理員（其中 CTO/CPO 是管理員，而高管是用戶(hù)）。添加操作并根據(jù)我們要授予的權(quán)限選擇復(fù)選框。
根據(jù)偏好選擇后，我們可以點(diǎn)擊**生成**按鈕，生成一個(gè)名為to-dos.yaml的YAML策略文件。
使用生成器生成策略后，只需將其復(fù)制并添加到應(yīng)用程序的文件結(jié)構(gòu)中即可。策略生成器還會(huì)生成一個(gè) to-dos_test.yaml 文件，該文件旨在幫助自動(dòng)測(cè)試訪問(wèn)控制策略。確保測(cè)試文件始終以 _test 后綴結(jié)尾。以下是它通常包含的內(nèi)容和功能：
現(xiàn)在我們已經(jīng)將 Cerbos 與 JS 應(yīng)用程序集成，我們將運(yùn)行它來(lái)檢查策略是否按預(yù)期工作。
讓我們使用測(cè)試文件和 Cerbos RBAC 策略生成器生成的 _testdata _ 來(lái)測(cè)試策略文件。
您可以使用此 Docker 命令（在 PowerShell 終端中）來(lái)運(yùn)行測(cè)試：
docker run -i -t -v "$(Get-Location)/cerbos/policies:/policies" ghcr.io/cerbos/cerbos:latest compile /policies
運(yùn)行此命令后，測(cè)試成功執(zhí)行。
如果高管（具有角色：用戶(hù)）嘗試刪除待辦事項(xiàng)：
隨著政策的實(shí)施，高管不得刪除待辦事項(xiàng)；他們會(huì)收到一條警告：您無(wú)權(quán)刪除此待辦事項(xiàng)。該權(quán)限僅授予 CPO 和 CTO 角色。
根據(jù)政策，高管可以將待辦事項(xiàng)添加到列表中：
將任務(wù)添加到文本框并單擊添加待辦事項(xiàng)按鈕將其添加到待辦事項(xiàng)列表中。
CPO 已授權(quán)，待辦事項(xiàng)已成功刪除。
這個(gè)實(shí)際演示成功地描繪了 Cerbos 與我們的 JS 應(yīng)用程序的集成。
Q1. 制定 RBAC 政策時(shí)我們必須考慮哪些最佳實(shí)踐？
A1：當(dāng)組織采用 RBAC 訪問(wèn)模型時(shí)，必須遵守有關(guān)安全和管理的最佳實(shí)踐，并致力于不斷改進(jìn)其訪問(wèn)協(xié)議，以防范新出現(xiàn)的威脅。
以下列表包含 RBAC 最佳實(shí)踐的公平樣本：
問(wèn)題 2：在政策生效之前，可以使用 Cerbos 進(jìn)行測(cè)試嗎？
A2：是的，可以在策略生效之前使用 Cerbos 對(duì)其進(jìn)行測(cè)試。Cerbos 提供強(qiáng)大的策略測(cè)試功能，允許您在將訪問(wèn)控制規(guī)則部署到生產(chǎn)環(huán)境之前對(duì)其進(jìn)行驗(yàn)證。使用 Cerbos Policy Generator 中提供的 Cerbos 測(cè)試框架，您可以確保策略強(qiáng)制執(zhí)行所需的訪問(wèn)控制規(guī)則并避免實(shí)際場(chǎng)景中的潛在問(wèn)題。這種部署前測(cè)試有助于維護(hù)訪問(wèn)控制策略的完整性和安全性，降低未經(jīng)授權(quán)訪問(wèn)的風(fēng)險(xiǎn)并確保遵守組織的安全準(zhǔn)則。
您已通過(guò)以下關(guān)鍵步驟成功將 Cerbos 集成到演示待辦事項(xiàng)列表應(yīng)用程序中：
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
