技术分享 – Mr.try

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' }) // 修改标题颜色

继续阅读

nodejs批处理iconfontsvg文件

2018年3月7日2018年3月7日 Mr.try

nodejs批处理iconfontsvg文件生成svg对象文件供三端统一使用 [crayon-63d9e07d […]

继续阅读

nodejs实现简单的文件服务器

2018年3月6日2018年3月6日 Mr.try

const http = require('http')
const fs = require('fs')
const mime = require('mime')
const url = require('url')
const path = require('path')
const [hostname, port] = ['127.0.0.1', 3000]
const server = http.createServer((req, res)=>{
    let pathname = decodeURIComponent(path.join(__dirname,url.parse(req.url).pathname))
    if(fs.statSync(pathname).isDirectory()){
        res.writeHead(200,{'Content-Type':'text/html;charset=utf-8'})
        fs.readdir(pathname,(err,files)=>{
            res.write('<ul>')
            files.forEach(element => {
                let link = path.join(url.parse(req.url).pathname,element)
                res.write(`<li><a href = "${link}">${element}</a></li>`)
            });
            res.end('<ul>')
        })
    }
    else{
        fs.readFile(pathname, 'binary', (err, data)=>{
            if(err){
                res.writeHead(500,{'Content-Type':'text/plain'})
                res.end(JSON.stringify(err))
                return false
            }
            res.writeHead(200,{'Content-Type':`${mime.lookup(pathname)};charset:utf-8`})
            res.write(data,'binary')
            res.end()
        })
    }
    res.statusCode = 200
})
server.listen(port, hostname,()=>{
    console.log(`服务器运行在 http://${hostname}:${port}`)
})

const http = require('http')

const fs = require('fs')

const mime = require('mime')

const url = require('url')

const path = require('path')

const [hostname, port] = ['127.0.0.1', 3000]

const server = http.createServer((req, res)=>{

let pathname = decodeURIComponent(path.join(__dirname,url.parse(req.url).pathname))

if(fs.statSync(pathname).isDirectory()){

res.writeHead(200,{'Content-Type':'text/html;charset=utf-8'})

fs.readdir(pathname,(err,files)=>{

res.write('<ul>')

files.forEach(element => {

let link = path.join(url.parse(req.url).pathname,element)

res.write(`<li><a href = "${link}">${element}</a></li>`)

});

res.end('<ul>')

})

}

else{

fs.readFile(pathname, 'binary', (err, data)=>{

if(err){

res.writeHead(500,{'Content-Type':'text/plain'})

res.end(JSON.stringify(err))

return false

}

res.writeHead(200,{'Content-Type':`${mime.lookup(pathname)};charset:utf-8`})

res.write(data,'binary')

res.end()

})

}

res.statusCode = 200

})

server.listen(port, hostname,()=>{

console.log(`服务器运行在 http://${hostname}:${port}`)

})

继续阅读

gitlab折腾记录

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

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

继续阅读

文章导航

1 2 … 11 Older posts