NodeJs前端构建工具 ——————之Grunt篇

2024-04-21 18:16•杂谈•阅读 1918

为何使用grunt?

一句话：自动化。对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。

Grunt生态系统非常庞大，并且一直在增长。由于拥有数量庞大的插件可供选择，因此，你可以利用Grunt自动完成任何事，并且花费最少的代价。

常用插件

grunt-contrib-uglifyby
Js压缩插件
grunt-contrib-cssminby
Css压缩插件
grunt-contrib-jshintby
Js代码检测插件：检测标注javascript代码中的出错和规范问题
grunt-contrib-watch
监控文件插件：每当文件发生修改,自动运行grunt任务，如自动检测代码
grunt-jsdoc
文档生成插件：根据项目自动生成js文档
grunt-browserify
javascript模块管理,browserify使用node comnonjs规范,让前端也能使用15万个node插件
grunt-karma
单元测试框架
jasmine-core
单元测试内核
phantomjs
单元测试模拟环境

如何搭建grunt?

安装准备:

1.下载安装NodeJs

2.将NodeJs资源提取路径从NPM移到CNPM，CNPM下载点在国内，速度更快。

npm install -g cnpm --registry=https://registry.npm.taobao.org

3.在任意位置新建文件夹demo

开始安装Grunt:

cnpm install -g grunt-cli

先将Grunt命令行（CLI）安装到全局环境中。安装时可能需要使用sudo（针对OSX、*nix、BSD等系统中）权限或者作为管理员（对于Windows环境）来执行以下命令。

注意：安装grunt-cli并不等于安装了 Grunt！Grunt CLI的任务很简单：调用与Gruntfile在同一目录中 Grunt。这样带来的好处是，允许你在同一个系统上同时安装多个版本的 Grunt。

添加 Grunt 项目配置文件夹

在demo文件夹中添加两份文件：package.json 和 Gruntfile。

package.json: 此文件被npm用于存储项目的元数据，以便将此项目发布为npm模块。你可以在此文件中列出项目依赖的grunt和Grunt插件，放置于devDependencies配置段内。

{
     "name": "my-project-name",
     "version": "0.1.0",
     "devDependencies": {
     }
 }

Gruntfile.js: 此文件被命名为 Gruntfile.js 或 Gruntfile.coffee，用来配置或定义任务（task）并加载Grunt插件的。

安装Grunt

cnpm install grunt --save-dev

进入下一章节

开始第一个grunt项目基础（一）合并js文件

安装grunt插件:grunt-contrib-concat

cnpm install grunt-contrib-concat --save-dev

创建代码开发(src)和构建(build)文档

—demo
  |-build
  |-src
  |-Gruntfile.js
  |-package.js

配置grunt配置文件Gruntfile.js

module.exports = function(grunt) {
    // Grunt 配置.
    grunt.initConfig({
        concat: {
            options: {
            //定义一个字符串插入每个文件之间用于连接输出
                separator: ';'
            },
            dist: {
                src: ['src/*.js'],
                dest: 'build/main.total.js',
            }
        }
    });
    // 加载包含 "uglify" 任务的插件。grunt.loadNpmTasks('grunt-contrib-concat');
    // 默认被执行的任务列表。
    grunt.registerTask('default', ['concat']);
};

运行grunt，构建代码

grunt

进入下一章节

开始第一个grunt项目基础（）压缩js

安装grunt插件:grunt-contrib-uglify

cnpm install grunt-contrib-uglify --save-dev

配置grunt配置文件Gruntfile.js

module.exports = function(grunt) {
    //Grunt 配置.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        //合并js
        concat: {
            options: {
                //定义一个字符串插入每个文件之间用于连接输出
                separator: ';'
            },
            dist: {
                src: ['src/*.js'],
                dest: 'build/main.total.js',
            }
        },
        //压缩js
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build: {
                src: 'build/<%= pkg.name %>.js',
                dest: 'build/<%= pkg.name %>.min.js'
            }
        },
    });
    // 加载包含 "concat" 任务的插件。
    grunt.loadNpmTasks('grunt-contrib-concat');
    // 加载包含 "uglify" 任务的插件。
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // 默认被执行的任务列表。
    grunt.registerTask('default', ['concat','uglify']);
};

