bytedance（1）

最新推荐文章于 2023-08-23 16:23:37 发布

让子弹飞一会儿=>

最新推荐文章于 2023-08-23 16:23:37 发布

阅读量992

点赞数

分类专栏：前端文章标签： git 1024程序员节

本文链接：https://blog.csdn.net/yangyaning123/article/details/120731059

版权

这篇博客记录了在字节跳动实习期间的经验，涉及npm run dev的实现原理，git分支管理，包括master、develop和功能分支的使用。还提到了vue的filter过滤器、eventbus、vuex的状态管理以及jsBridge的运用。此外，讨论了git常用命令和代码管理细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

字节实习记录

（1）10-12

一、关于npm run dev的实现

npm run dev是将（css、js）等静态文件打包监听，放在本地（webroot），将html上传到远端服务器。让页面显示出来则是，除了npm的操作之外，将还要再打开charles代理，然后再输入相关网址比如说类似：vivoliulanqio_llq_api则可以进行显示。如http://open.toutiao.com/a6897162992912499213/?utm_source=vivoliulanqi&label=test，这里将远程服务端转换为本地的并打开。

在pagelet中则是，es、less、tmpl等文件，es后缀文件在一个项目中有许多个，一个标准页面就由这许多个这样的es文件构成，由各种小逻辑组成整个页面的大逻辑；另外在go_templates中有许多html模版，这些模版即位各个合作方各自页面的模版页面框架，less则是负责渲染es中的逻辑和html中的框架，添加各类颜色、尺寸属性等；tmpl是类似模版的存在，对于数据进行批量化处理处理，如vue中的v-for类似如此，一般在ts中进行引用。

二、关于ppe泳道还有boe上线的相关

三、关于git操作分支等

3.1 分支分类

开发过程中，一般我们会有三个分支：master，develop 和自己的功能分支。
• master分支作为版本tag分支，上线直接用这个分支进行。
• develop分支作为合并分支，我们在功能分支做的修改应该都和入该分支，并且有专人负责同步到master分支。有时项目组会打tag作为版本发布，这时候就会省略develop分支，由master分支起到合并分支的作用，本次和入的即为0712_staging。

3.2 分支区

• 工作区：我们编辑并保存的内容。
• stage暂存区：我们执行git add后添加后的内容。
• commit已提交区（本地仓库区)：我们的修改内容已经修改并保存到了commit号上。
•Remote远程仓库区：与commit提交区由git pull与git push进行来回切换

3.3 常见的分支命令

git checkout master——切换到master分支
git pull --rebase——取回远程仓库的变化，并与本地分支合并
git branch feat/xxx——创建分支或者切换分支（如果有这个分支时）
git status//git status #查看当前状态，显示有变更的文件
git diff//显示暂存区和工作区的差异
git add . //将进入暂存区
git commit -m ‘fix: fix eslint issues’//git commit -m ‘xxx’　//提交进入本地仓库
git push//推送分支由本地仓库进入到远程仓库
git commit -v//提交时显示所有diff信息

在这里插入图片描述

四、一些细节方面的记录

包括简单的if else可以使用bool语句进行代替;一个作用域（函数、if循环语句）内部不要空置空格；减少flag，i，a等不规范的命名；用语义明确的词进行命名

五、关于mixin

Vue.mixin给我们提供了一种混入Vue实例的方法，创建了混入对象之后，我们自定义的方法或者变量可以很轻松的挂载在Vue实例上，更加方便。

引入后mixin文件中定义的方法属性都会复制到引入到的组件的对应位置
比如方法复制到methods中，定义的字段会复制到data中
各个钩子函数都会匹配到组件对应的钩子函数中
对于created，mounted 等生命周期函数 mixin文件中的代码先执行，组件中的后执行
对于data中定义的字段，组件中定义同名数据，覆盖mixin中同名字段
对于 method中的同名方法，组件内的同名方法覆盖mixin中的方法

六、关于vue的filter过滤器

Vue的filter过滤器：{ {price | addPriceIcon}}，模板中文本后边需要添加管道符号（ | ）作为分隔，管道符 |
后边是文本的处理函数，处理函数的第一个参数是：管道符前边的——文本内容，如果处理函数上边传递参数，则从第二个参数依次往后是传递的参数。

七、关于jsBridge

JSBridge是一座用JavaScript搭建起来的桥，一端是web，一端是native。我们搭建这座桥的目的也很简单，让native可以调用web的js代码，让web可以 “调用” 原生的代码。这个引用文件在bridge—sdk的index.js中。

八、关于eventbus与vuex

8.1 eventbus

有一个全局EventBus，所有事件都订阅它，所有组件也发布到它，订阅组件获得更新，总结一下。所有组件都能够将事件发布到总线，然后总线由另一个组件订阅，然后订阅它的组件将得到更新

   点击按钮后，触发发射事件， this.$bus.$emit
  expandDesc() {
   
      this.isDescCollapsed = false;
      this.$nextTick(() => {
   
        this.$bus.$emit('article-header--dom-changed');
      });
    }
    
    随后在AuthorHeader中触发监听事件，this.$bus.$on
    this.$bus.$on('article-header--dom-changed', () =>