德勤-勤跃成长(1)

想飞翔的卡布达
707 阅读6分钟

前言

  • 金九银十，寒冬凛冽，不知你们的头顶有没有一丝丝的凉意？反正我是有了，哈哈哈...在德勤实习了够满一个月了，正好在十月份的末梢总结总结...

1.学习的技术

  • 本来是在德勤下面的勤跃，结果上周莫名其妙的转到了华庆下，不过问题不大，我还是我，还是要和代码打交道；不管是德勤勤跃还是德勤华庆，做的都是外包项目，对于我这种项目经验少的人来说，也是合适不过了。

  • 我们采用的是vue2.x 和 uni.app 以及 element-ui 做开发；刚好我之前用的都是react 及相关技术，趁此可以好好接触vue，做到全面发展，努力奔小康。刚来的几天，就是给师傅打打下手，改改样式，改改bug，熟悉熟悉业务，做的工作量最大的就是项目国际化，听起来挺高大上的，了解完之后，其实就是采用vue-i18n 实现语言切换

安装 vue-i18n

    npm install vue-i18n (不过我更倾向于使用cnpm 和 yarn)

使用 vue-i18n

1.//引用i18n
import VueI18n from 'vue-i18n';
Vue.use(VueI18n) // 通过插件的形式挂载，通过全局方法 Vue.use() 使用插件
const i18n = new VueI18n({
locale: 'zh', // 语言标识 //this.$i18n.locale // 通过切换locale的值来实现语言切换
messages:{
 'zh': Object.assign(require('./VueI18n/language-zh.json'), require('./VueI18n/demo-zh.json')),
 'en': Object.assign(require('./VueI18n/language-en.json'), require('./VueI18n/demo-en.json'))
}
});
//在vue插入i18n
var vue = new Vue({
el: '#app',
router,
store,
i18n,
components: { App },
template: '<App/>'
})

2.创建需要切换的语言的json文件，我们目前只需要 CN 和 US 两种
//en-US.json
{
"login":{
  "title":"Welcome Login",
  "account":"account",
  "password":"password"
   ....
}
}
//zh-CN.json
{
"login":{
  "title":"欢迎登陆",
  "account":"账号",
  "password":"密码"
}
}
【注意】两个json文件中的对应字段名需保持一致
3.页面中使用
<span>
    {{$t('login.title')}}
</span>
<span>
    {{$t('login.account')}}
</span>
在切换标题和tabbar时，可以采用
uni.setNavigationBarTitle({
  title:res.data.title
})
uni.setTabBarItem()

除此之外，我觉得学到的最好的莫过于——微前端

虽然它20年就出来了，可我21年才去接触，废话不多说，直接一手链接(因为我也是看着这个入的门，做项目的，小丑一枚，不敢总结)

字节跳动是如何落地微前端的