运行grunt，构建代码

grunt

进入下一章节

开始第一个grunt项目基础（）代码规范检测

安装grunt插件:grunt-contrib-jshint

cnpm install grunt-contrib-jshint --save-dev

配置grunt配置文件Gruntfile.js

module.exports = function(grunt) {
    // Project configuration.
    grunt.initConfig({pkg: grunt.file.readJSON('package.json'),
        //合并js
        concat: {
            options: {
                //定义一个字符串插入每个文件之间用于连接输出
                separator: ';'
            },
            dist: {
                src: ['src/*.js'],
                dest: 'build/main.total.js',
            }
        },
        //压缩js
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build: {
                src: 'build/<%= pkg.name %>.js',
                dest: 'build/<%= pkg.name %>.min.js'
            }
        },
        //代码检测
        jshint: {
            files: ['src/*.js'],
            options: {
                "strict": true,
                "globalstrict"  : true,
                "node":true,
                "browser":true,
                globals: {
                    exports: true
                }
            }
        }
    });
    // 加载 "concat" 任务的插件。
    grunt.loadNpmTasks('grunt-contrib-concat');
    // 加载 "uglify" 任务的插件。
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // 加载包含 "jshint" 任务的插件。
    grunt.loadNpmTasks('grunt-contrib-jshint');
    // 默认被执行的任务列表。
    grunt.registerTask('default', ['concat','uglify','jshint']);
};

运行grunt，构建代码

grunt

开始第一个grunt项目基础（）开启自动检测

安装grunt插件:grunt-contrib-watch

cnpm install grunt-contrib-watch --save-dev

配置grunt配置文件Gruntfile.js

module.exports = function(grunt) {
    // Project configuration.
    grunt.initConfig({pkg: grunt.file.readJSON('package.json'),
        //合并js
        concat: {
            options: {
                //定义一个字符串插入每个文件之间用于连接输出
                separator: ';'
            },
            dist: {
                src: ['src/*.js'],
                dest: 'build/main.total.js',
            }
        },
        //压缩js
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build: {
                src: 'build/<%= pkg.name %>.js',
                dest: 'build/<%= pkg.name %>.min.js'
            }
        },
        //代码检测
        jshint: {
            files: ['src/*.js'],
            options: {
                "strict": true,
                "globalstrict"  : true,
                "node":true,
                "browser":true,
                globals: {
                    exports: true
                }
            }
        },
        watch: {
            scripts: {
                files: ['<%= jshint.files %>'],
                tasks: ['jshint'],
                options: {
                    spawn: false,
                },
            },
        },
    });
    // 加载包含 "concat" 任务的插件。
    grunt.loadNpmTasks('grunt-contrib-concat');
    // 加载包含 "uglify" 任务的插件。
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // 加载包含 "jshint" 任务的插件。
    grunt.loadNpmTasks('grunt-contrib-jshint');
    // 加载包含 "watch" 任务的插件。
    grunt.loadNpmTasks('grunt-contrib-watch');//grunt watch
    // 默认被执行的任务列表。
    grunt.registerTask('default', ['concat','uglify','jshint']);
};

开启自动检测

grunt watch

这时候修改src文件夹中内容，则会自动检测代码

开始第一个grunt项目提高（）Js模块化之browserify

安装grunt插件:grunt-browserify

cnpm install grunt-browserify --save-dev

配置grunt配置文件Gruntfile.js

