分类：javascript

function renderApp(newAppState, oldAppState = {}) { 
    if (newAppState === oldAppState) return 
    console.log('app')
    renderTitle(newAppState.title,oldAppState.title)
    renderContent(newAppState.content,oldAppState.content)
}
function renderTitle(newTitle, oldTitle = {}){
    if (newTitle === oldTitle) return
    console.log('title')
    const titleDOM = document.getElementById('title')
    titleDOM.innerHTML = newTitle.text
    titleDOM.style.color= newTitle.color
}
function renderContent(newContent, oldContent = {}){
    console.log(newContent,oldContent)
    if (newContent === oldContent) return
    console.log('content')
    const contentDOM = document.getElementById('content')
    contentDOM.innerHTML = newContent.text
    contentDOM.style.color= newContent.color
}
function stateChanger(state,action){
    if(!state){
        return {
            title: {
              text: 'React.js 小书',
              color: 'red',
            },
            content: {
              text: 'React.js 小书内容',
              color: 'blue'
            }
          }
    }
    switch (action.type) {
        case 'UPDATE_TITLE_TEXT':
            return {
                ... state,
                title:{
                    ...state.title,
                    text:action.text
                }
          }
            break
        case 'UPDATE_TITLE_COLOR':
            return {
                ... state,
                title:{
                    ...state.title,
                    color:action.color
                }
            }
            break
        default:
            return state
      }
}
function createStore(reducer){
    let state = null
    const listeners =[]
    const subscribe = (listener)=>listeners.push(listener)
    const getState = ()=>state
    const dispatch = (action)=>{
        state = reducer(state,action)
        listeners.forEach(listener=>listener())
    }
    dispatch({}) //  init state
    return {getState,dispatch,subscribe}
}

const store = createStore(stateChanger)

let oldState = store.getState()
store.subscribe(()=>{
    const newState = store.getState()
    renderApp(newState,oldState)
    oldState = newState
})
renderApp(store.getState())
store.dispatch({ type: 'UPDATE_TITLE_TEXT', text: '《React.js 小书》' }) // 修改标题文本
store.dispatch({ type: 'UPDATE_TITLE_COLOR', color: 'blue' }) // 修改标题颜色

function renderApp(newAppState, oldAppState = {}) {

if (newAppState === oldAppState) return

console.log('app')

renderTitle(newAppState.title,oldAppState.title)

renderContent(newAppState.content,oldAppState.content)

}

function renderTitle(newTitle, oldTitle = {}){

if (newTitle === oldTitle) return

console.log('title')

const titleDOM = document.getElementById('title')

titleDOM.innerHTML = newTitle.text

titleDOM.style.color= newTitle.color

}

function renderContent(newContent, oldContent = {}){

console.log(newContent,oldContent)

if (newContent === oldContent) return

console.log('content')

const contentDOM = document.getElementById('content')

contentDOM.innerHTML = newContent.text

contentDOM.style.color= newContent.color

}

function stateChanger(state,action){

if(!state){

return {

title: {

text: 'React.js 小书',

color: 'red',

content: {

text: 'React.js 小书内容',

color: 'blue'

}

switch (action.type) {

case 'UPDATE_TITLE_TEXT':

return {

... state,

title:{

...state.title,

text:action.text

}

break

case 'UPDATE_TITLE_COLOR':

return {

... state,

title:{

...state.title,

color:action.color

}

break

default:

return state

}

function createStore(reducer){

let state = null

const listeners =[]

const subscribe = (listener)=>listeners.push(listener)

const getState = ()=>state

const dispatch = (action)=>{

state = reducer(state,action)

listeners.forEach(listener=>listener())

}

dispatch({}) // init state

return {getState,dispatch,subscribe}

}

const store = createStore(stateChanger)

let oldState = store.getState()

store.subscribe(()=>{

const newState = store.getState()

renderApp(newState,oldState)

oldState = newState

})

renderApp(store.getState())

store.dispatch({ type: 'UPDATE_TITLE_TEXT', text: '《React.js 小书》' }) // 修改标题文本

store.dispatch({ type: 'UPDATE_TITLE_COLOR', color: 'blue' }) // 修改标题颜色

继续阅读

gitlab折腾记录

2017年12月17日2017年12月17日 Mr.try

本片为记录购买阿里云ecs并手动安装gitlab踩坑记录 1、操作系统为CentOS 2、vim /etc/y […]

继续阅读

Handlebars菜单树

2017年7月31日2017年12月18日 Mr.try

{{#each children}}
{{#withPerm auth}}
{{#if children}}
<li class="nav-list son-nav-list {{#each children}}{{#indexOf href ../../_PATH_ }}nav-open{{/indexOf}}{{/each}}" data-auth="{{auth}}">
<a class="nav-list-header son-nav-list-header" href="javascript:;">
<span class="subnav-header">
<label>&nbsp;{{name}}</label>
{{#if children}}<span><i class="icon-spinda icon-spinda-xiangxiazhedie"></i></span>{{/if}}
</span>
</a>
<ul class="nav-list-body">
{{> component:user/sidebar_container/backend_templates/block}}
</ul>
{{else}}
<li class="subnav-list {{#indexOf href ../../_PATH_}}active{{/indexOf}}" data-auth="{{auth}}">
<a href="{{href}}"{{#if blank}} target="_blank"{{/if}} class="subnav-list-header">{{name}}</a>
{{/if}}
</li>
{{/withPerm}}
{{/each}}

{{#if children}}{{/if}}

</a>

</ul>

</li>

[crayon-5e231240913095 […]

继续阅读

前端UI库杂记

2017年6月15日 Mr.try

基于vue框架的UI库

 vue-material:<a href="https://vuematerial.github.io/#/">https://vuematerial.github.io/#/</a>
 elementui:<a href="http://element.eleme.io/#/zh-CN">http://element.eleme.io/#/zh-CN</a>
 iviewui:<a href="https://www.iviewui.com/">https://www.iviewui.com/</a>
 mint:<a href="http://mint-ui.github.io/#!/zh-cn">http://mint-ui.github.io/#!/zh-cn</a>
 ydui:<a href="http://vue.ydui.org/">http://vue.ydui.org/</a>

vue-material:<a href="https://vuematerial.github.io/#/">https://vuematerial.github.io/#/</a>

elementui:<a href="http://element.eleme.io/#/zh-CN">http://element.eleme.io/#/zh-CN</a>

iviewui:<a href="https://www.iviewui.com/">https://www.iviewui.com/</a>

mint:<a href="http://mint-ui.github.io/#!/zh-cn">http://mint-ui.github.io/#!/zh-cn</a>

ydui:<a href="http://vue.ydui.org/">http://vue.ydui.org/</a>

mint与ydui是 […]

继续阅读

文章导航

1 2 … 5 Older posts