web前端技术分享文档

git常用命令
1.1 初始化使用
在本地新建一文件夹用来存放项目代码（eg:test）
1.进入该文件，右键选择 git bush here，打开命令窗后
2.输入初始化命令：git init
20200623_171718.png
3.命令行：git remote add origin 后面是项目所在远程仓库地址（不是远程分支名称，而是仓库地址）
如：git remote add origin http://192.168.2.208:3000/xrayly/02-labu.git
4.拉取远程分支到本地：git fetch origin dev(dev是你要拉取的远程分支名称)
5.在本地创建dev分支并且切换到该分支：git checkout -b dev(本地分支名称)
6.拉取分支到本地：git pull origin dev(远程分支名称)

1.2 git合并分支
1）切换到主分支
git checkout master
2）合并分支到主分支
git merge hotfix
3）删除被合并的原分支
git branch -d hotfix

1.3 git忽略本地某个文件修改
忽略文件跟踪：git update-index --assume-unchanged .classpath
恢复文件跟踪：git update-index --no-assume-unchanged .classpath
.classpath为需要忽略(恢复)的文件的路径

1.4 git删除远程仓库文件
1.使用命令或直接在文件夹中删除文件
rm test.txt
2.运行 git add把删除文件添加到暂存区中
git add test.txt
3.运行 git commit 提交删除文件到版本库
git commit -m “删除测试文件”
4.运行git push 同步删除远程库文件
git push

1.5 git常用快捷键
1.5.1 将工作区和暂存区中的所有修改提交到本地仓库
用法：git commit -am “desc”
描述：把当前git中所有修改提交，相当于git add 修改文件+git commit -m “备注消息”
注意：该操作只将工作区和暂存区中修改的问题提交，若需要提交新创建的问题，仍需要执行git add 文件路径

1.5.2 直接下载远程其他分支代码
用法：git clone -b 远程分支名称,如git clone -b dev http://192.168.2.208:3000/xrayly/02-labu.git
描述：拉取远程仓库其他分支代码，相当于git init+git remote add http://192.168.2.208:3000/xrayly/02-labu.git+git pull origin dev

1.5.3 创建并切换分支
用法：git checkout -b dev
描述：创建并切换到该分支，相当于git branch dev+git checkout dev
学习路径：https://shidongxu0312.github.io/2019/11/28/Git-%E5%8E%9F%E7%90%86%E8%AF%A6%E8%A7%A3%E5%8F%8A%E5%AE%9E%E7%94%A8%E6%8C%87%E5%8D%97/
命令大全：https://zhuanlan.zhihu.com/p/86952116

angular/ionic中遇到的问题
angular/ionic组件ts程序基本执行顺序
描述：在调试程序异常的时候，需要对代码的执行顺序有一定的了解，有可能回调函数的返回时间快慢，会影响程序正常执行
20200629_144113.png

2.1 低版本node-sass安装报错
出现项目：低版本angular项目(卖家app、装箱app)
描述：在运行卖家app时，运行npm install，当安装到node-sass依赖时报错
20200623_191811.png
原因：看了一下报错信息，好像是因为安装的依赖找不到，到网上查阅资料，需要修改安装源
解决：npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

2.2 低版本angular项目运行ng serve报错
出现项目：低版本angular项目(卖家app、装箱app)
描述：在运行卖家app时，运行ng serve 报错
20200623_200906.png
原因：低版本angular在下载依赖使用了旧版本的BrowserslistError
解决：增加package.json浏览器配置信息
“browserslist”: [
“last 1 version”,
“> 1%”,
“IE 10”
]
参考链接：https://github.com/browserslist/browserslist/

2.3 多结构指令错误
出现项目：龙格派项目、熊熊软件项目
描述：在angular项目中使用结构化指令(带 * 的指令)，有时候一不注意就会把两个结构化指令放到同一个标签中
20200623_193052.png
原因：angular语法不允许同一个标签中使用多个结构化指令
20200623_193158.png
解决：使用ng-container转移其他结构化标签或将结构化标签进行合并

2.4 地址太多，计算量太大导致页面卡顿
描述：在浪登项目中打开有选择地址的界面时，会出现卡顿的现象
20200623_201647.png
原因：在获取地址时，由于地址格式不是需要的数据格式，所以需要处理一下才能使用，但由于返回的地址数量太多，导致在处理数据的时候消耗的时间较长，造成页面延迟卡顿的现象
解决：
方案一：修改处理数据的算法，减少计算量
修改计算算法前(105050=25000)
20200623_203845.png
修改计算算法后(5050+1050=3000)
20200623_203121.png
方案二：减少请求返回的数量

