独书先生 Menu

Webpack采坑记录 (一)

本系列文章记录在使用webpack中遇到的坑点,包含网友的解决方案,以及个性化的配置,仅用作参考。 Tips: 据我所知,webpack各个版本与其他不同版本的npm包搭配不同,实际采用的配置也不同,所以所有的设置仅针对个人开发环境,本文会尽量提供详细的开发配置,力争做到充分实践、上手即用,降低学习成本。

本系列文章记录在使用webpack中遇到的坑点,包含网友的解决方案,以及个性化的配置,仅用作参考。

Tips: 据我所知,webpack各个版本与其他不同版本的npm包搭配不同,实际采用的配置也不同,所以所有的设置仅针对个人开发环境,本文会尽量提供详细的开发配置,力争做到充分实践、上手即用,降低学习成本。

正文从这里开始

最近项目采用vue-cli 2 + webpack 3的开发环境,新版本的vue脚手架和webpack配置已有诸多不同,不在本文的讨论范围,往谅解。

以下import 引入均在main.js中,module.exports的配置就在webpack.base.conf.js中

知识点1:

使用font-awesome

npm install font-awesome-loader node-sass sass-loader less less-loader css-loader style-loader file-loader font-awesome -save
import ‘font-awesome/css/font-awesome.css’

