草庐IT

Web组件开发

全部标签

javascript - 基于组件的架构 [Javascript]

问。在没有任何框架的情况下使用vanillajavascript-什么是基于大规模组件的架构的模式?我理解将组件拆分成单独的部分并拥有自己的结构、方法和API的想法。但是我不知道如何将它们联系在一起。业务逻辑在哪里?您如何构建项目,在哪里包含所有方法等。我的经验是单一的,所有的东西都耦合得太紧了。对此的任何澄清将不胜感激,感觉就像我在原地转圈。注意:当我谈论基于组件的架构时,我指的是thisidea 最佳答案 你可以阅读更多关于Object-Pattern和Module-Patternhttps://learn.jquery.com

javascript - 使用 jest/enzyme 对 formik 组件进行单元测试

我整理了一个非常基本的联系表格,效果很好。但是,我现在需要开始编写我的单元测试,但我遇到了一大堆问题(就像我到目前为止只设法通过了一个快照测试)。因此,首先我尝试测试,如果您没有填写所有必填部分,当您单击提交按钮时,该表单是否应该呈现我的验证消息。我认为我可以通过调用handleSubmit()函数来实现这一点,例如:componentRender.find('Formik').instance().props.handleSubmit(badFormValues,{resetForm});但是,当我运行componentRender.debug()时,我的验证消息没有被呈现。好像没有

javascript - 使用 Jest 模拟在 vue 组件中导入的模块

我在处理documentationofJest时遇到一些问题,因为我希望这段代码能够工作:importVuefrom'vue';importRouterfrom'@/router/index';importOrdersServicefrom'@/services/orders.service';jest.mock('@/services/orders.service');describe('OrdersItem.vue',()=>{beforeEach(()=>{//mockCleardoesnotexistOrdersService.mockClear();});it('should

javascript - 从内容脚本 onbeforeunload 向附加组件发出消息?

我有一个内容脚本,它计算用户浏览页面的时间。为此,我将一个内容脚本注入(inject)每个页面,启动一个计时器,然后在onbeforeunload事件被触发时向插件发送一条消息。然而,该消息似乎从未传递到后台脚本。鉴于我的main.js看起来像这样:varpageMod=require('page-mod'),self=require("self");pageMod.PageMod({include:"http://*",contentScriptFile:[self.data.url('jquery.min.js'),self.data.url('content.js')],onAt

javascript - XMLHttpRequest 和 Chrome 开发者工具说的不是同一件事

我正在使用XMLHttpRequest和Rangeheader以5MB的block下载一个约50MB的文件。一切都很好,除了检测我何时下载了最后一个block。这是第一个block的请求和响应的屏幕截图。请注意,Content-Length是1024*1024*5(5MB)。另请注意,服务器正确响应前5MB,并在Content-Rangeheader中正确指定整个文件的大小(在/之后):当我将响应正文复制到文本编辑器(Sublime)中时,我只得到5,242,736个字符,而不是Content-Length指示的预期的5,242,880个字符:为什么缺少144个字符?对于下载的每个bl

javascript - 使用 GruntJS 的 AngularJS 开发模式

我有几个产品是从yeomanAngular生成器开始的,它是一个非常好的开发设置。我未能找到好的解决方案的一件事是设置开发/生产模式标志。自然地,我们使用了一些我们只希望在生产中使用的工具,因此拥有可以同时使用内联JavaScript和/或HTML文件的prod/dev变量将非常有用。我之前在网上搜索过解决方案,但没有找到任何有用的东西。最终,我正在寻找一个在AngularJS设置中使用的好解决方案,最好通过gruntserve和/或构建运行来设置。其他团队在这里做什么? 最佳答案 我正在使用ng-constant.它创建一个.js

javascript - 从javascript传递到web api 2时如何隐藏或保护 token

我在UI站点/项目和WebAPI2以及其他站点/项目上使用javascript(angularjs)UI项目:localhost/12345网络API:localhost/98777UI项目正在调用WebAPI(C#)项目,将token从UI传递到WebAPI以进行CRUD请求。I'vegeneratedthetokeninServerSideproject-WEBAPI2(localhost/98777),1-username/password2-thentheurllocalhost:/98777/Token,passingusername+password+tokenwitthi

javascript - 如何从 ReactJS 中的 onClick 函数调用另一个组件

我正在学习Reactjs。我已经用Rails实现了一个示例React应用程序。我进行了很多搜索以找到解决方案,但没有找到任何解决方案。我想从onClick函数调用另一个组件。但什么也没有发生。这可能是我试图实现的目标吗?如果是,那么请指出我在哪里做错了,如果不是,那么我可以采用哪种方式。这是我的代码:varComment=React.createClass({render:function(){return({this.props.author}said:{this.props.desc}Delete|#thisisfordeletewhichworksgreatEdit#IfIput

javascript - React 组件在浏览器中正确呈现,但呈现 : "Only a ReactOwner can have refs" 时 Jest 测试错误

我在React中有两个组件可以很好地呈现并在浏览器中产生预期的行为,但在通过Jest运行测试时似乎无法呈现。描述.jsvarReact=require('react/addons');var$=require('jquery');varDescription=require('./description.js');varDescriptions=React.createClass({getInitialState:function(){//containeralwaysstartswithatleastonedescriptionfieldthatisempty,orwhateveri

javascript - 是否可以在一个 react ​​组件中有两种状态

我正在尝试构建一个简单的单位转换器来练习React.js。我希望能够更改一个单位的值,例如:Kg,并让另一个单位,例如:lb在屏幕上自动更改。请看这个网站给你一个想法:http://www.convertunits.com/from/lb/to/kg我有以下代码,它呈现但单位不更新。我想知道的是:一个组件有两种状态是否准确?1表示Kg另一个用于lb或者它们是否需要成为兄弟组件?如果是这样,他们将如何更新彼此的状态?如果可以在同一个组件中同时拥有两个单元的状态,那么我做错了什么?谢谢!(我有一个简单的快速应用程序来呈现页面)importReactfrom'react';exportdef