技术分享 – Mr.try

cnpm私有仓库搭建

2018年8月6日 Mr.try

参考文章 1. cnpm:告诉你为何以及如何搭建一个私有的npm仓库 2. mysqlcentos7 mysq […]

继续阅读

webpack多页面

2018年8月6日 Mr.try

背景传统多页面项目，每个项目引入公共组件js和第三方js 方案 webpack.util.js [crayo […]

继续阅读

git相关问题

2018年8月6日 Mr.try

版本控制 master 分支（生产环境） master 为主分支，也是用于部署生产环境的分支，确保maste […]

继续阅读

redux手动

2018年4月17日 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日 Mr.try

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

继续阅读

nodejs实现简单的文件服务器

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 […]

继续阅读

react 三端统一SVG图标使用

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

iconSvg组件下 index.js

import React, { Component } from 'react'
import Svg, { Path } from 'react-native-svg'
import Icons from 'app/files/font/iconfont.svg.js'
import { rem } from '../util'

const ICON_SIZE = { xxs: 15, xs: 18, sm: 21, md: 22, lg: 36 }
export default class IconSvg extends Component {
render() {
const { type, width, height, size, style } = this.props
return (
<Svg
    width={rem(width || ICON_SIZE[size] || 22)}
    height={rem(height || ICON_SIZE[size] || 22)}
    viewBox={Icons.viewBox[type] || '0 0 1024 1024'}
    style={{
        ...style,
    }}
>
{
    Icons[type].map((path, i) => {
        return <Path key={i} d={path.d} fill={path.fill} />
    })
    }
</Svg>;
        )
    }
}

import React, { Component } from 'react'

import Svg, { Path } from 'react-native-svg'

import Icons from 'app/files/font/iconfont.svg.js'

import { rem } from '../util'

const ICON_SIZE = { xxs: 15, xs: 18, sm: 21, md: 22, lg: 36 }

export default class IconSvg extends Component {

render() {

const { type, width, height, size, style } = this.props

return (

<Svg

width={rem(width || ICON_SIZE[size] || 22)}

height={rem(height || ICON_SIZE[size] || 22)}

viewBox={Icons.viewBox[type] || '0 0 1024 1024'}

style={{

...style,

}}

{

Icons[type].map((path, i) => {

return <Path key={i} d={path.d} fill={path.fill} />

})

}

</Svg>;

)

}

in […]

继续阅读

文章导航

1 2 … 11 Older posts