当前位置: 首页 > Web前端 > HTML

RDD的前端背包

时间:2023-04-02 14:12:42 HTML

是暂时堆在一起的,当一个item超过十个的时候,会单独列出来。更新历史:17.7.24=ADD=typescript—>interface=ADD=alofawsomenet17.7.23=ADD=phantomjsphantomjs截图的一些Tips=ADD=phantomjs关于浏览器viewportsizesettings=ADD=typeconfig.jsoftypescript=ADD=Typescript模块和命名空间=ADD=添加移动ico图标=ADD=Autismi/Inventati简介17.7.13July13,201712:21:06=ADD=关于vue组件命名的一些事情17.7.122017-07-1211:21:06=ADD=添加了三列布局+方形div2017-07-1214:21:06=ADD=使用render:ver时的一些细节。July12,201721:21:06=CRE=AddnodeentryJuly12,201722:00:06=CRE=AddES6entryJuly12,201722:00:06=ADD=superpair调整和覆盖方法with继承类中的相同名称:00:27添加Vue条目2017-07-0404:00:50添加Gulp条目2017-07-0404:03:13更新WebAssembly条目17.6.242017-06-2401:20:04更新WebAssembly入门2017-06-2401:24:02调整部分内容2017-06-2401:25:59添加回调部分2017-06-2401:34:01去掉前面的怪异titleNumber&&调整WASM部分的标题名称2017-06-2401:37:01去除文章中的大标题Html设置文本不可选择unselectable="none"css背景图片设置{background-image:url()}*其他属性设置*`background-repeat`![](http://ogcng6il8.bkt.clouddn.com/1478875627488_list_0.png)*`background-position`![](http://ogcng6il8.bkt.clouddn.com/1478875628328_list_1.png)伪类使用前后```css[ele]:after/before{content:[string]/[url('mediafileaddress')]}```*文本可以调整*图片不能调整CSS3box-shadow属性box-shadow属性可以通过chrome调试工具很方便的设置。如何居中:1.【推荐】display:flex+justify-content:center;thebox{display:flex;justify-content:center;}2.margin+blockthebox{display:block;保证金:0自动;}3。left:50%+margin-leftthebox{left:50%;margin-left:-(thebox.width/2)}4.display:inline-block+text-align:centerthebox{display:inline-block;text-align:center;}JS获取元素后如何判断元素的大小和位置异步回调:所有异步函数都会隐式返回一个promise,promise的完成值就是函数的返回值(在这种情况下,“完成”)。我们不能在代码的顶层使用await。感觉async/await还是要配合Promise使用。对象的深度赋值比如下面这种情况①有ref={a:"bb",c:"dd",e:{},}②和data={a:"cc",b:"ee",c:{d:"ff"}}③想要在//@afterref={a:"bb",c:"dd",e:{a:"cc",b:"ee",c:{d:"ff"}}}主要需要注意的陷阱是函数中的形参会在函数调用结束后被销毁。引用类型的函数参数的本质是一个引用(指向实际数据的指针),即表面上直接操作引用,本质上是无效的。ref=data(X)输入实际数据进行运算,有效ref.a=data(√)解决使用递归通过间接运算调整实际数据。functionobjectAssignObject(ref,data){if(typeofdata==="object"){对象。键(数据)。forEach(function(itm,idx){if(typeofref[itm]!=='object'){ref[itm]={}}if(typeofdata[itm]!=='object'){ref[itm]=data[itm]}objectAssignObject(ref[itm],data[itm])})}}如何实现下面的布局squarecss.square{width:100%;高度:0;padding-bottom:100%;}三列布局div:vueCSS。外层div{display:flex;弹性包装:包装;}。如何调用div{width:30%;}包裹正方形json文件中的数据?使用ajax方式获取。使用JSON类方法来处理它。通过节点获取在Nodejson文件网络上的资源。直接通过require函数获取。ES6配合super调整重写继承类的同名方法//A类继承B类//B类已有eat方法//...eat(url){super.eat(url);/在A类中/这是合法的doOtherThing();this.anotherThing();}///在A类中...Typescript模块从“amd-module”编译器中导入commonjsimportthing=require("cmjs-module")amdimportthing一个常见的错误是使用///引用一个模块文件,你应该使用import。要理解其中的区别,我们首先应该弄清楚编译器是如何基于导入路径的(例如,importxfrom"...";orimportx=require("...")inside...等)定位模块的类型信息。编译器首先尝试在相应路径中找到.ts、.tsx或.d.ts。如果没有找到这些文件,编译器将查找外部模块声明。回想一下,它们是在.d.ts文件中声明的。tsconfig.jsonglob模式的一部分仅包含*或`.*如果glob模式的一部分仅包含*或.*,则仅包含支持的文件扩展名类型(例如默认的.ts、.tsx和.d.ts,如果allowJs设置为true,则包括.js和.jsx)。同时使用files&include&exclude。如果指定了“files”或“include”,编译器会将它们组合起来并包含它们。使用“outDir”指定的目录中的文件将始终被编译器排除,除非您明确使用“files”来包含它们(即使此时指定了exclude)。使用“include”导入的文件可以使用“exclude”属性进行过滤。但是,无论“排除”设置如何,始终包括通过“文件”属性明确指定的文件。如果不指定,"exclude"将默认排除node_modules、bower_components、jspm_packages和目录。constructor一个类必须有一个构造方法,如果没有显式定义,默认会添加一个空的构造方法。classPoint{}//等价于classPoint{constructor(){}}如果已经定义了带参数的构造函数,这个空的构造函数还会存在吗?实际上,为了更好的理解,建议添加一个空的构造函数。这是一个好习惯吗?但是——????这是不可能的????因为ES6规定一个类只能有一个构造函数!!!构造函数的重载可以通过内部判断arg来实现。接口私有?&民众?interface描述了类的public部分,而不是public和private两部分。它不会帮助你检查一个类是否有一些私有成员。chrome中文chrome最小font-12px问题添加-webkit-text-size-adjust:none属性取消浏览器自动调整.classstyle{-webkit-text-size-adjust:none;字体大小:9px;}X-》1.会使应该调整的地方失效。X-》2.本来这个属性是专门为移动端设置的,桌面端不适合(bug已修复)[建议]通过缩小获取小字体。-webkit-转换:规模(0.75);X-》浏览器兼容性问题WebAssemblywasm介绍新格式:Wasm不是一种新的编程语言,而是一种新的格式,它适合于编译C/C++程序在Web上运行,同时满足平台无关的特点,效率高,轻量级.可直接执行:Wasm可以直接被JS引擎加载执行,节省了JS到Bytecode和Bytecode到机器码的转换时间,所以非常高效.AST清晰度:Wasm's文本格式,Wasm,包含一个基于S-expression的AST描述文本,在这个文件中,我们可以清楚的看到这个Wasm模块的导出函数的内存分配JS引擎适配:WebAssembly的二进制模块格式Wasm可以通过直接调用JS引擎提供的WebAssembly接口。基于WebAssembly的官方wasm开发主要分为两部分:编写业务和设置接口。第一部分是C/C++部分的主要业务处理逻辑。同时需要在JS层面设置一些需要调用的“预设接口”。连接接口,填充逻辑:第二部分是在JS层面连接Wasm模块,同时需要填充内存或者预置函数的逻辑,填充对数据集的操作。感觉有点类似于用node.per编译c文件供node使用。不过业务方面的设置比较少,感觉写的过程会轻松一些。一些开源项目使用像turboscript这样的语言。您可以:以类似typescript的方式编写脚本,将脚本编译成webassmblywasm文件,在程序中使用wasm文件和保守(指针)AssemblyScript。wasm链接部分链接:<优秀>了解WebAssemblyJS<优秀>了解WebAssembly基本用法Vue优化异步执行更新Vue异步执行DOM更新。只要观察到数据变化,Vue就会启动一个队列,并缓冲在同一个事件循环中发生的所有数据变化。如果同一个观察者被多次触发,它只会被推入队列一次。这种缓冲时的重复数据删除对于避免不必要的计算和DOM操作很重要。然后,在下一个事件循环“tick”中,Vue刷新队列并执行实际(去重)工作。渲染细节渲染不要使用箭头函数箭头函数将绑定上下文按钮的禁用属性属于domPorps而不是attr//...h("button",{domProps:真的});...?组件命名原则简短。需要被引用。表达意思。语义上可理解的约定表明原始类型。结构成分<项目名称首字母>+<结构层次+>保持两个完整单词的长度。如果缩写重复,请再添加一个字母以实现差异,例如项目utatemita-body-titleu-hm-body-contentu-hold-companysu-hd-companys-company项目中的u-homeu-holdu-home-bodyu-hmpubliccomponent++[description]例如项目utatemitautatemita-Square_cardutatemita-Liftgeneralpubliccomponent++[description]使用驼峰命名法。ReactUI组件draft.js-markdown编辑器决定子组件类型https://discuss.reactjs.org/t...Gulpgulp.src&gulp.dest输入文件和输出文件必须同名gulp.src在管道中会输出默认bufferoptionalfile.content{buffer:false}buffer<->stringbuffer.toString()Buffer.from(str)Phantomjs中文教程性能问题如何不重复启动phantomjs进程来源:https:///segmentfault.com/q/10...只要不执行phantom.exit();该过程不会退出。phantoms启动后,启动它的父进程无法与之通信。Phantomjs没有相应的API来执行此操作。如果需要动态有两种方式读取数据抓取数据供参考A.使用ChildProcess模块??,逆向处理,即启动phantomjs进程,然后使用子进程模块启动java进程,使用stdin/stdout在子进程和父进程之间共享以交互数据B.使用WebServer模块在phantomjs中启动一个微Web服务。java进程向这个web服务发送数据并接收处理后的结果。如何在本地读取页面来源:https://www.urlteam.org/2016/...page.settingsObject当前页面的一些配置项。这个API必须在page.open()被调用之前设置,否则将不起作用。以下是配置项:javascriptEnabled默认true:页面是否执行javascriptjavascriptloadImages默认true:是否加载图片抓图提示各种userAgent设置列表page.settings.userAgent="Mozilla/5.0(iPhone;CPUiPhoneOS5_1_1likeMacOSX)AppleWebKit/534.46(KHTML,likeGecko)Version/5.1Mobile/9B206Safari/7534.48.3》因为phantomjs模拟的是浏览器,加载和渲染页面需要一定的时间,所以page.open(),截屏要延迟一定时间。关于屏幕长宽设置的讨论phantomjspage.viewportSize设置失败整个mongo数据库会推送到客户端)Meteor.methods->校验,数据修改方法Meteor.call->start方法(inseure在客户端开启mongo操作)Json获取json文件UITemplate.body(在Blade上使用)onCreated创建本地关联数据库订阅者的数据UI组件semanticMongo运行在meteor中的mongo方法同步做事。collection2做的是将string转换为numberPublish不要使用()=>{}在publishdocumentstructimportsmeteor项目中除了importsfile之外的文件,都会在meteorserver启动时自动加载。导入文件中的文件需要导入到项目中。使用服务器集合中的Reactget数据//......//warpperimport{createContainer}from'meteor/react-meteor-data';//collectionsimport{Collection}from'../api/collection.js';//......//..定义React组件“App”接收`props.tasks`//..设置“App”的propTypes//......//扭曲“App”exportdefaultcreateContainer(()=>{//对象将通过管道传递给App作为它的propsreturn{tasks:Collection.find({}).fetch(),};},App);ThingsDoingnode虫架。日本歌词网处理抓取的数据,继续完成页面博客3DRPGMakerKaKaximyAwosome前端库超赞网站https://news.awesomes.cn/https://www.awesomes.cn/https://lanmaowz.com/simple-n...JSON数据生成网站http://beta.json-generator.co...npms趋势https://npms.io/关注度高的nodejs框架https://eggjs.org/上涨趋势2016https://www.v2ex.com/t/351191博客趣味js库系列https://tutorialzine.com/@danny/npm库排名https://www.npmjs.com/browse/...node->pkghttps://www.awesomes.cn/repo/...我很喜欢网页设计https://fir.im/https://www.mgenware.com/blog...https://thief.one/2017/03/31/...https://www.typeisbeautiful.c...动画ico图标https://icons8.com/c/animated...模拟打字https://codepen.io/Zhouzi/ful...nodeCLIhttps://www.npmjs.com/package...https://github.com/vadimdemed...现代扩展通用实用库http://underscorejs.org/https://lodash.com/Editorhttps://www.awesomes.cn/repo/...使用技巧https://github.com/usablica/i...Parallaxhttp://matthew.wagerfield.com。..数据可视化https://d3js.org/匿名网等https://prism-break.org/zh-CN/all/Autismi/Inventati如果你的项目非常需要隐私,而且非常有价值,通过在他们的认可下,他们可以为您提供一系列免费、安全、私密的服务。自命不凡的利器https://codepen.io/VincentGar...合集http://tech.it168.com/a2015/0...懒人计算的好文章http://justjavac.com/javascri...ASICII字符绘画http://www.network-science.de...