npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

htmlarray

v1.0.1

Published

Help front-end to group html pages by front-end way,帮助前端工程师用前端的方式方法来组合静态html页面

Downloads

3

Readme

HtmlArray

用前端的方式方法组合html页面,静态页面组合的快速方案。

简单示例

核心代码

<script type="text/javascript" src="other/jquery-2.1.4.min.js"></script>
<script  type="text/javascript" src="../HtmlArray.js"></script>
<script>
  HtmlArray = [
    "module/header/header.html",
    "module/footer/footer.html",
  ];
</script>
  1. 引入依赖的jQuery
  2. 引入HtmlArray
  3. 定义HtmlArray数组,每一个子页面的路径(字符串格式)集合。
      好了,打开页面看看吧,就是如此简单。
    如果还有什么要说的,路径需要在本地,不允许跨域,写个"http://example.com"是无效的(除非你是该站站长)

参数范例

待补充

使用环境

  项目的初衷就是用纯前端的方式来组合页,甚至允许前端工程师不用搭建服务器。

  • 适用范围
    快速组合页面,特别适合前端工程师
    待补充

  • 不搭建服务器
    当然这种时候你只能在本地打开,不过需要做一步设置,可以参考这里。右击chrome的快捷方式--目标--在原来字段的后面加上“ --allow-file-access-from-files”即可。 该方法对chrome有效,其它webkit内核的浏览器也可,如国内双核浏览器设置后在极速模式下有效,兼容模式下报错。 实测下,需要先关闭chrome,等待浏览器进程全部关完后,再用该快捷方式开启即可。

  • 开启服务器
    当然,作为一个web工作者,我仍然推荐你开启服务器,都是静态页面,IIS/apache都是可以胜任的。接下来,你就不受浏览器限制了,IE/火狐都是可以的,你还可以在局域网中的其它设备,包括手机访问到它。 当然,绑定域名后,公网上亦可访问。

尽管如此,它应该是帮助前端工程师组合页面所用,而不应该用在后端。

项目来由

  起因是公司项目采用模块化设计,头部、底部、主体、子模块分别有几个模板,后端再把它们组合成完整的页面。
  一方面前端需要先手工组合出页面,确保样式、脚本在组合页中无误再提交给后端。另一方面随着子模块和组合页越来越多,维护越发麻烦,一个子模块的改动,所有引用到它的合成面都需要改动,于是萌发组合页面的想法。(但是没有什么后端经验就决定用js)

###FAQ
######为什么不采用iframe?
iframe要省事的多,但现今的页面上用得较少,为了模拟更真实的组合页面情况,没有使用它.