首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【工具】fis3 - 语法教程(1)之资源嵌入

经过艰辛的探索之后发现,前端开发所需的编译能力只有3种: 1、内容嵌入:把一个文件的内容(文本)或者base64编码图片嵌入到另一个文件中; 2、资源定位:获取任何开发中所使用资源的线上路径; 3、依赖声明:在一个文本文件内标记对其他资源的依赖关系...嵌入资源——内容嵌入 例如, 1、将base64图片嵌入到css\js里; 2、前端模板编译到js文件中; 3、将js\css\html拆分成几个文件最后合并到一起的能力...等等。...有了这项能力,在减少http请求数方面将大大提升。 需要注意的是,在组件化开发方面,fis是不建议使用“资源嵌入”的方式作为组件化拆分的手段,后面讲到的“声明依赖”能力会更适合组件化开发。...例如:在js中嵌入js文件: 编译前,在app.js文件中写入如下: __inline('demo.js'); 编译后,在app.js文件中将有demo.js的内容: console.log('我是...中嵌入其他文本文件,例如css文件: 编译前,js文件有代码如下: var css=__inline('a.css'); 编译后,js文件中那串代码变成了: var css="body \n{color

14320

用 Cursor 开发 10+ 项目后,我整理了10 条经验60条提示词案例

帮我创建一个 Node.js 项目的基础目录结构,并包含基本的路由配置。 给我一个 React 项目的初始文件结构,包括 App.js 和 index.js。...对于一个大数组,使用 Map 或 Set 优化查找操作的性能。 5. 遇到新技术别慌,Cursor 帮你找资料 查找一下如何在 Node.js 中使用 Redis 进行缓存管理。...将以下代码拆分成多个函数和模块,以提高可维护性。 帮我把这个大型项目拆分成多个模块,每个模块有明确职责。 给我一个 Node.js 项目结构建议,支持多模块开发。...创建一个模块化的前端应用,每个功能单独成一个模块。 帮我拆分这个 Python 项目,使其支持插件化架构。 把这个 Vue.js 项目中的常用功能提取成公共组件和工具模块。 8....帮我提升这个图像处理程序的性能,使其在高分辨率下更流畅。 优化以下 Node.js 应用的内存使用,避免内存泄漏问题。 这些提示词可以帮助你在开发中高效地使用 Cursor 或类似的 AI 工具。

81920
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    手把手教你撸一个 Webpack Loader

    在撸一个 loader 前,我们需要先知道它到底是什么。本质上来说,loader 就是一个 node 模块,这很符合 webpack 中「万物皆模块」的思路。...既然是 node 模块,那就一定会导出点什么。在 webpack 的定义中,loader 导出一个函数,loader 会在转换源模块(resource)的时候调用该函数。...html-loader 接收 HTMl 文本文件,转化为可被引用的 JS 模块。 事实上串联组合中的 loader 并不一定要返回 JS 代码。...同伴依赖 如果你开发的 loader 只是简单包装另外一个包,那么你应该在 package.json 中将这个包设为同伴依赖(peerDependency)。...分解以上需求,解析模版、压缩模版其实可以拆分给两给 loader 来做(单一职责),前者较为复杂,我们就引入开源包 html-loader,而后者,我们就拿来练手。

    1K40

    用javascript分类刷leetcode之递归&分治(图文视频讲解)

    .); //重置状态 reverse_state(level);}什么是分治:分治会将大问题拆解成小问题,拆解到最小问题之后,开始不断合并结果,递归是分治实现的一种形式或者是分治实现的一部分,分治包括三分部分...最大子序和 (easy)给你一个整数数组 nums ,请你找出一个具有最大和的连续子数组(子数组最少包含一个元素),返回其最大和。子数组 是数组中的一个连续部分。...图片方法1:动态规划思路:当前最大子序和只和前面的子序和相关,循环数组,不断更新最大子序和复杂度:时间复杂度O(n),空间复杂度O(1)js:var maxSubArray = function(nums...复杂度分析:时间复杂度O(logn): n为对 n 进行二进制拆分的时间复杂度,空间复杂度O(1)js:var myPow = function (x, n) { if (n 在范围

    38560

    React学习(一)-create-react-app

    ,每一个函数各司其职,便于前端自动化测试(数组中的一些map,reduce,find等方法的应用就是函数式编程) 视图层框架(在大型项目中,光用React是不行的,还得配合一些数据层的框架帮助我们解决一些组件之间的父子组件传值的问题...DOS CMD坏境或者git工具),苹果Mac电脑可用自带的Terminal,对于Linux用户,命令行工作坏境不必赘述,这里以Windows开发坏境为例 下载安装NodeJS(React本身并不依赖Node.js...但是项目中所需要的依赖包/工具,需要Node.js的支持),本地安完Node,默认也就安装了npm包管理工具 cmd或者git命令行下,检测Node与npm是否安装成功,如果npm下载包很慢,也可以使用国内淘宝的...─ index.js // 整个程序运行的入口文件,这个应用所做的事情是,只是渲染一个名叫App的组件,App组件在同目录下的App.js文件中定义 ├── logo.svg // 图标,资源 └─...─ serviceWorker.js // 引入这个是为了帮助我们借助网页去写手机app应用这样的一个功能,如果上传到https协议的服务器上,在断网的情况下,依然可以看到之前的页面 React中的组件

    1.4K20

    React基础(1)-create-react-app

    ,返回包含相同小写字符串的数组 * 声明式编程实现toLowerCase * 输入数组的元素传递给map函数,然后返回包含小写值的新数组 */ let toLowerCase = arr => arr.map...,每一个函数各司其职,便于前端自动化测试((数组中的一些map,reduce,find等方法的应用就是函数式编程)) 视图层框架(在大型项目中,光用react是不行的,还得配合一些数据层的框架帮助我们解决一些组件之间的父子组件传值的问题...DOS CMD坏境或者git工具),苹果Mac电脑可用自带的Terminal,对于Linux用户,命令行工作坏境不必赘述,这里以Windows开发坏境为例 下载安装NodeJS(React本身并不依赖Node.js...但是项目中所需要的依赖包/工具,需要Node.js的支持),本地安完Node,默认也就安装了npm包管理工具 cmd或者git命令行下,检测Node与npm是否安装成功,如果npm下载包很慢,也可以使用国内淘宝的...对页面的内容进行分组,并抽象成一个个的组件,从上至下,组合我们的应用,从而构成一个完整的软件系统应用 从creact-react-app脚手架中学到的 一切皆是js,以前讲究是内容(html),层叠样式

    1.6K71

    用Async解决回调问题

    那么,你要如何在Node.js中处理异步呢? 最基本的方式是使用回调。 一个回调其实就是一个函数,只不过它是在一个异步操作完成时被调用。...我们要用到Node.js内置的文件系统模块fs。 在此脚本中,我们会去读一个文本文件的内容。...在async.js中,实现这个功能的是async.each函数。 此函数有三个参数:集合或数组,操作每一项的异步函数,完成回调。...注意:运行此示例时,当前目录中不要放太多文本文件,不然你的终端窗口中将会长时间出现大量垃圾文本。...事实上,这也是为什么此教程中使用fs的原因-Node.js中一些诸如文件系统这样的基础功能使用的是回调,所以不用承诺还使用回调类型的代码是Node.js编程的关键内容。

    1.2K41

    一篇文章弄明白Node.js与二进制数据流

    好在 ES6 发布后,引入了类型数组(TypedArray)的概念,又逐步补充了二进制数据处理的能力,现在在 Node.js 中也可以直接使用,但是在 Node.js 中,还是 Buffer 更加适合二进制数据的处理...Node.js 目前支持的编码方式如下: hex:将每个字节编码成两个十六进制的字符。 ascii:仅适用于 7 位 ASCII 数据。此编码速度很快,如果设置则会剥离高位。...我们先新建一个文本文件,然后通过 utf16 编码保存,然后通过 Node.js 读取改文件。 ?...API 简介 在 Node.js 中,Steam 一共被分为五种类型。...创建可写流的时候,必须手动实现一个 _write() 方法,因为前面有下划线前缀表明这是内部方法,一般不由用户直接实现,所以该方法都是在 Node.js 内部定义,例如,文件可写流会在该方法中将传入的

    3.4K30

    搞定大厂算法面试之leetcode精讲10.递归&分治

    .); //进入下一层 recursion(level + 1, p1, ...); //重置状态 reverse_state(level); } 什么是分治: 分治会将大问题拆解成小问题...0的特殊情况 复杂度分析:时间复杂度:O(logn), n是进行二进制拆分的时间复杂度。...复杂度分析:时间复杂度O(logn): n为对 n 进行二进制拆分的时间复杂度,空间复杂度O(1) js: var myPow = function (x, n) { if (n < 0) {...多数元素(easy) 方法1.排序 思路:排序数组,如果有一个数字出现的频率大于n/2,则在数组nums.length / 2的位置就是这个数 复杂度分析:时间复杂度:O(nlogn),快排的时间复杂度...最大子序和 (easy) ds_159 方法1:动态规划 思路:当前最大子序和只和前面的子序和相关,循环数组,不断更新最大子序和 复杂度:时间复杂度O(n),空间复杂度O(1) js: var maxSubArray

    41940

    七天学会NodeJS——第一天

    ; } hello(); 写好后在终端下键入node hello.js运行,结果如下: $ node hello.js Hello World!...在NodeJS中,一般将代码合理拆分到不同的JS文件中,每一个文件就是一个模块,而文件路径就是模块名。...稍大些的程序可以将代码拆分为多个模块管理,更大些的程序可以使用包来组织模块。 合理使用node_modules和NODE_PATH来解耦包的使用方式和物理路径。...遍历数组 在遍历数组时,使用某个函数依次对数据成员做一些处理也是常见的需求。...如果数组成员可以并行处理,但后续代码仍然需要所有数组成员处理完毕后才能执行的话,则异步代码会调整成以下形式: (function (i, len, count, callback) { for

    7K20

    第四章-使用本机文件对话框和帮助进程间沟通 | Electron实战

    ---- 使用Node读取文件 dialog.showOpenDialog()返回一个数组,其中包含用户选择的文件的路径,但它并不代表我们阅读这些文件。...Node提供了一组用于处理其标准库中的文件的工具。内置的fs库处理常见的文件系统操作,比如读取和写入文件,所以应该要求它位于app/main.js的顶部。 列表 导入Node的fs模块: ....---- 在macOS中实现对话表 Electron应用被设计成跨平台的,者意味着它们可以再macOS、Windows和Linux上运行。...清单4.8 在Node导出一个函数: basic-math.js exports.addTwo = n => n + 2; 清单4.9 在Node导入一个函数 const basicMath...打开对话框返回一个数组,该数组由用户选择的一个或多个文件或目录组成。 Electron不包括读取文件的能力,相反,我们使用Node的fs模块来读写文件系统。 每个操作系统都提供了一组不同的功能。

    1.9K20

    使用Webpack提升Vue.js应用程序的4种方法(翻译)

    您可以配置插件以检查依赖项是否来自node_modules文件夹,如果是,则将其输出到单独的文件vendor.js中: new webpack.optimize.CommonsChunkPlugin({...== -1; } }) 如果这样做,您现在在构建输出中将有两个单独的文件,这些文件将由浏览器独立缓存: js" charset="utf-8">拆分代码会更有效,因此每个单独的页面代码都位于单独的文件中,并且仅在需要时才加载 Webpack具有一项称为“代码拆分”的功能。...在Vue.js中实现此功能还需要异步组件,并且通过Vue Router变得更加容易。...如果我们设计应用程序,使每个“页面”都是一个组件,并且将定义存储在服务器上,那么我们就完成了代码拆分的一半。

    2.6K20

    LsLoader——通用移动端Web App离线化方案

    背景 由于JavaScript(以下简称JS)语言的特性,前端作用域拆分一直是前端开发中的首要关卡。...2) LsLoader处理层/编译层:通过UglifyJS或者Babylon.js,分析你JS源码里的依赖关系,提取成Lsloader能识别的格式。...LsLoader转换过程会分析源码把模块文件的依赖关系归纳成数组形式,在浏览器端缓存/加载后按顺序执行。 ?...对于webpack构建:首先把源文件用Babylon或者Uglify处理成语法文档树,遍历入口JS的import依赖,把公用依赖的JS提取成数组传给commonChunksPlugin配置,让webpack...经过处理后,对应的文件列表在浏览器端以数组的方式运行/缓存,流程如下: ? 每个模块文件通过/combojs/注释来分割,支持各种格式的前端包裹格式如define、webpackJSONP。

    1.8K170

    重学前端之前端需要了解的性能优化方向

    PM2:一款 Node.js 进程管理器,让计算机每一个内核都启动一个 Node.js 服务,并且实现自动控制负载均衡。Nginx:通过轮询机制,将用户的请求分配到压力较小的服务器上(反向代理)。...resolve: { modules: [path.resolve(__dirname, 'node_modules')], }优化 resolve.extensions 配置在导入没带文件后缀的路径时...多进程 Happypack 可以将任务分解成多个子进程去并发执行,大大提升打包效率。消耗性能,不用建议关闭。...SVG关键字:文本文件、体积小、不失真、兼容性好优点:文本体积更小,可压缩性更强。图片可以无限放大不失真。文本文件可以直接在 HTML 中写入,灵活性高。...Gzip 原理Gzip 并不是万能的,它的原理是在一个文本文件中找一些重复出现的字符串、临时替换它们,从而使整个文件变小,所以对于图片等会处理不了。

    7210

    Vue源码探秘(一)

    : 选项相关 ssr.js: 服务端渲染相关 vnode.js: 虚拟 node 相关 weex.js: weex 相关 可以看到Vue.js对于每个模块分别对应的类型定义非常清晰,在阅读源码的过程中,...sfc sfc 下只有一个 parser.js,实际上就是一个解析器,用于将我们编写的 .vue 文件解析成一个 js 对象. shared shared 目录中定义了常量和工具函数,供其他文件引用。...看完Vue.js的目录设计,可以看到作者把功能模块拆分的非常清楚,相关的逻辑放在一个独立的目录下维护,并且把复用的代码也抽成一个独立目录。...script script 字段定义了 npm 的执行脚本,其中将 src 下的源码构建出各种版本的 Vue 后存放在 dist 目录的相关脚本是下面这三条: { "build": "node scripts...exports.getAllBuilds = () => Object.keys(builds).map(genConfig) } 这里 getAllBuilds 函数的处理是取出 builds 对象的所有属性组成的数组在

    1.5K41

    用有限状态机实现一个简版的html解析器

    有限状态机有什么用代码编译器在工作时就需要通过词法分析、语法分析、语义分析来得到 AST(Abtract Syntaxt Tree) 抽象语法树。...token 流,接着通过语法分析将 token 流进行文法校验生成语法解析树,这个过程一般有两种:边分词边生成 AST,像解析 HTML、CSS先分词生成所有 token,再来进行语法分析生成 AST,像 js...代码其实跟我们一篇英文文章、一首中文古诗、一个数学运算...都是一样的,我们一样可以用分词技术来拆分这些元素。...要求用状态机把 500-250=250 这个减法运算分词成一个数组,首先定义一共有2种状态:number-数字、operator-运算符,每一个最小的 token 只能是这两个当中的一个,代码如下//...= tokenList[i] // 开始标签:入栈if (node.type === 'startTag'){stack.push(node)} // 结束标签:出栈if (node.type

    60010

    天才女孩!12岁小学生写出冯·诺依曼提出的元胞自动机

    ---- 新智元报道 来源:Hackernews、bitbucket、知乎 作者:三石 【新智元导读】今日,Hackernews上一个12岁小女孩儿用Node.js实现了Wolframe的元胞自动化...这名叫Liam Ilan的12岁小女孩在Hackernews上低调写了一句话,仅数小时,便惊呆了一路众人: 我12岁了,正在学习JS,用Node写了Wolfram的元胞自动机 网友们不禁唏嘘,真是长江后浪推前浪...来自12岁小女孩的杰作 小女孩在bitbucket中将自己的项目整理了下来: 使用方法 首先,使用下面的命令克隆repo: $ git clone https://liamilan@bitbucket.org.../liamilan/wolfram-cellular-automata.git 要运行项目,请输入目录,然后使用: $ node index.js 18 或者: $ node index.js {rule...可通过 Mathematica,将其二值化,并拆分成一个个连通分支来看。 而后放进Golly里。

    1.2K20
    领券