本博客不再更新 github:https://github.com/Mr-try 语雀:https://www […]
分类:javascript
cnpm私有仓库搭建
参考文章 1. cnpm:告诉你为何以及如何搭建一个私有的npm仓库 2. mysqlcentos7 mysq […]
webpack多页面
背景 传统多页面项目,每个项目引入公共组件js和第三方js 方案 webpack.util.js [crayo […]
redux手动
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
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折腾记录
本片为记录购买阿里云ecs并手动安装gitlab踩坑记录 1、操作系统为CentOS 2、vim /etc/y […]
Handlebars菜单树
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
{{#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> {{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}} |
[crayon-62fe932b191f11 […]
前端UI库杂记
基于vue框架的UI库
1 2 3 4 5 |
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是 […]