美文网首页
用koc-loader写类Vue的Knockout单文件组件

用koc-loader写类Vue的Knockout单文件组件

作者: Zaaksam | 来源:发表于2017-12-08 15:46 被阅读0次

    前言

    在前端界MVVM框架高速发展中,各种工具链的完善和普及,作为MVVM鼻祖的Knockout(下称ko)在这波浪潮中却掉队了。其中,以国内优秀MVVM框架Vue为例,带来了单文件组件的新一波666操作,写起组件来爽快感爆棚。而受限于万恶的IE浏览器问题,我们并不能使用Vue来打造一切。那么,有没有办法像Vue单文件组件一样来写ko的组件呢?找了一圈,没有。本着开源分享精神,在基于vue-loader和san-loader的基础上,进行一些小改,撸了一个koc-loader,实现了类似Vue单文件组件的开发形式。

    安装

    yarn add koc-loader css-loader style-loader html-loader -D
    

    配置

    因个人喜爱偏好,下述内容都是基于Typescript的代码演示。理论上支持script使用js、babel、coffeescript等loader组合

    webpack.config.js

    使用了ts-loader,请注意 entry 入口必须是 .ts 文件

    {
        resolve: {
            extensions: ['.ts', '.js', '.koc']
        },
        module: {
            rules: [
                {
                    test: /\.css$/,
                    loader: 'style-loader!css-loader'
                },
                {
                    test: /\.html$/,
                    loader: 'html-loader'
                },
                {
                    test: /\.ts$/,
                    loader: 'ts-loader',
                    exclude: /node_modules/,
                    options: {
                        appendTsSuffixTo: [/\.koc$/]
                    }
                },
                {
                    test: /\.koc$/,
                    loader: 'koc-loader'
                }
            ]
    }
    

    koc.d.ts

    需要定义 .koc 文件的声明

    /// <reference types="knockout" />
     
    declare module "*.koc" {
        const koc: KnockoutComponentTypes.Config
        export default koc
    }
    

    示例代码

    <template>
        <div>
            <div data-bind="text: info"></div>
            <menu></menu>
        </div>
    </template>
    
    <script lang="ts">
    import ko from 'knockout';
    import Menu from "./src/component/menu/menu.koc"; //加载其他ko组件
    
    ko.components.register('menu', Menu);
    
    export default class viewModel {
      info: KnockoutObservable<string>;
    
      constructor(params: any) {
        this.info = ko.observable("hello koc-loader");
      }
    }
    </script>
    

    是不是很Vue?

    koc工作机制

    通过ko的d.ts文件定义,我们可以得知 ko.components.register 的方法定义:

    register(componentName: string, config: KnockoutComponentTypes.Config | KnockoutComponentTypes.EmptyConfig): void;
    

    其中 KnockoutComponentTypes.Config 定义为:

    interface Config {
            viewModel?: ViewModelFunction | ViewModelSharedInstance | ViewModelFactoryFunction | AMDModule;
            template: string | Node[]| DocumentFragment | TemplateElement | AMDModule;
            synchronous?: boolean;
        }
    

    example.koc 的示例代码中的script导出的实际上是 ViewModelFunction ,怎么能直接丢给 register 呢?

    实际上,这里就是 koc-loader 的中间作用了,它会将script中导出的 viewModel 进行一个代码封装:

    var Component = {
        viewModel: function (params) {
            return new __koc_script__(params)
        },
        template: __koc_template__
    }
    module.exports = Component
    

    最终script部份导出的,就是一个符合 KnockoutComponentTypes.Config 定义的对象,perfect~~

    注:params参数,请参照ko官网文档

    进阶

    使用index.ts实现默认导出

    可以在 .koc 文件同名目录下,建立 index.ts 文件

    import Menu from './menu.koc'
    export default Menu
    

    这样我们导入组件时,可以使用下面的更简短的方式:

    import Menu from './src/component/menu'
    
    ko.components.register('menu', Menu)
    

    更简洁的组件注册

    通过上面的代码我们看到用 ko.components.register 比较罗嗦,这时Vue的组件注册形式又浮现出来,我们又马上撸了一个类似的形式:

    kocHelper.ts

    import ko from 'knockout'
    import _ from 'lodash'
    
    interface Components {
        [key: string]: KnockoutComponentTypes.Config | KnockoutComponentTypes.EmptyConfig
    }
    
    export function Use(components: Components) {
        for (let c in components) {
            let name = _.kebabCase(c) //ko组件名称需要符合kebab-case
    
            if (ko.components.isRegistered(name)) {
                //同名组件已存在,跳过
                continue
            }
    
            ko.components.register(name, components[c])
        }
    }
    

    OK,现在我们就可以这么注册组件了:

    import kocHelper from './kocHelper'
    import IMenu from './src/component/menu'
    let IMenu2 = IMenu
    let IMenu3 = IMenu
    
    kocHelper.Use({
        IMenu,
        IMenu2,
        IMenu3
    })
    

    结尾

    ko最大的问题就是太老了,资源匮乏,但是因为众所周知的原因,我们还需要它,当然,今天我们可能有另一些新的选择,比如百度的san,但在我们离开之前,我们希望能让ko的开发更加有趣一些,这样也就满足了。

    相关资源:

    相关文章

      网友评论

          本文标题:用koc-loader写类Vue的Knockout单文件组件

          本文链接:https://www.haomeiwen.com/subject/qzieixtx.html