小小总结

  • 每天朝九晚六，虽然我早上八点半都到公司了，晚上六点七点才走，虽然学到的技术不多，每天的工作也不难，但是挺费时的，比如什么给全局的按钮加iconfont图标什么的，改改表格样式，改改iconfont图标样式，不过这一个月算下来，自己对于vue2 以及几个组件库也有了不浅的了解，正好旁边也做了一位S级的大佬，每天不定时问个几个问题，感觉对于大佬来说挺简单的，但对于自己也是不小的收获吧... scss的了解，项目代码格式的写法，命名的规范，以及很多牛掰的操作，秀的我发麻，哈哈哈！不过不耻下问，不会的就学，就记....多年以后我也是一条好汉 以下是我讨教的一部分，供大家参考参考(大佬勿喷）

1.什么是BEM命名规范

  • BEM是由 B(block)块、E(Element)元素、M(Modifier)修饰符的简写。由yandex团队提出的一种css前端CSS命名方法

-中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。

__双下划线：双下划线用来连接块和块的子元素。

--：双中划线用来连接块或元素的状态（也可使用‘_’单下划线表示）。

  • BEM能让前端代码更容易阅读和理解，更容易协作，更容易控制，更加健壮和明确，而且更加严密。
1.1 Block(块)
  • 代码片段可能被复用且这段代码不依赖其他组件即可用Block。块可以互相嵌套,可以嵌套任意多层。
  • Block本身是不能设置position或margin
1.2 Element（元素）
  • Element是Block的一部分，没有独立存在的意义。任何一个Element语义上是和Block绑定的
1.3 Modifier（修饰符）

  • 定义Block或Element的外观、状态、或行为的标记。

  • Modifiers分类

    • Boolean：

      1. 只有当Modifiers的存在与否很重要时使用，这里它的值默认是true。例如，disabled、active、clickable。

      2. 这种类型下样式的结构是:

        • block-name--modifier-name
        • block-name__element-name--modifier-name

    • key-value:

      1. 当Modifiers的value才能描述完整一个状态时，需要使用key-value.例如： ”一个以islands为主题的菜单“，menu--theme--islands。

      2. 这种类型下样式的结构是:

        • block-name_modifier-name--modifier-value
        • block-name__element-name--modifier-name--modifier-value

2. BEM 命名模式

BEM 命名约定的模式是：

.block {}

.block__element {}

.block--modifier {}

  • 每一个块(block)名应该有一个命名空间（前缀）

    • block 代表了更高级别的抽象或组件。
    • block__element 代表 .block 的后代，用于形成一个完整的 .block 的整体。
    • block--modifier 代表 .block 的不同状态或不同版本。 使用两个连字符和下划线而不是一个，是为了让你自己的块可以用单个连字符来界定。

3. BEM优点

  • 模块层级关系简单清晰，而且 css 书写上也不必作过多的层级选择。
<div class="article">
    <div class="article__body">
        <div class="tag"></div>
        <button class="article__button--primary"></button>
        <button class="article__button--success"></button>
    </div>
</div>

####4. 什么时候使用 BEM 命名法

  • 当需要明确关联性的模块关系时，应当使用 BEM 格式。

5. 注意事项

  • 在深层次嵌套的 DOM
  • 结构下，应避免过长的样式名称定义。
  • 层级最好不要超过 4 级，不然增加阅读的理解难度
  • 最小化选择器的嵌套(建议不超过2级)。嵌套的场景可以出现在有modifier时，Block或Element需要修改样式
  • BEM本身是可以写成B__E__E的格式，但如果出现这种嵌套很深的情况，说明组件化设计有问题，所以代码开发中，要求不能写这种格式代码
  • 不要使用id选择器或tag选择器
  • 不要在Block中设置position、margin等位置布局相关设置。把可能发生变化的css属性放到Modifiers上
  • 从使用角度，小图标使用icon-做前缀，不需使用BEM
  • 命名空间问题。目前我们要求页面以page-作为Block，组件以组名名作为Block。css-guidelines中提出类似BEM命名的方式，以一些前缀作为标识。

注意： 1、BEM中的命名嵌套和DOM不是严格绑定的，命名上不要使用B__E__E，但是写DOM时和样式没有关系。B__E下的DOM里仍然可以有B__E样式的DOM.命名规范是用于识别顶层块组件之间的关系。

6. 推荐写法和风格（参考）

//常规写法：

.xxx{}
.xxx__item{}
.xxx__item_current{}

// 嵌套写法
.xxx__item_current .mod-xxx__link{}
推荐：

.xxx{}
.xxx__item{}
.xxx__item_hightlight{}
.xxx__product-name{}
.xxx__link{}
.xxx__ming-zi-ke-yi-hen-chang{}

// 嵌套写法
.xxx__item_current{
    .xxx__link{}
}

//对应的HTML结构如下：
<ul class="xxx">
    <li class="xxx__item">第一项
        <div class="xxx__product-name">我是名称</div>
        <span class="xxx__ming-zi-ke-yi-hen-chang">看类名</span>
        <a href="#" class="xxx__link">我是link</a>
    <li>
    <li class="xxx__item xxx__item_current">第二项 且 当前选择项
        <div class="xxx__product-name">我是名称</div>
        <a href="#" class="xxx__item-link">我是link</a>
    <li>
    <li class="xxx__item xxx__item_hightlight">第三项 且 特殊高亮
         <div class="xxx__product-name">我是名称</div>
        <a href="#" class="xxx__item-link">我是link</a>
    <li>
</ul>

<div class="menu">
  <div class="menu__header">
    <h2 class="menu__title">Title text here</h2>
  </div>
  <div class="menu__body">
    <img class="menu__img" src="img.png" alt="description" />
    <p class="menu__text">text</p>
    <p class="menu__text">
      <a href="test.html" class="menu__link">link</a>
    </p>
  </div>
</div>
  • 现在的我，也能上手项目了，虽然之前就有一定的项目开发经验，不过在vue这块，我依旧是小丑，做好每一件小事，才能做好每一件大事，做好自己，过好今天，展望明天，总结昨天

2.以后的规划

  • 我的实习期只有三个月，虽然我无心呆在这儿，但德勤也不会要我，哈哈哈！毕竟英语四级都没过的我，德勤怎么能要我呢...公司是好，怎么年轻人怎么就地躺平呢，不出去奋斗几年，青春就过了。正所谓面向工资编程，成都、杭州、广东等等，都是心之所往，历练历练，回头看，风景依然很美....

avatar
文章
阅读
粉丝