bay.js下载bay.js源代码下载

bay.js

三方组件

1.0.0

下载

湾

什么是bay.js？

Bay.js是一个前端库，旨在促进可重复使用的Web组件的创建，并为HTML添加状态和交互性。要查看行动，您可以访问bayjs.org并探索其示例。

关键功能

可选构建步骤：只需添加脚本标签即可开始。
严格的内容安全策略（CSP）兼容性，即使没有构建步骤。
多功能渲染：常规DOM或Web-Componment格式。
轻量级实现的零依赖项。
简化组件的单文件捆绑功能。
与专为渲染网络组件设计的框架的无缝集成。
基于URL的模板：启用服务器端渲染（SSR）或基于PHP的模板。
在DOM中利用<template>作为模板源。
组件创建从JavaScript字符串进行动态自定义的创建。
用户友好的语法，用于轻松开发。

安装

bay.js可以通过脚本标签或导入作为模块使用。

脚本标签：

 < script src =" //cdn.jsdelivr.net/npm/@dunks1980/bay.js/bay.min.js " > </ script >

脚本标签示例

ES模块：

 < script type =" module " src =" main.js " > </ script >

 // In main.js
import bay from '//cdn.jsdelivr.net/npm/@dunks1980/bay.js/bay.min.mjs' ;
bay ( ) ;

您可能需要添加这样的版本编号以防止破坏更改：'//cdn.jsdelivr.net/npm/@dunks1980/bay.js@ <版本> /bay.min.mjs的版本号是可选的，可以从转到NPM包装页面获得。或者如果使用node_modules：'./node_modules/@dunks1980/bay.js/bay.min.mjs';
ES模块示例

NPM模块：

 npm i @ dunks1980 / bay . js
import bay from '@dunks1980/bay.js' ;
bay ( ) ;

NPM示例

设置：

 import bay from ...

bay ( {
  text : `<h1 :style="margin: 1rem;">Settings</h1>` ,
} ) ;

 < template id =" my-template " >
  %{text} <!-- becomes: --> < h1 :style =" margin: 1rem; " > Settings </ h1 > 
</ template >

< my-component bay =" #my-template " message =" Hello world! " > </ my-component >

只能使用ES或NPM模块设置设置，必须是字符串，并且只能在创建组件之前设置一次。设置变量可以在模板中的任何地方使用。
设置示例

用法

有几种方法可以在bay.js中定义组件：

1。dom中带有bay属性的模板。

在您的HTML中，创建一个内联模板并应用BAY属性和任何其他道具：

 < template bay =" my-component-name " message >
  < h1 > ${this.message} </ h1 >
</ template >

< my-component-name message =" Hello world! " > </ my-component-name >

2。模板在DOM中具有ID。

在您的html中，创建一个内联模板和供应湾。JS模板ID：

 < template id =" my-template " >
  < h1 > ${this.message} </ h1 >
</ template >

< my-component bay =" #my-template " message =" Hello world! " > </ my-component >

3。文件中的模板。

创建一个文件和供应bay.js url（不要将文件内容包装在模板中）。文件扩展名可以是您喜欢的任何内容，只要其内容以HTML格式：

 < my-component bay =" /url/to/my/components.html " message =" Hello world! " > </ my-component >
<!-- or -->
< my-component bay =" /url/to/my/components.php " message =" Hello world! " > </ my-component >

 <!-- in component file -->
< h1 > ${this.message} </ h1 >

4。使用JS创建模板。

通过bay.js导入的模板：

 import my_component from "./../component_imports/my_component.html?raw" ;
import bay from "@dunks1980/bay.js" ;
bay ( ) ;
bay . create ( "my-component" , my_component , [ "message" ] ) ;