2.5 手机物理返回键半屏问题
出现项目：中科汇富、尚品漓乡、衣链云助手、浪登angular8+ionic4
描述：从一级路由页面使用系统回退时（如：手机物理返回键、调用history.go(-1)）到一级路由页面时，会发生返回一半的情况(路由：http://localhost:4200/changepsw -> http://localhost:4200/pswsetting)(路由：http://localhost:4200/pswsetting -> http://localhost:4200/tabs/tab-my 则不会产生这种想象)
20200624_142552.png20200624_135508.png
当前路由：http://localhost:4200/pswsetting
20200624_142711.png
原因：经过初步调试，应该是@angular/animations版本不同导致切换路由过渡动画冲突
解决：
方案一：在全局监听路由变化，每次路由发生变化就刷新页面
缺陷：每次修改路由都要刷新页面，资源需要重新加载，导致页面变得有延迟，而且部分页面刷新后一些服务的数据会清空。
20200623_204201.png
方案二：配置文件使用新的项目的配置文件

2.6 注册成功后没有正常登录
出现项目：衣链云助手、衣链云(git上dev_yly分支)
描述：由于项目太多，新项目基于以前项目进行改造，同时后端也根据新的需求调整代码，导致新项目的前后端代码部分返回值匹配不上导致功能失效
20200623_205322.png
20200623_205215.png
原因：部分接口返回值发生变化，导致取不到值，无法完成正常登录
解决：根据新接口的返回值进行调整

2.7 项目升级后发现部分功能失效
出现项目：衣链云（git上dev_yly分支）
描述：项目升级后，发现部分功能失效，或从旧项目中截取某功能发现不起作用
20200623_205519.png
20200624_130858.png
原因：由于项目升级后，一系列的依赖环境和配置都有了相关的升级，一些写法上可能发生了变化，导致旧的代码的写法可能获取不到值等一系列问题
解决：根据新的语法对代码进行调整

2.8 NgZorroAntdMobileModule地址样式
出现项目：浪登angular8+ionic4
描述：使用NgZorroAntdMobile地址插件的默认样式地址选择框太小导致看不到完整地址
修改前：
20200624_160236.png20200624_160435.png
修改后
20200624_160533.png20200624_160405.png
原因：由于NgZorroAntdMobile的样式文件并没有把地址选择的样式设得太大，所以操作一定长度就会显示省略
解决：修改源码样式文件，把默认的长度改大
缺陷：由于上传源码的并没有上传node_module文件，所以修改后的文件只能在本地生效，重新npm安装后还需要重新修改

更新解决方式思路：可以在当前页面中重写样式，这样可避免修改源码

2.9 ngx-bootstrap模态框
出现项目：拉布平板项目
描述：在使用ngx-bootstrap的模态框时，需要关闭上一个页面的模态框，然后在调用组件方法报错
20200624_163340.png
20200624_163435.png
原因：ngx-bootstrap的模态框的loaders属性为私有属性，所以在别的组件里要访问该属性就会报错
20200624_163508.png
解决：修改源码的中私有属性改成公有属性
20200624_163542.png
缺陷：由于上传源码的并没有上传node_module文件，所以修改后的文件只能在本地生效，重新npm安装后还需要重新修改

2.10 图片上传
出现项目：浪登angular8+ionic4
描述：从旧的项目中迁移图片上传功能到新的项目中，测试发现图片上传报错
20200624_114031.png
原因：ng2-file-upload插件版本不一致导致图片上传失败
解决：通过调试代码发现图片并没有成功上传到服务，导致保存刷新后无法获取到图片,进一步调试发现，图片上传的服务有问题，但是该服务是从旧项目中直接迁移过来，并没有做修改，对比代码无差异后在新的上传图片服务的上传图片函数中输出log，对比新旧版本上传服务log参数前后变化发现新版的上传服务中返回对象的queue(图片上传列表)为空，导致后续上传操作失败。继续调试发现该对象是调用ng2-file-upload服务返回的，然后对比package.json该插件版本，发现新、旧项目该插件也是一样的，最后查看node_module中ng2-file-upload里的文件目录，发现两边结构并不一致，最后把旧项目中该插件包直接替换到新项目中解决该问题
20200624_130223.png20200624_114316.png
20200624_114442.png
新版项目插件目录旧项目插件目录
20200624_113609.png20200624_113630.png
后续：为了验证为什么两边package.json版本一样，npm install出来的包不一致，重新删除新项目node_module，重新安装依赖包，发现新项目安装的包依然不可用，只能用过 npm install ng2-file-upload@1.3.0 --save才能安装到指定版本的插件

2.11 checkbox双向绑定联动实现全选/取消全选功能
出现项目：商城类项目(中科汇富、尚品漓乡、熊熊软件、龙格派、衣链云供应商/加工厂工作节点申请)
描述：使用checkbox的双向绑定来实现父节点、子节点间的双向联动功能
20200623_205802.png20200623_210023.png
注意：以前旧的项目中使用ionChange事件来监听，如果父节点和子节点同时使用该事件来同步状态，则父节点状态发生变化的时候会修改子节点状态，子节点状态被动变化后又会触发状态改变的事件，同时又同步父节点的状态，导致父节点和子节点相互影响，造成死循环。
解决：改用click事件来监听节点改变，所以状态修改后只会逻辑修改其他节点的状态，而不会触发其他节点的修改状态函数
缺陷：在使用ionChange事件监听状态变化的时候，页面和ts中数据基本保持一致。在使用click事件监听的时候，会出现页面状态和ts状态不一致的问题，所以需要做额外的除了
20200623_205632.png

2.12 ion-slides轮播图中部分轮播图点击功能失效
出现项目：熊熊软件、龙格派
描述：当动态数据使用ion-slides标签渲染的时候，并在ion-slide中添加点击事件时，部分页面点击事件失效
20200624_175612.png
原因：当动态数据使用ion-slides渲染时会做相应的处理，多生成2个图片(在第一张前增加一张图片，在最后一张图片后也多生成一张图片)，用于循环轮播的时候不会出显明的闪跳，然后新生成的图片并没有绑定到时候，导致点击无效
解决：在父元素ion-slides中绑定事件，通过监听父元素的ionSlideTap事件来监听所有子元素的点击事件，在通过 this.slides.getSwiper().then((res)=>{res.realIndex})来获取当前活动的子元素的下标(也就是当前显示的轮播图的下标)，然后做相应的操作
20200624_175637.png
20200624_175657.png
20200624_175734.png

2.13 angular项目中使用innerHTML后样式失效
出现项目：熊熊软件、龙格派
描述：在商城项目商品详情中或展示一些后台返回的文章的时候，经常要用到innerHTML把返回的代码直接嵌入到页面angular项目中，此时就会出现后台展示的文章和前端渲染后的文章样式不一致现象
原因：在angular中默认将所有输入值视为不受信任。当通过 property，attribute，样式，类绑定或插值等方式，将一个值从模板中插入到DOM中时，Angular会自动清除和转义不受信任的值，导致代码片段里的样式丢失
解决：通过DomSanitizer将其转化一下，信任该内容即可正常展示，由于可能经常使用该功能，所以将次功能封装成一个管道，在页面中直接过滤即可
20200624_181924.png
使用：
20200624_182012.png
参考链接：https://blog.csdn.net/dengfangfang11/article/details/80508967

web前端技术分享文档相关推荐

好程序员web前端技术分享媒体查询
为什么80%的码农都做不了架构师?>>> 好程序员web前端技术分享媒体查询什么是媒体查询媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向 ...
Web前端技术分享：学习HTML和CSS的5大理由
人们学习HTML和CSS最常见的原因是开始从事Web开发.但并不是只有Web开发人员才要学习HTML和CSS的核心技术.作为一个网络用户,你需要你掌握的相关技术很多,但下面小千总结了5个你无法拒绝学习 ...
Web前端技术分享：全栈工程师常用的开发工具
全栈工程师,也叫全端工程师,是指掌握多种技能,并能利用多种技能独立完成产品的人.全栈工程师熟悉多种开发语言,同时具备前端和后台开发能力,从需求分析,原型设计到产品开发,测试,部署,发布全流程都十分熟悉 ...
Web前端技术分享：img标签下方出现空隙的问题解决方案
很多初学小伙伴在写页面的时候碰到过一个问题,当我们用一个div直接包裹img,img的下方会出现3px间距,如图代码如下: 为什么会出现这种情况呢? 因为img是一种类似text的标签元素,在结束的 ...
Web前端开发规范文档(转)
本文处之:http://www.w3cfuns.com/blog-1-534.html 规范目的为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本 ...
SaToken技术分享文档
SaToken技术分享 1.什么是SaToken Sa-Token 是一个轻量级 Java 权限认证框架,主要解决:登录认证.权限认证.Session会话.单点登录.OAuth2.0.微服务网关鉴权 ...
Web前端开发规范文档（更新于2013-01-13）
规范目的为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不 ...
Web前端开发规范文档你需要知道的事
规范目的为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不 ...
web前端技术分享：前端开发与后端开发的区别是什么？
相信很多人在技术岗都听到过前端和后端这两个职位,但是大部分人对前端开发与后端开发的区别是什么?并不是很清楚,下面小千就为大家详细的介绍一下两者的区别之处. web前端分享:前端开发与后端开发的区别是什 ...
web前端技术分享：web前端的求职前景好不好？
想要进军互联网行业,大部分人会选择web前端和web前端这两个技术,因为两者之间的发展前景是非常好的.下面我们就先来了解一下web前端的求职前景好不好? web前端的求职前景好不好?近几年的热门行业里 ...

web前端技术分享文档

web前端技术分享文档相关推荐

最新文章

热门文章