closertb.github.io
closertb.github.io copied to clipboard
closertb
浏览issue 或 我的网站，即可查看我的所有博客
Bumps [path-parse](https://github.com/jbgutierrez/path-parse) from 1.0.6 to 1.0.7. Commits See full diff in compare view [](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter...
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot] avatar"){kind=avatar}
### 关于样式编译 因为webpack编译的思想是万无皆可JS，意旨所有web项目关联的资源文件，都可以通过js关联起来。然而又由于图片，样式这些本来和js八竿子打不到一起的，所以就有了各种loader来解决他们的关联性问题； 说到webpack的样式编译，总有几个loader是不能错过的，比如less-loader, css-loader，style-loader,随便上一段常用配置： ```js const lessLoader = { test: /\.less$/, use: [ 'style-loader', { loader: 'css-loader', options: { modules: true, }, }, 'less-loader', ], } ``` 以上文件就是告诉webpack，在遇到文件名以.less结尾的文件，先用less-loader编译，再用css-loader编译，最后用style-loader，曾经我是用这样一段js伪代码来概述的： ```js...
## 背景 关于JSBridge的一些基础知识，在网络上有很多文章可以参考： - [《H5与Native交互之JSBridge技术》](https://segmentfault.com/a/1190000010356403) - [《JSBridge的原理》](https://juejin.im/post/5abca877f265da238155b6bc) 最近公司在做一个项目，通过把我们自己的Webview植入第三方APP，然后我们的业务全部通过H5实现。至于为什么不直接用第三方APP WebView,主要是身处金融行业，需要做一些风控相关功能。 由于是Hybrid APP的性质，所以web与Native的通信是无法避免的；而为什么我要封装JSBridge，主要在于下面两点： - 公司APP的JSBridge提供了数据的序列化和全局函数的注入，而我们这次由于包大小考虑，这一块需要H5自己来实现； - 原生提供的接口协议太多，记住麻烦； - 回调的写法不太人性化，期望Promise; 由于本次项目只涉及到Andriod，所以没有关于ios的处理，但我自认为他们只是协议的不同，Web的处理可以相同。 ## 原理浅谈  看上图的通信实现（图片来源于文章开头的文章），简单说一下通信过程； - Webview加载时会将原生提供的JSBridge方法注入到window对象上，比如：window.JSBridge.getDeviceInfo就是原生提供的可以读取一些设备标识信息的接口； - H5通过window调用原生接口，基本都需要传参，比如这次处理成功或则处理失败的结果回调的，还有一些参数设置，拿上面给的方法来举例： ```js window.JSBridge.getDeviceInfo({ token: '*&^%$$#*',...
## 背景 最近一直在做一个技术改进：微前端中子应用采用umd方式分包构建，取代现有的systemJs方式构建，解决子应用稍微复杂一点后构建资源过大造成应用加载缓慢的问题。 依赖umd分包，就需要依赖webpackJsonp的全局变量通信， 这个技改方案最后成功了，但这个过程让我对SystemJs有了新的认识。准确点说它差一点就成功忽悠住了我，幸好18岁的我保留了足够的好奇心，没有被表面现象懵逼。 ## 根深蒂固的认知 作为一个工作6年的前端，虽然离牛逼还有成都地铁六号线那么远的距离，但自认为自己基础还是扎实。在我的认知里，所有的浏览器JS代码运行，都离不开script标签的引入，比如： 1.内联script ```html console.log('I am inline script'); ``` 2.远程脚本加载 ```html ``` 3.Es6 module 和前面一致，只是多一个 `type="module"`标识 4.动态 import() ```js /* hello.js */ // Default...
## 吐槽一下自己 三个月了，三个月没写过东西了，连媳妇都忍不住说：”感觉今年你不是很上进啊“，我回了一句："自信点，去掉感觉"。 四月忙婚礼，五月需求成山，六月稍微闲点，正巧赶上又NBA季后赛与欧洲杯，哪有什么时间学习，全躺平了。  其实从刚入行起，就陆陆续续接触Nginx，学着安装，学着配，学着用它解决不是前端管得了的前端问题，知识零零星星从百度查了很多，但从没记住，于是.... ## 关于Nginx 如果对Nginx一点概念还没有，推荐看一下[百度百科之nginx](https://baike.baidu.com/item/nginx/3817705?fr=aladdin)； 记住一句：Nginx是一个很强大的`高性能Web`和`反向代理服务`，它具有很多非常优越的特性； ### 高性能 Web 服务 Web 服务实际上又称静态资源服务，自从前后端分离后，前端的输出趋向于静态资源的形式，什么是静态资源：就是我们通常用webpack构建输出的结果，比如：  而为了提供文件在互联网中的可访问性，前端还是需要依赖`静态资源服务`；最常用的做法就是Node服务和Nginx服务。 Node服务最常见的，就是WebpackServer, 在前端开发联调时经常用到, 启动后我们就可以通过http://localhost:8907/bundle.05a01f6e.js的形式来访问构建资源；除此之外，我给大家安利另一款Node服务库：[serve](https://www.npmjs.com/package/serve), 它也能快速启动一个静态资源服务。 但在生产环境，我们一般用Nginx来处理，不是Node不好，而是Nginx已经够好了。通常整个大前端会有很多前端项目，我们都将构建结果放在一台服务器上（一般有备份机器）的某个文件夹下,然后通过安装Nginx来创建一个静态资源服务供所有前端资源的访问；比如文件夹static下有A，B，C，D四个前端项目资源, 我们通过nginx配置: ``` server { listen 80; listen...
什么样的知识，最好吃？入口即化的 ## 啰里吧嗦的开头 SameSite cookie 推出已一年有余，自己看了不少文章，也撞了不少南墙，所以还是那句好记性不如烂笔头。你可能觉得自己懂了，但试着讲出来，才能知道自己是否真的懂了。 列一列自己看过的文章： - 带你入门的阮老师：https://www.ruanyifeng.com/blog/2019/09/cookie-samesite.html - 很长很官方的文章：https://web.dev/samesite-cookies-explained/ - SameSite 诞生的草案：https://tools.ietf.org/html/draft-west-first-party-cookies-05 - SameSite 开始发威的草案：https://tools.ietf.org/html/draft-west-cookie-incrementalism-00 - RFC 6265 Cookie 规范，HTTP State Management Mechanism：https://tools.ietf.org/html/rfc6265#section-5.2.5 ## 走进SameSite ### 和新冠一起火了的SameSite SameSite...
Bumps [ws](https://github.com/websockets/ws) from 6.2.1 to 6.2.2. Commits See full diff in compare view [](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter...
Bumps [dns-packet](https://github.com/mafintosh/dns-packet) from 1.3.1 to 1.3.4. Commits ebdf849 1.3.4 ac57872 move all allocUnsafes to allocs for easier maintenance c64c950 1.3.3 0598ba1 fix .. in encodingLength 010aedb 1.3.2 0d0d593 backport encodingLength...
Bumps [hosted-git-info](https://github.com/npm/hosted-git-info) from 2.8.4 to 2.8.9. Changelog Sourced from hosted-git-info's changelog. 2.8.9 (2021-04-07) Bug Fixes backport regex fix from #76 (29adfe5), closes #84 2.8.8 (2020-02-29) Bug Fixes #61 & #65...