一些杂七杂八的前端相关

1、最近闭关（封闭式开发），模仿Nodejs造的一个和url相关的小模块，配合做个分页组件很不错：

（1）、获取参数：var id=iurls.query.id或var id=iurls.param(‘id‘)；

（2）、设置参数：返回location.search；iurls.setParam(name, value)；

（3）、GET请求：iurls.search({});

 1 var iurls = function (loc){
 2 　　var search = loc.search.substr(1);
 3 　　var searchArr = search.indexOf(‘&‘) != -1 ? search.split(‘&‘) : [search];
 4
 5 　　function getURLData(k) {
 6 　　　　var param = {};
 7 　　　　for (var i = 0; i < k.length; i++) {
 8 　　　　　　if (k[i] != "") {
 9 　　　　　　　　var v = k[i].split(‘=‘);
10 　　　　　　　　for (var j = 0; j < v.length; j++) {
11 　　　　　　　　　　var key = decodeURIComponent(v[0]);
12 　　　　　　　　　　var value = decodeURIComponent(v[1]);
13 　　　　　　　　　　param[key] = value;
14 　　　　　　　　}
15 　　　　　　} else {
16 　　　　　　　　return ‘‘;
17 　　　　　　}
18 　　　　}
19 　　　　return param;
20 　　}
21 　　return {
22 　　　　query: getURLData(searchArr),
23 　　　　setParam: function(name, value) {
24 　　　　　　// return search
25 　　　　　　var param = getURLData(searchArr);
26 　　　　　　if (param) {
27 　　　　　　　　param[name] = value;
28 　　　　　　　　var parArr = [];
29 　　　　　　　　for (var i in param) {
30 　　　　　　　　　　parArr.push(i + ‘=‘ + param[i]);
31 　　　　　　　　}
32 　　　　　　　　return parArr.join(‘&‘);
33 　　　　　　} else {
34 　　　　　　　　return name + ‘=‘ + value;
35 　　　　　　}
36 　　　　　　//location.href=location.pathname+"?"+parArr.join(‘&‘);
37 　　　　　　//return parArr.join(‘&‘);
38 　　　　},
39 　　　　param: function(par) {
40 　　　　　　return getURLData(searchArr)[par];
41 　　　　},
42 　　　　search: function(s) {
43 　　　　　　var ur = s.url;
44 　　　　　　var data = s.data || {};
45 　　　　　　var href = ‘‘;
46 　　　　　　if (ur) {
47 　　　　　　　　if (ur.indexOf(‘?‘) != -1) {
48 　　　　　　　　　　href = ur;
49 　　　　　　　　} else {
50 　　　　　　　　　　href = ur + ‘?‘
51 　　　　　　　　}
52 　　　　　　}
53 　　　　　　var datas = [];
54 　　　　　　for (var name in data) {
55 　　　　　　　　if (name) {
56 　　　　　　　　　　datas.push(name + ‘=‘ + data[name]);
57 　　　　　　　　}
58 　　　　　　}
59 　　　　　　if (href != ‘‘) {
60 　　　　　　　　href = href.charAt(href.indexOf(‘?‘) + 1) == "" ? href : href + ‘&‘;
61 　　　　　　　　location.href = href + datas.join(‘&‘);
62 　　　　　　} else {
63 　　　　　　　　location.href = loc.pathname + ‘?‘ + datas.join(‘&‘);
64 　　　　　　}
65 　　　　}
66 　　}
67 }(window.location);

2、ie9 iframe下静态资源报错，虽然程序能正常运行，但有些系统还是会无法运行；iframe不在页面上，由js输出，解决办法需：动态创建iframe；

3、Sass编译的方式很多，Koala没想用过；Sublime ctrl+b一键可编译；Grunt编译（前端自动化之利剑——Grunt）；Gulp编译（前端自动化之神器 — Gulp）；方式很多的，突然忘记了sass命令行的编译方式，有时也是一种简易的方式：

（1）、直接编译：sass ./path/*.scss ./path/to/*.css
（2）、编译后的style：sass --style compressed ./path/*.scss ./path/to/*.css　　　　* nested：嵌套缩进的css代码，它是默认值。　　　　* expanded：没有缩进的、扩展的css代码。　　　　* compact：简洁格式的css代码。　　　　* compressed：压缩后的css代码。
（3）、监听文件改动即编译：sass --watch ./path/*.scss:./path/to/*.css
（4）、sass的运算转换工具：sass -i进入；如进行rgb转16进制，rgb(0,0,0,)输出：#000000；type-of((1,2,3))输出：list;

4、解压文件

 1 var fs = require(‘fs‘),
 2 　　unzip = require(‘unzip‘);
 3 　　//fs.createReadStream(‘./angular-swipe-master.zip‘).pipe(unzip.Extract({ path: ‘./‘ }));
 4 　　var extract = unzip.Extract({ path: ‘./‘ });
 5 　　　　extract.on(‘error‘, function(err) {
 6 　　　　console.log(err);
 7 　　});
 8 　　extract.on(‘finish‘, function() {
 9 　　　　console.log("unziped!!");
10 　　});
11 　　fs.createReadStream(‘./angular-swipe-master.zip‘).pipe(extract);

5、压缩文件

 1 var fs = require("fs");
 2 var zip = require("node-native-zip");
 3 var archive = new zip();
 4
 5 archive.addFiles([
 6 　　　　{ name: "app.j", path: "./app.js" },
 7 　　　　{ name: "package.json", path: "./package.json" }
 8 　　], function (err) {
 9 　　　　if (err) return console.log(err);
10 　　　　var buff = archive.toBuffer();
11 　　　　fs.writeFile("./test2.zip", buff, function () {
12 　　　　console.log("ziped");
13 　　});
14 });

6、关于Nodejs的静态资源压缩与缓存参见：（Nodejs打造静态资源服务器与文件上传）；刚学Express那会，动态文件的gzip压缩，好长一段时间都没找到合适的方法，才发现就是这么简单……app.js里添加compression模块：先安装；

1 var compress=require(‘compression‘);
2 app.use(compress());

OK了动态文件也能gzip压缩了；然而。。。。。。。

闭关了3个星期，小站没时间更新，小伙伴不要忘了啊！

原文来自：值得收集的前端（Javascript、HTML、CSS）代码片段