module.exports = function(grunt) {
    // Project configuration.
    grunt.initConfig({pkg: grunt.file.readJSON('package.json'),
        //合并js
        concat: {
            options: {
                //定义一个字符串插入每个文件之间用于连接输出
                separator: ';'
            },
            dist: {
                src: ['src/*.js'],
                dest: 'build/main.total.js',
            }
        },
        //压缩js
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build: {
                src: 'build/<%= pkg.name %>.js',
                dest: 'build/<%= pkg.name %>.min.js'
            }
        },
        //代码检测
        jshint: {
            files: ['src/*.js'],
            options: {
                "strict": true,
                "globalstrict"  : true,
                "node":true,
                "browser":true,
                globals: {
                    exports: true
                }
            }
        },
        watch: {
            scripts: {
                files: ['<%= jshint.files %>'],
                tasks: ['jshint'],
                options: {
                    spawn: false,
                },
            },
        },
        browserify: {
            options: {
                browserifyOptions: {
                    debug: true
                }
            },
            demo:{
                files: {
                    './src/app/build/app.js': ['./src/app/app.main.js']
                }
            }
        },
    });
    // 加载包含 "concat" 任务的插件。
    grunt.loadNpmTasks('grunt-contrib-concat');
    // 加载包含 "uglify" 任务的插件。
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // 加载包含 "jshint" 任务的插件。
    grunt.loadNpmTasks('grunt-contrib-jshint');
    // 加载包含 "watch" 任务的插件。
    grunt.loadNpmTasks('grunt-contrib-watch');//grunt watch
    //加载包含 "browserify" 任务的插件。
    grunt.loadNpmTasks('grunt-browserify');
    // 默认被执行的任务列表。
    grunt.registerTask('default', ['concat','uglify','jshint']);
    grunt.registerTask('app', ['browserify:demo']);
};

创建demo的js文件

app.main.js、a.js

—demo
  |-build
     |-index.html
  |-src
     |-app.main.js
     |-a.js
  |-Gruntfile.js
  |-package.js

app.main.js

'use strict';
var A=require("./a");

function app(){
    this.a=new A();
}
app.prototype={
    init      : function () {
        this.a.say();
    }
};

module.exports=app;
var base = new app();
base.init();

a.js

'use strict';
function a(){
}
a.prototype={
    say      : function () {
        console.log("hello world!");
    }
};

module.exports=a;

index.html

<!DOCTYPE html>
<html>
<head >
    <meta charset="UTF-8">
    <meta name="manifest" content="version.json|manifest.json" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta content="telephone=no" name="format-detection" />
    <title>平安</title>
</head>
<body>
<header></header>
<div >123</div>
<div ></div>
<script src="./app.js"></script>
</body>
</html>

编译开发代码生成上线代码

grunt app

开始第一个grunt项目提高（）单元测试

安装grunt插件:grunt-karma,karma-browserify,karma-jasmine

cnpm install grunt-karma --save-dev
cnpm install karma-browserify --save-dev
cnpm install karma-jasmine --save-dev

配置grunt配置文件Gruntfile.js

