Loader 要点整理

参考

http://developer.android.com/guide/components/loaders.html

http://wikidroid.sinaapp.com/Loaders


要点如下

1. 每个 activity 或者 fragment 中只能有一个 LoaderManager

2. 在 onCreate() 或者 onActivityCreated() 中通过 LoaderManager.initLoader() 创建一个 loader

3. initLoader() 可以用来确保两点
3.1 如果 ID 已经存在在重用
3.2 如果 ID 不存在,则会回调 LoaderManager.LoaderCallbacks.onCreateLoader()方法, 这样你就需要返回一个新的 loader 出来。

4. 如果我们在调用 initLoader() 的时候,如果已经有了个已经处于 start 状态的 loader,并且已经有些数据,则 LoaderManager.LoaderCallbacks.onLoadFinished() 会马上被调用,注意以上所描述的都是在调用 initLoader() 的时候发生的。

5. LoaderManager 虽然返回一个 loader,但是你不用去保存这个引用,因为 Loader manager 会自动管理 loader 的生命周期

6. 重启 loader

getLoaderManager().restartLoader()

7. Loaders,特别是 CursorLoader,是希望在 stop 之后仍然可以保存一些数据,这样让 app 的数据可以不仅仅包含在 activity 和 fragments 中。接下来当用户回到 app 的时候,可以不用等待数据去重新 reload。

8. LoaderManager.LoaderCallbacks 几个函数的说明
8.1 onCreateLoader() 返回一个 cursor,通常情况下是 CursorLoader,也可以是自定义的 loader
8.2 onLoaderFinished() 该方法在提供给 loader 的数据释放之前一定会被调用,在这种场景下你应该删除所有的数据。但是,这些操作都不应该由你自己来处理,loader 会处理这些事情。
loader 会释放那些很长时间不被在使用的数据。所以应该使用 swapCursor() 来将数据传递给 CursorAdapter,而不是 close 就的 cursor 在 new 一个新的。
mAdapter.swapCursor(data);

8.3 onLoaderReset() 前一个 loader 被 reset 时调用,记的此时要让之前的数据无效,代码如下:
mAdapter.swapCursor(null);

9. 在 ApiDemos 中有两个例子:LoaderCursor, LoaderThrottle 可以参考

### 如何在 Vue3 项目中统一管理 Iconfont 文件 在 Vue3 项目中,为了实现对 `iconfont` 文件的高效管理和便捷使用,可以采用以下方式: #### 1. **安装依赖** 确保已经安装了 `axios` 和其他可能需要用到的工具库。如果尚未配置 `iconfont`,可以通过阿里云图标库下载对应的字体文件并将其集成到项目中。 #### 2. **全局注册 SVG 图标组件** 通过将所有的 `SVG` 图标打包成一个通用模块来简化其调用过程。以下是具体实现方法: - 创建一个新的目录用于存储所有导入的 `SVG` 资源,比如命名为 `src/icons/svg/`。 ```javascript // src/icons/index.js import { createApp } from 'vue'; import SvgIcon from './SvgIcon.vue'; // 自定义的 svg 组件 export function setupIcons(app) { app.component('SvgIcon', SvgIcon); } ``` 在此基础上构建一个动态加载机制以便于支持按需加载特定图标而无需一次性全部引入。 #### 3. **编写自定义 SVG 组件** 利用 Vue3 的组合 API 架构设计灵活可重用的小型组件作为基础单元处理单个矢量图形展示逻辑。 ```html <!-- src/icons/SvgIcon.vue --> <template> <svg :class="['icon', className]" aria-hidden="true"> <use :xlink:href="symbolId"></use> </svg> </template> <script lang="ts"> import { computed, defineComponent } from 'vue'; export default defineComponent({ props: { name: String, className: String, }, setup(props){ const symbolId = computed(() => `#${props.name}`); return { symbolId }; } }); </script> ``` 此部分代码片段展示了如何创建一个简单的封装版 `<svg>` 元素允许传入不同的属性来自由定制显示效果[^2]。 #### 4. **优化 Webpack 或 Vite 配置以支持自动注入 Symbol Sprites** 为了让开发者能够更加方便快捷地操作各种类型的图片素材,在构建阶段完成对其路径映射关系建立至关重要。这里推荐两种主流前端工程化解决方案——Webpack/Vite 来达成目标。 ##### 使用 Webpack 实现自动化流程 修改项目的 webpack.config.js 添加如下插件设置项: ```javascript const glob = require("glob"); const path = require("path"); module.exports = { chainWebpack(config) { config.module.rule('icons') .test(/\.svg$/) .include.add(path.resolve(__dirname,'./src/icons')) .end() .use('svgo-loader').loader('svgo-loader').tap(options=>{ options.plugins.push({removeTitle:true}) return options; }).end(); const icons = glob.sync('./src/icons/*.svg'); config.plugin('define').tap(args=>[ Object.assign({},args[0],{ __ICONS__:JSON.stringify(icons.map(iconPath=> iconPath.replace(/^.*\/([^/]*)\.svg$/, '$1'))) }) ]); } }; ``` 上述脚本实现了两件事:一是针对匹配规则下的 `.svg` 文件应用 svgo loader 去除不必要的 metadata;二是收集当前工作区内的所有可用图标名称列表并通过环境变量暴露给运行时访问[^3]。 ##### 利用 Vite 提升效率 对于现代快速迭代的应用场景来说,Vite 可能是一个更好的选择因为它提供了更快冷启动速度以及热更新能力。只需简单调整 vite.config.ts 即可获得相似的功能特性。 ```typescript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [ vue(), { name: 'custom-icons', transformIndexHtml(html) { let content = ''; const files = await this.globImport(new URL('./src/icons/*.svg', import.meta.url)); for(const file of Object.keys(files)){ const fileName = file.split('/').pop().replace('.svg',''); content += `<symbol id="${fileName}" viewBox="0 0 1024 1024">${files[file].default}</symbol>`; } return html.replace('</svg>',`${content}</svg>`); } } ] }) ``` 这段 TypeScript 定义了一个名为 custom-icons 的插件,该插件会在 HTML 文档结束前插入一组预先准备好的 symbols 数据块[^4]。 #### 5. **实际运用案例分析** 最后给出一段完整的路由配置实例说明前面提到的技术要点是如何结合起来发挥作用的。 ```javascript { path:'/example', component:Layout, redirect:'/example/list', meta:{title:'示例页面',icon:'file-text'}, children:[ { path:'list',name:'ExampleList',component:()=>import('@/views/example/List.vue'), meta:{title:'列表视图'} },{ path:'detail/:id?',name:'ExampleDetail',component:()=>import('@/views/example/Detail.vue'), meta:{title:'详情页'} } ] } [^5] ``` 以上即是在 Vue3 中实施集中式管理方案的一个完整指南,涵盖了从初始设定直至最终部署各个环节的关键要素。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值