javaScript
song_zhiyin
这个作者很懒,什么都没留下…
展开
-
ECMAScript6(一)
let特性: 不能重复声明 没有预解析 有块儿级作用域 (变量或者函数只有在该区域才起作用) 暂存死区(从块儿的开始到声明这段的区域) { let b = 3; console.log(b);//3}{ let b = 3;} console.log(b);//b is not defined选项卡实例<input type原创 2017-02-27 18:23:08 · 137 阅读 · 0 评论 -
BOM 和 DOM
什么是 BOM ?1.浏览器对象模型 Browser Object Model 2.BOM的核心对象是window,同时window也是JavaScript的全局对象 3.BOM主要负责来对浏览器窗口进行操作和窗口与窗口之间的交互主要包括: navigator 导航器对象、history 历史对象、screen、显示器对象、location 对象、对话框、定时器、documentnaviga原创 2017-03-05 16:10:57 · 315 阅读 · 0 评论 -
apply和call的用法
call 和 applyEC3给Function的原型定义了两个方法,它们是 Function.prototype.call 和 Function.prototype.apply。在实际的开发中,特别是函数式编程风格的代码中,call和apply尤为重要。能熟练的使用这两个方法模式我们真正成为一名JavaScript程序员的重要一步。call 和 apply 的区别它们的作用其实是一模一样的,区别仅原创 2017-03-05 16:13:16 · 334 阅读 · 0 评论 -
字符串反序排列的三种方法
var str1 = 'abcd';//////////////////////String.prototype.toReverse = function(){ return this.split('').reverse().join('');}///////////////////////String.prototype.toReverse = function(){ va原创 2017-03-18 21:25:17 · 5277 阅读 · 0 评论 -
练习题
(function() { return typeof arguments;//object 实参的集合 })(); /*var f = function g() { return 23; } console.log(typeof g());// 报错*/ (function(x){ delete x;原创 2017-03-05 18:48:47 · 234 阅读 · 0 评论 -
驼峰格式转换
var str = 'border-bottom-color';function toHump(str) { var arr = str.split('-'); for (var i = 1; i < arr.length; i++) { arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].substr(1); }原创 2017-03-05 19:25:55 · 1307 阅读 · 0 评论 -
统计字符出现的次数
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>统计字符出现的次数</title></head><body> <script type="text/javascript"> var str = 'asdsdefsdfdssdefs'; alert原创 2017-03-05 20:36:29 · 1275 阅读 · 0 评论 -
算法类练习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>算法类题型</title></head><body><script type="text/javascript"> // 1 斐波那契数列 1,1,2,3,5,8,13,21 function test(n) {原创 2017-03-05 22:24:00 · 195 阅读 · 0 评论 -
跨浏览器的CORS
通过XHR实现Ajax通信的主要限制,来源于跨域安全策略(同源策略:童同域名、同协议、同端口。非同源即跨域)。默认情况下,XHR只能访问与包含它的页面处于同一个域中的资源。 CORS(跨源资源共享)是W3C的一个工作草案,定义了必须访问跨源资源时,浏览器与服务器应该如何沟通。CORS背后的基本思想是,使用自定义的HTTP头部信息让浏览器与服务器进行沟通,从而决定请求或者相应是应该成功还是应该失原创 2017-03-12 16:48:54 · 502 阅读 · 0 评论 -
数据存储
Cookie最初是在客户端用于存储会话信息的。限制 cookie在性质上是绑定在特定的域名下的。当设置了一个cookie后,在给创建它的域名发送请求的时候,都会包含这个cookie。这个限制确保了存储在cookie中的信息只能让批准的接受者访问,不能让其他域访问。每个域的cookie总数是有限制的,不同浏览器的限制不同:IE6之前 最多20个IE7之后 最多50个Firefox 最原创 2017-03-12 18:53:36 · 192 阅读 · 0 评论 -
总结
var arr = [1,2,2,4,4,55,5,6,6,77,8];console.log(test(arr))// 去重function test(obj) { var json = {}; var result = []; for(var i = 0; i < obj.length; i++) { if (!json[obj[i]]) {原创 2017-03-15 19:03:57 · 370 阅读 · 0 评论 -
日常练习
谷歌字体<link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">//如果上面失效,可使用下面的。<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lob原创 2017-05-01 15:21:15 · 542 阅读 · 0 评论 -
webpack
常用命令创建新的文件夹 mkdir 文件夹名初始化npm项目 npm init安装webpack npm install webpack –save-dev引入另外文件 require(‘…’)打包单独文件 webpack hello.js hello.bundle.js安装css-loader和styel-loader npm install css-loader原创 2017-04-23 22:35:13 · 517 阅读 · 0 评论 -
千分符
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>千分符</title></head><body><script type="text/javascript"> var str = '12345987553426'; alert(test(str)); /* fu原创 2017-03-05 21:08:49 · 395 阅读 · 0 评论 -
数据类型转换
NumberNumber()可以转换的数据Number('') => 0;Number([]) => 0;Number(['']) => 0;Number([123]) => 123;Number(null) => 0;Number(true) => 1;Number(false) => 0;Number()不能转换的数据Number({}) => NaN;Number(functio原创 2017-06-29 00:50:19 · 252 阅读 · 0 评论 -
vue props 拿不到值的解决方案
方案一: 在子组件中设置v-if=’flag’,初始值false,在成功获取数据后设置为true// 子组件 <echarts :datas="conditionStatisticsData" v-if="flag"></echarts>// 成功获取数据后 flag设置成true homeResource.getConditionData().then((res) => { this.原创 2017-09-26 17:56:49 · 14031 阅读 · 1 评论 -
性能优化 基础知识
可以从网络、本地存储、加载顺序等方面进行性能优化。url是统一资源定位符的简称。session并不真是存在,临时在服务端做登录验证使用。301和302的区别。 301代表永久转移 302代表临时转移网址的解析顺序是从右到左,网址的最后都会有一个隐藏的‘.’,表示公网页面渲染流程及js引擎原创 2018-03-08 14:55:18 · 257 阅读 · 0 评论 -
查找元素出现的位置
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>查找元素出现的位置</title></head><body> <script type="text/javascript"> (function(){ var arr = [12,23,345,34,56,76原创 2017-03-05 15:31:05 · 408 阅读 · 0 评论 -
闭包
什么是闭包 函数嵌套函数,内部函数可以引用外部函数的参数或者变量,外部函数不能引用内部函数的参数或者变量 function aaa(a) { var a = 5; function bbb() { alert(a); } return bbb;}var c = aaa ();c();垃圾回收机制函数中的变量在函数调用完后,会被垃圾回收机制收原创 2017-02-26 17:17:07 · 285 阅读 · 0 评论 -
事件委托
事件委托原理: 利用冒泡的原理,把事件加到父级上,触发执行效果。好处: 1. 提高性能 2. 新添加的元素,还会有之前的事件event对象事件源: 不管在哪个事件中,只要操作的那个元素就是事件源兼容性: IE window.event.srcElement 标准下 event.target原创 2017-02-25 18:43:19 · 373 阅读 · 0 评论 -
快排
var arr = [1,8,9,3,7,5]; function quickSort(obj) { if (obj.length <= 1) { return obj; } var num = Math.floor(obj.length/2), nu原创 2017-02-25 17:04:14 · 282 阅读 · 0 评论 -
DOM优化
减少dom操作var str = ''; for (var i = 0; i < 5000; i++) { str += 'a'; }oDiv.innerHTML = str;innerHTML与DOM对比 chrome : dom要比innerHTMl性能要好 var oUl = document.getElementById('list'); f原创 2017-02-24 23:41:49 · 180 阅读 · 0 评论 -
js技巧
定时器setTimeout(function(num) { alert(num) }, 1000, 123);字符串的拼接window.onload = function() { document.body.innerHTML = '<div>div</div>\ <span>span</span>\ <p>p</p>\原创 2017-02-24 19:55:26 · 213 阅读 · 0 评论 -
解析url
/** * 解析url参数 * @example ?id=123&a=b * @return Object {id:123,a:b} */ export function urlParse() { let url = window.location.search; let obj = {}; let reg = /[?&][^?&]+=[^?&]+/g;原创 2017-02-15 16:52:46 · 414 阅读 · 0 评论 -
作用域解析及作用域链
预解析遇到重名,只留一个。如果与函数重名,就只留下函数。 console.log(a);// function a(){console.log(4)} var a = 1; console.log(a); // 1 function a(){ console.log(2); } console.log(a);// 1 var a = 3原创 2017-03-02 00:14:52 · 162 阅读 · 0 评论 -
面向对象(一)
构造函数 当new去调用一个函数 ,函数中的this就是创建出来的对象,并且函数的返回值就是this(隐式返回) function CreatePerson(name) { this.name = name; this.showName = function() { alert(this.name); } } var p1 = new CreatePerson('张原创 2017-03-04 17:16:33 · 290 阅读 · 0 评论 -
判断传入的参数是否是数组
方法一:var arr = [1,2,3];var obj = {name:'zhangsan'}console.log(Array.isArray(arr));console.log(Array.isArray(obj));方法二: function isArray(obj) { return Object.prototype.toString.call(obj)原创 2017-03-01 22:36:15 · 1126 阅读 · 0 评论 -
Vue2.0(购物车和地址选配)
基础指令v-model主要用于表单中,视图改变模型也会发生改变,反之亦然。v-text文本渲染,效果等价于{{}}。区别在于Vue没有初始化完成之前,使用{{}}可能会显示到页面上。v-show控制元素的显示隐藏(通过display:blkock或者display:none控制)v-if 同样也是控制元素的显示隐藏。如果元素不显示的话,整个DOM都没有。v-bind绑定属性。例如动态绑定图片的sr原创 2017-03-16 20:26:29 · 364 阅读 · 0 评论 -
面向对象的继承(拷贝继承)
什么是继承 在原有对象的基础上,稍微修改后得到新的对象 不会影响原对象的功能 (子类不影响父类,子类可以继承父类的一些功能) 属性继承 调用父类的构造函数,使用call方法改变this指向问题。方法继承 for in 拷贝继承(extend) function CreatePerson(name,sex) { this.name = name;原创 2017-03-05 00:44:36 · 977 阅读 · 0 评论 -
面向对象的继承(类式继承)
类式继承 通过构造函数继承的方式function Aaa() { this.name = [1,2,3];}function Bbb() { Aaa.call(this);}function F() {};F.prototype = Aaa.prototype;Bbb.prototype = new F();Bbb.prototype.constructor = Bbb;原创 2017-03-05 01:24:20 · 345 阅读 · 0 评论 -
面向对象(二)
javaScript是基于原型的程序,尽量不要修改或者添加系统对象下的方法或者属性。push 原理 var arr = [1,2,3]; Array.prototype.push = function() { for (var i = 0; i < arguments.length; i++) { //数组的第i位等于参数的第i个原创 2017-03-04 22:41:26 · 154 阅读 · 0 评论 -
封装弹窗组件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>封装弹窗组件</title> <style type="text/css" media="screen"> .login{ border:1px solid #000; p原创 2017-03-05 14:43:48 · 1214 阅读 · 0 评论 -
面向对象
什么是面向对象?面向对象是一种编程思想,是对现实世界理解和抽象的方法。属性和方法属性一定是在某个非空对象上的,只有非空对象才能加属性。一般属性写在类上,方法写在类的原型上var arr = [];arr.num = 10;arr.num++;alert(arr.num);//11空字符串不能设置属性var str = '';str.num = 10;str.num++;aler原创 2017-03-05 15:29:19 · 149 阅读 · 0 评论 -
数组去重
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>数组去重的4种方法</title></head><body> <script type="text/javascript"> (function(){ var arr = [12,234,23,12,124,3,原创 2017-03-05 15:30:26 · 282 阅读 · 0 评论 -
webpack 性能优化 - dll
首先创建webpack.dll.config.js文件const path = require('path')const webpack = require('webpack')module.exports = { // 想要打包模块的数组 entry: { vendor: ['vue/dist/vue.esm.js', 'vuex', 'vue-router', 'el...原创 2018-07-02 17:42:14 · 394 阅读 · 0 评论