Nicky Lao
Nicky Lao
_记录一些实践内容，给想学习的同学参考_ **主要内容** - [开发流程规范](#devflow) - [项目管理规范](#project-manage) - [组件化](#component) - [前后端协作](#cooperation) - [DevOps](#devops) ## 开发流程规范 一个高效和实用的开发流程规范，可以被用到各种软件开发项目中，并且使用开源工具来协助和自动化大部分任务。关注基本的开发流程规范，有助于开发过程顺利和提高代码质量。 开发流程基本规范内容有： - 良好的文档：README、文档页面、变更日志 - 良好的编码规范 - 版本管理 - 自动化测试：不需要太多，专注在功能性非回归测试就好 - 开发者体验 ### 良好的文档 此部分可以参考文章 [一个靠谱的前端开源项目需要什么？](https://segmentfault.com/a/1190000005859766)...
`CSP` 和 `SRI` 可以预防`XSS攻击`和`数据包嗅探攻击`。 ## Content-Security-Policy (内容安全策略) > 来自MDN 的介绍 `内容安全策略(Content-Security-Policy)` 是一个额外的安全层，用于检测并削弱某些特定类型的攻击，包括 `跨站脚本 (XSS)` 和`数据注入攻击`等。无论是数据盗取、网站内容污染还是散发恶意软件，这些攻击都是主要的手段。 `CSP` 被设计成完全向后兼容（除`CSP2` 在向后兼容有明确提及的不一致; 更多细节查看这里 章节1.1）。不支持 `CSP` 的浏览器也能与实现了 `CSP` 的服务器正常合作，反之亦然：不支持 `CSP` 的浏览器只会忽略它，如常运行，默认为网页内容使用标准的同源策略。如果网站不提供 `CSP 头部`，浏览器也使用标准的同源策略。 为使 `CSP`...
## 前言 从 `Flux` 到 ` Redux ` ，还有 `Vux` 、`Mobx` 等，前端数据流和状态存储的控制库很多，也很强大，适用于复杂的项目中对数据状态的管理和组件之间的通信控制。另外加入响应式编程的 `RxJS` 的话，就变得更强大了…… 本篇和上边的各种都无感，只是分析如何实现一个极简的全局变量存储和支持订阅状态属性变化。 ## 实现 ### 从 lodash 说起 `lodash` 有 `_.set(obj,key,value)` 和 `_.get(obj,key)` 这些方法。如下 **_.set(obj,key,value)** ```js var...
> 这个过程以后可能会重复，或者搞成docker，这里先做个记录 ## 全局安装 ionic ，cordova ``` npm i [email protected] [email protected] ``` 全局命令：`ln -s 安装路径 /usr/local/bin` ## jdk1.8 安装 下载jdk包，解压到 `/usr/local/jdk1.8` 下，配置环境变量 ``` export JAVA_HOME=/usr/local/jdk1.8 export JRE_HOME=${JAVA_HOME}/jre export CLASSPATH=.:${JAVA_HOME}/lib:${JRE_HOME}/lib export...
# Question List - 什么是Virtual DOM? - Virtual DOM 的对比过程 （preact为例） # Answer ## DOM介绍 & 存在问题 DOM （Document Object Model）是一种通过对象来表示结构化文档的方法，它是一种跨平台的、与语言无关的约定，用于表示HTML、XML和其他格式的数据并与之交互。浏览器通过处理DOM来实现细节，我们可以使用 JavaScript、CSS来与它交互。可以搜索节点并更改它的详细信息，删除或者插入新节点。 DOM 几乎是跨平台和跨浏览器的，那它有什么问题呢？主要问题是 **DOM 从来没有为创建动态UI进行优化**。 我们通过一张图来看浏览器是如何呈现web页面的：  浏览器中的页面呈现引擎解析HTML网页以创建DOM，同时解析CSS，并将CSS应用于HTML，和DOM组成一个渲染树（Render Tree），这个过程称为**Attachment**。布局过程（Layout）为每个节点提供精确的坐标，节点在其中进行绘制和展示。我们对DOM进行操作的时候，浏览器就会重复上边的渲染过程。...
纪录一些网友分享的学习经验，提供给大家参考。 不管是工作还是业余，总会有新人问你是如何学习的，或者是你带团队了，给团队同学进行指导辅导，有些别人实践的经验可以借鉴来作为指导，另外，尽管你自认为是老司机，也应该了解别人的学习方式，借鉴、思考、实践、总结、到演变；知识、技能、学习的方式都应该在不停的进步或改变的路上，你才能走的更远！ ## 前端 - [我如何零基础转行成为一个自信的前端](https://juejin.im/post/5c75d34851882564965edb23) - [一名【合格】前端工程师的自检清单](https://juejin.im/post/5cc1da82f265da036023b628)
基于Gitlab 的 CI/CD 流程搞好后，需要将CI Job或流水线的执行状态通知到给相关QA或者开发人员，整个大前端组，项目系统工程数量>15个，所以有必要聚合CI/CD相关自动化流水线信息，将相关需要关注的信息通过机器人自动推送到群里。 工作上常用群的话选择有微信群，钉钉，QQ群等。微信现在限制了2018年之后注册的新用户无法通过脚本走API登录，很难搞到2016年注册的小号，因此只能选择钉钉群和QQ群了，因为我司不用钉钉，有自己的OA系统，所以就尝试了酷Q的机器人推送方案。下面将详细介绍实现过程。 ## 钉钉机器人消息推送到群 DingTalk (钉钉) 提供了群机器人，提供 WebHook 来实现，特别的方便，消息发送还支持各种格式的模板，比如text、link、markdown等，增强了使用情景和体验。关于钉钉自定义机器人，官方文档也很详细，这里不多介绍实现过程。详细见：[自定义机器人](https://open-doc.dingtalk.com/microapp/serverapi2/qf2nxq) ### 通过 shell script实现模板信息发送 以下主要是消息通知到群的 shell script. ```bash # 前一个命令执行状态判断是成功信息还是失败信息 if [ "$?" -eq "0" ];then log...
## 博文&教程 - [译文 The introduction to Reactive Programming you've been missing](http://www.lightskystreet.com/2015/11/29/translate-introduction-to-reactive/) - [rx-book](http://xgrommx.github.io/rx-book/content/guidelines/introduction/index.html) - [30 天精通 RxJS 系列](https://ithelp.ithome.com.tw/users/20103367/ironman/1199) ## 使用技巧 - [angular-rxjs-when-should-i-unsubscribe-from-subscription](https://stackoverflow.com/questions/38008334/angular-rxjs-when-should-i-unsubscribe-from-subscription)
> 说明：以下是前期公司内部试行的简单的代码分支版本流程管理规范，规范其实和运维有很大的关联，随着管理方式和流程的完善，代码版本管理流程也是会改变的。仅供参考！！！ ## 分支说明 - `dev-xxx` 为开发分支，`xxx`表示版本，建议使用上线`年月日`时间串，比如`dev-20180612` 或 为需求功能点名称，比如`dev-xx需求` - `test` 为测试分支 (如果存在多版本同时测试，可能存在 `test-xxx` 分支，意思是多个测试环境，有做压测或者是功能测试的) - `master` 主分支为 `uat` 回归测试分支（预生产/准生产分支）。（此分支会做分支保护，不允许直接 push 和 只有主程序员可以 merge ） - `prod` 为生产发布分支 - `prod-xxx`...
# 介绍 - [制定 Git 消息提交规范](#commit) - [工具限制行为](#tools) - [changelog 生成](#changelog) 如果要执行规范，工具是一定要有的。通过工具来限制开发人员的习惯的，一方面保证所有人参与项目都强制按照统一的规范来操作，另一方面是如果你没有工具去强制执行规范，不是每个人都会自觉遵守，行为规范没法统一的话，规范也就没有多少存在的意义了。 # Git 提交消息规范指南 我们对如何格式化 git 提交消息有非常精确的规则。这样可以查看更易读的消息，这些消息在查看项目历史记录时很容易理解。规范提交信息后，我们可以通过工具将 `git commit` 消息来生成 `{工程项目} 更改日志`，每次版本发布都会有一个清晰的日记列表。 ## Commit Message Format 每个提交消息由 **header**， **body**...