前端
关注
分享
扫一扫
big_big-world
To be greatest,or nothing
博客地址 https://bestGao.github.io
展开
-
js 字符串与十六进制的转换
由于最近做一个读卡器的二次开发，接触到了写卡和读卡开发过程中，字符串与十六进、二进制之间的相互转换常常会用到，尤其是涉及到中文的加密时，就需要把中文转换为十六进制。下面说说具体的转换方法。 1、字符串转换为十六进制 主要使用 charCodeAt()方法，此方法返回一个字符的 Unicode 值，该字符位于指定索引位置。 function stringToHex(str){ var v...转载 2018-04-04 15:36:22 · 26389 阅读 · 0 评论 -
JavaScript中的浅拷贝与深拷贝
学了这么长时间的JavaScript想必大家对浅拷贝和深拷贝还不太熟悉吧，今天在项目中既然用到了，早晚也要理清一下思路了，在了解之前，我们还是先从JavaScript的数据类型存放的位置 堆栈开始说起吧! 现在我们带着问题来学习！一：什么是堆栈？ 我们都知道：在计算机领域中，堆栈是两种数据结构，它们只能在一端(称为栈顶(top))对数据项进行插入和删除。堆：队列优先,先进...转载 2018-03-28 22:17:21 · 180 阅读 · 0 评论 -
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 · 207 阅读 · 0 评论 -
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 · 150 阅读 · 0 评论 -
自己实现一个react基本功能
1.react解决的问题组件化一个简单的点赞功能我们会从一个简单的点赞功能讲起。 假设现在我们需要实现一个点赞、取消点赞的功能。如果你对前端稍微有一点了解，你就顺手拈来：HTML: <body> <div class='wrapper'> <button class='like-btn'> <span class='l...转载 2018-04-10 13:36:43 · 783 阅读 · 0 评论 -
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 · 178 阅读 · 0 评论 -
运算符优先级，对象深拷贝
运算符优先级JavaScript中的运算符优先级是一套规则。该规则在计算表达式时控制运算符执行的顺序。具有较高优先级的运算符先于较低优先级的运算符执行。例如，乘法的执行先于加法。下表按从最高到最低的优先级列出JavaScript运算符。具有相同优先级的运算符按从左至右的顺序求值。运算符描述. [] ()字段访问、数组下标、函数调用以及表达式分组++ -- - ~ ! delete new typ...转载 2018-04-02 08:18:07 · 139 阅读 · 0 评论 -
AMD CMD
1. AMD的由来 前端技术虽然在不断发展之中，却一直没有质的飞跃。除了已有的各大著名框架，比如Dojo，JQuery，ExtJs等等，很多公司也都有着自己的前端开发框架。这些框架的使用效率以及开发质量在很大程度上都取决于开发者对其的熟悉程度，以及对JavaScript的熟悉程度，这也是为什么很多公司的技术带头人都喜欢开发一个自己的框架。开发一个自己会用的框架并不难，但开发一个大家都喜欢的框架却...转载 2018-04-01 11:34:12 · 195 阅读 · 0 评论 -
react笔记
1.在组件生命周期 componentwillMount(){setState{name:"change"}}函数里更改state 是可以的2.render函数本身并不往DOM树上渲染或装载内容 只是返回一个JSX表示的对象,然后由React库来根据返回的JSX对象决定如何渲染，React库要把所有组件返回的结果综合起来，才能知道如何产生对应的DOM修改。所有只有React库调用所有组件的ren...原创 2018-03-25 10:13:30 · 217 阅读 · 0 评论 -
工厂模式与稳妥构造模式的区别
function Person(name, age, job) { var o = new Object(); // private members var nameUC = name.toUpperCase(); // public members o.sayName = function() { alert(name); }...转载 2018-03-24 16:26:00 · 383 阅读 · 0 评论 -
css medias
Media Queries直译过来就是“媒体查询”，在我们平时的Web页面中head部分常看到这样的一段代码：1 <link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />2 <link href="css/style.css" rel="styleshee转载 2018-03-24 12:18:02 · 237 阅读 · 1 评论 -
DOM中的捕获与冒泡
对于冒泡和捕捉事件，其实我们可以理解为，当我们当前点击的事件本身的父元素也绑定了冒泡事件和捕捉事件的时候，我们才会看的出区别，如果我们点击元素的父元素根本没有绑定事件b2.addEventListener('click',function(){alert("b2在冒泡阶段被点击啦"),false}) b2.addEventListener('click',function(){alert("b...原创 2018-03-30 08:50:24 · 303 阅读 · 0 评论 -
从新的 Context API 看 React 应用设计模式
在即将发布的 React v16.3.0 中，React 引入了新的声明式的，可透传 props 的 Context API，对于新版 Context API 还不太了解朋友可以看一下笔者之前的一个回答。受益于这次改动，React 开发者终于拥有了一个官方提供的安全稳定的 global store，子组件跨层级获取父组件数据及后续的更新都不再成为一个问题。这让我们不禁开始思考，相较于 Redux ...转载 2018-04-05 09:14:51 · 479 阅读 · 0 评论 -
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 · 7440 阅读 · 0 评论 -
初探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 · 372 阅读 · 0 评论 -
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 · 1051 阅读 · 0 评论 -
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 · 723 阅读 · 0 评论 -
什么是前端工程化
目前来说，Web业务日益复杂化和多元化，前端开发已经由以WebPage模式为主转变为以WebApp模式为主了。现在随便找个前端项目，都已经不是过去的拼个页面+搞几个jQuery插件就能完成的了。工程复杂了就会产生许多问题，比如：如何进行高效的多人协作？如何保证项目的可维护性？如何提高项目的开发质量？...前端工程化是前端架构中重要的一环，主要就是为了解决上述大部分问题的。而前端工程本质上是软件工程...转载 2018-06-26 16:25:17 · 2039 阅读 · 0 评论 -
从零开始搭建前端工程化
技术的发展是不可抵挡的，只能追随，如今（国内）早已不是写几个html放点后端语言的模板就可以完成所有项目需求的年代了，伴随着组件化，工程化，es6的发展前端越来越复杂，越来越富应用化，业务逻辑更多的迁移到前端来，前端点对点的搬砖开发模式已经不适合大部门公司的前端工作需求，在整个开发链路上必须团结起来，需求工程师，UED，前端，node,测试，运维，应该是化零为整的，成立为用户体验技术（服务）部，（...原创 2018-06-26 09:26:29 · 777 阅读 · 0 评论 -
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 · 332 阅读 · 0 评论 -
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 · 984 阅读 · 0 评论 -
JavaScript要素
1.JavaScript是一种脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。解释型语言的弱点是安全性较差，而且在JavaScript中，如果一条运行不了，那么下面的语言也无法运行。而其解决办法就是于使用try{}catch(){}eg:try{ const a="test";a="second"}catch(error){ console...原创 2018-06-05 17:11:12 · 267 阅读 · 0 评论 -
什么是JavaScript中的执行上下文和堆栈？
在这篇文章中，我将深入分析JavaScript中最基本的部分之一Execution Context。 在这篇文章的最后，你应该更清楚地了解解释器试图做什么，为什么一些函数/变量可以在声明之前使用，以及它们的值如何确定。什么是执行上下文？当代码在JavaScript中运行时，执行它的环境非常重要，并评估为以下一项：全局代码 - 第一次执行代码的默认环境。功能代码 - 只要执行流程进入功能体。评估代码...翻译 2018-05-23 13:49:40 · 800 阅读 · 2 评论 -
如何自己写一个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 · 553 阅读 · 0 评论 -
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 · 235 阅读 · 0 评论 -
从virtualDOM说开去
我们知道，前端开发的最佳实践意义包括性能优化，前端的性能优化就包括尽可能的减少DOM操作1.性能 1.1注意作用域 避免全局查找完全用 let 代替 var (避免变量声明提升) const 代替 不可变变量避免 with 语句O(1) 常数 不管有多少值，执行的时间都是恒定的。一般表示简单值和存储在变量中的值O(log n) 对数 总的执行时间和值的数量相...原创 2018-04-18 10:56:51 · 234 阅读 · 0 评论 -
通过ES6 的class方法初探Object.prototype.constructor 和Object.constructor的指向
我们都知道 ECMAScript中 Object是所以引用类型的基类型 也就是所以引用类型都继承自Object的默认属性和方法，prototype是函数的熟悉 Object.prototype指向所有引用类型的根对象 constructor指向构造方法（function）...原创 2018-04-06 02:11:44 · 641 阅读 · 0 评论 -
javascript在严格模式下的执行结果
给未经声明的变量赋值在严格模式下会导致抛出 ReferenceError 错误。第 5 版把在非严格模式下运行时的保留字缩减为下列这些：class enum extends super const export import ECMAScript 5 引入了严格模式（strict mode）的概念。严格模式是为 JavaScript 定义了一种不同的解析与执行模型。在严格模式下，ECMAScrip...原创 2018-03-14 07:50:48 · 239 阅读 · 0 评论 -
JavaScript的运算符优先级
运算符优先级JavaScript中的运算符优先级是一套规则。该规则在计算表达式时控制运算符执行的顺序。具有较高优先级的运算符先于较低优先级的运算符执行。例如，乘法的执行先于加法。下表按从最高到最低的优先级列出JavaScript运算符。具有相同优先级的运算符按从左至右的顺序求值。运算符描述. [] ()字段访问、数组下标、函数调用以及表达式分组++ -- - ~ ! delete new type...转载 2018-03-13 14:30:35 · 232 阅读 · 0 评论 -
javascript最佳实践
1. javascript标识符命名规则，（函数参数，变量名，对象属性，函数名）采用驼峰 firstSecondmyCardoSomethingImportant2始终在控制语句中使用代码块——即使代码块中只有一条语句，例如：if (test)alert(test); // 有效但容易出错，不要使用if (test){ // 推荐使用alert(test);}对未初始化的变量执行 typeof 操...原创 2018-03-13 11:34:52 · 233 阅读 · 0 评论 -
react-routev4简易入门
React Router4是一个流行的纯React重写的包。现在的版本中已不需要路由配置，现在一切皆组件。本文涵盖了开始使用React Router构建网站所需要的一切知识。我们将会为本地运动队制作一个网站。代码想看网站最终效果，查看demo点击预览安装React Router被拆分成三个包：react-router,react-router-dom和r原创 2018-02-03 10:12:49 · 469 阅读 · 0 评论 -
navicat for mysql10.0.11简体中文破解版
navicat for mysql10.0.11简体中文破解版下载地址链接：https://pan.baidu.com/s/1oAoSAam 密码：330e原创 2018-01-26 18:45:10 · 8524 阅读 · 0 评论 -
create-react-app命令的执行问题
当cretate-react-app appname是出现 postinstall: info时间。。。时，使用 npm install -g npm@latest 更新下npm，之后使用管理运行npm 重新试下就ok了。原创 2018-01-26 18:40:41 · 3742 阅读 · 0 评论 -
使用React+ndoe.js+mogodb实现注册登录功能
## 版本迭代信息### v1.0.01. 使用mysql数据库2. 提示框使用Prompt组件3. video-player实现视频上传4. 视频蒙层，hover显示数据信息5. 改造node层，增加获取数据信息的接口8. 修改信息部分从form表单上传改为fetch上传1. 用户注册，登录，修改个人信息，退出## 技术栈1. node.js (为了锻炼n原创 2018-01-09 09:36:42 · 1599 阅读 · 0 评论 -
使用Hexo + GitHub Pages搭建个人博客
---title: github pages+hexo搭建博客date: 2017-09-20 10:39:20tags: ["技术","学习",'博客']---Web 前端爱好者。写博客的好处，不是为了写而写，而是一个记录思想的过程。不要考虑它能带给你什么，而是你自己从中收获了什么。最近刚好有空，于是就参照网上的各种教程，搭建了一个博客。现在把 Hexo + GitHub原创 2018-01-26 18:23:30 · 3273 阅读 · 1 评论 -
创建对象的方法
Object 构造函数 var obj=new Object();obj.name='objName';obj.property=function(){alert(this.name)};对象字面量var person={name:'mark',age:20};缺点:使用同一个接口创建很多对象，会产生大量的重复代码。工厂模式工厂模式是软件工程领域一种广为人知的设计模式，这种原创 2018-02-01 16:07:00 · 225 阅读 · 0 评论 -
JavaScript高级程序设计第6章对象数据属性
在使用js的Object.defineProperty来给一个对象定义属性时，为什么没有设置writable，configurable，enumerable为false,却改变不了它的value和读出它的属性名？首先，我们了解一下Object.defineProperty的四个数据属性configurable： 仅当该属性的 configurable 为 true 时，该属原创 2018-02-01 11:02:52 · 212 阅读 · 0 评论 -
前端面试题
这些问题都很普通 但很基础和重要，决定了你可以走多远和拿到敲门砖，所以不要觉得不重要，因为这些问题都答不到70%，那么你基本可以和正经的重视前端的大公司说拜拜了。如果你一些基本问题答对了，那么我可以肯定的是 你面试任何公司的前端技术轮，都是没问题的。不是我吹，是真的 基础很重要 也很简单都可以自己查到，做好准备即可。由于我拿到过 阿里巴巴事业原创 2018-01-31 20:45:19 · 451 阅读 · 0 评论 -
前端面试题及答案
FE-interview$HTML， HTTP，web综合问题常见排序算法的时间复杂度,空间复杂度前端需要注意哪些SEOweb开发中会话跟踪的方法有哪些的title和alt有什么区别doctype是什么,举例常见doctype及特点HTML全局属性(global attribute)有哪些什么是web语义化,有什么好处HTTP method从浏览器地址栏输入原创 2018-01-31 19:00:37 · 1162 阅读 · 0 评论 -
前端工程化体系
根据自身从业这些年的一些产品和项目经验，对前端工程体系的设计有一些自己的见解：前端开发应该是“自成体系”的，包括运维布署、日志监控等针对不同的场景有不同的解决方案，并不是一套大而全的框架体系。比如针对以产品宣传展示为主的网页(Site)，采用多页模式和响应式设计开发；以用户交互为主的且无强烈 SEO 要求的应用(Application)，采用单页模式开发产品组件化，为提高复用性尽量将组件的原创 2018-01-31 13:20:23 · 735 阅读 · 0 评论