js 去除对象指定key 不区分大小写
用loadsh 的omitBy方法
_
此时的 searchResult 是没有任何refid的key的包括各种大小写
用loadsh 的omitBy方法
_
此时的 searchResult 是没有任何refid的key的包括各种大小写
1、背景
spa项目最大的特点就是js随着项目越来越大越来越多,导致拉取js的时间很长,虽然拉取过一次之后都有缓存,但是每次发布总会拉新代码,还是会拉取很慢尤其再网速慢的情况下,现在很多app都内嵌了h5 混合 js拉取慢导致了 app显示就慢 需要提高js加载新能。 虽然现在的spa可以通过拆路由懒加载等解决包太大的问题,但是效果还是不是很理想,当然最终的方案还得SSR啊。
2、一些常用的技术方案
· 减少请求
· 合并公共脚本
· 懒加载资源
· cdn
....
这些常用切正常的操作我们就不多说了 网上文章一大堆,今天来讲下 appcache 缓存解决方案。首先这套appcache的方案已经不推荐了但是这种强缓存的策略还是牛逼的 所以我们可以继续尝试下。
3、appcache方案
1、首先appcache 是离线缓存,即使你没网也会直接访问得到东西。
2、缓存严重也会有问题,比如更新了之后线上代码还是老的
先说下原理:
appcache缓存需要 一个
manifest="./service.appcache"
放到html的标签里面这些就是缓存清单的一些配置 。浏览器会根据清单里面的内容进行缓存。
由于是spa项目基本没有html代码 只有一小段 其他都是js跟css。由于html 是整个缓存的 有可能会缓存原来老的js 跟css 更新不及时的问题, 所以我们把js 跟css 全部放到一个js里面 通过这一个js去加载该版本的js跟css。并且每次版本迭代这个js的随机数都不一样可以保持代码不会错乱掉。
所以最终spa项目需要改2点。第一html模板生成需要把manifest appcache的缓存列表生成好,第二 统一脚本生成好,用来加载核心脚本,基本也就三个 第一 dll或者公共脚本 第二app.js 的入口脚本 第三app.css的公共样式,只需要这三个就行,因为懒加载的脚本是通过app.js入口定的,只要app.js 入口脚本加载好其他的脚本就会加载好。之后appcache会根据列表里面的缓存开始缓存脚本,其他之后的请求就会直接命中缓存。
总结:
1、生成缓存配置文件
2、生成统一拉取js css的核心脚本 带有版本号随机数
3、访问拉取 二次命中缓存 加载速度快
4、pwa也用了但是明显没有 appcache快,还有地段下serviceworks拉取本地脚本会失败的问题
5、缓存配置文件需要同源
6、生成appcache manifest 文件跟生成核心js的代码 可以用webpack或者gulp 按照打包工具不一样自己实现。
webstrom 2016 破解 激活方法
菜单help >>>> Register 选择License Server 输入 http://idea.qinxi1992.cn/点击ok
最近玩了一下SASS,感觉不错,不过CSS3在不同平台兼容性代码一直是个头痛的问题,手写处理费时费力又容易出错。
曾经一直用sublime text写html和css,这些问题都有相应的插件。用Webstorm写js,但是来回切换编辑器也比较麻烦。
虽然Webstorm内置了css3自动补全功能,当输入user-select时,Webstorm会自动补全:
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
但是很多情况下,这种自动补全并不令人满意,比如当我输入display:flex;时,Webstorm并不会自动补全为:
display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;
Autoprefixer是一个后处理程序,不象Sass以及Stylus之类的预处理器。它适用于普通的CSS,可以实现css3代码自动补全。也可以轻松跟Sass,LESS及Stylus集成,在CSS编译前或编译后运行。详情见,https://github.com/postcss/autoprefixer
当Autoprefixer添加前缀到你的CSS,还不会忘记修复语法差异。这种方式,CSS是基于最新W3C规范产生:
a {background : linear-gradient(to top, black, white);display : flex}::placeholder {color : #ccc}
编译成:
a {background : -webkit-linear-gradient(bottom, black, white);background : linear-gradient(to top, black, white);display : -webkit-box;display : -webkit-flex;display : -moz-box;display : -ms-flexbox;display : flex}:-ms-input-placeholder {color : #ccc}::-moz-placeholder {color : #ccc}::-webkit-input-placeholder {color : #ccc}::placeholder {color : #ccc}
Autoprefixer 同样会清理过期的前缀,因此下面的代码:
a {-webkit-border-radius : 5px;border-radius : 5px}
编译成:
a {border-radius : 5px}
因为经过Autoprefixer处理,CSS将仅包含实际的浏览器前缀。
所以尝试在Webstorm下搜索autoprefixer插件,无果。那就自己手动配置了一个。首先我考虑配置File Watchers,但是不习惯,原来在sublime text下用autoprefixer都是手动触发的,所以后面我配置了External Tools。
(略)
见https://github.com/postcss/autoprefixer:
sudo npm install autoprefixer -g
要不要加sudo,或者是不是全局安装(-g)那就看你自己的环境了。
npm太慢,我是用淘宝的 NPM 镜像的https://npm.taobao.org/
Autoprefixer其实是postcss的插件,见https://github.com/code42day/postcss-cli
sudo npm install postcss-cli -g
打开Webstorm设置,Preferences -> Tools -> External Tools ;点击新增按钮,如图:
填写具体配置,例如我的配置,如图:
Program:填入你的postcss-cli 的PATH;
Parameters: -u autoprefixer -o $FileDir$/$FileName$ $FileDir$/$FileName$ ,你可以根据你自己的需要配置,具体参见https://github.com/code42day/postcss-cli
Working directory :$ProjectFileDir$
配置好后,你可以在css,或sass文件中右键,就可以在右键菜单中看到External Tools – autoprefixer,点击搞定,嘎嘎。
右键太麻烦的话,可以设置个快捷键,打开Webstorm设置,Preferences -> Keymap , 搜索External Tools , 配置 autoprefixer即可。 不要和原来的冲突就可以了。
ps:windows下可以直接用autoprefixer的PATH,具体配置
windows 找不到autoprefixer.cmd,webstrom无法用执行autoprefixer 这个问题,
可以配置
Program:C:\Users\gaojun-pd\AppData\Roaming\npm\postcss.cmd
Parameters:-u autoprefixer -o $FileDir$\$FileName$ $FileDir$\$FileName$
Working directory :$ProjectFileDir$
解决方法:
外面的元素加{ overflow: auto; -webkit-overflow-scrolling: touch; } 样式
在点击试用30天之前把本地时间调整到2090年,然后关闭吧时间改回来再打开webstrom 就好啦。
在文件头部加入
phantom.outputEncoding="GBK";
就能解决 比如
phantom.outputEncoding="GBK";
var casper = require('casper').create();
casper.start('http://www.baidu.com/', function() {
this.echo(this.getTitle());
});
casper.thenOpen('http://www.luqidong.com', function() {
this.echo(this.getTitle());
});
casper.run();
问题出现原因:phantomjs 2.0.0 不稳定用1.9.8 就没问题
解决方案:
1、换1.9.8版本的phantomjs
2、打开casperjs 里面的bootstrap.js 地址在 \bin\里面
然后找到 判断phantomjs 版本的地方
替换成一下代码
(function (version) { // required version check if (version.major === 1) { if (version.minor < 8) { return __die('CasperJS needs at least PhantomJS v1.8 or later.'); } if (version.minor === 8 && version.patch < 1) { return __die('CasperJS needs at least PhantomJS v1.8.1 or later.'); } } else if (version.major === 2) { console.log("Warning PhantomJS v2.0 not yet released. There will not be any official support for any bugs until stable version is released!"); } else return __die('CasperJS needs PhantomJS v1.x or v2.x'); })(phantom.version);
别指望看几篇讲解就能看懂js里面的this。我也是前后翻阅了很多资料最后稍微有点懂的。
javascript里面的this跟大多数语言类似,总是指的一个对象,而具体的指向哪个对象是在运行时基于函数的执行环境动态绑定的,二不是函数被声明时的环境。
基本 this的指向大致分为以下四种
作为对象的方法调用
作为普通函数调用
构造器调用
Function.prototype.call或Function.prototype.apply调用
下面详细讲解下
1、作为对象的方法调用
当函数作为对象的方法调用的时候,this指向该对象
var obj = { a: 1, getA: function () { alert(this === obj);//true alert(this.a);//1 } }; obj.getA();
2、作为普通函数调用
当函数不作为对象的属性被调用的时候,也就是我们常说的普通函数方式,此时this总是指向全局对象,在浏览器的javascript里,这个全局对象就是window对象。
window.name ='globalName'; var getName = function(){ return this.name; }; console.log(getName()); //globalName //or window.name ='globalName'; var myobj ={ name:'sven', getName:function(){ return this.name; } }; myobj.getName() ;//sven var getName = myobj.getName; console.log(getName());// globalName
但是有时候我们会遇到一些困扰,比如在div节点的时间函数内部,有一个局部的callback方法,callback被作为普通函数调用时,callback内部的this指向了window,但是我们往往想让他指向该div节点,代码:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="div1">我是一个div</div> <script> window.id = "window"; document.getElementById("div1").onclick = function () { alert(this.id); var callback = function () { alert(this.id); }; callback(); } </script> </body> </html>
此时有一个简单的解决方案,可以用一个变量保存div节点的引用。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="div1">我是一个div</div> <script> window.id = "window"; document.getElementById("div1").onclick = function () { var that =this; alert(this.id); var callback = function () { alert(that.id); }; callback(); } </script> </body> </html>
在ECMAScript 5的 严格模式下,这种情况的this已经被规定为不会指向全局对象,而是undefined。
3、构造器调用
javascript中没有类,但是可以从构造器中创建对象,同事也提供了new的运算符,使得构造器看起来更像一个类。
除了宿主提供一些内置函数,大部分的javascript函数都可以当做构造器使用。构造器的外表跟普通函数一模一样,他们的区别在于被调用的方式,当用new运算符调用函数时,该函数总是会返回一个对象,通常情况下,构造器里的this就指向返回的这个对象,如下代码:
var MyClass = function () { this.name = 'sven'; }; var obj = new MyClass(); alert(obj.name); //sven
但用new 调用构造器时,还要注意一个问题,如果构造器显式地返回一个object类型的对象,那么此次运算结果最终会返回这个对象,而不是我们期待的this:
var MyClass = function () { this.name = 'sven'; return { //显式滴返回了一个对象 name: 'anne' } }; var obj = new MyClass(); alert(obj.name); //anne
如果构造器不显式地返回任何数据,或者是返回一个非对象类型的数据,就不会造成以上的问题:
var MyClass = function () { this.name = 'sven'; return 'anne'; }; var obj = new MyClass(); alert(obj.name); //sven
4、Function.prototype.call或Function.prototype.apply调用
跟普通的函数调用想必,用Function.prototype.call或Function.prototype.apply可以动态第改变传入函数的this:
var obj1 = { name: 'sven', getName: function () { return this.name; } }; var onj2 = { name: 'anne' }; console.log(obj1.getName());//sven console.log(obj1.getName.call(obj2));//anne
call 和 apply的方法能很好滴体验javascript的函数式编程特性,在javascript中,几乎每一次编写函数式风格的代码,都离不开call和apply。
问题描述:
打开大白菜之后程序就会无响应卡在那边。
解决方案:
1、关闭迅雷
2、把u盘都拔了 关闭迅雷再打开 程序