-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
20 changed files
with
696 additions
and
206 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,33 @@ | ||
| # realgeoffrey.github.io | ||
| Demos. | ||
|
|
||
|  | ||
|  | ||
|  | ||
| ### PS | ||
| 1. github.io居然无法识别`_`前缀的文件! | ||
| 2. GitHub的commits居然是按照用户本地推送时间来记录的…… | ||
| 3. 图片引用的多种形式： | ||
|
|
||
|  | ||
|  | ||
|  | ||
|
|
||
| 以上图片是下面的语法 | ||
| ```markdown | ||
|  | ||
|  | ||
|  | ||
| ``` | ||
| 4. github的markdown居然可以直接上HTML内容！ | ||
|
|
||
| <details> | ||
| <summary><del>简</del><code>直</code><strong>厉</strong>害</summary> | ||
|
|
||
| >不过就是`<summary>`里面要也要用HTML内容，并且隐藏内容要空一行才可以用markdown语法。 | ||
|
|
||
| ```markdown | ||
| <details> | ||
| <summary><del>简</del><code>直</code><strong>厉</strong>害</summary> | ||
|
|
||
| >不过就是`<summary>`里面要也要用HTML内容，并且隐藏内容要空一行才可以用markdown语法。 | ||
| </details> | ||
| ``` | ||
| </details> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| # 迅雷直播PC改版框架选择 | ||
|
|
||
| > 前提：因为现行的迅雷直播PC框架在当时要兼容IE8的大环境下加入了许多兼容性代码，前端架构也因此受限而无法使用市场上其他成熟的框架和解决方案。随着项目需求不断迭代，也因市场上越来越多高效解决方案的出现，迅雷直播前端团队进行调研能够满足现在业务需求并且能提高页面性能和代码效率的新框架方案。 | ||
| ### 分析 | ||
| 1. 现有框架情况： | ||
|
|
||
| jQuery+tempalte+webpack | ||
| 2. 新框架要求： | ||
|
|
||
| 1. 能够支持现在迅雷直播需求。 | ||
| 2. 浏览器兼容IE9及以上。 | ||
| 3. 在页面性能、开发效率上有明显优势。 | ||
| 4. 在满足以上要求后，最好还能满足：上手较快、较完善的社区、其他直播平台是否有使用案例。 | ||
| 3. 市面上较成熟的最新N款前端框架选择： | ||
|
|
||
| 1. 市面上其他直播平台的选择： | ||
|
|
||
| | 框架选择 | 直播平台 | | ||
| | ------------------------- | ------------------------------------------------------------ | | ||
| | 无框架（jQuery+template） | 大部分直播平台 | | ||
| | Vue.js | 1. [企鹅直播](http://live.qq.com/10000338)<br />2. [b站直播](http://live.bilibili.com/6)<br />3. [龙珠直播的联盟赛](http://star.longzhu.com/lpl?from=livebanner3) | | ||
| | React、Angular等其他框架 | 无 | | ||
| 2. 兼容性： | ||
|
|
||
| | 框架选择 | 兼容性 | | ||
| | ---------- | ---------- | | ||
| | Vue.js v2 | 兼容至IE9 | | ||
| | React v16 | 兼容至IE9 | | ||
| | Angular v6 | 兼容至ie10 | | ||
| 3. 性能（运行效率），查看[第三方分析图](http://www.stefankrause.net/js-frameworks-benchmark7/table.html) | ||
|
|
||
| 横向对比其他框架，Vue.js的页面性能较好。 | ||
| 4. 上手难度 | ||
|
|
||
| >个人认为Vue.js上手难度相对最小，并且还有完善的中文社区。 | ||
| | 框架选择 | 侧重点 | | ||
| | -------- | -------------------------------------------------- | | ||
| | Vue.js | 灵活，适用于简单业务快速迭代。 | | ||
| | React | 组件化设计的好，可以实现比较好的组件生态进行复用。 | | ||
| | Angular | 约束多，擅长复杂中后台场景和多人协作。 | | ||
|
|
||
| ### 结论 | ||
| - 建议选择**Vue.js+nuxt** | ||
|
|
||
| 1. 现市面上的直播平台，有使用Vue.js的案例（企鹅直播、b站直播等），暂时没有找到使用其他主流框架的直播平台。 | ||
| 2. nuxt方便的配置，简化了繁琐的修改配置流程，集成了Vuex、webpack、babel等功能，满足已有的迅雷直播需求，能够把人力从繁琐的配置中解放出来研究具体的业务。 | ||
| 3. 丰富的中文社区，以及PC迅雷前端同事已经有多年沉淀Vue的经验可以交流。 | ||
| 4. 新框架Vue.js相对于旧框架的优势： | ||
| 1. Vue的MVVM数据的双向绑定，让开发人员聚焦在业务逻辑、数据上，页面DOM的如何改变交给框架内部解决，开发人员面向数据编程。 | ||
|
|
||
| （相对于原框架的jQuery+template，开发人员根据需求操作DOM——面向网页元素编程，）MVVM提高了代码效率，并且业务逻辑更加清晰而便于维护。提高了代码效率、清晰了代码逻辑，在需求大量迭代后，代码性能任然可控，间接提高页面性能。 | ||
| 2. Vue本身就是组件化的架构模式，适合直播间页面的多模块组合，整个直播间页面可以由Vue的组件拔插的方式组合，契合了现团队内多人协作、组件拆分的编码方式。 | ||
| 3. Vue相对于其他主流框架（React、Angular），有较低的学习成本，上手方便。 | ||
| 4. 可以借助babel使用ES6语法，能够拥抱最新语法。 | ||
|
|
||
| >1. 针对PC直播间活动分开打包的解决方案，尝试用[Vue的异步组件（配合webpack）](https://cn.vuejs.org/v2/guide/components.html#异步组件)进行解决。 | ||
| >2. 针对PC直播间组件间复杂的组件通讯，尝试用[Vuex](https://github.com/vuejs/vuex/)进行解决。 | ||
| > 2018.03.09 迅雷直播前端 |
53 changes: 53 additions & 0 deletions
53
applets/template/live/activity-template/src/common/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| var $ = require('lib/jquery.js'); | ||
| var ajax = require('common/ajax.js'); | ||
| var CONSTANT = require('common/constant.js'); | ||
| var tpl = require('./list.tpl'); | ||
| var gConfig = require('activity-common/gConfig.js'); | ||
|
|
||
| var userLogin = require('activity-common/userLogin.js'); // 登录 | ||
| // userLogin.isLogin() , userLogin.login() | ||
|
|
||
| var jump = require('activity-common/jumpToRoom.js'); // 跳去热一或直播间 | ||
| // jump.jumpToRoom( { | ||
| // isPlaying:'', | ||
| // userid: '', | ||
| // uuid: '', | ||
| // roomid:'' | ||
| // } ) | ||
| //jump.jumptoTopRoom() | ||
|
|
||
| var download = require('common-wap/share/download.js'); // 下载app | ||
| // download.downapp(); | ||
|
|
||
| var tools = {}; | ||
|
|
||
| var whiteDay = { | ||
| init: function (isWap) { | ||
| if (isWap && !gConfig.isApp) { // 在非APP的WAP页面 | ||
| download.downapp(); | ||
| } else { | ||
| if (userLogin.isLogin()) { | ||
| jump.jumpToRoom({ | ||
| isPlaying: $this.attr('data-isplaying') === '1', | ||
| userid: $this.attr('data-userid'), | ||
| uuid: $this.attr('data-uuid'), | ||
| roomid: $this.attr('data-roomid') | ||
| }); | ||
| } else { | ||
| userLogin.login(); | ||
| } | ||
| } | ||
|
|
||
| // 登录成功的回调 | ||
| userLogin.loginCallbacks.add(function () { | ||
|
|
||
| }); | ||
|
|
||
| // 从各种状态回到APP里的H5页面的回调 | ||
| window.onResume = function () { | ||
|
|
||
| }; | ||
| } | ||
| }; | ||
|
|
||
| module.exports = whiteDay.init; |
20 changes: 20 additions & 0 deletions
20
applets/template/live/activity-template/src/common/list.tpl
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| <% for(var i = 0, len = list.length; i < len; i++){ %> | ||
| <li> | ||
| <a href="javascript: void(0);" class="actlist_anchor_img j-act-jump" | ||
| data-isplaying="<%= list[i].live %>" | ||
| data-userid="<%= list[i].userid %>" | ||
| data-uuid="<%= list[i].uuid %>" | ||
| data-roomid="<%= list[i].room %>" | ||
| > | ||
| <% if(list[i].live == 1){ %> | ||
| <i class="actico_live"><i></i></i> | ||
| <% } %> | ||
| </a> | ||
| <span class="actlist_anchor_name"><%= list[i].name %></span> | ||
| <% if(list[i].is_follow == 1){ %> | ||
| <a href="javascript: void(0);" class="actlist_anchor_btn cur" role="button">已关注</a> | ||
| <% } else if(list[i].is_follow == 0) { %> | ||
| <a href="javascript: void(0);" class="actlist_anchor_btn j-act-follow" role="button" data-playerid="<%= list[i].userid %>">关注</a> | ||
| <% } %> | ||
| </li> | ||
| <% } %> |
Oops, something went wrong.