SFC is a component code organization form proposed by VUE. In a. Vue file, the template, script, and style of a component are written together for management, which helps organize all content of a single component in a centralized manner. Have you ever thought that SFC can be implemented in jQuery? This article will take you through the SFC in practice in jQuery.

The introduction of the framework

First, you’ll need to introduce a framework, JQVM, into your existing jQuery system, which is a jQuery plug-in introduced exactly like any other plug-in.

<script src="https://unpkg.com/jqvm/dist/jqvm.min.js"></script>
Copy the code

In this way, you have the basic environment to support the SFC.

Write the SFC

Next, write a.htm file as jQuery’s SFC:

<template hoist>
  <div class="my-component">
    <div class="my-component__title">{{title}}</div>
    <div class="my-component__cotnent">{{content}}</div>
  </div>
</template>

<style>
  .my-component {
    padding: 10px;
  }
  .my-component__title {
    font-size: 1.4 em;
  }
</style>

<script>
  export default ($template, $) => $template
    .vm(() = > {
      return {
        title: 'Default Title'.content: 'Default Content',
      }
    })
    .on('$init'.(state) = > {
      // When instantiating, pull data and populate
      $.get('/api/data').then((data) = > {
        const { title, content } = data
        state.title = title
        state.content = content
      })
    })
</script>
Copy the code

This creates an SCF that consists of three parts, where the hosit in the

compile

Next, you need to compile the SFC using jqVM-Loader. With WebPack, you can configure it like this:

// NPM I JQVM is executed first

{
  module: {
    rules: [{test: /\.html$/,
        resourceQuery: /jqvm/.// Optional, when you use this rule, then only import.. from './some.html? JQVM 'is only compiled by JQVM /loader
        use: [
          {
            loader: 'babel-loader'.// The loader will parse an HTML file and compile it into an ESModule. This ESModule is a JQVM component, which is then passed to Babel for compilation.
          },
          
          // Must be placed under babel-loader
          {
            loader: 'jqvm/loader'.// JqVm-loader is located under the JQVM package
            options: {
              $: true.// Optionally, if $is true, the generated component code will not import jquery and JQVM, but use the global $object directly. If a string such as' jquery 'is passed in, the global variable will be assigned to $as a reference to jquery},},],}]}}Copy the code

But in most cases, the previous jquery system was imported directly without using a compilation system. You can compile SFC directly using NodeJS using the compiler interface exposed by jqVM-Loader.

// compile.js
const { compile } = require('jqvm/loader')
const fs = require('fs')

const content = compile(fs.readFileSync(__dirname + '/my-component.htm').toString(), { $: true })
fs.writeFileSync(__dirname + '/my-component.js', content)
Copy the code

Then run the compile file with NodeJS

node compile.js
Copy the code

It’s an ES module. If you want to run it in ES5, you’ll need to translate it again with Babel. If you want to import it directly into the browser, you’ll need to wrap it with umD, it’s just an ES module.

If you want to use this component in the traditional way, you can compile it using Webpack. Such as:

// my-component.bundle.js <- wrap it with webpack
window['my-component'] = require('./my-component.js').default
Copy the code

Once the above file is packaged with a Webpack with Babel, you can mount a ‘my-Component’ property on the window.

Using the component

Once we have my-component.js (which is still an ES module without Babel compilation and UMD wrapping), we can use this component. Next we use it like this:

<my-component id="some"></my-component> <! -- This tag can be used anywhere, as long as the id corresponds to it -->

<script type="module">
  import myComponent from './my-component.js'
  myComponent.mount('#some')
</script>
Copy the code

The ES syntax import is used here, because we are directly using the compiled my-component.js module, which is an ES module and currently can only be loaded this way.

After doing this, the interface renders the SFC component under Template# some.

Using type=”module” is only supported in advanced browsers and was rarely used in older jquery systems. Or you can go through it yourself and just introduce it to fit our traditional programming intuition. Using the previously compiled my-component.bundle.js, the above script can be rewritten like this:

<script src="./my-component.bundle.js"></script> <! -- Load the component, and the component instance hangs on the window -->
<script>
  const myComponent = window['my-component']
  myComponent.mount('#some')
</script>
Copy the code

This is consistent with the way we traditionally write jquery applications. But the compilation process in the middle is more troublesome.

The end of the

This article just shows you a way to implement some of the new ideas in traditional jquery. If you want to implement them in the old jquery system, you will definitely encounter some problems. Or follow my wechat official account wwwTangshuangnet for discussion. Finally, if you think this project is good, go to Github and give a star, god will thank you 🙏