自製簡易前端MVC框架

2021-09-11 17:38:08 字數 1086 閱讀 3945

週末花了大概7小時寫了乙個簡易的響應式blog,原意是練習css的,寫著寫著卻去實現了一套前端路由並渲染的東西,這裡寫一點心得體會

基本思路與涉及技術

使用url hash進行路由跳轉

js監聽hashchange事件,根據當前hash去決定介面如何渲染

呼叫addhandler(hash, func)這個api來對映hash與handler

gulp,scss, es6,模板引擎

需要一些es6的知識,需要理解this

整個工程在 front-end-hero是我自己寫的模板**生成器,用它來練習css, 使用ruby create.rb -n name -s url來快速建立目錄結構,免去重複的工作

例子 核心**

(()=>]}

this.compile('#article-template', data)

}) blog.addhandler('#about', function

() this.compile('#about-template', data)

}) // initialize the page

blog.init()

})()

複製**

呼叫blog.addhandler來自定義路由改變之後觸發的動作

class blog 

} init

());

} dispatch

() addhandler(hash, func)

}else

} handle(hash)

this.router[hash].call(this)

} routemissing(hash)

handle404

() compile(templateselector, data, element=this.content)

}複製**

this.router是個是核心,其實也參考了一點rails的設計,通過乙個物件去儲存 路由=》動作 的關係, 並且把核心邏輯都封裝在blog這個類中。

自製簡易前端MVC框架

週末花了大概7小時寫了乙個簡易的響應式blog,原意是練習css的,寫著寫著卻去實現了一套前端路由並渲染的東西,這裡寫一點心得體會 基本思路與涉及技術 使用url hash進行路由跳轉 js監聽hashchange事件,根據當前hash去決定介面如何渲染 呼叫addhandler hash,func...

前端MVC框架之 Angular

最大程度實現 復用 定義應用 定義模組 定義控制器 view和model的橋梁 單向繫結 雙向繫結 舉乙個小例子 初始化模型 既初始化 scope 事件處理 資料處理 自定義過濾器 總結get的請求方式 對應資料用params,ps 伺服器端接收 get,在success中列印 log.info r...

自製MVC框架CRUD操作 列表 分頁顯示外掛程式介紹

這裡涉及到的操作都是引用自stephen.dalservice資料層。資料訪問層實現方式在後文中我會仔細的說明,先說明一下資料操作整合的外掛程式。用於插入記錄。狀態返回值 假定hashtable傳遞變數名的是context 那麼返回值可通過context insertattribute.valuek...