module.exports = function(grunt) {
    // Project configuration.
    grunt.initConfig({pkg: grunt.file.readJSON('package.json'),
        //合并js
        concat: {
            options: {
                //定义一个字符串插入每个文件之间用于连接输出
                separator: ';'
            },
            dist: {
                src: ['src/*.js'],
                dest: 'build/main.total.js',
            }
        },
        //压缩js
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build: {
                src: 'build/<%= pkg.name %>.js',
                dest: 'build/<%= pkg.name %>.min.js'
            }
        },
        //代码检测
        jshint: {
            files: ['src/*.js'],
            options: {
                "strict": true,
                "globalstrict"  : true,
                "node":true,
                "browser":true,
                globals: {
                    exports: true
                }
            }
        },
        watch: {
            scripts: {
                files: ['<%= jshint.files %>'],
                tasks: ['jshint'],
                options: {
                    spawn: false,
                },
            },
        },
        karma: {
            unit: {
                configFile: 'karma.conf.js'
            }
        },
        browserify: {
            options: {
                browserifyOptions: {
                    debug: true
                }
            },
            demo:{
                files: {
                    './src/app/build/app.js': ['./src/app/app.main.js']
                }
            }
        },
    });
    // 加载包含 "concat" 任务的插件。
    grunt.loadNpmTasks('grunt-contrib-concat');
    // 加载包含 "uglify" 任务的插件。
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // 加载包含 "jshint" 任务的插件。
    grunt.loadNpmTasks('grunt-contrib-jshint');
    // 加载包含 "watch" 任务的插件。
    grunt.loadNpmTasks('grunt-contrib-watch');//grunt watch
    //加载包含 "browserify" 任务的插件。
    grunt.loadNpmTasks('grunt-browserify');
    grunt.loadNpmTasks('grunt-karma');//grunt karma *****
    // 默认被执行的任务列表。
    grunt.registerTask('default', ['concat','uglify','jshint']);
    grunt.registerTask('app', ['browserify:demo']);
};

创建单元测试的js文件

app.main.js、a.js

—demo
  |-build
     |-index.html
  |-src
     |-app.main.js
     |-a.js
  |-test
     |-unit.js
     |-demo.js
  |-Gruntfile.js
  |-karma.conf.js
  |-package.js

karma.conf.js

// Karma configuration
// Generated on Wed Sep 16 2015 17:29:29 GMT+0800 (CST)

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['browserify','jasmine'],


    // list of files / patterns to load in the browser
    files: [
      {pattern:'./test/**/*.js'}
    ],


    // list of files to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors    : {
      './test/**/*.js' : ['browserify'],
    },

    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['PhantomJS'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false
  })
}

unit.js

var methods = require("../demo");
var methdo = new methods();


describe("methods tests", function ()
{
    it("should return 3", function ()
    {
        expect(methdo.add(1,2)).toBe(3);
    });
    it("should return 5", function ()
    {
        expect(methdo.add(2,2)).toBe(4);
    });
});

demo.js

/**
 * Created by haoyuandai on 15/9/18.
 */
function math(){

}
math.prototype={
 add:function(a,b){
    return a+b;
}
}
module.exports = math;

运行单元测试

grunt karma

开始第一个grunt项目提高（）自动为代码生成API文档

安装grunt插件:grunt-jsdoc

cnpm install grunt-jsdoc --save-dev

配置grunt配置文件Gruntfile.js

module.exports = function(grunt) {
    // Project configuration.
    grunt.initConfig({pkg: grunt.file.readJSON('package.json'),
        //合并js
        concat: {
            options: {
                //定义一个字符串插入每个文件之间用于连接输出
                separator: ';'
            },
            dist: {
                src: ['src/*.js'],
                dest: 'build/main.total.js',
            }
        },
        //压缩js
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build: {
                src: 'build/<%= pkg.name %>.js',
                dest: 'build/<%= pkg.name %>.min.js'
            }
        },
        //代码检测
        jshint: {
            files: ['src/*.js'],
            options: {
                "strict": true,
                "globalstrict"  : true,
                "node":true,
                "browser":true,
                globals: {
                    exports: true
                }
            }
        },
        watch: {
            scripts: {
                files: ['<%= jshint.files %>'],
                tasks: ['jshint'],
                options: {
                    spawn: false,
                },
            },
        },
        karma: {
            unit: {
                configFile: 'karma.conf.js'
            }
        },
        browserify: {
            options: {
                browserifyOptions: {
                    debug: true
                }
            },
            demo:{
                files: {
                    './src/app/build/app.js': ['./src/app/app.main.js']
                }
            }
        },
        //生成API文档
        jsdoc : {
            dist : {
                src: ['src/*.js'],
                options: {
                    destination: 'doc'
                }
            }
        }
    });
    // 加载包含 "concat" 任务的插件。
    grunt.loadNpmTasks('grunt-contrib-concat');
    // 加载包含 "uglify" 任务的插件。
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // 加载包含 "jshint" 任务的插件。
    grunt.loadNpmTasks('grunt-contrib-jshint');
    // 加载包含 "watch" 任务的插件。
    grunt.loadNpmTasks('grunt-contrib-watch');//grunt watch
    //加载包含 "browserify" 任务的插件。
    grunt.loadNpmTasks('grunt-browserify');
    grunt.loadNpmTasks('grunt-karma');//grunt karma *****
    grunt.loadNpmTasks('grunt-jsdoc');
    // 默认被执行的任务列表。
    grunt.registerTask('default', ['concat','uglify','jshint']);
    grunt.registerTask('app', ['browserify:demo']);
};