1
2
3
4
5
6
7
8
module.exports = {
    context: path.resolve(__dirname, '../'),
    entry: {
        vendors: [
            'font-awesome-loader'
        ],
        app: './src/main.js'
    },

知识点2:

使用numeral
npm install numeral
var numeral = require(‘numeral’)

知识点3:

使用moment

npm install moment –save
npm install moment-timezone –save
npm install moment-msdate –save
import moment from ‘moment’

pro.config.js
//moment 语言资源文件精简
new webpack.ContextReplacementPlugin(
/moment[/\\]locale$/,
/zh-cn/,
)

知识点4:

使用html2canvas
npm install –save html2canvas
import html2canvas from ‘html2canvas’

知识点5:

使用localforage

npm install localforage –save
import localForage from ‘localforage’

知识点6:

使用lodash

npm install lodash –save

知识点7:

使用jQuery

npm install jquery  –save
npm install expose-loader –save-dev

import $ from ‘expose-loader?$!jquery’ //挂载到全局

或者使用:

1
2
3
4
5
6
7
8
9
10
11
12
module: {
    rules: [
        { //expose-loader的方式全局引入jQuery
            test: require.resolve('jquery'),
            use: [{
                loader: 'expose-loader',
                options: 'jQuery'
            }, {
                loader: 'expose-loader',
                options: '$'
            }]
        },

两种方式挑选其一,即可挂载到全局

知识点8:

babel中忽略某一个或者几个js文件不进行babel转译,在.babelrc文件中设置

“ignore”: [
“./src/assets/js/a.js”,
“./src/assets/js/b.js”
]

用*号代表匹配所有的js文件

“ignore”: [
“./src/assets/js/*.js”
]

babel转译移除严格模式:

npm install babel-plugin-transform-remove-strict-mode –save-dev

在.babelrc文件中设置插件”transform-remove-strict-mode”

例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{
    "presets": [
        ["env", {
            "modules": false,
            "targets": {
                "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
            }
        }],
        "stage-2"
    ],
        "plugins": ["transform-vue-jsx", "transform-runtime"],
            "env": {
        "test": {
            "presets": ["env", "stage-2"],
                "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"],
                    "ignore": [
                        "./src/assets/js/a.js",
                        "./src/assets/js/b.js"
                    ]
        }
    },
    "ignore": [
        "./src/assets/js/a.js",
        "./src/assets/js/b.js"
    ]

}

 

知识点9:

publicPath:’../../’ //解决字体和图片引用问题

vue-cli项目里,publicPath引用的是config.dev.assetsPublicPath,是在config/index.js中的assetsPublicPath

知识点10:

实验webpack 4,项目暂未使用,先记录下,
package.json中设置sideEffects为false,则告诉webpack,本项目的全部文件都是无副作用的,都可以参与摇树,把没有用到的代码去掉。

"sideEffects": false,

参考自:https://segmentfault.com/a/1190000015689240

知识点11:

使用webpack.ProvidePlugin导入插件,应用到全项目
先提前install插件,再在webpack.base.conf.js中配置plugins
例:

1
2
3
4
5
6
plugins: [
    new webpack.ProvidePlugin({
      //此处可提供给每个模块,模块中不用再引入,且不污染window全局(在此处无法挂载全局)
         moment:"moment",
         html2canvas:"html2canvas"
    })

多翻阅webpack文档:https://www.webpackjs.com/

前端模块化总结 CommonJS/AMD/UMD/ES6

front-end-module

front-end-module

1.Function时代

2.闭包时代

3.模块化时代

 

 

  • Function时代

JSP项目中,直接在网页上添加一个script,jQuery写交互逻辑

优点:简单快速搭建demo

缺点:混乱,污染全局

 

例子一:

jQuery:

1
2
3
4
5
$(function(){

    // do something

});

或者

1
2
3
4
5
$(document).ready(function(){

    //do something

})

例子二:

JS:

1
2
3
4
5
6
7
8
9
10
11
document.ready(function () {

    alert('im document.ready');

});

window.onload = function () {

    alert('im window.onload');

};

 

 

  • 闭包时代  

 

用立即执行函数包裹作用域,

优点:可以防止全局污染;

缺点:变量常驻内存会消耗内存

 

例子一:

1
2
3
4
5
(function(){

    //Coding…

})()

例子二:

//outObj  作为参数传递过去,不用每个语句都去找outObj,提高了效率

1
2
3
4
5
6
7
8
9
10
11
(function(outObj){

    var  a = 1;

    var  obj ={ b:2};

    window.obj = obj;

    return obj;

})( outObj)

 

例子三:常驻内存

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function f1(){

    var n =9;

    nAdd=function(){

        n=n+1;

    }

    function f2(){

        console.log(n);

    }

    return f2;

}

var result=f1();

result(); //9

nAdd();

result();//10

注意点:全局变量不用了记得置为null,方便垃圾回收

 

 

  • 模块化时代

CommonJS, AMD, CMD, UMD, ES6 规范(CMD已经淘汰)

 

  1. CommonJS规范:

基本知识:require : 导入模块
module.exports 或exports :导出模块

 

特点:同步加载,依赖通过每个require一个个导入

例:

//    文件名: foo.js

1
2
3
4
5
6
7
8
9
10
11
//    依赖

var $ = require('jquery');

//    方法

function myFunc(){};

//    暴露公共方法(一个)

module.exports = myFunc;

注意点

(1)exports 是对 module.exports 的引用

(2)一个文件不能写多个module.exports ,如果写多个,对外暴露的接口是最后一个module.exports

(3)模块如果没有指定使用module.exports 或者exports 对外暴露接口时,在其他文件就引用该模块,得到的是一个空对象{}

案列:

example1.js 文件

1
2
3
4
5
6
// 定义有依赖的模块

//CommonJS
var example2Obj = require('./example2');
example2Obj.sayHello();
module.exports = example2Obj;

 

example2.js 文件

1
2
3
4
5
6
7
8
//没有依赖的js
CommonJS
var me = {
        sayHello:function(){
        console.log('我是example2 in CommonJS!');
    }
};
module.exports = me;

main.js

1
2
3
4
//CommonJS / AMD
var example1Obj = require('./assets/example1');

console.log("example1 in main",example1Obj)
  1. AMD规范:

基本知识

define 或者 require():导入模块

return:导出模块

实际上也是一个闭包

1
2
3
4
5
define([module1,module2],function(){

    return {};

});

特点:异步加载,不阻塞页面的加载,通过define导入多个模块,

案例:

example1.js 文件

1
2
3
4
5
6
7
8
//AMD

define([
'./example2'
],function(example2Obj){
    example2Obj.sayHello();
    return example2Obj;
});

example2.js 文件

1
2
3
4
5
6
7
8
9
10
//AMD
define([
],function(){
    var we = {};
    return {
        sayHello:function(){
            console.log('我是example2 in AMD!');
        }
    };
});

main.js同CommonJS

3.UMD规范

结合AMD + CommonJS的写法

(demo不生效,不举例了,有实验成功的童鞋分享下)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
(function (root, factory) {

    if (typeof define === 'function' && define.amd) {

    // AMD

    define(['b'], factory);

    } else if (typeof module === 'object' && module.exports) {

    // CommonJS

    module.exports = factory(require('b'));

} else {

    // Browser globals

    root.returnExports = factory(root.b);

    }

}(this, function (b) {

    //use b in some fashion.

return {};

}));

4.ES6规范

import  导入

export 或者 export default 导出

注意点:一个文件即模块中只能存在一个export default语句,export可以多个

案例:
example1.js 文件

1
2
3
4
5
//ES6
//名字任意
import ex2 from "./example2"
let ex1 = "ex1 ES6!!"
export {ex1,ex2}

example2.js 文件

1
2
3
4
5
6
7
8
9
10
11
12
//ES6
const str = "First ES6";
let obj = {
    func:() => {
        console.log("I am in ES6")
    }
}
//只能一个default
export default{
    str,
    obj
}

main.js

1
2
3
//ES6
import {ex1,ex2} from './assets/example1'
console.log("ex1:",ex1,"ex2:",ex2)

demo源代码见:https://github.com/Dushusir/js-module-demo

演示环境:vue + webpack

1.安装node

  1. npm install -g vue-cli
  2. vue init webpack myDemo

4.cd myDemo

5.npm run dev

6.去除eslint检查,防止对 “;” 报错:config/index.js中

module.exports = {

dev: {

//其他设置

useEslint: false,

参考:https://webpack.toobug.net/zh-cn/chapter2/commonjs.html ,感谢!

21天鲲鹏新青年计划第二期 技术管理该如何做

大家好,我是一名前端工程师,作为小组长带领3人左右一起开发,是一个半技术半管理的职能。个人从工作中发现了自己的不足,以及要改进的方向跟大家分享。

 

  1. 做好自己

首先做好自己的第一位的,从程序员角度,尽量问题考虑全面,考虑扩展性,代码多加注释,思考更高性能的解决思路,做好代码优化,把开发文档整理好等,做好自己的开发工作,积极完成任务,也是做一个表率,不然没法一起合作,更没办法管理。

 

  1. 信任队友

有新功能或者bug需要开发解决的时候,自己有很好的思路或者想法,一般我会提出一种或几种思路给同事参考,但是后面我都是加一句,我这只是思路或者想法,你有更好的想法可以完全按照你的思路来,代码大胆修改,有问题重新改呗。因为老代码过于庞大,有的同事不敢动,怕会影响其他代码,这种心情可以理解,但是偶尔会制约你的想象力的发挥,所以我们会根据实际情况,有一些地方感觉影响不大的地方,及时提醒到同事,这里可以随意发挥,当然有些改动影响大的地方还是会注意。

 

  1. 掌握全局

做了小组长,你就不能只关心自己的那部分的代码了,你的视野要放的更高点。基本的就从整个工程的角度去思考问题,自己写的代码,对整个工程有没有影响;再者,别人的代码影响范围多大也需要时刻关心;然后,包括一些功能的设计,整个项目的进度和方向,架构的稳定性和性能等,都需要时刻关注。要看到整个工程、整个项目,而不是某个一块功能。

 

  1. 沟通技巧

这个属于通用技能,每个人都需要沟通技巧,只不过管理的话,可能用的更多一点。在跟同事讨论某个技术难点的时候,怕是很多同事争论像吵架,通常总会有点收获,但是我觉得影响很不好,我觉得还是应该以个人观点讨论的形式来进行,原理性的东西无需争论,搜索资料即可解决,个人观点是主观想法,每个人的想法都应该尊重,无需硬怼别人的想法。管理的时候还涉及任务分配,这需要有技巧,虽然有指使同事干活的嫌疑,但是要沟通出这个事是为了团队协作、分工合作,这个有难度,个人还在学习。

 

  1. 承担责任

之前有同学也说道,领导是背锅的,话糙理不糙。日常开发任务进行,总会有或大或小的问题出现,无论是出bug,新功能与需求不符,还是工程逾期,确实是领导一层没有监管好,所以很多时候需要勇敢的承担责任,在其位谋其职。不过重要的是,出现问题以后,第一,要积极解决,要有足够的能力和信心把锅给补上,如果技术能力不足,那就花时间去学习,去请教,直到弄懂为止,因为你不去学这个搞这个,其他人更不会搞;第二,就是总结经验教训,问题出现一次,出现两次,还OK,出现多了,整个项目就可能会出大问题,所以总结出问题的根源,吸取教训,力争下次不会再犯,并且把这这些经验及时传达给同事们(这个会在第8点详说)。

 

  1. 乐于助人

之前一位大佬的文章提到的,适合做管理的人,可能有一个重要的品质,就是乐于助人。单是这个品质的好处就不多说了,我为人人,人人为我嘛。就技术职场来说,比如,同事有问题要去请教你,那你很乐于帮助他一起解决问题,一起研究更好思路,方法;很多时候,你不止关心自己的那部分工作,同事的工作跟你有衔接,有交集,你也积极参与,积极响应,帮助一起协同解决问题,然后你对项目的全局观就更强了;及时同事那里有bug了,你也可以帮助一起分析问题。很多时候,一个乐于助人的人,几乎就是一个管理者的形象,通过帮助别人,你也获得了对整个项目认识的提升和自我能力的提高。

 

  1. CodeReview

做不定期和定期的code review很重要,但是很多团队不做,我们也正在改进,要时刻记得代码前期留下的坑,后面都是要花更多时间补的,况且从代码层面查问题,会把问题查的更透彻,让工程优化的更健壮。所以道理是这样,行动上,我觉得应该定一些规则,比如,每完成一个功能,做一次review, 或者,每周五下午进行review,以团队一起写代码的人一起阅读代码,修正一些风格,bug, 探讨更优的解决方案。

 

  1. 技术分享

这个另一个和CodeReview一样很重要但是需要执行力的事,就像前面说的,在项目中踩到了各种坑了,那我们就应该积极把这些问题总结下来,最简单的,就立马告诉同事,自己遇到了坑,提醒同事注意这个问题;再者,内部整理一份问题简单的解决方案PPT,在办公室给大家分享出来,让大家积极参与讨论,或许同事还有更好的解决思路,形成一个技术讨论、技术提升的氛围,这样自己输出了知识,帮助自己沉淀,也帮助了同事提升,更是提高了整个团队的水平;后续,最好还能输出成文章的形式,写成博文,分享给网络上的朋友,这个的意义更大。当然,要让每个同事参与进来,定期分享,形成一个良好的学习+分享的氛围,分享的内容不限于工作中的问题,还可以是自己任何感兴趣的话题,这样能提高团队凝聚力。

 

总结:以上就是我自己的采坑经验,结合网络上大佬对管理的见解,总结出来的一点小收获,希望大家一起提高。

uglifyjs 快速批量压缩js文件 bat一键压缩混淆

当前最好用的压缩混淆js插件:uglifyjs。

步骤:

1.安装node + npm

2. 打开cmd窗口,全局安装uglifyjs : npm install -g uglify-js

3.新建一个txt,再新建一个空白文件夹js, 把下方D:\tools\compresser_tool\js改成你自己的空白文件夹(js)目录,用于存放将要压缩的js文件

写入:

@echo off
:: 设置压缩JS文件的根目录,脚本会自动按树层次查找和压缩所有的JS(注意路径中不能有空格)
SET JSFOLDER=D:\tools\compresser_tool\js
echo 正在查找JS文件
chdir /d %JSFOLDER%
for /r . %%a in (*.js) do (
    @echo 正在压缩 %%~a ...
    uglifyjs %%~fa  -m -o %%~fa
)
echo 完成!
pause & exit

 

另存为.bat结尾的文件

如图:

js_compresser

js_compresser

4. 将需要压缩的js文件copy到D:\tools\compresser_tool\js目录

5. 双击运行bat文件,等待cmd窗口消失,D:\tools\compresser_tool\js目录中的所有js文件即被压缩混淆,文件名未更改

 

引用自:https://www.cnblogs.com/wishyouhappy/p/3647149.html,感谢!

编写一个函数,将除最后四个字符之外的所有字符都改为’#’

codewars在线编程练习总结:信用卡数组隐藏

问题:编写一个函数maskify,它将除最后四个字符之外的所有字符都改为’#’。

列子:

1
2
3
4
5
6
maskify("4556364607935616") == "############5616"
maskify( "64607935616") == "#######5616"
maskify( "1") == "1"
maskify( "") == ""
maskify("Skippy") == "##ippy"
maskify("Nananananananananananananananana Batman!") == "####################################man!"

解决方案一:slice+正则匹配

1
2
3
function maskify(cc) {
return cc.slice(0, -4).replace(/./g, '#') + cc.slice(-4);
}

解决方案二:正则前瞻

1
2
3
function maskify(cc) {
return cc.replace(/.(?=....)/g, '#');
}

补充知识:正则前瞻:

1
2
3
4
5
6
7
8
前瞻:
exp1(?=exp2) 查找exp2前面的exp1
后顾:
(?<=exp2)exp1 查找exp2后面的exp1
负前瞻:
exp1(?!exp2) 查找后面不是exp2的exp1
负后顾:
(?<!=exp2)exp1 查找前面不是exp2的exp1

举例:

1
2
"中国人".replace(/(?<=中国)人/, "rr") // 匹配中国人中的人,将其替换为rr,结果为 中国rr
"法国人".replace(/(?<=中国)人/, "rr") // 结果为 法国人,因为人前面不是中国,所以无法匹配到

from csdn blog

衍生话题:ES6 repeat 自实现

1
2
3
4
function str_repeat(str, num){
return new Array( num + 1 ).join( str );
}
str_repeat("#",5);//##### 这是把字符串str重复num次的函数实现

js实现 Excel通配符比较两个字符串

excel_通配符

excel_通配符

需求分析:

a 与 b比较(a和b可为字符串或数字),其中b的内容比较丰富,开头可含比较符(>, >=, <, <=, =),任意位置可含通配符(Excel规则: *  ?  ~*  ~?), 返回Boolean(true or false)

通配符规则:

?(问号)

任何一个字符
例如,sm?th 可找到“smith”和“smyth”
*(星号) 任意的数量字符
例如,*east 可找到“Northeast”和“Southeast”
~(波形符)后跟 ?、* 或 ~

问号、星号或波形符
例如,fy06~? 可找到“fy06?”

通配符的使用详细参照Excel官网

代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
function acompareb(a,b){ //a 与 b比较,b可为含比较符,通配符 * ? ~* ~?,返回Boolean(true or false)

    var operatorjson = {
        "==":1, "!=":1, "<>":1, "<=":1,  ">=":1,  "=":1,  "+":1,  "-":1,  ">":1,  "<":1,  "/":1,  "*":1,  "%":1,  "&":1
    }
    function isWildcard(a,b){ //正则匹配通配符: * ? ~* ~?,a目标参数,b通配符
        a = a.toString();
        b = b.toString();
       
        if(isCompareOperator(b).flag){
            b = isCompareOperator(b).num;
        }
        var str = "";
        for(var i = 0;i < b.length;i++){
            var v = b.charAt(i);
           
            if(v == "*" ){
            str += ".*";
            }else if(v == "?"){
            str += ".";
            }else if(v == "~"){
            if(b.charAt(i+1) == "*"){
                str += "\\*";
                i++;
            }else if(b.charAt(i+1) == "?"){
                str += "\\?";
                i++;
            }else{
                str += "~";
            }
            }else{
            str += v;
            }
           
        }
       
        var reg = new RegExp("^" + str + "$","g");
        return !!a.match(reg);

    }

    function isCompareOperator(str){ //判断前一个或者两个字符是否是比较运算符
        str = str.toString();
        var ope = ""; //存放比较运算符
        var num = ""; //截取比较运算符之后的数字用于实际比较
        var strOne = str.substr(0,1);
        var strTwo = str.substr(1,1);
        var flag = false;
        var ret;

        if(strOne == ">"){
            if(strTwo == "="){
                ope = str.substr(0,2);
                num = str.substr(2);
                flag = true;
            }else if(strTwo != "="){
                ope = str.substr(0,1);
                num = str.substr(1);
                flag = true;
            }
        }else if(strOne == "<"){
            if(strTwo == "=" || strTwo == ">"){
                ope = str.substr(0,2);
                num = str.substr(2);
                flag = true;
            }else if(strTwo != "=" && strTwo != ">"){
                ope = str.substr(0,1);
                num = str.substr(1);
                flag = true;
            }
        }else if(strOne == "=" && strTwo != "="){
            ope = str.substr(0,1);
            num = str.substr(1);
            flag = true;
        }
        ret = {"flag":flag,"ope":ope,"num":num};
        return ret;
    }

    function compareWith(){
        //函数功能:比较或运算 第一个参数和第三个参数,返回比较结果的布尔值或者运算值
        //operatorjson; 存储运算符和比较符
        var args = arguments;

        var fp = args[0]; //参数一
        var sp = args[1]; //操作符
        var tp = args[2]; //参数二
       
        var function_str = "";
            if(sp in operatorjson){
                //处理第一个或者第三个参数带操作符 例:="<>" & 75
                if(fp in operatorjson || tp in operatorjson){
                    if(sp == "&"){
                        sp = "+";
                    }
                    function_str =eval("'" + fp + "'" + sp + "'" + tp + "'");
                    return function_str;
                }

                if(sp == "<>"){sp = "!=";}
                if(sp == "="){sp = "==";}
                if(!isNaN(parseFloat(fp)) && !isNaN(parseFloat(tp))){
                    if(sp == "&"){
                        sp = "+";
                        function_str ="'" + fp + "'" + sp + "'" + tp + "'" ;
                       
                    }else{
                        fp = parseFloat(fp);
                        tp = parseFloat(tp);
                        function_str = fp + sp + tp;  
                    }
                }
                else{
                    if(sp == "&"){
                        sp = "+";
                    }
                    function_str ="'" + fp + "'" + sp + "'" + tp + "'" ;
                }
               
            }
       
        function_str = eval(function_str);  //执行成为True or False or 运算符结果
        return function_str;

    }
   
    var flag = false;
    if(a == b){
        return true;
    }
    if(!isNaN(parseFloat(b))){
        b = parseFloat(b);
        flag = compareWith(a,"==",b);
    }else if(typeof(b) == "string"){ //条件输入字符串,如:">233"
       
        if(b.indexOf("*") != -1 || b.indexOf("?") != -1){ // 正则匹配:输入通配符:"黑*","白?",以及"白?黑*~*"
            //通配符函数
            return isWildcard(a,b);
        }else if(isCompareOperator(b).flag){ //"黑糖"
            var ope = isCompareOperator(b).ope;
            var num = isCompareOperator(b).num;
            flag = compareWith(a,ope,num);
        }else{
            flag = compareWith(a,"==",b);
        }
    }
    return flag;
}

Node搭建本地服务器

除了使用Python搭建本地服务器,还可以前端程序员可以直接使用Node搭建简易服务器

1:Node.js官网下载对应自己电脑的最新版Node 安装(注意:默认安装不用设置环境变量,否则需要手动配置环境变量)

2.WIN + R进入CMD命令行界面->  输入:node -v  -> 按Enter , 显示版本号即安装成功

3.CMD命令行继续输入,Windows输入: npm install anywhere -g ;MAC输入:sudo npm install anywhere -g

4.CD到你的项目所在的文件夹,输入:anywhere

HTML百分比饼图加弯曲文字效果 | SVG简易应用

饼图

饼图

使用animation绘制圆形饼图,SVG绘制曲线形文字

demo:http://jsbin.com/kiguxan

HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<div class="container-pie">
    <div class="container">
        <div class="outbox outbox1">
            <!--–饼图–-->
            <div class="pie">
                53.8%
            </div>
            <!--–饼图内文字,tspan内的百分比根据实际百分比手动修改–-->
            <div>
                <svg xmlns="http://www.w3.org/2000/svg">
                    <defs>
                        <path d="M-4,101 a1,1 0 0,1 166,0" id="myTextPath">
                        </path>
                    </defs>
                    <defs>
                        <path d="M-3,40 a1,1 0 0,0 160,0" id="myTextPath2">
                        </path>
                    </defs>
                    <text style="text-anchor:start;font-size: 12px; fill:white;word-spacing: 0.5px;" y="100">
                        <textpath xlink:href="#myTextPath">
                            <tspan x="100">
                                城镇人口
                            </tspan>
                            <tspan dy="15" x="110">
                                53.8%
                            </tspan>
                        </textpath>
                        <textpath xlink:href="#myTextPath2">
                            <tspan x="100">
                                乡村人口
                            </tspan>
                            <tspan dy="15" x="110">
                                46.2%
                            </tspan>
                        </textpath>
                    </text>
                </svg>
            </div>
            <div class="center-txt">
                <div>
                    <span class="orangefont">
                        A城总人口
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="outbox outbox2">
            <!--–饼图–-->
            <div class="pie">
                34.56%
            </div>
            <!--–饼图内文字,tspan内的百分比根据实际百分比手动修改–-->
            <div>
                <svg xmlns="http://www.w3.org/2000/svg">
                    <defs>
                        <path d="M-4,101 a1,1 0 0,1 166,0" id="myTextPath">
                        </path>
                    </defs>
                    <text style="text-anchor:start;font-size: 12px; fill:white;letter-spacing: 0.5px;" y="100">
                        <textpath xlink:href="#myTextPath">
                            <tspan x="100">
                                鲜果类占比
                            </tspan>
                            <tspan dy="15" x="110">
                                34.56%
                            </tspan>
                        </textpath>
                    </text>
                </svg>
            </div>
            <div class="center-txt">
                <div>
                    <span>
                        市场农副产品消费总额
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
.orangefont{color:#F96E3E;}
        .pie{
 
            border-radius:50%;
 
 
 
        }
        .outbox1 .pie{background: #FFBD5C;background-image:linear-gradient(to right,transparent 50%,#F96E3E 0);}
        .outbox2 .pie{background: #31BD48;background-image:linear-gradient(to right,transparent 50%,#FFBD5C 0);}
 
        .pie::before{
                content:";
                display: block;
                margin-left: 50%;
                height:100%;
                border-radius:0 100% 100% 0 / 50%;
                background-color:inherit;
                transform-origin:left;
                animation:spin 50s linear infinite,
                          bg 100s step-end infinite;
                animation-play-state: paused;
                animation-delay:inherit;
          }
            .outbox1 .pie::before{animation:spin 50s linear infinite,
                          bg1 100s step-end infinite;
                          animation-play-state: paused;
                          animation-delay:inherit;}
          @keyframes spin{
               to{transform: rotate(.5turn);}
          }
          @keyframes bg{
              50%{background: #FFBD5C;}
           }
          @keyframes bg1{
              50%{background: #F96E3E;}
           }
 
           .outbox{position: relative;}
           .outbox>div{position: absolute;left:0;right:0;}
           .outbox>div,svg{width:160px;height:160px;}
 
           .center-txt{
           display: -webkit-box;
           display: -moz-box;
           display: -ms-flexbox;
           display: -webkit-flex;
           display: flex;
           justify-content:center;
                align-items:center;
            }
           .center-txt>div{
            width:80px;
            height:80px;
            background:#fff;
            border-radius:50%;
            color:#31BD48;
 
           display: -webkit-box;
           display: -moz-box;
           display: -ms-flexbox;
           display: -webkit-flex;
           display: flex;
           justify-content:center;
           align-items:center;
           text-align: center;
 
        }
 
        .container-pie{overflow: hidden;display: -webkit-box;
           display: -moz-box;
           display: -ms-flexbox;
           display: -webkit-flex;
           display: flex;
           justify-content:space-around;
           align-content:space-around;
           }
        .container{width:160px;height:160px;float:left;margin:0 0%;}

JS :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function $$(selector, context) {
context = context || document;
var elements = context.querySelectorAll(selector);
return Array.prototype.slice.call(elements);
}

$$('.pie').forEach(function(pie) {
var p = pie.textContent;
var pf = parseFloat(p) / 100;
var pr = pf * 360 / 2;
console.log(pr);
pie.style.transform = "rotateZ(-" + pr +"deg)";
pie.style.animationDelay = '-' + parseFloat(p) + 's';

pie.textContent = "";

});

多tab切换标签 | 通用js代码

目的:通用js代码整理,本次抽出常用的tab切换js特效,实例包含一级、二级分类。

代码:

HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<ul class="main-ul">
    <li class="in">主一</li>
    <li>主二</li>
</ul>
<div class="main-tab">
<ul class="sub-ul">
    <li class="on">一A</li>
    <li>一B</li>
    <li>一C</li>
</ul>
<div class="sub-tab">我是一A:11111</div>
<div class="sub-tab dn">我是一B:2222</div>
<div class="sub-tab dn">我是一C:3333</div>
</div>
<div class="main-tab dn">
<ul class="sub-ul">
    <li class="on">二A</li>
    <li>二B</li>
    <li>二C</li>
</ul>
<div class="sub-tab">我是二A:4444</div>
<div class="sub-tab dn">我是二B:5555</div>
<div class="sub-tab dn">我是二C:6666</div>
</div>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
ul{
list-style-type:none;
display:flex;
width:300px;
}
li{
border:1px solid;
text-align:center;
padding:1%;
flex:1;
}

.on{background: #FFE4B5;}
.in{background: #AEEEEE;}

.dn{display:none;}

JS:(需引入jQuery)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(function(){
$(".main-ul li").click(function(){
var index = $(this).index();

$(this).addClass("in").siblings("li").removeClass("in");
var $maintab = $(this).parent().siblings(".main-tab").eq(index);
$maintab.show().siblings(".main-tab").hide();
});
$(".sub-ul li").click(function(){
var index = $(this).index();

$(this).addClass("on").siblings("li").removeClass("on");
var $subtab = $(this).parent().siblings(".sub-tab").eq(index);
$subtab.show().siblings(".sub-tab").hide();
});
})

python开启本地Web服务器

python_web_server

python_web_server

1.安装python3.6

2. 在相应文件目录地址栏敲击cmd

3.输入:python -m SimpleHTTPServer

PS:(1) 如果提示 No module named SimpleHTTPServer则

输入:python -m http.server

会默认端口 8000

(2) 如果提示: ”python” 不是内部或外部命令,也不是可运行的程序
或批处理文件,则按了、下列步骤操作:

[1]使用系统目录方式进入cmd(win+R==>cmd)

[2]输入python确认环境变量已配置,未配置的去配置Python环境变量

[3]cd到当前目录下(如:cd /d D:\Code)

[4]重新输入python -m http.server即可

 

4.保证本地目录包含index.html之类的首页文件,谷歌浏览器地址栏输入:http://localhost:8000/即可访问