song_zhiyin-CSDN博客

原创 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

原创性能优化基础知识

可以从网络、本地存储、加载顺序等方面进行性能优化。url是统一资源定位符的简称。session并不真是存在，临时在服务端做登录验证使用。301和302的区别。 301代表永久转移 302代表临时转移网址的解析顺序是从右到左，网址的最后都会有一个隐藏的‘.’,表示公网页面渲染流程及js引擎

2018-03-08 14:55:18 258

原创 vue element-ui table表格滚动加载

添加全局注册事件，用来监听滚动事件window.Vue.directive('loadmore', { bind(el, binding) { const selectWrap = el.querySelector('.el-table__body-wrapper') selectWrap.addEventListener('scroll', function() {

2017-12-14 11:25:47 20957 8

原创 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 14037 1

原创 vue 自定义指令自动聚焦

<el-input v-model="data.carDealerJobs.bankDetail" v-focus placeholder="请输入内容" size="small"></el-input>局部注册指令： directives: { focus: { inserted: function (el) { el.children[0]

2017-09-18 16:10:50 2119

原创数据类型转换

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 253

原创日常练习

谷歌字体<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 543

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }body, button, input, select, textarea { fo

2017-04-25 22:46:46 222

原创 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 518

原创字符串反序排列的三种方法

var str1 = 'abcd';//////////////////////String.prototype.toReverse = function(){ return this.split('').reverse().join('');}///////////////////////String.prototype.toReverse = function(){ va

2017-03-18 21:25:17 5296

原创 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 366

原创总结

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

原创数据存储

Cookie最初是在客户端用于存储会话信息的。限制 cookie在性质上是绑定在特定的域名下的。当设置了一个cookie后，在给创建它的域名发送请求的时候，都会包含这个cookie。这个限制确保了存储在cookie中的信息只能让批准的接受者访问，不能让其他域访问。每个域的cookie总数是有限制的，不同浏览器的限制不同：IE6之前最多20个IE7之后最多50个Firefox 最

2017-03-12 18:53:36 193

原创跨浏览器的CORS

通过XHR实现Ajax通信的主要限制，来源于跨域安全策略（同源策略：童同域名、同协议、同端口。非同源即跨域）。默认情况下，XHR只能访问与包含它的页面处于同一个域中的资源。 CORS（跨源资源共享）是W3C的一个工作草案，定义了必须访问跨源资源时，浏览器与服务器应该如何沟通。CORS背后的基本思想是，使用自定义的HTTP头部信息让浏览器与服务器进行沟通，从而决定请求或者相应是应该成功还是应该失

2017-03-12 16:48:54 503

原创算法类练习

<!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

原创千分符

<!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 394

原创统计字符出现的次数

<!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 1283

原创驼峰格式转换

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

原创练习题

(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 236

原创 apply和call的用法

call 和 applyEC3给Function的原型定义了两个方法，它们是 Function.prototype.call 和 Function.prototype.apply。在实际的开发中，特别是函数式编程风格的代码中，call和apply尤为重要。能熟练的使用这两个方法模式我们真正成为一名JavaScript程序员的重要一步。call 和 apply 的区别它们的作用其实是一模一样的，区别仅

2017-03-05 16:13:16 334

原创 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

原创查找元素出现的位置

<!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 407

原创数组去重

<!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 291

原创面向对象

什么是面向对象？面向对象是一种编程思想，是对现实世界理解和抽象的方法。属性和方法属性一定是在某个非空对象上的，只有非空对象才能加属性。一般属性写在类上，方法写在类的原型上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

原创封装弹窗组件

<!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

原创面向对象的继承（类式继承）

类式继承通过构造函数继承的方式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

原创面向对象的继承（拷贝继承）

什么是继承在原有对象的基础上，稍微修改后得到新的对象不会影响原对象的功能 (子类不影响父类，子类可以继承父类的一些功能) 属性继承调用父类的构造函数，使用call方法改变this指向问题。方法继承 for in 拷贝继承（extend） function CreatePerson(name,sex) { this.name = name;

2017-03-05 00:44:36 978

原创面向对象（二）

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

原创面向对象（一）

构造函数当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

原创弹性盒模型（一）

弹性盒模型的父级元素必须要加display:box或者display:inline-boxbox-orient 定义盒模型的布局方向horizontal 水平显示vertical 垂直显示box-direction 元素排列顺序normal 正序reverse 反序box-ordinal-group 设置元素的具体位置box-flex 弹性空间管理子元素的尺寸 = 盒子的尺寸 * 子元素的

2017-03-02 21:08:03 336

原创作用域解析及作用域链

预解析遇到重名，只留一个。如果与函数重名，就只留下函数。 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 163

原创判断传入的参数是否是数组

方法一：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 1127

原创 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

原创闭包

什么是闭包函数嵌套函数,内部函数可以引用外部函数的参数或者变量，外部函数不能引用内部函数的参数或者变量 function aaa(a) { var a = 5; function bbb() { alert(a); } return bbb;}var c = aaa ();c();垃圾回收机制函数中的变量在函数调用完后，会被垃圾回收机制收

2017-02-26 17:17:07 285

原创事件委托

事件委托原理：利用冒泡的原理，把事件加到父级上，触发执行效果。好处： 1. 提高性能 2. 新添加的元素，还会有之前的事件event对象事件源: 不管在哪个事件中，只要操作的那个元素就是事件源兼容性： IE window.event.srcElement 标准下 event.target

2017-02-25 18:43:19 374

原创快排

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

原创 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

原创 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

原创解析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 415

原创 CSS sticky footer

<div class="detail" v-show='detailShow'> <div class="detailWrap clearfix"> <div class="detailMain"> <h1>{{seller.name}}</h1> </div>

2017-02-11 12:54:39 222

空空如也

空空如也