生成接口文档

grunt jsdoc

小技巧

部分功能IE9以下可能不支持哟

如何让客户端加载服务器字体文件？

css中@font-face 能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。

@font-face ：{属性: 取值;}

@font-face{
    font-family：//设置文本的字体名称。
    font-style：//设置文本样式。
    font-variant：//设置文本是否大小写。
    ont-weight：//设置文本的粗细。
    font-stretch：//设置文本是否横向的拉伸变形。
    font-size：//设置文本字体大小。
    src：//设置自定义字体的相对路径或者绝对路径，注意，此属性只能在@font-face规则里使用。
}

如何在页面做一条（小于1px）很细的线

body{
    background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'> <rect fill='#c1c1c1' x='0' y='0' width='0.75' height='100%'/> <rect fill='#c1c1c1' x='99.8%' y='0' width='0.75' height='100%'/> </svg>");
    background-position-x: 0;
    background-position-y: 100%;
    background-repeat: no-repeat;
    border-bottom: 0;
}

如何让页面在ios上滚动的顺滑

添加css：

body{
    -webkit-overflow-scrolling: touch;
}

如何解决ios上点击300毫秒延迟问题

使用fastclickJs模块

<script type='application/javascript' src='/path/to/fastclick.js'></script>
if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
            FastClick.attach(document.body);
    }, false);
}

如何将特殊的表情字符传到服务器上

使用nodeJs－base64 模块

var base64=require('base64-coder-node')();
var name = 'emojsay%3fwqUds';
name= base64.encode(name);//string转base64
name= base64.decode(name);//base64转string

修复 iOS 下微信浏览器设置页面标题未生效

/**
 * @function
 * @description 修复 iOS 下设置页面标题未生效。调用方法，设置 document.title = 'Title';，后调用 updatePageTitleiOS();
 * @memberof WeChatHelper.prototype
 */
function updatePageTitleIniOS(title){
    ////iframe 加载后的回调函数
    //function unloadHandler(){
        //document.body.removeChild(ifrm);
    //}
    document.title = title;
    //创建 iframe
    var ifrm = document.createElement('iframe');
    //iframe 指向图标文件
    ifrm.src = '/favicon.ico';
    ifrm.style.position = 'absolute';
    ifrm.style.top = '-1000px';
    //绑定回调函数
    //ifrm.addEventListener('load', unloadHandler);
    ifrm.addEventListener('load', function () {
        ifrm.removeEventListener('load');
        setTimeout(function(){
                document.body.removeChild(ifrm);
        },10);
    });
    //添加 iframe 至文档中
    document.body.appendChild(ifrm);
}

通过冒泡来监听父级元素下多个自元素

loadList = document.getElementById("loadList");
    loadList.addEventListener("click", function (e) {
    var thisLi;
    thisLi = e.target.parentNode.parentNode.parentNode;
    var par = thisLi.className;
    var items = par.toString().split(' ');
    switch (items[1]) {
        case "1":
            var params = '{"idApplicant": "' + items[2] + '","claimType": "' + items[1] + '","toaTaskNo": "' + items[3] + '"}';
            router.navigate("wcOnlineClaimInfo/" + params);
            break;
        case "2":
            var params = '{"idApplicant": "' + items[2] + '","claimType": "' + items[1] + '","docuNo": "' + items[3] + '"}';
            router.navigate("wcOfflineClaimInfo/" + params);
            break;
    }
}, true);

