背景：
目前我們專案都是按元件劃分的，然後各個元件之間封裝成產品。目前都是採用iframe直接巢狀頁面。專案中我們還是會碰到一些通用的元件跟業務之間有通訊，這種情況下iframe並不是最好的選擇，iframe存在跨域的問題，當然是postmessage還是可以通訊的，但也並非是最好的。目前有這麼乙個場景：門戶需要製作通用的首頁和資料概覽頁面，首頁和資料概覽頁面通過小部件來自由拼接。業務元件在製作的時候只需要提供各個模組小部件的url就可以了，可是如果小部件之間還存在聯絡呢？那麼iframe是不好的。目前採用vue動態載入非同步元件的方式來實現小組件之間的通訊。當然門戶也要提供乙個通訊的基線：vue事件匯流排(空的vue例項物件)。
內容：使用過vue的都應該知道vue的動態載入元件components：
vue通過is來繫結需要載入的元件。那麼我們現在需要的就是如何打包元件，如果通過複製業務元件內部的**，那麼這種就需要把依賴全部找齊，並複製過去(很多情況下會漏下某個或css等)，這種方式是比較low的，不方便維護。因此我們需要通過webpack來打包單個vue檔案成js，這邊乙個vue打包成乙個js，不需壓**分割，css分離。因為component載入時只需要載入乙個檔案即可。打包檔案配置如下：
首先在package.json加入打包命令：
"scripts": ) + '\n\n')
if (stats.haserrors()) = require('./out-components-tools')
function resolve(dir)
var modulesrcarray = glob.sync('./src/out-components/*')
for(var x in modulesrcarray) else else , 1000)
methods: }
export default {
data () {
return {
a1: 0
created () {
this.$root.eventbus.$on('childevent', this.change)
methods: {
change (i) {
this.a1 = i
業務元件就可以根據this.$root.eventbus和vue上的事件傳遞($emit, $on)來實現相互的通訊。
總結：本篇主要借助vue的動態元件和webpack打包單檔案來實現動態載入非同步元件，通過vue的事件匯流排掛載在this.$root上來實現平級元件之間的通訊。
拓展方向：這個方式不僅僅可以應用在門戶單個頁面上的小部件上，同樣如果某個專案中的頁面檔案需要復用時，不想通過**的複製，同樣可以再那個檔案配置打包單檔案配置，打包出的檔案在領乙個專案中動態載入出來即可。這種模式與通用元件的install模式是有點類似的，只是這個單檔案vue不是通用的，但同樣可以達到打包復用頁面。
同步載入 非同步載入和延遲載入和預載入
常預設的是同步載入 1 src script 同步模式又稱阻塞模式，會阻止瀏覽器的後續操作，相當於阻止了後續的檔案的解析，執行等。流覽器之所以會採用同步模式，是因為載入的js檔案中有對dom的操作，重定向，輸出document等預設行為，所以同步才是最安全的。通常載入js檔案或者放標籤都在結構最後面...
同步載入 非同步載入和延遲載入和預載入
常預設的是同步載入 1 src script 同步模式又稱阻塞模式，會阻止瀏覽器的後續操作，相當於阻止了後續的檔案的解析，執行等。流覽器之所以會採用同步模式，是因為載入的js檔案中有對dom的操作，重定向，輸出document等預設行為，所以同步才是最安全的。通常載入js檔案或者放標籤都在結構最後面...
python 反射和動態載入 Python的反射
什麼是反射 反射是乙個很重要的概念，它可以把字串對映到例項的變數或者例項的方法然後可以去執行呼叫 修改等操作。它有四個重要的方法 getattr 獲取指定字串名稱的物件屬性 setattr 為物件設定乙個物件 hasattr 判斷物件是否有對應的物件 字串 delattr 刪除指定屬性 attr是屬...