Ming YIN
Crazy Monster!
Frontend sharing
Ming YIN
VUE.JS
Meteor
Es6
VUE.JS
MVC
Model - View - Controller
MVVM
Model - View - ViewModel
<form id="demo">
<input type="text" v-model="message">
<p>{{message}}</p>
</form>var demo = new Vue({
el: '#demo',
data: {
message: 'Hello Vue.js!'
}
});<form id="demo">
<label for="message">{{messageHint}}</label>
<input id="message" type="text" v-model="message">
</form>var demo = new Vue({
el: '#demo',
data: {
message: 'Hello Vue.js!'
},
computed: {
messageHint: function() {
if (this.message) {
return "Message: " + this.message;
} else {
return "Message is empty!";
}
}
}
})<form id="demo">
<input id="number" type="number" min="0" max="100" v-model="number">
<p>{{number | truncNumber}}</p>
</form>var demo = new Vue({
el: '#demo',
data: {
number: 0
},
filter: {
truncNumber: function(number) {
if (number < 1000) {
return number;
} else {
return number / 1000 + 'K';
}
}
}
})<form id="demo">
<input type="number" v-model="number" v-on="focus: alertNumber">
<p>{{number | truncNumber}}</p>
</form>var demo = new Vue({
el: '#demo',
data: {
number: 0
},
methods: {
alertNumber: () {
alert(this.message);
}
},
filter: {
truncNumber: function(number) {
if (number < 1000) {
return number;
} else {
return number / 1000 + 'K';
}
}
}
})<form id="demo">
<message>
<number>
</form>var demo = new Vue({
el: '#demo',
components: {
message: {
template: '...',
data: function() { return {...}; },
methods: { ... }
},
number: {
...
}
}
})vue-loader
<style lang="scss">
body {
font-size: 16px;
p {
margin: 1em 0;
}
}
.fade {
opacity: 0;
@include transition(opacity .3s);
&:hover, &:active {
opacity: 1;
}
}
</style>
<template lang="jade">
form#demo
p {{text}}
message
number
</template>
<script lang="babel">
import message from "./form-components/message"
import number from "./form-components/number"
export default {
replace: true,
components: {
message: message,
number: number
},
data () {
return {
text: 'Hello World!'
}
},
...
}
</script>Meteor
One language everywhere
Live updates
Ultra responsive
Unified package system
Mobile first
@Comments = new Mongo.Collection 'comments'
@Comments.allow
insert: (userId, comment) ->
return false
update: (userId, comment, fields, modifier) ->
userId is comment.owner and ! _.difference(fields, ['content', 'updated_at']).length
remove: (userId, comment) ->
userId is comment.owner
NonEmptyString = Match.Where (x) ->
check x, String
x.length isnt 0
Meteor.methods
createComment: (content, ownerId) ->
check content, NonEmptyString
commentId = Random.id()
timeNow = Date.now()
Comments.insert
_id: commentId
owner: ownerId
content: content
created_at: timeNow
updated_at: timeNow
commentId
# Initiate the comment input content
Meteor.startup () ->
Session.set 'content', ''
Session.set 'tempId', Random.id()
# Create a comment
Template.commentInput.events
'keyup textarea': (event, template) ->
Session.set 'content', template.$('textarea').val()
'click button': (event, template) ->
userId = Meteor.userId()
ownerId = if userId? then userId else Session.get('tempId')
lastComment = Comments.findOne {owner: ownerId}, {sort: {created_at: -1}}
if lastComment? and (Date.now() - lastComment.created_at < 3000)
alert('You have added too many comments!')
else
Meteor.call 'createComment', Session.get('content'), ownerId
$('.comments').scrollTop 0
template.$('textarea').val ''
Session.set 'content', ''
Template.commentInput.creatorName = () ->
currentUser = Meteor.user()
if currentUser?
", #{displayName(currentUser)}"
else
''
# Show comments
Template.chatRoom.comments = () ->
Comments.find {}, {sort: {created_at: -1}}
# Show a comment
Template.commentBox.mine = () ->
id = Meteor.userId()
id? and @owner is id
Template.commentBox.creatorName = (id) ->
owner = Meteor.users.findOne id
if owner? then displayName(owner) else "#{id.slice(0, 2)}····#{id.slice(-5)}"
Template.commentBox.showTime = (time) ->
new Date(time).toLocaleString()
Template.commentBox.events
'click .remove': () ->
Comments.remove @_id
false
'keypress .content': (event, template) ->
$content = $ event.target
if event.charCode is 13
content = $.trim $content.text()
if content.length > 0
Comments.update @_id,
$set:
content: content
updated_at: Date.now()
, () =>
$content.html content
$content
.blur()
.addClass 'animated fadeIn'
.one 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', () ->
$content.removeClass 'animated fadeIn'
else
$content
.html @content
.addClass 'animated shake'
.one 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', () ->
$content.removeClass 'animated shake'
event.preventDefault()Ecmascript 6
ECMAScript 2015
Babel
阮一峰
Promise
generator
module
thanks!
易快报 - 前端分享
By Ming YIN
