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

card-loader

v3.0.5

Published

Hybrid card loader for Marauder

Downloads

25

Readme

hybrid 浮层 loader

安装和使用

安装:

yarn add card-loader -D

使用 loader:

import card from 'card-loader!./card/modal';

配置

sdk 参数用于指定 sdk 环境,对于 biubiu 项目,传入 'biubiu'

import card from 'card-loader?sdk=biubiu!./card/modal';

示例:

// 引入路径为./card/modal.js的浮层
import card from 'card-loader!./card/modal';

const param = {
  display: {
    opacity: 0.5
  },
  message: {},
  success(data) {
    console.log('success', data);
  },
  error(opt, errMessage) {
    console.log('err', errMessage, opt);
  }
};

// 参数的配置path字段外遵循 http://wiki.intra.sina.com.cn/pages/viewpage.action?pageId=166466748
card.show(param);

浮层模块的开发

先看一个最简单的例子:

//./card/index.js文件(浮层入口)

/**
 * 模块暴露一个名称为card的函数,接收三个参数
 * 使用函数声明的原因是 在抹平差异同时需要传递参数给业务人员
 * 函数会在hybrid的ready生命周期后执行,并注入参数
 *
 * @export
 * @param {object} data 从主view传递过来的参数(实际为ready方法触发传递的参数)
 * @param {object} {
 *   closeModal
 * } 注入的变量和方法,目前只有closeModal方法,调用则关闭当前浮层
 * @param {string} container 渲染的容器id
 * @returns {object} {show: function}
 * 函数返回对象中包含键为show的方法,内部执行浮层渲染、显示,业务人员需要实现此方法
 */
export default function(data, inject, containerId) {

  // 处理数据
  output = processData(data)

  return {
    show() {
      renderModal(output, inject, containerId)
    }
  };
}

function renderModal(data, inject, containerId) {

  // use data
  console.log(data)

  const container = document.getElementById(containerId);

  const button = document.createElement("button");

  const destroy = () => {...}

  button.addEventListener("click", () => {

    // closeModal为注入的关闭弹层方法
    // 可选:这里可以传递一个destroy方法,该方法由业务实现,主要目的是在web环境中,进行垃圾回收(⌚事件销毁,实例化对象释放等)
    inject.closeModal(destroy)
  });

  container.appendChild(button);
}

 如注释,模块只规定通过 export default 输出  一个方法,该方法  接收三个参数,并且返回一个含有 show 方法的对象。

show 方法完成模块渲染。

注意: 当使用card-loader加载代码时,客户端的浮层代码会以一个单独的页面存在。 换句话说在编译页面同时会以 loader 为入口文件执行 webpack 构建弹层页面。 因此弹层使用的各种资源文件(包含但不限于 js、css)需要直接或间接的被浮层入口文件引入

manifest.json文件

由于需要对每个浮层进行唯一标示,需要在浮层入口代码的同级目录创建一个manifest.json文件:

{
  "name": "card-name"
}

如果没有此文件,编译时会报错。