Doc中 Class 操作

javascript根据 class名称来获取dom对象

getElementsByClassName('className')

classList操作

body.classList.length //获取类名的数量
body.classList.item(num) //根据num获取元素的类名
body.classList.add('className') //增加元素的类
body.classList.remove('className') //删除元素的类
body.classList.contains('className') //检测元素是否包含某个类
body.classList.toggle('className') //存在即删除不存在即添加

掌控this

Function.prototype.bind的作用

this.a=1;
document.body.addEventListener('click',function(e){
    alert(e.target);
    alert(this.a);//undefined
});
//document.body.addEventListener('click',function(e){
//    alert(e.target);
//    alert(this.a);//1
//}.bind(this));

上一篇 »JavaScript之子类构建工具
下一篇 »bootstrap学习起步篇：初识bootstrap之html5语法构建hello篇，一

NodeJs前端构建工具 ——————之Grunt篇

为何使用grunt?

常用插件

如何搭建grunt?

安装准备:

开始安装Grunt:

添加 Grunt 项目配置文件夹

安装Grunt

进入下一章节

开始第一个grunt项目 基础（一）合并js文件

安装grunt插件:grunt-contrib-concat

创建代码开发(src)和构建(build)文档

配置grunt配置文件Gruntfile.js

运行grunt，构建代码

进入下一章节

开始第一个grunt项目 基础（）压缩js

安装grunt插件:grunt-contrib-uglify

配置grunt配置文件Gruntfile.js

运行grunt，构建代码

进入下一章节

开始第一个grunt项目 基础（）代码规范检测

安装grunt插件:grunt-contrib-jshint

配置grunt配置文件Gruntfile.js

运行grunt，构建代码

开始第一个grunt项目 基础（）开启自动检测

安装grunt插件:grunt-contrib-watch

配置grunt配置文件Gruntfile.js

开启自动检测

开始第一个grunt项目 提高（）Js模块化之browserify

安装grunt插件:grunt-browserify

配置grunt配置文件Gruntfile.js

创建demo的js文件

app.main.js

a.js

index.html

编译开发代码生成上线代码

开始第一个grunt项目 提高（）单元测试

安装grunt插件:grunt-karma,karma-browserify,karma-jasmine

配置grunt配置文件Gruntfile.js

创建单元测试的js文件

karma.conf.js

unit.js

demo.js

运行单元测试

开始第一个grunt项目 提高（）自动为代码生成API文档

安装grunt插件:grunt-jsdoc

配置grunt配置文件Gruntfile.js

生成接口文档

小技巧

如何让客户端加载服务器字体文件？

如何在页面做一条（小于1px）很细的线

如何让页面在ios上滚动的顺滑

如何解决ios上点击300毫秒延迟问题

如何将特殊的表情字符传到服务器上

修复 iOS 下微信浏览器设置页面标题未生效

通过 冒泡 来监听 父级元素下 多个自元素

Doc中 Class 操作

掌控this

相关推荐

nodejs 前端工具总结

前端自动化构建之webpack

18-vue之webpack

webpack loader实现

前端面试题整理—Webpack+Git篇

nodejs、npm、grunt——名词解释

nodejs直接调用grunt，非调用批处理

webpack构建vue项目，配置篇

开始第一个grunt项目基础（一）合并js文件

开始第一个grunt项目基础（）压缩js

开始第一个grunt项目基础（）代码规范检测

开始第一个grunt项目基础（）开启自动检测

开始第一个grunt项目提高（）Js模块化之browserify

开始第一个grunt项目提高（）单元测试

开始第一个grunt项目提高（）自动为代码生成API文档

通过冒泡来监听父级元素下多个自元素