【portia前端组织结构拆解】

整体页面结构

   <!-- <nav id='top-bar'>
        <section>
            container

                 side-bar
                 main
                     options-panels
                     div  (main)
                     tool-panels
          </section>
                              --!>

projects

• component结构

 {{project-list}}
    {{input-with-clear}} 
       {{input}} <!--这是一个ember helper --!>
       {{icon-button class="clear-input" icon="close" action=(action "clear")}} <!--这是一个通用component，通过class来改变背景颜色--!>            

• component.js分析

 components/input-with-clear.js 一个带功能的输入框
 components/project-list.js
     f1  showSearch -->return this.get("projects.content,length") > this.get("minSearchProjects");
     f2  filteredProjects  -->Ember.computed("projects","searchTerm",function(){
                                         let term = this.get('searchTerm');
                                         if (term.length===0){
                                              return this.get('projects');
                                              }
                                         return this.get('store').peekAll('project').filter(function(item){
                                              return item.get('name').toLowerCase().indexOf(term) > -1;
                                              });
                                              })
 。project-list.hbs   
      {{if showSearch}}
           {{输入框}}
           {{搜索结果}}
      {{else}}
           {{项目列表}}

---

## browsers

• component.js分析

 component/browsers.js
      let browsers = [
      {
        name:''
        alt:''
      }
      return browsers
 browsers.hbs
      {{browser-list browsers=model}}  <!--这里的model就是model() {return browsers}里的browsers--!>
            {{#each browser as |browser|} <!--这是数据流转的过程--!>

projec t

component结构

{{browser-view-port clickHandler=(action "viewPortClick") as |options|}}
    *{{outlet "browser-toolbar"}}*
        {{save-status}}
        {{project-listing    project=model   relaod='reload'   conflict='conflict'}}
        {{project-structure-listing    project=model}}
    *{{outlet "browser-overlays"}}*
    {{url-bar}}
        {{tooltip-container}}
            {{yield (hash section='body')}}
            {{text}} or {{yield (hash section='tooltip')}}
        {{icon-button}}
        {{buffered-input}}
            {{input}}
            
    {{browser-iframe clickHandler=(action 'viewPortClick')}}

component.js分析

components/browser-view-port.js
f1 inject browser,selectorMatcher,uiState,webSocket
f2 hoverSelector:':hover:not(html):not(body):not(head)',
f3 willInsertElement(){
        this.get('selectorMatcher').Register(this.hoverSelector,this,this.updateHoveredElement)}
f4 willDestroyElement(){} ...unRegister
f5 updateHoverElement(){
        const element = elements.get('lastObeject')
        this.set('uiState.viewPort.hoveredElement',getAttributeList(element).length ? element : null);
    };
f6 actions:{viewPortClick(),reconnectWebsocket()}

components/url-bar.js
f1 backDisabled
f2 disabled
f3 forwardDisabled
f4 loading
f5 mode
f6 noBackUrl
f7 noForwardUrl
f8 url
f9 updateUrl
actions 
    back
    forward
    submit
   
component/tooltip-container.js
f1 delay:{show:500,hide:0}
f2 placement:top
f3 triggerEvents:'hover'
f4 viewport:{selector:'body',padding:0}
f5 init(){}
f6 didInsetElement(){
     Ember.run.next(this,this.createTooltip)}
f7 willDestroyElement()
     Ember.run.next(this,this.destroyTooltip)}
f8 createTooltip()

controller分析

queryParams:['url','baseurl'],
url:Ember.computed.alias('browser.url')
baseurl:Ember.computed.alias('browser.baseurl')
clickHandler:null
f1 setClickHandler(fn){this.clickHandler = fn;}
f2 clearClickHandler(fn){this.clickHandler = null}
actions:{
	viewPortClick(){
		if(this.clickHandler){
			this.clickHandler(...arguments);
			}}}

分析结论

• browser-view-port 中是包括了项目的起始页和输入url之后的跳转页的。通过browser.url的有无来决定是否隐藏起始页
• url-bar用在两个页面时，通过一些限定使其呈现不同的样式
• 起始页的url-bar里输入url之后，回车->切换到了跳转页面->点击newspider—>redirect（在dispacher里定义）到spider页面

project/spider分析

• 首先，ember路由和模板的执行顺序是，路由从外到内->模板是从内到外
• 子模板的都会渲染到父模板的{{outlet}}上，最终所有的模板都会被渲染到application的{{outlet}}上。
• 路由A B C D E ，执行C的时候也会从A开始执行

常用函数分析

route

setupController()

默认情况下(不显示定义controller的时候)setupController会把它的model属性设置为该route的model
如果显示定义setupController的话，需要做这一步
this._super(controller,model)

deactivate

当url变化时，deactive执行

unload

store.unloadAll('spider')
卸载，这里是把store里的数据全删除

controller

set

普通用法
object[key] = value or object.key = value
同时能用于

Ember流转

action流转

上图controller中的actions也可以在route里定义