或创建模板并传递：（字符串中的$和`如果字符串字符字体，则需要 eScap）

 import bay from "@dunks1980/bay.js" ;
bay ( ) ;
bay . create ( "my-component" , `<h1>${this.message}</h1>` , [ "message" ] ) ;

 <!-- Anywhere in the HTML including other components -->
< my-component message =" Hello world! " > </ my-component >

5。使用湾水合物。

在您的HTML中，创建一个内联元素，内部具有模板，然后将湾水合地添加到包含的元素：

 < div bay-hydrate >
  < h1 > This will be replaced once bay creates the component. </ h1 >
  < template >
    < h1 > ${this.message} </ h1 >
    < script > this . message = 'Hello World!' </ script >
  </ template >
</ div >

道具将无法使用此方法可用，但是您可以使用设置。内容呈现到主DOM，因此不会封装样式，模板中定义的<style>标签将没有效果。

6。使用DSD（声明性影子DOM）。

在您的HTML中，创建一个内联元素，内部具有模板，然后将bay =“ dsd”添加到元素，而shadowrootmode =“ open”到模板元素：

 < my-component bay =" dsd " >
  < template shadowrootmode =" open " >
    < dsd >
      < h1 id =" title " > loading... </ h1 >
    </ dsd >
    < noscript >
      < h1 id =" title " > ${this.header_text} </ h1 >
    </ noscript >
    < script mounted >
      this . header_text = "Hello World" ;
    </ script >
  </ template >
</ my-component >

元素在加载时将看到元素，但如果它们用noscript标签包裹，则不会可见。创建组件并将删除NoScript元素后，将删除DSD元素及其子女，但将保留其内容，并将其内容解析和分散。道具将无法使用此方法可用，但是您可以使用设置。内容渲染到主DOM，因此不会封装样式。

可以在HTML中的任何地方使用组件，但内联模板必须在文档的正文中。 “ my-component”可以是您喜欢的任何东西，但根据自定义元素规范的名称必须具有破折号。

组件中的标签：

句法	描述	例子
`<if this="this.xxx">...</if>`	如果语句，则仅呈现`<if>`标签之间的内容，则此属性为true。	有条件
`<else-if this="this.xxx">...</else-if>`	否则，如果仅渲染`<else-if>`标签之间的内容，则此属性是正确的，并且以前的`<if> <else-if>`为false。	有条件
`<else>...</else>`	否则，如果所有先前的`<if> <else-if>`标签都是false，则仅渲染`<else>`标签之间的内容。	有条件
`<show this="this.xxx">...</show>`	显示，当您需要将代码保留在DOM中并切换其显示时。添加持续时间`<show this="this.xxx" duration=".5s">`以获得淡出效果。	展示
`<switch this="this.xxx"> <case this="xxx" break>...</case> <default>...</default> </switch>`	切换语句，以获取更复杂的条件。	转变
`<map array="this.arr">...</map>`	映射，要迭代数组`<map params="item, i, array" array="this.arr" join="<hr>">` params and join是可选的，默认参数为： `element, index, array` 。	迭代
`<for array="this.arr">...</for>`	foreach循环，要迭代一个数组`<for params="item, i, array" array="this.arr">` params是可选的，默认参数为： `element, index, array` 。	迭代
`<for this="let i = 0; i < this.arr.length; i++">...</for>`	对于循环，要迭代条件。	迭代
`<inner-html>...</inner-html>`	渲染到光DOM。如果组件上存在`inner-html`属性，它将在该元素内部呈现： `<my-comp bay="..." inner-html="#render-target">` 。如果组件上不存在Inner-HTML属性，则可以使用插槽来查看Inner-HTML内容。	内HTML
`<slot name="slot1">...</slot>`	用于根据标准网络组件定义插槽。	老虎机
`<route href="/xxx/var">...</route>`	路由为路由器标签创建路由，用于单个页面应用程序（SPA）。	路线
`<router this="/xxx/:xxx">...</router>`	路由器匹配当前URL， `:xxx`用于变量。	路线
`<define this="myEl">...</define> <myEl></myEl>`	定义要重复使用的代码块。	定义
`<include this="https://..."></include>`	将代码从URL中包括在模板中。	包括

内部变量：

句法	描述	例子
`this.xxx = 'xxx';`	分配`this.xxx`值将触发Bay组件渲染。从组件外部获取/设置此值： `document.getElementById('my-el').shadowRoot.proxy.xxx = 'xxx';`	当地的
`$global = 'xxx';`	分配`$global.xxx`一个值将触发所有包含`$global`海湾组件的渲染。从组件外部获取/设置此值： `bay.global.xxx = 'hello'; console.log(bay.global);`	全球的
`$bay.querySelector('xxx');`	使用`$bay`针对阴影dom。阴影dom vs.光	变量
`$el.querySelector('xxx');`	使用`$el`来瞄准光DOM。阴影dom vs.光	变量
`$parent.xxx = 'xxx';`	分配`$parent.xxx`一个值将在父级是另一个湾组件并触发渲染的情况下，在父级中更新`this.xxx` 。	父母
`$details.changed;` `$details.element;`	从slotchange脚本属性中的详细信息有关发生了什么变化。	老虎机
`$route`	窗口位置的详细信息。	路由器
`$path`	：来自搜索路径的变量`:xxx/:xxx` 。	路由器

组件上的属性：

句法	描述	例子
`bay="#my-template"` `bay="/my-template.html"` `bay="dsd"`	当在`<custom-element bay="...">`标签将是要使用的模板，可以是模板ID或文件的路径，DSD是实验性的。	使用ID 使用文件 DSD
`bay="my-template-name"`	当在`<template bay="custom-element">`上定义时，它将是`<custom-element>`标签名称。	使用名称
`fouc`	用于将光DOM隐藏在组件中，直到将其满载为止。	福克
`inner-html="#render-target"`	用于告诉组件应该在哪里渲染`<inner-html>...</inner-html>`内容。	内HTML
`xxx="value"`	任何其他属性都将传递到组件中，并成为可以通过`this.xxx` ，xxx作为属性名称访问的道具。	道具

内部属性：

句法	描述	例子
`:style="color: red; display: ${this.display}"`	应用编织数据驱动样式。	样式
`:click="console.log('clicked')"`	任何javaScript事件都以ON开头（在此示例中onclick）替换为：（ `oninput="xxx"` - > `:input="xxx"` ）。	事件
`:my-event="console.log('my custom event')"`	在任何自定义事件检测到该事件已从任何地方触发时，都会聆听任何自定义事件的代码。	自定义活动
`bind="this.xxx"`	用于`<inputs>` ， `<selects>`和`<textareas>`的2条数据绑定。	绑定
`slot="slot-name"`	用于根据标准网络组件定义插槽。	老虎机
`ref="xxx"`	`$ref('xxx').onclick = (e) => {...` 有关使用情况，请参见下面的内部功能。	参考
`this-attribute="xxx"`	将用从其属性值返回的内容替换this-attribute =“ xxx”。	此属性
`:click.prevent="xxx"`	事件修饰符。通道，.capture，.once，。 -stop，.privent，.self	事件修饰符

脚本生命周期：

句法	描述	例子
`<script imports>...</script>`	定义模块导入脚本。	进口
`<script mounted>...</script>`	脚本将模板安装到DOM之后。	安装
`<script props>...</script>`	Props更改时运行的脚本。	道具
`<script render>...</script>`	脚本将其返回值安装到位。	使成为
`<script slotchange>...</script>`	在插槽内容上运行的脚本会更改。	插槽更改
`<script update>...</script>`	在每个更新上运行的脚本。	更新

外部功能：

句法	描述	例子
`bay();`	用于初始化bay.js如果导入的模块。	安装
`bay.create('component-name', '<h1>test</h1>', ["prop-1", "prop-2"]);`	创建一个组件。	创造
`bay.refresh();`	在新的自定义元素动态应用于DOM之后，刷新BAY。	刷新

内部功能：

句法	描述	例子
`$bay.encode('string');`	编码/逃脱字符串。	编码
`$bay.decode('string');`	解码/un-escape a字符串。	解码
`$bay.emit('custom-event', {key: value});`	发出自定义事件。（在所有组件中）	发射
`$bay.on('custom-event', (e) => {console.log(e.detail);});`	听自定义事件。（在所有组件中）	发射
`$ref('xxx').onclick = (e) => {...` `$ref('xxx').forEach((el) => {...`	获取具有属性ref =“ xxx”的元素。只能在安装脚本中使用。	参考