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,
image.png Live2D,即为2D绘图渲染技术,游戏中例如崩坏3,碧蓝航线中与老婆交互就利用了live2d,通过前端的渲染,拼接,移动即可做出类似3d的效果,但是始终还是有缺陷,例如无法实现 L2D的制作成本远低于3D,3D需要的建模,渲染,L2D可以方便完成,只需要对人物切片,然后前端重组,移动动画即可达到效果 Web中的L2D结构 案例:www.arsrna.com 这是Live2D的材质结构 即定义了物理效果 这里相当于总控制器,控制了什么情况下对应什么动作的json,而动作的json定义了材质切片的运动,Physics物理效果就能更加真实地显示动画,比如头发摇摆 Web中的呈现: 核心:live2d.js 可惜是加密的 我们无法进一步研究,但根据官方的文档来看,是运用webGL技术进行渲染的 首先要定义 <canvas id="live<em>2</em>d" width="280" height="250"></canvas /js/live2d.js"></script> 最后加载js: loadlive2d("live2d", ".
真正了解前端技术的工程师都会感觉前端技术发展变化太快。浏览器特性、前端框架、前端工具、多终端浏览器等都在快速迭代中。 作为前端工程师不仅要掌握现有的技术去实现业务需求,更要不断的学习新的技术、新的理念,时刻准备着新技术浪潮的来临。 《现代前端技术解析》提及了作为一个前端工程师需要了解的大部分技能。 现代Web前端技术发展概述 随着越来越多的业务搬到前端实现、前端的代码量越来越多。 Web前端技术一直以效率和质量为最终导向的道路上探索前进! 2. 在浏览器端判断上次返回头中是否包含Etag信息,有则连同If-None-Match一起向服务器端发送条件Get请求,304说明未做过修改,如果是200需要进入下一步; 3.
前端跨站技术 随着前端技术栈在服务端和移动端上的尝试和日益成熟,前端工程师的追求绝不只是页面上的技术,如何实现跨服务端,如何扩展到移动端开发将变成主要讨论议题。 JavaScript跨后端实现技术 前端通过与Node(基于事件驱动和无阻塞)结合的开发模式越来越被开发者认同并在越来越多的项目中得到实现。 ? 前后端同构 实现核心:只开发一套项目代码,既可以用来实现前端的JavaScript加载渲染,也可以用于后台的直出渲染; 实现原理:(1)数据模板的前端渲染和后台直出;(2)MVVM的前端实现和后台直出 未来前端时代 当MVVM、Virtual DOM或同构等技术实践都有很成熟高效的框架和方案可以实现时,对于移动端应用,前端可能会进入MNV*的原生NativeView开发,达到使用前端技术栈可以独立开发 Native的能力;与此同时,我们需要关注物联网Web(3D展示)、Web VR(VR展示),人工智能必定成为前端一下批革命技术,把握技术发展趋势,紧跟邻域前进的步伐。
Design mobile:蚂蚁金服) Vue搭配的组件: PC(element UI,), 移动端(vant有赞,Ant Design蚂蚁金服,uniApp) Ant Design 是阿里巴巴-蚂蚁金服体验技术部所设计的一个 UI 库,一般用于基于 React 的项目 Vant-UI 是有赞前端团队开发的一个基于 vue 的移动端组件库。 移动端组件)叫: h5开发 uniapp, flutter, react-native 叫: 移动端框架开发; 移动端跨端框架: uni-app: 是一个使用 Vue.js 开发跨平台应用的前端框架 对应前端开发者来说学习成本较高(需要学习新的dart语言),性能比React-Native高,相比原生低,流畅。 React-Native facebook的,使用语言: js。
content {:toc} 百度前端学院的第二次任务笔记,JavaScript 基础。 任务: JavaScript基础 做完任务一的时候深深地感觉到自己的基础非常的薄弱,在这里再次感谢一下百度前端技术学院,做任务的时候深刻理解了自己平时掌握不牢固的内容,比如浮动、BFC、等高布局等。 为什么把 <script> 放在 </body> 前 虽然理论上放在哪里都是可以的,但是对于前端页面优化来讲,还是放在底部是最佳的,因为如果JS执行出现错误了,最起码页面中的元素还能加载出来,因为DOM 为避免这种情况,需要通过一些特定的技术向页面中逐步加载 JavaScript 文件,这样做在某种程度上来说不会阻塞浏览器。 无阻塞脚本的秘诀在于,在页面加载完成后才加载 JavaScript 代码。 实现 代码 在线demo 练习2:倒计时 任务要求 在和上一任务同一目录下面创建一个task0002_2.html文件,在js目录中创建task0002_2.js,并在其中编码,实现一个倒计时功能。
前端项目与技术实践 前端开发规范 HTML规范 head内容 head中必须定义title、keyword、description,保证基本的SEO页面关键字和内容描述。 ]; let ary2 = [...ary]; let ary3 = {}; Object.assign(ary3, ary); ary[1].a = 3; ary2[1].a; // 3 ary3[1 数组遍历使用for…of,对象遍历使用for…in let ary = ['a', 'b', 'c']; let obj = { a: 1, b: 2}; for(let item of ary) { UI组件规范 (1)UI层风格统一化,相同功能的模块在相同场景下结构层和表现层应该一致;(2)增加UI层复用性;(3)更符合用户的体验习惯;(4)增加了开发规范的统一性。 做团队技术驱动者和突破者!
前端项目与技术实践 前端开发规范 HTML规范 head内容 head中必须定义title、keyword、description,保证基本的SEO页面关键字和内容描述。 ]; let ary2 = [...ary]; let ary3 = {}; Object.assign(ary3, ary); ary[1].a = 3; ary2[1].a; // 3 ary3[1 前端性能优化 用户获取页面数据或执行某个页面动作的一个实时性指标,一般以用户希望获取数据的操作到用户实际获得数据的时间间隔来衡量。 前端日志上报 浏览器提供了try…catch和window.onerror两种机制来帮助我们获取用户页面的脚本错误信息。 做团队技术驱动者和突破者!
前言 后端常用数据库做数据存储,譬如MySql、MongoDB,缓存技术存储数据,如Redis、Memcached; 前端存储数据目前常用的是Cookie、Storage、IndexedDB Cookie 分类 Cookie总是保存在客户端中(早期Java中经常会将Cookie与Session作为存储技术进行比较,Session是将数据保存在服务器端,大量的数据存储会增加服务器的负担),按在客户端中的存储位置 value) return defaultValue; return value[2]; } function setCookie(cname, cvalue, day, 后记 浏览器存储技术目前流行的基本就上面介绍的三种,之前出现的webSql由于用方言SQLlite导致无法统一,也就是说这是一个废弃的标准。
相关博客: Web前端学习笔记【1】 ---- 1. this在 JavaScript 中主要有以下五种使用场景 ---- 在全局函数调用中,this 绑定全局对象,浏览器环境全局对象为 window 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 常见的浏览器端的存储技术 ---- 有时需要将网页中的一些数据保存在浏览器端,这样做的好处是,当下次访问页面时,不需要再次向服务器请求数据,直接就可以从本地读取数据。 Google Gear Google开发出的一种本地存储技术。 缺点:需要安装Gear组件。
前端技术几乎每天都有新事物冒出来,技术也是由时尚来驱动了,我们常常臣服于时尚,面对快速的变化常常让我们感觉局促不安,开始焦虑,唯恐错过了些什么。如何打破这种焦虑呢? 需要在快速变化的前端世界里保持清醒,保持独立的思考和认知。让我们回归到技术的本质,因为解决现实中存在的问题,技术才会有价值。真正厉害的技术都静悄悄的跑在线上。 技术选型介绍 在项目的架构中,我们需要选择各种技术栈所对应的技术;在项目的开发中,我们需要选择各种工具库。 技术选型是我们必然会碰到的,我们常常面临的不是单个技术的选型,而是对于一个项目所涉及的一整套技术、方案、规范或者产品的选型。我们需要仔细的去权衡各种技术、各种组合的利弊,做出取舍。 可以列个技术选型分析表(小的不太重要的技术选型不一定要这么麻烦,而重要的技术选型则可能要反复各个步骤多次) 团队、技术成熟度、性能、架构一致性...
前端与协议 HTTP协议简介 完整的HTTP报文由头部、空行、正文三部分组成。目前最广泛使用的是HTTP1.1。 长连接 通过请求头中的keep-alive控制。 HTTP2 说道HTTP2,必须先说SPDY协议,SPDY是一种基于HTTP的兼容协议,支持多路复用和服务器推送技术,压缩了HTTP头部减小了请求大小,但其强制使用SSL传输协议,即必须是HTTPS HTTP2就是基于SPDY协议规范为基础,不强制使用SSL。 HTTP2采用完全二进制的格式来传输数据,而HTTP1.1默认文本格式; HTTP2使用TCP多路复用的方式来降低网络请求连接建立和关闭开销,多个请求可以通过一个TCP连接来并发完成; TCP 更多跨域方式请查看:八种方式实现跨域请求 前端实时协议 有时需要客户端和服务端之间实时连接进行通信。
WEB应用程序基本架构 胖服务端 fat_server.png 这个架构的特点: 后台良好的分层模型 页面由后台输出至浏览器,一般采用JSP、PHP等动态页面技术处理页面的动态内容 一些改进: 引入AJAX ,局部更新数据,避免整页面刷新 后端使用模板技术,帮助输出页面 前端使用模板技术,帮助构造html页面片断 前端形成了一些CSS框架,如bootstrap 前端形成了一些JS工具方法或常用组件,如jQuery 学习一次,到处都可以使 React并没有依赖其它的技术栈,因此可以在老旧项目中使用ReactJS开发新功能,不需要重写存在的代码。 ReactJS在老旧项目中的应用 限制 要与现有前端页面技术无缝衔接 没有前端编译工具 没有前端模块依赖工具,全凭script标签引入 目前的方案 将常用的JS库文件(ReactJS库、组件库、工具库) Redux教程 http://cn.redux.js.org/docs/basics/index.html 优秀的对标者 VueJS文档 https://cn.vuejs.org/v2/guide/
欢迎来到本期的前端食堂技术周刊,我们先来看下上周的技术资讯。 技术资讯 ECMAScript proposal: Types as Comments[2] TypeScript 官方发起了一个令人十分惊喜的提案,将类型注释添加到 JavaScript 代码中,允许这些注释由 你的前端食堂,吃好每一顿饭。我们下期见。 参考资料 [1] 食堂技术周刊仓库地址:https://github.com/Geekhyt/weekly: https://github.com/Geekhyt/weekly [2] ECMAScript Canvas2D: https://developer.chrome.com/blog/canvas2d/
使用path来匹配路由,然后通过query来传递参数,这种情况下 query传递的参数会显示在url路由的两种模式 hash与history 对于Vue 这类渐进式前端开发框架,为了构建SPA(单页面应用 ),需要引入前端路由系统,这也就是Vue-router存在的意义。 前端路由的核心,就在于改变视图的同时不会向后端发出请求。 添加验证码2. 日常工作中用的最对的跨域方案是CORS和Nginx反向代理前端工程化webpack配置,webpack4.0有哪些优化点module.exports={entry: {},output: {},plugins
微信小程序 jQuery每日经典 第二阶段已经发布,截至目前收录的技术有jQuery和CSS。其他技术正在不断的填充完善中。 CSS技术手册实现的方法: 资料来源 所有的CSS资料均参考自网址:http://css.doyoe.com/ 无可避免的其中肯定会有一些疏漏或者表述不到位的问题,希望大家积极指出。
这是一本以现代前端技术思想与理论为主要内容的书。前端技术发展迅速,涉及的技术点很多,我们往往需要阅读很多书籍才能理解前端技术的知识体系。 这本书在前端知识体系上做了很好的总结和梳理,涵盖了现代前端技术绝大部分的知识内容,起到一个启蒙作用,能帮助读者快速把握前端技术的整个脉络,培养更完善的体系化思维,掌握更多灵活的前端代码架构方法,使读者获得成为高级前端工程师或架构师所必须具备的思维和能力
(2)Beacon上报我们需要一个 API 能保证在页面销毁之前发出请求,还不能阻塞页面,为了处理这个场景的问题,浏览器推出了 Beacon API。 WebWorker介绍参考:https://juejin.cn/post/7139718200177983524(3)img上报因为img资源浏览器不会阻止,跨域会针对xhr这种请求才会生效,一般前端监控上报通过一个 + $.param(data)}badjsbadjs-web是腾讯开源的一款前端监控系统。
(1)创建Ajax对象(XmlHttpRequest) (2)判断数据的传输方式(get/post) (3)打开连接open() (4)发送send() 检测XMLHttpRequest对象的readyState 已经调用open()方法,但尚未调用send()方法 2:发送。已经调用send()方法,但尚未接收到响应 3:接收。已经接收到部分响应数据 4: 完成。已经接收到全部响应数据。 image.png ajax所包含的技术 大家都知道ajax并非一种新的技术,而是几种原有技术的结合体。它由下列技术组合而成。 1.使用CSS和XHTML来表示。 2. 2、使用异步方式与服务器通信,不需要打断用户的操作,具有更加迅速的响应能力。 2、安全问题 技术同时也对IT企业带来了新的安全威胁,ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。
七、前端框架:Vue.js和React。这两个框架至少要会一个。入门时,建议先学Vue.js,上手相对容易。但无论如何,同时掌握 Vue 和 React 才是合格的前端同学。 八、Node.js。 十、前端综合:HTTP协议、跨域通信、安全问题(CSRF、XSS)、浏览器渲染机制、异步和单线程、页面性能优化、防抖动(Debouncing)和节流阀(Throtting)、lazyload、前端错误监控 Sublime Text 是每个学前端的人都要用到的编辑器。另外,前端常见的IDE有两个:WebStorm 和 Visual Studio Code。