- 博客(75)
- 收藏
- 关注
RSS订阅
原创 puppeteer 初体验之爬虫与 UI 自动化
puppeteer科普Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. Puppeteer runs headless by default, but can be configured to run full...
2019-09-19 20:32:13
658
原创 android 5 webview兼容问题
includesindexof代替object.keysnpm install object-keysimport objectKeys from ‘object-keys’;object.assignimport ‘core-js/fn/object/assign’;
2019-09-29 15:37:36
961
原创 react 的key值问题
react中使用map遍历数组的key值为什么不能取Array的index呢看到一篇Stack Overflow的回答就是在类似[{name:'test',age:12},{name:'ds',age:12},{name:'dsa',age:12},{name:'ds',age:12}]的数组当做单行dom删除时 当您使用数组的索引作为键时，React将优化并且不按预期呈现。在这种...
2018-10-10 11:47:06
1011
1
转载 什么是前端工程化
目前来说，Web业务日益复杂化和多元化，前端开发已经由以WebPage模式为主转变为以WebApp模式为主了。现在随便找个前端项目，都已经不是过去的拼个页面+搞几个jQuery插件就能完成的了。工程复杂了就会产生许多问题，比如：如何进行高效的多人协作？如何保证项目的可维护性？如何提高项目的开发质量？...前端工程化是前端架构中重要的一环，主要就是为了解决上述大部分问题的。而前端工程本质上是软件工程...
2018-06-26 16:25:17
1980
原创 从零开始搭建前端工程化
技术的发展是不可抵挡的，只能追随，如今（国内）早已不是写几个html放点后端语言的模板就可以完成所有项目需求的年代了，伴随着组件化，工程化，es6的发展前端越来越复杂，越来越富应用化，业务逻辑更多的迁移到前端来，前端点对点的搬砖开发模式已经不适合大部门公司的前端工作需求，在整个开发链路上必须团结起来，需求工程师，UED，前端，node,测试，运维，应该是化零为整的，成立为用户体验技术（服务）部，（...
2018-06-26 09:26:29
747
原创 select操作的小问题
在使用原生select 不使用div模拟的情况下，同一个option重复选择的小bug可以用添加一个diaplay:none的option解决function init(wrapper) { var province = $($("#" + wrapper + "").find(".m-province")); var city = $($("#" + wrapper + "").find(".m.
2018-06-07 15:54:29
303
原创 JavaScript要素
1.JavaScript是一种脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。解释型语言的弱点是安全性较差，而且在JavaScript中，如果一条运行不了，那么下面的语言也无法运行。而其解决办法就是于使用try{}catch(){}eg:try{ const a="test";a="second"}catch(error){ console...
2018-06-05 17:11:12
242
原创 ES6 class语法糖与ES5的原型链
ES5 function Obj(){} var person=new Obj(); person.__proto__.constructor===Obj.prototype.constructor; Object.getPrototypeOf(person)===Obj.prototype;ES 6 class Obj{ constructor(){}}cla...
2018-06-05 12:50:10
958
翻译 什么是JavaScript中的执行上下文和堆栈？
在这篇文章中，我将深入分析JavaScript中最基本的部分之一Execution Context。 在这篇文章的最后，你应该更清楚地了解解释器试图做什么，为什么一些函数/变量可以在声明之前使用，以及它们的值如何确定。什么是执行上下文？当代码在JavaScript中运行时，执行它的环境非常重要，并评估为以下一项：全局代码 - 第一次执行代码的默认环境。功能代码 - 只要执行流程进入功能体。评估代码...
2018-05-23 13:49:40
775
2
原创 setTimeout 模拟setInterval 实现时钟
function getDateTime() { var dateResult; var date = new Date(); var year = date.getFullYear(); var month = parseInt(date.getMonth(), 10) + 1; month = month > 9 ? month : "0" + month; var dates = da...
2018-05-03 15:36:10
314
原创 偶像
陆奇是我很敬佩的一个偶像，在第一批高考恢复考上上海复旦大学他的人生格言是“人生是一场不停的，无情的战斗，向前，向前，永远不要停。”1988年，陆奇在复旦任教一年后，一场暴雨改变了他的命运。那个周日，因为风雨大作，陆奇无法骑车回家看望父母，只好待在大学宿舍，被同学拉去凑数，听了一场讲座。复旦的教室里，站着卡耐基·梅隆大学教授、图灵奖获得者埃德蒙·克拉克（Edmund Clarke），而听众寥寥无几。...
2018-04-25 20:53:42
282
原创 如何自己写一个echart
echart 核心是canvas grid的宽度设置("#zhianChart").children("div").css("width",("#zhianChart").children("div").css("width",("#zhianChart").children("div").css("width",(“#zh
2018-04-25 19:28:51
530
原创 react组件分类
1，有状态组件， 有自己的state 在constructor中定义 继承Component基类的方法能够在生命周期内通过setState方法改变state改变Virtul DOM从而从新渲染DOM eg: export default class Peoson extends Component{//oop constructor(props){this.state={}}rende...
2018-04-25 13:22:30
468
原创 mind
这是一个娱乐至死的时代，天天耳边都充斥折X音，X手，XX头条，金融，房地产。。。，我们的人工智能却没有自己核心的算法，顶会上发布论文数量屈指可数，还大部分是美籍华人，最近的中兴事件真的是让很多人惊愕，唉，科技才是发展强大的根本之道,Ai和机器人技术还是牢牢地掌握在西方国家AI is the future ,the future is coming AI即是未来，未来已来最强大的力量，科技，武力，资...
2018-04-25 13:10:49
190
原创 react实现原理猜测
react 解决的问题：1前端组件的复用性问题: class Component{ constructor(){}setState(){} } 2数据和视图的同步问题class Sample extends Component{ constructor(){ super()this.state={}}}virtual-DOM jsx javascript...
2018-04-25 06:55:28
197
原创 从virtualDOM说开去
我们知道，前端开发的最佳实践意义包括性能优化，前端的性能优化就包括尽可能的减少DOM操作1.性能 1.1注意作用域 避免全局查找完全用 let 代替 var (避免变量声明提升) const 代替 不可变变量避免 with 语句O(1) 常数 不管有多少值，执行的时间都是恒定的。一般表示简单值和存储在变量中的值O(log n) 对数 总的执行时间和值的数量相...
2018-04-18 10:56:51
209
转载 自己实现一个react基本功能
1.react解决的问题组件化一个简单的点赞功能我们会从一个简单的点赞功能讲起。 假设现在我们需要实现一个点赞、取消点赞的功能。如果你对前端稍微有一点了解，你就顺手拈来：HTML: <body> <div class='wrapper'> <button class='like-btn'> <span class='l...
2018-04-10 13:36:43
746
原创 从visibility: hidden和display: none说开去
首先打开chrome的display由于隐藏后不占据位置，所以造成了dom树的改变，会引发回流，代价较大再进一步，当一个页面某个元素经常需要切换display时如何优化，一般会用复合层优化，或者要求低一点用absolute让其脱离普通文档流也行。然后可以将话题引到普通文档流，absolute文档流，复合图层的区别...
2018-04-09 19:47:42
192
原创 未来，科技，梦想，激情，热血
理想，还是要有的，万一实现了呢，现在一个手机芯片的计算能力是八十六年前全世界所有算力的总和不要放弃，你的梦想是这个世界上最伟大的事，你愿意为你的未来付出怎样的努力？你热爱什么，你愿意为之牺牲什么，每一个微小的选择都将决定你的未来这个世界上唯一相对平等的就是时间...
2018-04-07 14:56:43
161
原创 通过ES6 的class方法初探Object.prototype.constructor 和Object.constructor的指向
我们都知道 ECMAScript中 Object是所以引用类型的基类型 也就是所以引用类型都继承自Object的默认属性和方法，prototype是函数的熟悉 Object.prototype指向所有引用类型的根对象 constructor指向构造方法（function）...
2018-04-06 02:11:44
604
原创 初探babel的转码
写一段基本的class 类class App extends Component{ constructor(props){ super(props) this.click=this.click.bind(this) } render(){ return ([ <div>nana</div>, <h2>mama</h2&g...
2018-04-05 11:01:29
337
转载 React 16.3新的Context API真的那么好吗？
React v16.3还没有正式发布，但是已经预告了众多新功能，其中很引人注意的是新的Context API，今天就来聊一聊这个。关于这个新的Context API有很多表扬的声音，但是我们可以和老的Context API做一个对比，发现可能并没有想象的那么好。首先，React一直是有Context API的（我们姑且称为“老的Context API”），只是React团队自己都不建议使用，如果你...
2018-04-05 09:15:54
7400
转载 从新的 Context API 看 React 应用设计模式
在即将发布的 React v16.3.0 中，React 引入了新的声明式的，可透传 props 的 Context API，对于新版 Context API 还不太了解朋友可以看一下笔者之前的一个回答。受益于这次改动，React 开发者终于拥有了一个官方提供的安全稳定的 global store，子组件跨层级获取父组件数据及后续的更新都不再成为一个问题。这让我们不禁开始思考，相较于 Redux ...
2018-04-05 09:14:51
438
转载 js 字符串与十六进制的转换
由于最近做一个读卡器的二次开发，接触到了写卡和读卡开发过程中，字符串与十六进、二进制之间的相互转换常常会用到，尤其是涉及到中文的加密时，就需要把中文转换为十六进制。下面说说具体的转换方法。 1、字符串转换为十六进制 主要使用 charCodeAt()方法，此方法返回一个字符的 Unicode 值，该字符位于指定索引位置。 function stringToHex(str){ var v...
2018-04-04 15:36:22
24849
原创 ES6箭头函数
//执行环境中var 声明提升void function(){ console.log(baba);var baba=100;}()VM402:3 undefinedundefined会输出undefined 而不是报错，说明baba已经有了声明，未有初始值//hoist 函数声明提升add(1,2)//3function add(n1,n2){return n1+n2};//没有函数提升hei(...
2018-04-04 09:16:36
177
原创 ES6特性
1.let const vares6中最佳实践是用let替代var ;const用来定义常量 (当定义引用类型时，引用类型可变，指针的指向不可变)1.箭头函数的this指向a(n1,n2)=>{return this}obj.c=c;ƒ (){return this}obj.a()Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, fra...
2018-04-04 09:16:17
134
原创 jQuery神操作
1.选中特定option比如<select class="selector"></select>1、设置value为pxx的项选中 $(".selector").val("pxx");2、设置text为pxx的项选中 $(".selector").find("option[text='pxx']").attr("selected&
2018-04-02 17:05:40
155
转载 运算符优先级，对象深拷贝
运算符优先级JavaScript中的运算符优先级是一套规则。该规则在计算表达式时控制运算符执行的顺序。具有较高优先级的运算符先于较低优先级的运算符执行。例如，乘法的执行先于加法。下表按从最高到最低的优先级列出JavaScript运算符。具有相同优先级的运算符按从左至右的顺序求值。运算符描述. [] ()字段访问、数组下标、函数调用以及表达式分组++ -- - ~ ! delete new typ...
2018-04-02 08:18:07
121
原创 javascript
'use strict'必须写在脚本顶部或者函数体内，要绑定在作用域数组中 indexOf lastIndexOf 查找时必须全等，switch 中case 值全等
2018-04-01 22:33:06
123
转载 AMD CMD
1. AMD的由来 前端技术虽然在不断发展之中，却一直没有质的飞跃。除了已有的各大著名框架，比如Dojo，JQuery，ExtJs等等，很多公司也都有着自己的前端开发框架。这些框架的使用效率以及开发质量在很大程度上都取决于开发者对其的熟悉程度，以及对JavaScript的熟悉程度，这也是为什么很多公司的技术带头人都喜欢开发一个自己的框架。开发一个自己会用的框架并不难，但开发一个大家都喜欢的框架却...
2018-04-01 11:34:12
172
原创 DOM中的捕获与冒泡
对于冒泡和捕捉事件，其实我们可以理解为，当我们当前点击的事件本身的父元素也绑定了冒泡事件和捕捉事件的时候，我们才会看的出区别，如果我们点击元素的父元素根本没有绑定事件b2.addEventListener('click',function(){alert("b2在冒泡阶段被点击啦"),false}) b2.addEventListener('click',function(){alert("b...
2018-03-30 08:50:24
263
转载 JavaScript中的浅拷贝与深拷贝
学了这么长时间的JavaScript想必大家对浅拷贝和深拷贝还不太熟悉吧，今天在项目中既然用到了，早晚也要理清一下思路了，在了解之前，我们还是先从JavaScript的数据类型存放的位置 堆栈开始说起吧! 现在我们带着问题来学习！一：什么是堆栈？ 我们都知道：在计算机领域中，堆栈是两种数据结构，它们只能在一端(称为栈顶(top))对数据项进行插入和删除。堆：队列优先,先进...
2018-03-28 22:17:21
161
原创 react笔记
1.在组件生命周期 componentwillMount(){setState{name:"change"}}函数里更改state 是可以的2.render函数本身并不往DOM树上渲染或装载内容 只是返回一个JSX表示的对象,然后由React库来根据返回的JSX对象决定如何渲染，React库要把所有组件返回的结果综合起来，才能知道如何产生对应的DOM修改。所有只有React库调用所有组件的ren...
2018-03-25 10:13:30
177
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人