码迷,mamicode.com
首页 > 其他好文 > 详细

7.25日学习记录

时间:2017-07-26 01:41:59      阅读:172      评论:0      收藏:0      [点我收藏+]

标签:lang   str   manage   index   整合   token   插件   component   组件   

1.html+css+js (基本) js(没掌握好)
2.简单的框架:bootstarp jq 插件 (百度) 一些效果插件(跟着文档教程很容易上手的) 比如移动端有一个(swiper) 轮播插件
3.原来的MVC架构( 把我们前端分为3层 M 是数据层 V 视图层 C 控制层 中间层 )
4. 前后端分离之后, 前端在不会有任何后端代码的参与(MVVM VUE react augular avloan )
5.开发的思想 模块化,工程化,(前端应该页面复杂后,多人协作开发会很困难,所以就出来了模块化, 就是说每一个人负责一个模块,sea.js require.js 比如这些工具都是基于几个标准进行开发,(AMD common,js)

6.工程化,我们的工程化理解就是说把我们开发应用当成一个工程去做,那么一个工程(把每一部分的应用单独抽离出来,但是最后又是需要我们进行整合的) (webpack,grunt,glup)
7.优化(如何去减少用户的带宽量,减小我们页面的开发体积,以及我们需要加载业务的大小)(最重要的,也是最难的) (css+js+img+http+cdn+dns)
8.如何提高我们代码质量的一些工具(开发的思想,函数式编程,一些优化算法,一些架构)
9.总结来说(前端都是在基于我们的页面开发 围绕的就是我们页面以及用户体验(流畅度))
10。为了去解决问题

 

7.25 22-23:30: 跟着一起看下react 一起的技术栈是什么样子的; (react-router,redux,react-redux)

一:读react-router文档的记录以及理解:

1.基本用法:    

<Router>
    <Route path="/" component={App}>
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox}>
        <Route path="messages/:id" component={Message} />
      </Route>
    </Route>
  </Router>

2.如何配置路由:、
组件式的配置:
const routes = (
<Route>
<Route path="/" component={App}>


<Route path="/houseCheck" getComponent={houseCheck1} />
<Route path="/houseManage" getComponent={houseManage1} />
<Route path="/houseDetail/:houseId" getComponent={houseDetail1} />
<Route path="/roomDetail/:houseId/:roomId" getComponent={roomDetail1} />


<Route path="/popCheck" getComponent={popCheck1} />
<Route path="/map" getComponent={map} />
<Route path="/test" getComponent={test} query={{‘name‘: ‘dupi‘}} />

</Route>
<Route path="/login" getComponent={Login1}></Route>
</Route>
);
 
字面量的配置:
const routeConfig = [
  { path: ‘/‘,
    component: App,
    indexRoute: { component: Dashboard },
    childRoutes: [
      { path: ‘about‘, component: About },
      { path: ‘inbox‘,
        component: Inbox,
        childRoutes: [
          { path: ‘/messages/:id‘, component: Message },
          { path: ‘messages/:id‘,
            onEnter: function (nextState, replaceState) {
              replaceState(null, ‘/messages/‘ + nextState.params.id)
            }
          }
        ]
      }
    ]
  }
]

 

配置完成如何利用路由进行跳转:

React.render(<Router routes={routeConfig} />, document.body)


默认会有一个路由匹配机制:
 history:具体看文档

7.25日学习记录

标签:lang   str   manage   index   整合   token   插件   component   组件   

原文地址:http://www.cnblogs.com/xinyoumenghu/p/7237251.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!