自制簡易前端MVC框架

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

基本思路與涉及技術

1. 使用url hash進行路由跳轉
2. js監聽hashchange事件，根據當前hash去決定介面如何渲染
3. 呼叫 addHandler(hash, func)這個api來對映hash與handler
4. gulp，scss， es6，模板引擎
5. 需要一些es6的知識，需要理解this
6. 整個工程在 https://github.com/MoonShining/front-end-hero/tree/master/blog， front-end-hero是我自己寫的模板程式碼生成器，用它來練習CSS， 使用ruby create.rb -n name -s url來快速建立目錄結構，免去重複的工作

例子

核心程式碼

(()=>{

	let blog = new Blog()
	// add simple router
	blog.addHandler(['', '#programming'], function(){
		let data = {articles: [{title: 'stories to be continue', date: '2017-04-09'}]}
		this.compile('#article-template', data)	
	})

	blog.addHandler('#about', function(){
		let data = {avatar: 'http://7xqlni.com1.z0.glb.clouddn.com/IMG_0337.JPG?imageView2/1/w/100/h/100', name: 'Jack Zhou'}
		this.compile('#about-template', data)
	})

	// initialize the page
	blog.init()

})()
複製程式碼

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

class Blog {

	constructor(){
		this.content = '#content'
		this.router = {}
	}

	init(){
		this.dispatch()
		$(window).on('hashchange',()=>{ 
			this.dispatch()
		});
	}

	dispatch(){
		this.handle(window.location.hash)
	}

	addHandler(hash, func){
		if(Array.isArray(hash)){
			for(let item of hash){
				this.router[item] = func
			}
		}else{
			this.router[hash] = func
		}
	}

	handle(hash){
		if(this.routeMissing(hash)){
			this.handle404()
			return
		}
		this.router[hash].call(this)
	}

	routeMissing(hash){
		if(this.router[hash])
			return false
		else
			return true
	}

	handle404(){
		console.log('handler not found for this hash')
	}

	compile(templateSelector, data, element=this.content){
		let source   = $(templateSelector).html()
		let template = Handlebars.compile(source)
		$(element).html(template(data))
	}

}

複製程式碼

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