dumuchenglin123 / self-fe-knowledge Goto Github PK
View Code? Open in Web Editor NEW个人笔记
个人笔记
开发流程
1.尽早从设计师获取 交互稿、设计稿,了解业务需求,业务流程;以便尽早开发,免得时间不充裕;
2.搭建webpack构建工具(可以在github下载别人搭建好的,再稍加改之),以便打包静态资源;
3.注册Git库,(外包员工没权限,需申请)拉取Git库 在库里面编写代码加调试。
4.在相应的项目上编写node层逻辑,编写接口;一般是在天猫精灵官网项目上,注册路由URL....
(一定要确保diamond 前端页面与接口在同一个域,编写后端逻辑时可参考 controller文件夹下的marketing.js)。
5.开发好后把图片放到tfs cdn上,把视频和音频放到OSS上,然后把前端静态资源(CSS、JS)用def来上传到CDN把HTML放到diamond上(一定要确保diamond和前端页面在同一个域),发布之前得改下diamond页面静态资源的src,不然获取不到。
6.申请埋点、黄金令箭(可提前申请,无需阻塞开发流程)。后台业务逻辑可以先上线避免封网。
注意事项
1.根据业务需求选择合适的翻页框架库,大多都是SPA应用
外部链接:https://www.zybuluo.com/buoge/note/966161
2.页面适配:页面适配的时候,需跟UI设计师商订设计稿尺寸,如今的尺寸跟以往有所不同 为了兼容iPhone X等大屏,尺寸都是 7501624 为主,但内容区域还是7501206,为了在小尺寸的手机容器完全展示内容;
背景图片一般采用background-size:cover,(高度别设固定值)来实现;cover值是保持图片宽高比例,有可能会有图片多余的部分被裁;contain值也是保证图片宽高比例,有可能页面两边会有留白区域;还有 “100% 100%”值 虽铺满全屏但图片质量受到影响,有被压缩或拉长不便采用;
再说说代码适配,我一般采用rem为主,当然也有很多人采用vh、vw单位,两者都行;我用rem时为了跟设计稿尺寸单位相对应,所以在里添加了
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimun-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
同时在页面引入flexible.js 即可,flexible.js设置的font-size为100px,我在webpack里引用了webpack-px2rem-loader 插件通过配置可以将CSS里的px单位编译成rem,减少人为计算;用起来还是挺方便的;
iPhone X的适配:https://aotu.io/notes/2017/11/27/iphonex/index.html
3.开发调试:
在不知道调试方法的时候,你要把项目发布预发甚至上线,还必须用真机调试 无论是人力物力还有时间都特别消耗;所以知道些调试方法是必需的:
1.打开本地服务器,保证手机与PC连接同一个内网,再用手机连接PC端的IP地址二维码扫描,手机可以看到效果;
2.vconsole 通过它可以检测JS 逻辑报错;
3.服务器代理 webpack-dev-server自带 很方便;
4.mock数据 我用的是webpack-api-mocker 还有利用charles 程序抓包 域名映射 等。
5..可以用磨刀石:http://mds.alibaba-inc.com/ 真机测试,无法测试IOS的,只能测试安卓;
6.用Xcode 模拟IOS设备
7.通过数据线将手机与电脑连接起来打开谷歌 Safari浏览器调试: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3
4.运用后端语言模板:ejs、pug,在此我推荐art-template 性能据说最优;运用渲染模板语法 有助于渲染 代码量减少,当然你也可以用Vue、react开发。
5.分享功能实现: 分享功能无外乎在微信、钉钉、微博这几大沟通工具里实现,所以实现它至关重要。分享一篇文章:frontend9/fe9-library#22
6.video标签
1.全屏处理,
2.自动播放,
3.播放控制,
4.隐藏播放控件
全屏处理:会涉及到几个属性 webkit-playsinline playsinline 加这两个属性表示视频在浏览器窗口内全屏,而非整个屏幕全屏。
自动播放:属性:autoplay 或者通过 JS video.play(); autoplay 这个属性兼容性不是很好,在很多手机上没效果,一般用JS控制;
微信里有WeixinJSBridgeReady事件可以利用它来实现自动播放,前提是引用微信开发者里面的weixin.min.js,其他的浏览器不行,建议引导客户点击触发。
播放控制:在移动端有一些坑需要注意,不要轻易使用媒体元素的除'ended','timeupdate'以外event事件,在不同的机子上可能有不同的情况产生。
隐藏播放控件: 大多数机型很难做到隐藏,但可以参考腾讯视频技术。
我找了篇文章大家可以好好看下,觉得讲解得很详细 https://segmentfault.com/a/1190000006857675
7.移动端的点击事件
移动端与PC端不同,click事件会有300ms延迟,交互体验的话会很差,点击的话就用touchstart、touchend事件代替 同时在里面加event.preventDefault();阻止冒泡;或者引用第三方库fastClick;click事件点击时会有灰影;解决办法:html,body{-webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
8.canvas生成图片
如果是简单的直接原生撸,如果复杂的话可以采用html2canvas 缺点是引的包过大;原生写的话注意尺寸的换算。
9.编写合适的JS语法,目前市场上对ES6、es7还不是所有兼容。所以尽量编写es5语法,否则有些手机运行时报错,比如华为。
目前所想到的就这些了,若有不足还请大家补充。
前端滚动翻页库: https://www.zybuluo.com/buoge/note/966161
web APP开发经验之谈 链接: frontend9/fe9-library#39
腾讯移动端开发:https://tgideas.qq.com/doc/frontend/spec/m/design.html
1.数据类型
2.事件循环
git branch -a 查看分支
Git merge —no-ff dev 把Dev分支合并到该支
Git branch -d dev 删除本地分支 dev
git push origin —delete dev 删除远程分支
Git branch -m dev1 dev2 更改分支名 dev1改成dev2
Git push origin dev 把dev推向远程分支
Git remote add origin http://gitlab.alibaba-inc.com/ai-fe/boys_voice_vote.git 添加运程仓库
1.HappyPack 可以将 Loader 的同步执行转换为并行的,这样就能充分利用系统资源来加快打包效率了
2.dllplugin 可以将特定的库提前打包然后引入,减少打包次数,当类库更新版本的时候才重新打包,并将公共文件抽离出来单独文件,同时DllReferencePlugin,将依赖文件引入项目中。
3.添加设置resolve属性,resolve.extensions、添加后缀名;resolve.alias添加别名,加快文件路径搜索;module.noParse:如果你确定一个文件下没有其他依赖,就可以使用该属性让 Webpack 不扫描该文件,这种方式对于大型的类库很有帮助。
1.按需加载
2.tree shaking 删除文件为引用的代码
3.压缩js、CSS、图片,
4.抽离第三方库
5.使用Uglify插件,启动gzip
6.依赖分析,可以用webpack-bundle-analyzer插件分析打包好的模块,再考虑是否修改或替换此功能的库,或者引用外部cdn来减少打包体积以及优化性能
由于JS的number类型跟Java的double类型都是双精度浮点数的,所以计算是 比如: 0.1+0.2 === 0.3 会返回false,要比较的话可以用number. EPSILON属性验证: Math.abs(0.1+0.2) - 0.3 <= Number.EPSILON 来除去误差, number.EPSILON是 JS中1 与大于1的最小浮点数的差值。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.