如何提高组件开发效率

视图目录分级管理

当组件的视图很多时，我们很难去管理每一个视图，也会影响开发进度，将视图进行分类管理可以很好的解决这个问题

示例

假设工程目录为E:/lightProjectDemo,模块有登录、注册、个人中心、观点和应用，新建一个personal.html,我们要在此页面中添加所有的需要的视图（这里为了展示全部写在一张页面中，你也可以根据需要新建多个页面）

<!DOCTYPE html>
<html>
<head>
    <snippet id="header" />
    <!-- build:css css/style.css -->
    <link rel="stylesheet" href="css/style.css" />
    <!--<link rel="stylesheet" href="css/index.css" />-->
    <!-- endbuild -->
    <title>lightProjectDemo-Just For Fun</title>
</head>
<body>
<div id="main">
    <!--个人中心各视图-->
    <view id="personal/index" home="true" />
    <view id="personal/editName"/>
    <view id="personal/editphone"/>
    <!--登录注册各视图-->
    <view id="personal/login"/>
    <view id="personal/forgotPassW"/>
    <view id="personal/register"/>
    <!--观点各视图-->
    <view id="viewpoint/index"/>
    <view id="viewpoint/detail"/>
    <view id="viewpoint/order"/>
    <!--应用各视图-->
    <view id="app/index"/>
    <view id="app/detail"/>
    <view id="app/collect"/>
</div>
<snippet id="footer" />
<script type="text/javascript" src="//res.lightyy.com/lighting/framework/light-1.0.min.js"></script>
<script type="text/javascript" src="config.js"></script>
<!-- build:js js/app.js -->
<!--<script src="vue-components.js"></script>-->
<!--<script type="text/javascript" src="js/lib/underscore.js"></script>-->
<!-- inject:view -->
<!-- endinject -->
<!-- endbuild -->
<script type="text/javascript">
    Light.start();
</script>
</body>
</html>

命令行执行light gen 生成后的目录如下所示，这里我们根据模块分别生成了3个文件夹，这样在以后的开发中我们就会很容易的找到相应的视图

light_proj_6

视图异步加载

异步视图是指视图的关联资源（js资源）是异步引入和调用的，合理的使用异步视图可以提高页面首屏展示的效率，提高页面的加载速度，从而提高开发效率

示例

以上面目录分级管理的示例为例，在每一个视图里加一句async="true"，这样每次加载一个视图的时候只会加载当前视图对应的js资源，而不会把所有视图的js都加载出来

<!DOCTYPE html>
<html>
<head>
    <snippet id="header" />
    <!-- build:css css/style.css -->
    <link rel="stylesheet" href="css/style.css" />
    <!--<link rel="stylesheet" href="css/index.css" />-->
    <!-- endbuild -->
    <title>lightProjectDemo-Just For Fun</title>
</head>
<body>
<div id="main">
    <!--个人中心各视图-->
    <view id="personal/index" home="true" />
    <view id="personal/editName" async="true"/>
    <view id="personal/editphone" async="true"/>
    <!--登录注册各视图-->
    <view id="personal/login" async="true"/>
    <view id="personal/forgotPassW" async="true"/>
    <view id="personal/register" async="true"/>
    <!--观点各视图-->
    <view id="viewpoint/index" async="true"/>
    <view id="viewpoint/detail" async="true"/>
    <view id="viewpoint/order" async="true"/>
    <!--应用各视图-->
    <view id="app/index" async="true"/>
    <view id="app/detail" async="true"/>
    <view id="app/collect" async="true"/>
</div>
<snippet id="footer" />
<script type="text/javascript" src="//res.lightyy.com/lighting/framework/light-1.0.min.js"></script>
<script type="text/javascript" src="config.js"></script>
<!-- build:js js/app.js -->
<!--<script src="vue-components.js"></script>-->
<!--<script type="text/javascript" src="js/lib/underscore.js"></script>-->
<!-- inject:view -->
<!-- endinject -->
<!-- endbuild -->
<script type="text/javascript">
    Light.start();
</script>
</body>
</html>

使用vue组件

很多时候会出现多个视图使用同一个内容的情况，这样就造成代码的重复使用，这个时候我们可以把多次使用的内容拿出来做成一个组件，在每个需要的地方调用即可

示例

还是以工程lightProjectDemo为例，假如每个视图都有一个头部，这样我们就把头部做成一个组件，以在index.html页面中的lightProjectDemo视图中调用组件为例

第一步先在工程的vue文件夹下新建一个vue文件，命名为head.vue

<template>
    <div class="headFixed">
        <h2 class="tab">
            <span @click="back()" class="back">返回</span>
            <em class="view">{{title}}</em>
        </h2>
    </div>
</template>
<script>
    export default {
        props:['title','btn_title'],
        methods:{
            back:function () {
                history.back();
            }
        }
    }
</script>

第二步调用，先在index.html页面中引入vue-components.js文件

<!DOCTYPE html>
<html>
<head>
  <snippet id="header" />
  <!-- build:css css/style.css -->
  <link rel="stylesheet" href="css/style.css" />
  <!--<link rel="stylesheet" href="css/index.css" />-->
  <!-- endbuild -->
  <title>lightProjectDemo-Just For Fun</title>
</head>
<body>
  <div id="main">
    <view id="lightProjectDemo" home="true" />
  </div>
  <snippet id="footer" />
  <script type="text/javascript" src="//res.lightyy.com/lighting/framework/light-1.0.min.js"></script>
  <script type="text/javascript" src="config.js"></script>
  <script src="vue-components.js"></script>
  <!-- build:js js/app.js -->
  <!--<script src="vue-components.js"></script>-->
  <!--<script type="text/javascript" src="js/lib/underscore.js"></script>-->
  <!-- inject:view -->
  <!-- endinject -->
  <!-- endbuild -->
  <script type="text/javascript">
    Light.start();
  </script>
</body>
</html>

然后在视图lightProjectDemo.html中调用组件


<div id="lightProjectDemo" style="display:none;">
    <vue-head :title.sync="title"></vue-head>
    <p><span v-on:click="enterLogin()">点击登录</span></p>
    <p><span v-on:click="enterPersonal()">查看我的个人中心</span></p>
</div>

最后在视图lightProjectDemo.js文件中设置title的值


;(function(){
  App.defineViewModel("#lightProjectDemo",{
       data:{
           title:"首页"
       },
       watch:{},
       methods:{
           /*进入登录页*/
           enterLogin:function(){
               window.location.href="personal.html#/personal/login"
           },
           /*进入个人主页*/
           enterPersonal:function(){
               window.location.href="personal.html#/personal/index"
           }
       }
     },{
     ready:function(){
     },
     beforeRender:function (params) {
     },
     afterRender:function (params){
     },
     beforeUnRender:function (){
     },
     afterUnRender:function (){
     }
  });
})();

这样，一个vue组件就成功的加载进来了，我们可以在任何需要头部组件的视图中加上