card-loader
Hybrid card loader for Marauder
Last updated 2 months ago by vv314 .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install card-loader 
SYNC missed versions from official npm registry.

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"
}

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

Current Tags

  • 2.0.1                                ...           latest (2 months ago)
  • 1.5.1                                ...           latest-1 (8 months ago)
  • 2.0.0-t.0                                ...           next (9 months ago)
  • 1.1.0-ts.6                                ...           ts (2 years ago)

52 Versions

  • 2.0.1                                ...           2 months ago
  • 1.5.1                                ...           8 months ago
  • 2.0.0                                ...           8 months ago
  • 1.5.0                                ...           8 months ago
  • 2.0.0-t.0                                ...           9 months ago
  • 1.4.3                                ...           a year ago
  • 1.4.2                                ...           a year ago
  • 1.4.1                                ...           a year ago
  • 1.4.0                                ...           a year ago
  • 1.3.4                                ...           a year ago
  • 1.3.3                                ...           a year ago
  • 1.3.2                                ...           a year ago
  • 1.3.1                                ...           a year ago
  • 1.3.0                                ...           a year ago
  • 1.3.0-beta.0                                ...           a year ago
  • 1.2.0-rc                                ...           2 years ago
  • 1.1.4                                ...           2 years ago
  • 1.1.3                                ...           2 years ago
  • 1.1.2                                ...           2 years ago
  • 1.1.1                                ...           2 years ago
  • 1.1.0                                ...           2 years ago
  • 1.1.0-ts.7                                ...           2 years ago
  • 1.1.0-ts.6                                ...           2 years ago
  • 1.1.0-ts.5                                ...           2 years ago
  • 1.1.0-ts.4                                ...           2 years ago
  • 1.1.0-ts.3                                ...           2 years ago
  • 1.1.0-ts.2                                ...           2 years ago
  • 1.1.0-ts.1                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
  • 1.0.0-beta.1                                ...           2 years ago
  • 1.0.0-beta.0                                ...           2 years ago
  • 0.0.21-alpha.4                                ...           2 years ago
  • 0.0.21-alpha.3                                ...           2 years ago
  • 0.0.20-alpha.2                                ...           2 years ago
  • 0.0.20                                ...           2 years ago
  • 0.0.19                                ...           2 years ago
  • 0.0.18                                ...           2 years ago
  • 0.0.16                                ...           2 years ago
  • 0.0.15                                ...           2 years ago
  • 0.0.14                                ...           2 years ago
  • 0.0.13                                ...           2 years ago
  • 0.0.12                                ...           2 years ago
  • 0.0.11                                ...           2 years ago
  • 0.0.10                                ...           2 years ago
  • 0.0.9                                ...           2 years ago
  • 0.0.8                                ...           2 years ago
  • 0.0.7                                ...           2 years ago
  • 0.0.5                                ...           2 years ago
  • 0.0.4                                ...           2 years ago
  • 0.0.3                                ...           2 years ago
  • 0.0.1                                ...           2 years ago
Maintainers (2)
Downloads
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 2
Last Month 71
Dev Dependencies (17)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |