![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
wangning_elsa
这个作者很懒,什么都没留下…
展开
-
前端学习之路
export 和 module.export 的区别 https://www.jianshu.com/p/e452203d56c4「中高级前端」从多线程来看 Event Loop https://juejin.im/post/5d5b4c2df265da03dd3d73e5Vue2 watch immediate反爬虫思路与解决办法(综合) bigsec.com/bigsec-news/an...原创 2019-12-02 00:24:28 · 2168 阅读 · 0 评论 -
前端体验优化
首屏衡量指标首屏资源拆分客服的初始化时间 window.onload图片大小适配 ->后置图片请求时机其实,对于网页高度小于屏幕的网站来说,统计首屏时间非常的简单,只要在页面底部加上脚本打印当前时间即可,或者对于网页高度大于一屏的网页来说,只要在估算接近于一屏幕的元素的位置后,打印一下当前时间即可。为什么css还没下载完,domcontentloaded(蓝色线) 就完成了?h...原创 2019-12-02 00:19:26 · 446 阅读 · 0 评论 -
前端深度积累
关于React v16.3 新生命周期https://juejin.im/post/5aca20c96fb9a028d700e1ceWebAssembly 现状与实战https://www.ibm.com/developerworks/cn/web/wa-lo-webassembly-status-and-reality/index.htmlReact v16.6.0: lazy, mem...原创 2019-12-01 23:47:00 · 139 阅读 · 0 评论 -
CSS3学习
看到的时候so what,用到的时候wow!回头看看字体展示组合拳text-wrap 规定文本的换行规则。 word-break 规定非中日韩文本的换行规则。 word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。text-justify 规定当 text-align 设置为 "justify" 时所使用的对齐方法。1、普通的文本段 对于普通的文本段的话只需原创 2017-02-13 13:51:46 · 221 阅读 · 0 评论 -
伪类用法
伪类- :nth-clild(an+b)- :nth-last-child从后往前选择元素,而不是从前往后。 tr:nth-last-child(-n+4) 匹配HTML表格中的最后四行。- :empty 伪类 代表没有子元素的元素。- :target http://labs.qianduan.net/target.html#tab1- :after 伪元素如果原创 2017-02-13 13:51:06 · 701 阅读 · 0 评论 -
JS array
array 数字是特殊的对象判断一个对象o是不是数组的最好方法是Object.prototype.toString.call(0) === "[object array]"typeof=>objectinstanceof Array =>true,出错的可能在于不同窗体同名变量可能会混淆改变本身的方法sort,reverse,push,pop,unshift,shift产生新对象的方法j原创 2017-02-13 13:48:00 · 341 阅读 · 0 评论 -
es6
es6浏览器兼容性Babel转码器Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。这意味着,你可以用ES6的方式编写程序,又不用担心现有环境是否支持。下面是一个例子。 // 转码前 input.map(item => item + 1); // 转码后 input.map(function (item) { retu原创 2017-02-13 13:46:28 · 451 阅读 · 0 评论 -
JS浮点数计算失精
JS浮点数计算失精问题:二进制浮点数表示法并不能精确的表示类似0.1这样 的简单的数字,四舍五入到最接近的可表示的实数。执行一系列的运算,随着舍入误差的积累,运算结果会越来越不精确。舍入也会使我们通常所期望的算术运算定律产生一些出人意料的偏差。例如,实数满足结合律,这意味着,对于任意的实数x,y,z,总是满足(x + y) + z = x + (y + z)。这种计算结果可以胜任大多数的计算任务:浮原创 2017-02-11 16:43:55 · 4427 阅读 · 1 评论 -
grunt, gulp以及webpack概念和应用
grunt, gulp以及webpack的概念及特点原创 2017-02-11 16:34:37 · 762 阅读 · 0 评论 -
JS模块化开发
什么是 webpack 模块对比 Node.js 模块,webpack 模块能够以各种方式表达它们的依赖关系,几个例子如下:ES2015 import 语句 CommonJS require() 语句 AMD与CMD define 和 require 语句 css/sass/less 文件中的 @import 语句。 样式url(...)或 HTML 文件<img src=...>中的图片链原创 2017-02-11 16:36:24 · 641 阅读 · 0 评论 -
函数,数据类型,面向对象的部分练手demo
本次总结一些学习demo,包括函数作用域以及闭包基本类型以及引用类型面向对象之创建对象三种基本方式//函数作用域function outer(){ console.log("outer"+this); function inner1(){ console.log("inner1"+this); } function inner2(){原创 2017-02-12 22:16:21 · 240 阅读 · 0 评论 -
vuejs父子组件通信
传递数据“prop” 是组件数据的一个字段,期望从父组件传下来。子组件需要显式地用 props 选项 声明 props: 在子组件 jade模板中,书写```.hot-item-container(@click="openHotPlugins(item.appkey)")```在子组件 export defa原创 2017-02-11 16:44:59 · 327 阅读 · 0 评论 -
underscore方法使用
underscore中template的用法混淆可以传对象 data 作为第二个参数给模板 template 来直接呈现, 这样页面会立即呈现而不是返回一个模板函数.```var T = $('#T').html();b.html(_.template(T, res.result))```当你要给模板函数赋值的时候,可以传递一个含有与模板对应属性的data对象 。```template: {原创 2017-02-11 16:47:07 · 520 阅读 · 0 评论 -
前端关注的浏览器状态码
100,101,200,206,301,302,304,307,400,401,403,404,500,502,504原创 2017-02-12 22:44:47 · 649 阅读 · 0 评论 -
样式表,脚本阻塞
样式表,脚本阻塞转载 2017-07-05 10:23:24 · 354 阅读 · 0 评论 -
前端开发易忘细碎知识点笔记
前端开发易忘细碎知识点原创 2017-02-11 11:32:11 · 348 阅读 · 0 评论 -
分离独立js文件
分离独立js文件-待补充// plugins: [new ExtractTextPlugin(“./src/analysis/analysis.js”)],// { // test: /analysis.js$/, // loader: ‘babel-loader’, // },原创 2017-09-11 10:05:59 · 1279 阅读 · 0 评论 -
类型转换
在看书的时候,有时候会遇到意料之外的结果。对于这部分的知识,感觉就像打吊瓶一样,冰冷的难以习惯的液体,可能慢慢的也像血液一样自然了。var a;console.log(a === undefined);NaN == NaNNumber(null)Number(undefined)"\u03a3".length"hi you".lengthundefined = "hello";""原创 2017-02-13 13:43:43 · 259 阅读 · 0 评论 -
webpack
webpack什么是 webpack?webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。用法require(XXX) 的形式来引入各模块,即使它们可能需要经过编译(比如JSX和sass),但我们无须在上面花费太多心思,因为 webpack 有着各种健全的加载器(loader)在默默处理这原创 2017-02-13 13:41:59 · 251 阅读 · 0 评论 -
JS执行与页面渲染
Javascript执行顺序浏览器页面加载解析渲染ready与DOMContentLoaded原创 2017-02-13 09:35:43 · 1929 阅读 · 1 评论 -
mvc架构模式
在项目中体会backbone中的MVC 在交互角度,偷来一段话View 传送指令到 ControllerController 完成业务逻辑后,要求 Model 改变状态Model 将新的数据发送到 View,用户得到反馈 下面是在代码角度出的简图 下面是更具项目整理的代码结构,欢迎对号入座 参考文章 http://www.ruanyifeng.com/blog/2015/02/mvc原创 2017-02-11 16:42:13 · 339 阅读 · 0 评论 -
JS异步
done与fail传参给函数 var searchDfd = id ? $.when(this.idSearch(id, this.catChosen), this.keySearch(keyword, this.catChosen)) : this.keySearch(keyword,原创 2017-02-12 22:37:49 · 177 阅读 · 0 评论 -
flex
用到flex布局,因为对复合属性的错误使用flex:55;导致在不同商品数下,布局乱掉。 实践的过程中,感觉看似怎么都可以,但需要整体的把握,不能四处尝试,否则效率很低。 以下是demo,实现骰子1~4点,以及垂直布局,中间自适应。比较浅,将继续深入。<div id="a" class="shazi"> <div class="dian">点</div></div><原创 2017-02-12 22:28:10 · 154 阅读 · 0 评论 -
JS闭包
今天将用demo继续学习闭包,function scope。 以下是一个实现,思维还是很混乱,暴露出了问题。function outerTest(){ var arr = []; for(var i=0;i<5;i++){ arr[i] = function(num){ return innerTest(num); }(i)原创 2017-02-12 22:25:31 · 199 阅读 · 0 评论 -
preventDefault()
preventDefault方法取消浏览器对当前事件的默认行为,比如点击链接后,浏览器跳转到指定页面,或者按一下空格键,页面向下滚动一段距离。该方法生效的前提是,事件的cancelable属性为true,如果为false,则调用该方法没有任何效果。 该方法不会阻止事件的进一步传播(stopPropagation方法可用于这个目的)。只要在事件的传播过程中(捕获阶段、目标阶段、冒泡阶段皆可),使用了原创 2017-02-12 22:08:34 · 672 阅读 · 0 评论 -
backbone开发
先马原创 2017-02-11 16:47:50 · 223 阅读 · 0 评论 -
chrome应用开发API之chrome.fileSystem
package apps较chrome拓展,chrome应用有更加严格的安全策略,有一些只在应用中支持的API,例如fileSystem 开发中遇到的不好查阅到的点确认需要开发的是拓展或者应用,应用对后台脚本的申明"app": { "background": { "scripts": ["background.js"] }}, 后台脚本创建的窗口(区别于浏览器窗口原创 2017-02-13 09:42:38 · 6346 阅读 · 0 评论 -
严格模式备忘
语法严格模式中意外创建全局变量被抛出错误替代 静默失败的赋值操作 (给不可写属性赋值, 给只读属性(getter-only)赋值赋值, 给不可扩展对象(non-extensible object)的新属性赋值) 试图删除不可删除的属性时会抛出异常(之前这种操作不会产生任何效果) 一个对象内的所有属性名在对象内必须唯一 严格模式下重名参数被认为是语法错误 严格模式禁止八进制数字语法 严格模原创 2017-02-13 09:44:27 · 281 阅读 · 0 评论 -
verticle-align
verticle-align常见场景是居中。尤其是form。在一些display情况复杂的情境下失效,转而用flex解决,所以该属性使用渐少内容包括:css1即有的,也要考虑浏览器支持 适用元素 取值 容易忽略的特性 新手疑惑点 他说:老司机的看法 业务联想 参考资料 详细请戳 这里 无法跳转时,请手动:http://gitlab.alibaba-inc.com/wn10原创 2017-02-13 13:38:46 · 1048 阅读 · 0 评论 -
使用React和node搭建任务管理平台
使用React和node搭建任务管理平台,目录结构还要考虑划分。 页面以及交互无进展。 开发服务端以及数据库部分,进度30% 。 主要初步使用:mongodb的CRUD node-inspector调试 Express开启web服务 排查node死循环问题,使用NODE_DEBUG=”net” supervisor –max-old-space-size=8192 –debug-b原创 2017-02-13 10:03:16 · 990 阅读 · 0 评论 -
前端编辑器
第一件事,选择一个编辑器sublimesublime or wedstorm,未经沧海 安装并使用的插件,实践中取需。 package-control ement:#page>div.logo+ul#navigation>li*5>a{Item $}+tab http://www.w3cplus.com/tools/emmet-cheat-sheet.html HTML-CSS-JS-pre原创 2017-02-13 12:59:38 · 297 阅读 · 0 评论 -
charles常用功能介绍
charles是什么Charles是在Mac下常用的截取网络封包的工具,开发时,为了调试与服务器端的网络通讯协议,常常需要截取网络封包来分析。原理Charles通过将自己设置成系统的网络访问代理服务器,使得所有的网络访问请求都通过它来完成,从而实现了网络封包的截取和分析。常用功能在需要将Charles设置成系统代理时,选择菜单中的 “Proxy” -> “Mac OS X Proxy”来将Charl原创 2017-02-13 10:05:49 · 527 阅读 · 0 评论 -
重构心得
有以上原因,本次开发需要对写好的逻辑多次的梳理重构,因而有以下的感悟相比于在getShortcuts的回调中赋值 that.shortcuts,在接口的回调中赋值更合理些。 getShortcuts() { var that = this; return new Promise(function(resolve, reject) {原创 2017-02-13 10:04:50 · 401 阅读 · 1 评论 -
纯函数
前期开发中,没有注意原始数据的保存,而Object.assign也只是顶层的深复制。在进行内容切换时数据状态优化改造的时候,无奈的发现重置初始值又把相同的数据结构写了一遍。今后的开发伊始,应通过深复制或Immutable等方法和纯函数不改变原始数据。目前的需求中,只是用到始末两个状态,在处理缓存、回退、数据变化检测等问题上,不可变数据的管理更要提早预见。原创 2017-02-13 10:02:24 · 372 阅读 · 0 评论 -
移动端懒加载要点分析
移动端事件模拟参考文章 demo地址 懒加载与函数节流参考文章 demo地址 ios8以下scroll事件参考文章 demo地址原创 2017-02-13 10:01:14 · 753 阅读 · 0 评论 -
前端项目管理心得
反思没有一个系统的构思,全面地发现需求,考虑到可能带来的商品统计接口失真和压力。项目比较古老,部分采用backbone,在加上JS文件分工不明确,花了不少时间通过调试来梳理代码结构。后续将加深对backbone各部分分工思想的理解,二级类目代码结构将用图表梳理,并沉淀到wiki中。 希望以后能够通过提前思考,帮助开发,良性循环原创 2017-02-12 22:40:47 · 1436 阅读 · 0 评论 -
localhost,127.0.0.1以及本地IP的概念及特点
前端要了解的:localhost,127.0.0.1以及本地IP的概念及特点原创 2017-02-11 16:17:45 · 565 阅读 · 0 评论