现代化web前端开发架构


现代化web前端开发架构 客服管理研发部 韩旭 前端 开发中的问题      主要内容         npm $ npm install $ npm install “dependencies“: { “axios“: “^0.11.1“, “classnames“: “^2.2.5“, “react“: “^15.1.0“, “react-dom“: “^15.1.0“, “react-noty“: “^1.0.11“, “react-redux“: “^4.4.5“, “react-router“: “^2.4.1“, “react-router-redux“: “^4.0.5“, “redux“: “^3.5.2“, “redux-actions“: “^0.9.1“, “redux-thunk“: “^2.1.0“ } npm npm is ES6 ES6   ES6 import and export import $ from 'jquery' function useJquery() { $('.class').val() } $ npm install jquery export function createReducer(initialState, handlers) { return function reducer(state = initialState, action = null) { if (handlers.hasOwnProperty(action.type)) { return handlers[action.type](state, action); } else { return state; } } } import { createReducer} from 'utils/utils' const selectedWorkDay = createReducer('', { [Actions.ScheAction.SELECT_WORK_DATE](state, action) { return action.payload } }) ES6 import and export ES6 其它新特性 const link = function(height = 50, color = 'red') { ... } const param = { username: 'user1', password: 'abc123' } const { username, password } = param function login({username = 'admin', password = 'abcd'}) { ... } var _this = this $('.btn').click(function(event){ _this.sendData() }) $('.btn').click((event) => { this.sendData(); }) ES6 其它新特性 import React from 'react' export default class TextInput extends React.Component { constructor() { super(); this.handleInput = this.handleInput.bind(this); } render() { return (
{clear}
); } ... } ES6 其它新特性 如何在项目中使用ES6 Webpack module: { loaders: [ { test: /\.(png|jpg|jpeg|gif)$/, loader: 'url-loader?limit=10000&name=./images/[name].[ext]' }, {test: /\.js$/, loaders: ['react-hot', 'babel']}, {test: /\.less$/, loader: 'style!css!less'}, {test: /\.css$/, loader: 'style-loader!css-loader'}, {test: /\.ttf|eot|svg|woff|woff2$/, loader: “file-loader“} ] } Webpack Webpack ... 众客服
Webpack Why React? We built React to solve one problem: building large applications with data that changes over time. React React React React
  • {weekInfo.dateStep}
我要请假
{“name“: “张小政“, “totalWorkHour“: 38.5, “score“: 0} [ { “weekNum“: 26, “duration“: “2016.06.27-2016.07.03“, “dateList“: [ { “dateStr”: “06.27”, “selected”: true, ...}, {...}, ... ] }, {...} ] React render() { const { scheHisList } = this.state const itemList = scheHisList.map(item => { return () }) return (
{itemList}
) } React render() React   React React Hot Loader React Thank you !
还剩27页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 10 金币 [ 分享pdf获得金币 ] 0 人已下载

下载pdf

pdf贡献者

jombowang1

贡献于2017-02-13

下载需要 10 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf