加入收藏 | 设为首页 |

丸子汤-学会了它,才让我体验到最实在的Web组件化思想

海外新闻 时间: 浏览:294 次

介绍

LitElement是一个简略的基类,用于创立快速,轻量级的Web组件,可以在任何带有任何结构的Web页面中运用。LitElement运用lit-html烘托到shadow DOM,并增加API来办理特点和特性。默许情况下会监测特点的改变,并且元素(Element)在其特点更改时会异步更新。



什么是lit-html?

lit-html是一个简略,现代,安全,细巧,快速的适用于JavaScriptHTML的模板库,答应你在JavaScript中运用带有嵌入式JavaScript表达式的字符串模板编写HTML模板。在背面lit-html从JavaScript模板中创立HTML

  • 官网

https://lit-element.polymer-project.org/

  • Github地址

https:丸子汤-学会了它,才让我体验到最实在的Web组件化思想//github.com/polymer/lit-html

  • 装置
npm install lit-html
  • 运用
import {html, render} from 'lit-html';

// lit-html 模板函数,回来一个lit-html 模板.
const helloTemplate = (name) => ht丸子汤-学会了它,才让我体验到最实在的Web组件化思想ml`
Hello ${name}!
`;

//烘托
Hello Steve!
到DOM中
render(helloTemplate('Steve'), document.body);

// 更新 
Hello Kevin!
, 仅更新 ${name} 部分
render(helloTemplate('Kevin'), document.body);

  • lit-html供给两个首要的出口:

html:用于生成TemplateResult的JavaScript模板符号,TemplateResult是模板的容器,以及应填充模板的值。

render():一个将TemplateResult出现给DOM容器的函数,例如元素或shadow root。

LitElement

LitElement可以轻松界说Web组件 , 十分适合在整个安排中同享元素或构建UI规划体系。在您运用HTML的任何地方运用您的组件:在主document、CMS、Markdown以及React、Vue等结构中。

  • 运用Typescript编写


  • 运用Javascript编写


  • 在html中运用

和原生的相同,或许说你就当成是原生的相同运用




快速建立开发环境

  • 大局装置polymer-cli
npm install -g polymer-cli
  • package.json文件

{
"name": "ele",
"version": "0.0.0",
"private": true,
"dependencies": {
"lit-element": "2.2.0",
"@webco丸子汤-学会了它,才让我体验到最实在的Web组件化思想mponents/webcomponentsjs": "2.2.10"
}
}

webcomponents为了兼容IE和Edge浏览器,我本地是IE11版别,现已测验通过。

  • 在你的项目文件夹装置以上依靠

npm install
//或许
yarn


  • my-element.js内失恋博物馆容


  • index.html内容


  • 发动起来
polymer serve

不出意外的话,翻开谷歌浏览器、火狐浏览器以及IE浏览器测验

Chrome浏览器:



FireFox浏览器:



IE11浏览器:



  • 完好项目开发建立,官网供给了一个实例,可以再其基础上进行开发

git clone https://github.com/PolymerLabs/lit-element-build-rollup.git
cd lit-element-build-rollup
npm install
npm run build
npm run start


为什么运用LitElement?

  • 高雅的声明式用法

LitElement其简略,了解的开发模型使构建Web组件变得史无前例的简略。以声明方法表达您的UI,作为状况的函数。无需学习自界说模板言语,你可以在模板中运用JavaScript的悉数功用。元素更改时会自动更新。



  • 快且轻量级

LitElement运用lit-html界说和出现HTML模板。DOM更新速度十分快,由于lit-html只会从头出现UI的动态部分,无需进行差异化。



  • 无缝互操作性

LitElement遵从Web组件规范,因而你的组件将适用于任何结构。LitElement运用自界说元素轻松包含在网页中,运用Shadow DOM进行封装。在Web平台上没有像其它结构相同进行新的笼统。



浏览器兼容性

LitElement适用于全部干流浏览器,包含Chrome、Firefox,、IE、Edge、Safari以及Opera。



总结

LitElement这样的组件化技能,能让咱们高效的编写自己的可复用Web组件,与React、Vue等结构不能,它可以说是最接近原生的,只不过一个是手动封装的,一个是浏览器自带的,并且自己编写的也可以用在其它结构像原生html元素相同运用,带来了杰出的编程领会且领会到了高雅的Web组件化编程思想,全部好像都变得简略了起来!