IMWeb jerryOnlyZRJ 原文出处:IMWeb社区 未经同意,禁止转载 我想大多数人和我一样,第一次听见“人工智能”这个词的时候都会觉得是一个很高大上、遥不可及的概念,特别像我这样一个平凡的前端 在python垄断的时代,发布JS工具库不就是意味着我们前端工程师也可以参与其中? 当我决定开始投身这片领域做一些自己感兴趣的事情的时候,却发现身边的人投来的都是鄙夷的目光,他们对前端的印象,还总是停留在上个年代那些只会写写页面脚本的切图仔,只有身处这片领域的我们才知道大前端时代早已发生了翻天覆地的变革 activation:'relu'}); // 池化层 // 池化滤波器的大小为2*2 // stride:步长为2 // 在这里我们无法看出这个框架池化是使用的Avy Pooling还是Max Pooling 所以,请对你所从事的这份前端事业,有足够的信心! 还是那句老话: 技术从来不会受限于语言,受限你的,永远只是思想。
前端AI实战——告诉世界前端也能做AI 我想大多数人和我一样,第一次听见“人工智能”这个词的时候都会觉得是一个很高大上、遥不可及的概念,特别像我这样一个平凡的前端,和大部分人一样,都觉得人工智能其实离我们很遥远 在python垄断的时代,发布JS工具库不就是意味着我们前端工程师也可以参与其中? 当我决定开始投身这片领域做一些自己感兴趣的事情的时候,却发现身边的人投来的都是鄙夷的目光,他们对前端的印象,还总是停留在上个年代那些只会写写页面脚本的切图仔,只有身处这片领域的我们才知道大前端时代早已发生了翻天覆地的变革 了解了这些知识之后,就可以开始我们的实战啦~ 2.图像识别实战 说了那么多理论,也不比实操来得有感觉。 所以,请对你所从事的这份前端事业,有足够的信心! 还是那句老话: 技术从来不会受限于语言,受限你的,永远只是思想。
相关博客: Web前端学习笔记【1】 ---- 1. this在 JavaScript 中主要有以下五种使用场景 ---- 在全局函数调用中,this 绑定全局对象,浏览器环境全局对象为 window = { test: 'obj2test', getAge2: function () { console.log(this.test) } } return obj2; } }; obj.getAge().getAge2() // 'obj2test' // ============== var obj = { birth :@&=+$#")); 输出: http%3A%2F%2Fwww.w3school.com.cn http%3A%2F%2Fwww.w3school.com.cn%2Fp%201%2F %2C%2F globalStorage 使用于Firefox2+的火狐浏览器,类似于IE的userData。 缺点:IE不支持。
使用path来匹配路由,然后通过query来传递参数,这种情况下 query传递的参数会显示在url路由的两种模式 hash与history 对于Vue 这类渐进式前端开发框架,为了构建SPA(单页面应用 ),需要引入前端路由系统,这也就是Vue-router存在的意义。 前端路由的核心,就在于改变视图的同时不会向后端发出请求。 添加验证码2. 日常工作中用的最对的跨域方案是CORS和Nginx反向代理前端工程化webpack配置,webpack4.0有哪些优化点module.exports={entry: {},output: {},plugins
不论是什么样的前端面试,总会问到的一个问题:前端性能优化。相信如果这个问题没有答好,在面试中会很被动。于是,趁着这个天天宅的时期,好好的整理了一番。 、CSS代码可以内嵌在HTML中,比如:rem动态等5、避免使用iFrame6、使用骨架屏二、CSS优化加载优化1、避免使用css的@import2、避免使用通配符3、避免使用! 1、选择器嵌套尽量不要超过三层2、id选择器尽量不要嵌套3、使用继承体积优化1、提取公共CSS三、JS优化运行速度1、如果没有兼容问题,尽量使用原生方法2、根据兼容浏览器的最低版本,考虑是否使用polyfill3 (Webpack拆包)减少加载体积1、压缩图片2、压缩HTML、CSS、JS代码3、开启网络压缩,如:GZIP参考 前端进阶面试题详细解答减少加载次数1、制作精灵图2、将小图片转换为base64字符串3 、使用浏览器缓存4、使用前端缓存,如: LocalStorage、Cookie、SessionStorage等5、减少重定向请求,比如:nginx反向代理的重定向6、避免使用服务端字体五、React性能优化
child: Child } data = { list: [{id: 1, title: 'title1'}, {id: 2, title: 'title2'}] } } </script> data = { a: 1 } //计算属性aPlus,在脚本中可通过this.aPlus来引用,在模板中可通过 { components = {}; data = {}; methods = {}; events = { 'some-event': (p1, p2,
boy1.arr.push(2); console.log(boy1.arr,boy2.arr);// [1,2] [1] // 缺点1:方法不能复用 console.log(boy1.say == = boy2.say) // false (说明,boy1和boy2 的say方法是独立,不是共享的) // 缺点2:不能继承父类原型上的方法 Parent.prototype.walk = function 实现步骤: Step1: 创建 callback 方法 Step2: 插入 script 标签 Step3: 后台接受到请求,解析前端传过去的 callback 方法,返回该方法的调用,并且数据作为参数传入该方法 Step4: 前端执行服务端返回的方法调用。 原因就在于 f1 是 f2 的父函数,而 f2 被赋给了一个全局变量,这导致 f2 始终在内存中,而 f2 的存在依赖于 f1,因此 f1 也始终在内存中,不会在调用结束后,被垃圾回收机制(garbage
这个文件就是我们一会要写的样式文件,为了展示不带样式的页面,我先把这行注释掉了,那这段代码用chrome打开截图如下: 那接下来我们完成样式文件的编写,首先我们完成的任务如下: 1、设置背景颜色浅蓝色 2、 给h1字体加一个边框,设置h2字体颜色 3、设置div中p段落背景颜色 4、设置表单边框,指定宽度和长度 5、设置超链接颜色和一些文字装饰 基本就这些吧,我们直接上代码: /*背景色*/ body{ background-color : #a8e6ff; } /*h1的边框*/ h1{ border: 1px solid black; } /*h2颜色*/ h2{ color: purple; } /*段落背景色,注意是div下的p : 5px solid gray; width: 400px; height: 200px; } /*超链接红色*/ a{ color: red; } /*表单边框*/ input{ border: 2px
link和:visited伪类的书写顺序 作业 写满足以下条件的选择器 类名不为not-normal-input的文本框(<input type="text">)元素的获得焦点状态 在父元素中倒数第2个
今天给大家带来的是 2B 领域的一个架构难题,我们最终也没有找到一个较好「解决」方案, 或者说它本来就是一个伪命题。 让我慢慢跟你道来… 软件的划分模式 首先从软件系统的划分模式讲起。 多业态 在 2B 领域,让我们更棘手的是,还要面临多业态问题。 什么是多业态? 如果说分层是 1D、 垂直划分是 2D、再加上多业态,就是 3D 了! 这些行业多态会横向击穿垂直拆分后的模块壁垒,行业的多样性会渗透到程序的各个角落,开闭原则形同虚设。 不管是前端还是后端,这是都是一个非常大的挑战。 现状就是本文标题中讲的,多了一个维度之后,对开发而言是灾难性性,整个项目就是一个大泥球。 这个我在 微前端的落地和治理实战 中也有讨论 ❌ 职能聚合。
导语:前端智能化,就是通过AI/CV技术,使前端工具链具备理解能力,进而辅助开发提升研发效率,比如实现基于设计稿智能布局和组件智能识别等。 本文要介绍的前端智能化的一类实践:通过计算机视觉和机器学习实现自动提取图片中的UI样式的能力。 具体效果如上图,当用户框选图片中包含组件的区域,算法能准确定位组件位置,并有效识别组件的UI样式。 = 0: vertical_centers = vertical_segments[:, 0] / 2 + vertical_segments[:, 2] / 2 left img = cv2.copyMakeBorder(img, 5, 5, 5, 5, cv2.BORDER_CONSTANT, value = [0]) circles = cv2.HoughCircles 本人将于9月5号参与腾讯live开发者大会,届时将介绍更多前端智能化实践内容,欢迎有兴趣童鞋前来观摩 腾讯Live开发者大会:https://2020.tlc.ivweb.io/detail/?
接下来,我们将详细介绍如何在群晖NAS上部署Llama 2大模型,并通过内网穿透工具cpolar实现远程访问这样一个基于Llama 2的聊天机器人。 拉取相关的Docker镜像 运行Llama 2需要借助Ollama镜像,对语言模型进行交互需要用到Chatbot-Ollama前端界面,所以我们需要拉取这两个docker镜像,本例群晖版本由于无法直接在群晖控制面板 pull ghcr.io/ivanfioravanti/chatbot-ollama:main 拉取成功后,我们可以在Docker界面看到拉取的两个镜像,下面开始运行两个镜像,首先运行ollama 2. success,表示下载运行Llama 2模型成功,下载完成后可以关闭掉窗口.这样ollama 容器启动,并运行Llama 2模型就成功了,下面运行chatbot-ollama镜像,配置前端交互界面 3 通过在群晖NAS上搭建Llama 2并实现远程访问,成功实现让你在家就能拥有一台属于自己的智能AI助手!如果你对这个项目感兴趣,不妨动手试试吧,相信你会有不小的收获。
2:嵌入式样式表:CSS代码写在<style type="text/css"></style>标记之间。 比如看一下知乎首页的网页构造: ? 2:ID选择器定义:ID选择器可以为标有特定ID的HTML元素指定特定的样式。HTML元素以ID属性来设置ID选择器,CSS中ID选择器以"#"来定义。 ③ RGB方式:如rgb(255,255,255) 2:字体属性: ① font-size:定义字体大小。
margin-left: 50px; margin-top: 25px; background-color: tomato; } .c2 greenyellow; } </style> <body>
event//template@click="fun1" //methodsfun1(event){}需要传参数的,需要把event参数带过去,使用$event//template@click="fun2( 2,$event)" //methodsfun2(val,event){}修饰符事件修饰符stop: 阻止事件冒泡prevent: 阻止默认事件,如超链接标签的重定向capture: 网页是默认按照冒泡方式去触发函数的 nextTick(()=>{})当多次修改data数据时,Vue会做一个data整合进行一次渲染(也就只会调用$nextTick一次)slot 插槽默认插槽//父组件<Child>
而我们前端er更像一个事不关己的旁观者。在前端领域,我们如何乘上这个风口,又有什么样的方法可以用AI赋能我们的老本行。 大家请看这个例子: x = [] y=[], 请用一点时间推导一下X和Y的关系公式 3... 2... 1... 相信大家经过试错和思考已经找到答案了:【x=2y-1】。 如果希望短时间内用AI赋能你的业务,最好先看下其他三种方案有没有适合你的需求,或者问下AI部门的同事,他们有没有兴趣和你一起干。 我把社区中开源的前端AI能力,又重新用直白的语言写了一遍,每个DEMO下有原项目地址链接,有兴趣应用的可以研究更精确的参数。 为了照顾没有摄像头的用户,我为每个例子都写了上传图像的版本。 (这种方法也称为迁移学习) 下面以高度封装的tensorflow-for-poets-2为例,介绍训练图片分类的详细步骤(只需7步): 1. clone 预训练源代码 ? 2.
前端技术已经多年,各种开发框架,开发语言也覆盖了大部分的业务环境,熟练使用AI 进行辅助开发就可以提高 10 倍的开发效率,当然这个是在有比较熟练开发经验的基础上再进行 x10AI 极大促进了开发效能; 这样一来,本来一个稍微复杂点的项目里要前端和后端,再加写测试脚本和运行测试结果的测试人员,至少需要3个人,外加开发2,3个月,现在可能是1个人,顶多用2,3周就能开发完成并上线。 现在前端几乎没人要了,因为后端使用AI 辅助开发基本上也能满足基本需要了,迭代几个版本,熟悉了前端开发的基本框架,基本上后端和前端也就没那么明显的界限了,除非是比较急的项目需求,不然时间拉长一点点基本上就不需要前端了 所以如果从现在开始积累大前端++项目的行业特性,那基本上就抵御了 AI 的冲击,因为AI 解决不了如此复杂的业务场景,当然如果你看过我其他文章就会知道这样的项目的场况问题,AI 无法理解的。 所以如果还想在前端有一定的发展方向,大前端++可能是一个比较好的保底的选择,可以有效抵御AI 冲击我是前端开发,还是十多年的前端开发,所以在前端开发的感受更深刻一些!
例如:
参考 前端进阶面试题详细解答react-router4的核心路由变成了组件分散到各个页面,不需要配置 比如<link> <route></route>React 16中新生命周期有哪些关于 React16 <Link>做了3件事情:有onclick那就执行onclickclick的时候阻止a标签默认事件根据跳转href(即是to),用history (web前端路由两种方式之一,history & hash /> </React.Fragement> ); }}父组件重新渲染只要父组件重新渲染了,即使传入子组件的 props 未发生变化,那么子组件也会重新渲染,进而触发 render(2) Create React App 项目直接创建一个具有 typescript 的 Create React App 项目: npx create-react-app demo --typescript(2) '/getData', getInitTodoItemAction) // 发送函数类型的action时,该action的函数体会自动执行 store.dispatch(action)}(2)
使用graphql的优势: 前端把握查询的主动权,可定义你需要查询的字段过滤冗余,另外减少两端的沟通 接手bff层前端可作为空间更大,包括做一些鉴权 请求合并更加便利(以前初始化多个请求需要一起返回都是使用 后端同学直接集成 (java接口(restful或者graphql)-->前端) 前端增加中间服务层(java接口-->前端中间服务层nodejs(graphql)-->前端) 对于第一种方式,后端同学可能更改会更大 ,更改接口规范来迎合前端可能代价太大且后端同学可能也不太会高兴修改接口规范多出来的工作量。 首先修改前端的代理前端代理到本地nodejs服务,直接使用weboack的proxy代理配置: proxy: { '/api': { target: 'http 前端中间服务层的配置 中间服务层使用koa2搭建,当然你也可以使用express等等其他。