大家好，我又来发布新作品了，这次带来非常【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】有意思的前端组件框架PHC。相信作为前端【未经授权禁止转载】【作者：唐霜】开发者，你已经用过非常多的框架，例如vu【原创不易，请尊重版权】【转载请注明来源】e、react等，但是在你的工作中，你不未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net得不去考虑更多的问题，而会接触类似nex【作者：唐霜】转载请注明出处：www.tangshuang.nett、astro等更高层面的框架。可是无一转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net例外，所以的这些框架都必须借助构建工具。【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。有没有一种可能，我们前端开发在某些场景中著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。，或许应该返璞归真，不需要那么复杂的工程【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net体系呢？PHC就是这样一款没有新语法、新【作者：唐霜】本文作者：唐霜，转载请注明出处。概念、新设计的轻量级框架，让你可以超快的未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。搭建自己的应用组件。
转载请注明出处：www.tangshuang.net【本文受版权保护】【本文首发于唐霜的博客】【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。什么是PHC？转载请注明出处：www.tangshuang.net
【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。PHC是Hypertext Compon转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。ent的缩写，是基于超文本语言文件的组件【本文首发于唐霜的博客】【版权所有，侵权必究】开发框架。说白了，就是用纯粹的原生web【未经授权禁止转载】【版权所有，侵权必究】开发语言来实现组件。2024年，前端开发【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。领域已经进入一个新阶段，很多技术在发展过【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。程中留下了很多债务，而社区存在一股力量，本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。趋向于返璞归真，回到web开发的本真道路著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】上，不忘初心，做出更有意思的web应用。【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】在这一背景下，我开发了PHC来让开发者可转载请注明出处：www.tangshuang.net【本文受版权保护】以更方便的实现自己的前端代码组织。通过P未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netHC框架，我们可以用纯粹的HTML、CS【本文首发于唐霜的博客】【作者：唐霜】S、JavaScript来进行开发，也正转载请注明出处：www.tangshuang.net【本文受版权保护】因如此，我们不需要花学习PHC，你可以在本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。1分钟内了解它的全部，并开始上手开发。
本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】【转载请注明来源】本文作者：唐霜，转载请注明出处。PHC立足于纯粹的web技术，和vue、【原创内容，转载请注明出处】【原创不易，请尊重版权】react等视图层的框架不矛盾，甚至可以本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。兼容，PHC的目标是提供web组件的开发框架，本文版权归作者所有，未经授权不得转载。【转载请注明来源】但不限制组件的具体实现。也就是说，我们使用PHC的核心原因，是【转载请注明来源】【版权所有】唐霜 www.tangshuang.net我们希望快速写一个web组件，在我们已有本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。的web应用中使用。但是，这个web组件本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】具体怎么写，PHC没有做任何规定，它既不未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】提供新语法，也不提供任何写代码层面的规则本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】，组件代码本身怎么写完全是开发者自己决定【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】的。你甚至可以在组件中同时使用vue和r【版权所有，侵权必究】转载请注明出处：www.tangshuang.neteact来作为视图驱动，实现在组件中响应本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】式编程，当然，也可以使用纯粹的js来修改著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。DOM实现界面变更。总而言之，PHC只关原创内容，盗版必究。原创内容，盗版必究。心组件的组织形式，而不关心组件的写作方式【版权所有，侵权必究】【本文首发于唐霜的博客】。
【作者：唐霜】【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。与其他的框架相比，PHC具有以下优势：著作权归作者所有，禁止商业用途转载。
著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。【原创内容，转载请注明出处】【作者：唐霜】【原创不易，请尊重版权】- 使用超文本（HTML）作为开发语言，无多【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】余知识，无高深的概念 本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。
- 快速查看组件效果，没有繁杂的构建体系转载请注明出处：www.tangshuang.net 【本文受版权保护】【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】
- 单文件组件：用一个.htm 文件写一个组【版权所有，侵权必究】【原创不易，请尊重版权】件，独立部署到 CDN，不需要打包或编译 本文作者：唐霜，转载请注明出处。【未经授权禁止转载】未经授权，禁止复制转载。
- Web Components: 完全基于【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。 customElements 实现，组转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】件被放在 shadowDOM 中，支持样转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】式隔离，支持向组件传标准的 slot 原创内容，盗版必究。转载请注明出处：www.tangshuang.net原创内容，盗版必究。未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。
- 没有 Virtual DOM，更新直接触本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。达 DOM 节点 原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】
- 异步按需加载：只拉出当前界面渲染需要的组【转载请注明来源】转载请注明出处：www.tangshuang.net件，当前界面不需要的组件不会被拉取 著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】
- 通过本文作者：唐霜，转载请注明出处。
<link rel="sfc" as="custom-name">快速链接组件著作权归作者所有，禁止商业用途转载。 【转载请注明来源】本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。
- 组件可嵌套【访问 www.tangshuang.net 获取更多精彩内容】 著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】
- 超快，底层基于vanilla.js驱动本文作者：唐霜，转载请注明出处。 著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】原创内容，盗版必究。原创内容，盗版必究。
- 超小体积，5kb【版权所有】唐霜 www.tangshuang.net 著作权归作者所有，禁止商业用途转载。【本文受版权保护】转载请注明出处：www.tangshuang.net【版权所有，侵权必究】
- 支持所有支持ES5的浏览器【关注微信公众号：wwwtangshuangnet】 转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】【原创不易，请尊重版权】【本文受版权保护】原创内容，盗版必究。
总结而言，PHC的特点就是：转载请注明出处：www.tangshuang.net简单、快！【原创内容，转载请注明出处】
原创内容，盗版必究。【转载请注明来源】【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net1分钟学会PHC【作者：唐霜】
【转载请注明来源】本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】首先，我们需要加载PHC的包文件到我们的【本文受版权保护】【关注微信公众号：wwwtangshuangnet】web应用中。
【本文受版权保护】【版权所有，侵权必究】【作者：唐霜】【本文受版权保护】本文作者：唐霜，转载请注明出处。<script src="https://unpkg.com/phc"></script>
这样，我们的应用就载入了phc的包，我们【本文受版权保护】未经授权，禁止复制转载。就可以在我们的应用中使用phc作为组件框【本文首发于唐霜的博客】【原创不易，请尊重版权】架进行开发了。
本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。接下来，我们开始写一个组件文件some.【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】htm:
【版权所有，侵权必究】【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】【作者：唐霜】<style>
.container {
margin: 10px;
}
</style>
<div class="container">
<main></main>
</div>
<script>
const doc = new Document();
doc.querySelector('.container main').innerText = 'Hello PHC!';
</script>
最后，我们在我们的应用（或者某个其他的p【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.nethc组件中）引入和使用这个组件：
未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】未经授权，禁止复制转载。<link rel="phc" href="./some.htm" as="some-x" /> <some-x></some-x>
在使用时，我们通过link引入该组件，并原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。通过as对组件在当前上下文中进行命名，接未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。下来就是使用该组件（像使用普通的 web【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】 component 一样使用它）。
转载请注明出处：www.tangshuang.net【本文受版权保护】【本文受版权保护】【转载请注明来源】你需要学习什么？本文作者：唐霜，转载请注明出处。
【本文受版权保护】原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net对于PHC而言，我们没有任何新语法，只是原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】在原有的web接口的基础上，进行了扩展。著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】具体如下：
本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。const doc = new Document()在组件中 new Document()【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。 将获得当前组件的上下文文档（以进行组件【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】内的文档操作），且doc.rootElement将读取组件实例化后的DOM对象【转载请注明来源】 【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】
<link rel as>我们新增了 【本文受版权保护】phc这个 rel，并且需要你提供 as 作未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net为（web component）组件名，【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】需要注意，<link> 需提前声明，不【原创不易，请尊重版权】【版权所有，侵权必究】可以动态添加 【本文受版权保护】【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】
const win = new Window()在组件中通过 new Window()【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。 来获得当前浏览器窗口 著作权归作者所有，禁止商业用途转载。【本文受版权保护】本文作者：唐霜，转载请注明出处。
- 在组件内使用 【转载请注明来源】
document和 【版权所有】唐霜 www.tangshuang.netwindow意义不大，没有实际作用，不推荐读取未经授权，禁止复制转载。 原创内容，盗版必究。【未经授权禁止转载】原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】
以上就是PHC的所有知识。没有其他了，为【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。了让PHC足够简单，除了无法克服的Doc本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netument和Window，我把所有前期设【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net想过的语法、功能、概念，全部去除了。也正转载请注明出处：www.tangshuang.net原创内容，盗版必究。是这种对极简的追求，最后框架的包代码被压未经授权，禁止复制转载。【转载请注明来源】缩在5kb，经过gzip压缩之后还会更小转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。。
【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【本文受版权保护】在PHC组件中使用Vue未经授权，禁止复制转载。
著作权归作者所有，禁止商业用途转载。【转载请注明来源】转载请注明出处：www.tangshuang.net虽然我推荐使用纯粹的js来进行编程，但是原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。为了展示phc的兼容能力，下面我将写一个【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。用vue作为视图驱动的组件：
【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="app" style="display: none;">
<span>{{ message }}</span>
<button @click="change">change</button>
</div>
<script>
const { createApp, ref } = Vue;
const doc = new Document();
const root = doc.querySelector('#app');
createApp({
setup() {
const message = ref('Hello vue!')
const change = () => message.value = 'I am changed';
return {
message,
change,
}
}
}).mount(root)
root.style.display = 'block';
</script>
在这个组件中，我们引入了vue的包文件，著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net并按照vue的写作方法来启动DOM的加载【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】和变更。通过vue我们可以实现响应式编程【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】，这样可以使用状态来驱动我们的界面变更。
【转载请注明来源】【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net与微前端框架的区别转载请注明出处：www.tangshuang.net
原创内容，盗版必究。未经授权，禁止复制转载。【本文受版权保护】【作者：唐霜】通过上面的vue组件的例子，你可能会产生原创内容，盗版必究。转载请注明出处：www.tangshuang.net一个疑问，这和微前端有什么差别呢？感觉很【原创不易，请尊重版权】未经授权，禁止复制转载。像。虽然……但是，PHC和微前端是两个层【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】面的事物，解决不同的问题，微前端解决巨石转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。应用的重构问题，以做到跨技术栈为主要技术【原创不易，请尊重版权】【未经授权禁止转载】实现；PHC解决快速启动web开发问题，【原创内容，转载请注明出处】【转载请注明来源】以让开发者可以在短时间内实现多页面应用编【本文首发于唐霜的博客】【作者：唐霜】程问题。对于微前端而言，子应用无需关心外【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】部环境，可以被无感集成到基座应用中。而P本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】HC组件必须按照框架的设定来编写和使用，本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】虽然在写作上有非常大的自由度，但还是有非转载请注明出处：www.tangshuang.net【转载请注明来源】常小的前置约束。作为技术框架，一旦选择P【未经授权禁止转载】【作者：唐霜】HC，就很难再将技术栈切换到其他技术栈上未经授权，禁止复制转载。【未经授权禁止转载】，因此，你需要在技术选型时提前评估。不过原创内容，盗版必究。原创内容，盗版必究。由于PHC的宽广自由度，对PHC组件进行【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。简单改造即可被迁移到其他微前端框架中使用【转载请注明来源】【未经授权禁止转载】，或者将其他微前端子应用作少量改造，就可本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。以被作为PHC组件使用。
【原创不易，请尊重版权】原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。在技术实现上，微前端框架需要解决子应用之转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net间、父子应用之间抢资源（样式、JS运行时【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。等）的问题，因此，发展出了各种沙箱机制，【版权所有，侵权必究】【版权所有，侵权必究】使得代码在沙箱中运行，从而解决抢资源问题【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net。但这会带来另外的问题，就是性能的下降，【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】特别是像qiankun这样依赖代理实现的【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。沙箱机制，会使得应用运行过程中产生很多不【转载请注明来源】【本文受版权保护】可预料的问题。而PHC虽然也做到了隔离，【原创不易，请尊重版权】【转载请注明来源】但是由于没有这些隔离机制，没有多余的实现【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。，因此也就不存在对应的问题。按照PHC框【作者：唐霜】原创内容，盗版必究。架写组件，就能发挥组件代码的原始性能。
【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。结语【本文受版权保护】
本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】原创内容，盗版必究。由于PHC过于简单，且没有什么高深的学问【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。，对PHC的介绍就到此结束。前端开发技术本文作者：唐霜，转载请注明出处。原创内容，盗版必究。在过去几年，过于沉浸在工程工具层面，而忽【转载请注明来源】未经授权，禁止复制转载。视了很多表层的体验问题，随着大模型时代的【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。到来，工程问题会慢慢被机器替代，唯有做出未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。优秀的体验需要人的创造力。PHC追求极致原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】的简单，或许看上去单薄，但却是回归本真的原创内容，盗版必究。原创内容，盗版必究。一次大胆尝试。有兴趣的同学，可以在github关注本项目【版权所有，侵权必究】，一起讨论。本文版权归作者所有，未经授权不得转载。
【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】2024-01-19 3534
