随笔- 100
文章- 0
评论- 0
阅读-
8182
03 2022 档案
4.2 动态构建
摘要：动态构建 也叫动态编译（dynamic compilation） java 的动态编译和前端的不一样，java动态编译最普遍的是即时编译，目的是为了提高性能 本地开发服务器动态编译功能目的是为了节省人力，方便调试，本质是监听和触发 webpack-dev-server 是官方提供的用于搭建本地开发环
阅读全文
4.1 本地开发服务器解决的问题
摘要：本地开发服务器的主要功能 动态构建 解决的问题是面向开发层的，通过监听，修改，触发，构建，这4个流程来避免每次修改都要人为构建一遍，实现即时调试 mock服务 解决的问题是面向前后端协作层面的，本地服务器提供mock数据接口辅助前端逻辑编写 SSR项目，本地开发服务器还要具备解析html模版的功能，
阅读全文
3.7 资源定位
摘要：web项目中的资源定位 存在引用关系的资源之间被引用方地址的改动会及时同步到引用方 资源定位的历史变迁 原始形态 一切都很简单 web以静态展示为主，没有复杂的交互逻辑 部署方式是将css，js图片等静态资源和服务器端代码放在相同路径 不论开发生产环境，资源之间的相互引用使用相对路径就可以了 但随着
阅读全文
3.6 增量更新和缓存
摘要：客户端浏览器的缓存 利用本地缓存，localstorage, sessionstorage。属于代码架构层面的优化措施，不属于前端工程体系的服务范围 利用http缓存策略，分为强制缓存（根据过期时间决定是否请求）和协商缓存（每次发出请求，服务器比对后，决定是否使用本地还是新资源）。采用哪种策略由ht
阅读全文
3.5 模块化开发
摘要：组件化和模块化 模块可以理解为零件，比如轮胎上的螺丝钉 组件可以理解为轮胎，具备完整功能的整体 模块化和工程化 工程化类似于车间，模块化类似于零件 模块化开发的价值 避免命名冲突 js没有语言层面的命名空间，编写通用模块的普遍方式是将其暴露给全局作用域，但问题是无法阻止命名冲突 es6之前，业界通用
阅读全文
3.4 CSS预编译和PostCSS
摘要：CSS cascading style sheets 层叠样式表 用来给html增加样式，是一种标记类语言 1994年，哈肯首次提出css 1996年，w3c推出了一个正式的版本 1998年，推出第二个版本 css3 1999就被提出，但是20年后才发布 CSS的缺陷 是浏览器可以识别的唯一一个可以
阅读全文
3.3 ECMAScript 和 Babel
摘要：js 和ECMAScript 不严谨的，js= 和ECMAScript+Dom+Bom。 更严谨的，js= 和ECMAScript+宿主API。 ECMAScript是个标准，js是ECMAScript的一个实现子集 Bom和Dom是宿主浏览器暴露给js的API，与js语言的规范无关 同理，node
阅读全文
3.2 配置API设计原则和编程范式约束
摘要：配置API设计 与webpack的复杂相比，封装后的脚手架要简单和直观 缺点：不能将将webpack全部配置开放给用户，所以要制定扩展策略解决用户的特殊需求，就是所谓的插件机制 编程范式约束 封装方案带来配置便利的同时，要求业务代码编程范式遵守一定的约束，限制了源代码的可移植性 工程化方案作为一种服
阅读全文
3.1 构建功能解决的问题---阅读笔记
摘要：构建 将源代码转换成浏览器可以执行的代码 浏览器对es规范的实现程度，css预编译器，mustache模版语法等造成浏览器不能执行源代码 grunt,webpack,gulp之前 前端的构建需要借助其他开发领域的工具，比如ant 专业构建js和css的工具需要特殊的语言执行环境，比如java gru
阅读全文
前端路由，history 和hash 模式的区别
摘要：前端路由的功能 改变url不向服务器发送请求 检测url的变化 解析url的信息来匹配路由规则 hash模式和history模式都能够实现这个功能 hash模式 指的就是#和之后的字符 hash也称作锚点，本身是作为页面定位的，可以是id对应元素显示在可视区域内。 hash改变不会向浏览器发送请求
阅读全文
2.4 Yeoman封装脚手架方案--阅读笔记
摘要：脚手架创建项目步骤 第一步收集用户配置信息，可以通过GUI界面，可以通过命令行。 将配置信息转换成静态的文件内容 修改文件后缀，比如将.ejs改为js，css或者html等 将生成的文件复制到目标文件夹 封装脚手架 创建一个空的脚手架模块文件，文件目录 app是源码文件，app/index.js是执
阅读全文
2.3 开源脚手架案例分析--阅读笔记
摘要：3类脚手架 sail.js 是node.js的全栈mvc框架，使用grunt搭建工作流，主要针对服务器端，不针对前端 php中间层，只包括view和controller的web服务中间层框架，类似现在的大前端 Yeoman，开放的脚手架平台，高度可拓展，没有封装具体方案。2012年谷歌发布的，提供一
阅读全文
2.1 脚手架
摘要：脚手架 创建项目初始文件的工具 结合前端工程化方案，能快速生成功能模块配置，自动安装依赖，降低时间成本 单独衡量没有很大价值，但是是前端工程体系中不能缺少的 脚手架工作流 -一个个繁琐的配置项，映射为项目各个模块的功能定制
阅读全文
2.2 脚手架在前端工程中的角色和特征--阅读笔记
摘要：前端脚手架的差异性和独特性 java项目存在固定模式和技术选型，但前端项目的资源类型多样，技术选型宽泛，工作流程无固定规范，这些导致了前端脚手架与传统java等的脚手架不一样 前端工程工作流 脚手架初始化项目文件后，就没有用武之地了，用完即弃 我们甚至可以使用一个已经存在的类似项目，复制粘贴，稍微改
阅读全文
1.5 工程化方案架构--阅读笔记
摘要：目前流行的前端工具分为3类 工作流管理工具：grunt，gulp 构建工具：webpack，rollup 整体解决方案：FIS，WeFlow FIS 是一套比较完整的前端工程化方案，但构建功能不理想，生态圈不够庞大 最初是为了解决百度内部的需求，所以功能完整度和编程规范都有一定局限性 grunt，g
阅读全文
1.4 前端工程化--阅读笔记
摘要：前端工程化 是最近几年才兴起的一个方向。之前前端的业务逻辑比较简单，前端资源作为web服务器的一种附带，没有必要搞专门的工程化。在其他开发领域早就高度工程化了，比如web服务器开发。 前端工程化的目的 提高效率，解放生产力。通过制定规范，借助工具和框架，解决一些痛点和难点和一些重复性劳动。 前端工程
阅读全文
1.3 前后端分离--阅读笔记1
摘要：前后端不分离 概念：ui写html，css，后端套模版（将css和html套入服务器模版引擎中）和编写js逻辑。会出现。 缺点：效率低下 比如bug修复需要调动整个团队修复（从前端到后端） 比如前后端耦合的串行开发流程（不同同时开发，必须前端开发完了，后端才能开始） 前后端分离的优点 开发角度：实现
阅读全文
1.2 node.js带给前端的改革--阅读笔记1
摘要：前端的第一次新生：Ajax - 起步于微软的outlook的XMLHTTP组件。 - 后来其他浏览器厂商一起实现了XMLHttpRequest这个功能。 - W3C在2006年起草了XMLHttpRequest规范。 - 实现了局部刷新和异步请求。推动了web技术发展。 - ajax之前，js引擎只
阅读全文
1.1前端工程师的基本素养--阅读笔记1
摘要：1. 前端发展历史： 1990年，tim发明了第一个浏览器worldwideweb。 1995年，brendan 发明了js这个网页脚本语言，最初只是为了完成一些简单的功能比如表单验证。当时的js，语法简单，功能简单，容易学习。那时web应用普遍重视的是服务器端。那时的web开发人员，主要开发服务器
阅读全文
js 深浅拷贝
摘要：#JavaScript中变量存储在堆中还是栈中？ https://www.zhihu.com/question/482433315/answer/2083349992 js的变量究竟存在哪里，上面的文章说的很好。鉴于，我们这个标题说的是js深浅拷贝，我们就粗略的认为： 基本数据类型，存在栈内存中 引
阅读全文
