API

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

loder( loderName, pretasks, handler )

Alias loder.register、loder.task、loder.add

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

name
- 类型：String
- loder名称（任务名称 | 资源名称）
pretasks
- 类型：[ String ]
- 依赖的loder名称 * 如果没有传入handler，pretasks返回的结果数组会作为此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.run、loder.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重新加载loder（loder.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'

API

API