什麼是前端元件化,模組化?
阿新 • • 發佈:2018-12-29
元件化就是做一個網站,把導航欄拆成一個元件,一個一個回答區域拆成一個元件,編輯區是一個元件,頁尾是一個元件,等等。。你可以盡情拆分。一個元件包含了html、css、js程式碼,可以簡單理解為頁面的一塊。
模組化就是做一個網站的編輯區元件,假設要有時間格式化、圖片格式處理、視訊格式處理、程式碼格式處理,這樣很多個js功能。那麼你當然可以在HTML裡面引入多個JS script,現在更流行更好的方式,是採用引入的方式。
比如在一個編輯區元件裡面,引入別人寫好的時間格式化和圖片格式處理的js程式碼:
<style>
...
</style>
<template>
...
</template>
<script>
var format = require('../lib/format') // local import
var img = require('lib-img') // npm import
/**
* es6
* import format from '../lib/format'
* import img from 'lib-img'
*/
/**
* your code here
*/
format(new Date())
img.getnewurl(' http://xxxx.jpg')
</script>
模組化就是做一個網站的編輯區元件,假設要有時間格式化、圖片格式處理、視訊格式處理、程式碼格式處理,這樣很多個js功能。那麼你當然可以在HTML裡面引入多個JS script,現在更流行更好的方式,是採用引入的方式。
比如在一個編輯區元件裡面,引入別人寫好的時間格式化和圖片格式處理的js程式碼:
<style>
...
</style>
<template>
...
</template>
<script>
var format = require('../lib/format') // local import
var img = require('lib-img') // npm import
/**
* es6
* import format from '../lib/format'
* import img from 'lib-img'
*/
/**
* your code here
*/
format(new Date())
img.getnewurl('
</script>