API

Dead Simple API,loader只保留两个核心API: loder()loder.echo(),其灵活性可以满足各种加载场景。

loder( loderName, pretasks, handler )

Alias loder.registerloder.taskloder.add

loder资源任务抽象成过程的概念,任务注册以及资源添加能以统一API去声明!

  • name
    • 类型:String
    • loder名称(任务名称 | 资源名称)
  • pretasks
    • 类型:[ String ]
    • 依赖的loder名称 * 如果没有传入handlerpretasks返回的结果数组会作为此loder返回值
  • handler( loderResult )
    • 类型:Function
loder.add('axios', () => import('axios'))
loder.task('fetchData', ['axios'], () => {
  const axios = loder.get('axios')
  return axios('sample.com/result.json')
})

// Same as
loder('axios', () => import('axios'))
loder('fetchData', ['axios'], () => {
  const axios = loder.get('axios')
  return axios('sample.com/result.json')
})

loder.echo( loderName, params, handler )

Alias loder.runloder.load

同样的loder也把过程的执行抽象成极简的 API。在代码编写过程,我们也许需要区分任务资源,loder提供更友好的 API 去触发执行。多次执行同一loder返回相同结果。

  • name
    • 类型:String | [ String ]
    • loder名称
  • params
    • 类型:Object
    • 执行loderName时候,给handler传递params参数
    • 执行完第一次后loderName结果会被缓存,重复执行echo传递不同params结果不会变化。需要以新params执行,可以使用loder.reload
  • handler( loderResult )
    • 类型:Function
  • 返回
    • loaderName执行的结果
    • 如果handler传入,则根据handler执行结果返回
// 加载资源
const axios = await loder.echo('axios')

// Same as
const axios = await loder.load('axios')

// 执行任务
loder.run('fetchData', response => {
  console.log('APIGet:', response.data)
})

loder.reload( loaderName, params, handler )

参数同loder.echo,可以新的参数params重新加载loderloder.echo多次调用结果不会变)

重新执行loderName,包括pretask,适用于如网络请求重发等场景。

loder.loadMatch( matchStr )

可以批量加载所匹配的loder,适用于首屏渲染完之后,懒加载资源的引入。

  • matchStr
    • 类型:String | RegExp
    • 匹配符合的loder名称并加载之,懒加载场景有奇效
loder('loder1', () => Promise.resolve('l1'))
loder('loder2', () => Promise.resolve('l2'))
loder('other3', () => Promise.resolve('o3'))

await loder.loadMatch('loder')

const l1 = loder.get('loder1') // l1
const l2 = loder.get('loder2') // l2
const o3 = loder.get('other3') // undefined

loder.get( key )

同步版loder.echo

获取值时候需确保对应loder已经执行完毕,否则返回undefined

// 执行任务
loder.run('fetchData', response => {
  // 可以确定依赖的axios已经加载完毕
  const axios = loder.get('axios') // Yeah, 不需要await来加载
})

loder.route( name, isHashRouter, handler )

对于 SPA 场景,多入口应用非常常见,loder提供route方法。智能识别当前路由,并注册相应loder

  • name
    • 类型:String
    • 路由匹配符,可以使用通配模式
  • isHashRouter
    • 类型:Boolean(默认:false)
    • 是否使用hash路由,可以单独配置
    • 也可以通过调用loder.config({ isHashRouter: true }),改变默认设置
  • handler(params)
    • 类型:Function
    • 参数为通配参数,若非通配形式(比如 /home)则为空对象
// 为了保持精细化,loder提供的router版才有此方法
import loder from 'loder/lib/route'

loder.route('/home', () => {
  loder.add('data', fetchHomeData())
})

loder.route('/about', () => {
  loder.add('data', fetchAboutData())
})

loder.route('*', () => {
  loder.add('data', fetchFallBackData())
})

// location.pathname === '/home'
const data = await loder.echo('data') // GET: homeData

除此之外,还可以使用通配方式,处理器会带上对应匹配参数:

loder.route('/user/:userId', (params) => {
  loder.add('data', fetchUserData({id: params.userId}))
})
// location.pathname === '/user/233'
const data = await loder.echo('data') // GET: 233 user data

loder.loadScript( url, attributes )

工具函数,帮助快速添加外部script资源,脚本onload触发后resolve资源。

const {lodeScript} = loder
const scriptUrl = `//cdnjs.cloudflare.com/ajax/libs/axios/${VERSION}/axios.js`
loder.add('axios', () => loadScript(scriptUrl).then(() => return window.axios))

loder.set( key, value )

工具函数,设置公用值,可覆盖loder的执行结果。

loder.set('isFirstRendered', false)

// ...rendered
loder.set('isFirstRendered', true) // loder.get('isFirstRendered') => true

// 可以覆盖loder执行的结果
loder.set('axios', 'I am a string axios')
loder.get('axios') // 'I am a string axios'

results matching ""

    No results matching ""