Sparkler123的博客

这是一个基于脚手架create-next-app 的应用// package.json"scripts": { "dev": "node ./server.js", "build": "next build", "start": "next start", "test": "jest" }, "dependencies": { "@zeit/next-css": "^1.0.1", "@zeit/next-less": "^1.0.1",.

1. 安装依赖：npm i mocker-api -D2. 在development模式对应的webpack配置下添加：before(app, server) { // console.log('MOCK', process.env) if(process.env.MOCK) { // mocker-api apiMocker(app, path.resolve(__dirname, '../mock')) }}3. 添加对应的mock数据接口：// moc

1. ReactNative pod install卡在boost-for-react-native解决办法：在ios目录下Podfile文件中，头部加入以下代码，再pod install就可以下载下来了。pod 'boost-for-react-native', :git => 'https://gitee.com/damon-s/boost-for-react-native.git’2. 启动时报：java.lang.NoClassDefFoundError: Could not i

工厂模式：const ALL = 0;/** * 枚举工厂 */export function enumFactory(arr = []) { const TEMP_ENUM = { ALL: ALL, EXTRA: { [ALL]: { label: '全部', value: ALL }, }, OPTIONS: [{ label:...

防抖：控制最小执行间隔时间，在 指定的时间内 如果 再次触发 则刷新定时器。连续触发只执行一次。节流：控制最小执行间隔时间，在 指定的时间内 如果 再次触发 则当前触发失效。连续触发至少执行一次，执行次数 = 触发的总时长 / 间隔时间。...

在chrome或者小程序中多行文本超出2行时显示省略字符...: .elli-text { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; // 显示两行} ...

gulpfile.js 配置文件:const gulp = require('gulp');const { watch } = require('gulp');const less = require('gulp-less');const rename = require('gulp-rename');gulp.task('Less', function () { gul...

项目目录：package.json 文件配置：{ "name": "webpack-test", "version": "1.0.0", "description": "", "main": "./src/index.js", "scripts": { "dev": "webpack-dev-server --open --watch --config w...

项目根目录下创建：jsconfig.json{ "compilerOptions": { "baseUrl": "./", "paths": { "@hoc/*": ["src/hoc/*"] } }, "exclude": ["node_modules", "dist"]}

概念：模块打包工具 安装：npm i webpack webpack-cli -D 默认配置文件：webpack.config.js 模块解析依赖树支持语法(js)： ES Module (export -> import) 同步加载模块：CommonJs ( module.exports -> require) eg: nodejs 注： 异步加载模块： AMD...

在config/plugin.config.js中添加如下代码：config.module .rule('compile') .test(/\.(js|jsx)$/) .include .add(path.join(__dirname, '../node_modules/npm-package-name')) .end() ...

webpack 配置：node_modules 中 js/jsx 加载器配置：{ test: /\.(js|jsx)?$/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env', '@babel/preset-react'], plugins: [...

// 安装依赖// npm install -g grunt-cli// npm install --save-dev grunt// npm install --save-dev grunt-contrib-less// npm install --save-dev grunt-contrib-watch// 在项目根目录新建此文件：Gruntfile.js// 终端执行> ...

server { listen 80; #port server_name ${hostname || ip}; gzip on; gzip_min_length 1k; gzip_comp_level 9; gzip_types text/plain application/javascript application/x-javascript ...

function run(gen) { var args = [].slice.call(arguments, 1), it; // 在当前上下文中初始化生成器 it = gen.apply(this, args); // 返回一个Promise用于生成器完成 return Promise.resolve() .then(function...

当第三方提供的回调参数是数组，我们想转成参数列表时：function funWithCB(cb) { var arr = [1, 2]; cb(arr);}funWithCB(Function.apply.bind(function(arg1, arg2) { console.log(arg1 + arg2); // 3}, null));// 与下面同理function ...

// polyfill安全的guard检查if(!Promise.map) { Promise.map = function(vals, cb) { return Promise.all( vals.map(function(val) { return new Promise(function(resolve) {...

前端：webpack.prod.config.js 配置：webpack.DefinePlugin配置说明plugins: [ // ... new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }), // ...]webpack...

项目目录结构：1.package.json配置:{ // ... "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "webpack-dll": "webpack --config ./webpack.dll.conf.js", "build": "...

Less 最基本和重要的概念： 变量、扩展、混合（带参数的混合、作为函数使用的混合、传递规则集给混合）第一条：extend VS mixin:nav ul { &:extend(.inline); background: blue;}.inline { color: red;}// outputnav ul { background: ...

+ module rules:[ Rule resource test exclude include resoueceQuery use loader ...

function prototypeInstance(superType) { function F(){} F.prototype = superType.prototype; return new F();}function inheritPrototype(subType, superType) { var prototypeIns = prototy...

1. 相同类的两个组件将会生成相似的树形结构，而不同类的两个组件将会生成不同的树形结构。2. 可以为元素提供一个唯一的标识，确保该元素的唯一标识在不同的渲染过程中保持不变。...

总的规律：this 的绑定取决于调用位置！1. 默认绑定（独立函数调用）。function foo() { console.log(this.a);}var a = 2;foo(); // 22. 隐式绑定（调用位置有上下文对象,如例子中的 obj）-》当函数引用有上下文对象时，隐式绑定规则会把函数调用中的 this 绑定到这个上下文对象。function foo...

JS代码如下：function draw(ctx, rate) { ctx.clearRect(0,0,300,300); ctx.beginPath(); ctx.strokeStyle = "gray"; ctx.arc(150, 150, 100, (1/3)*Math.PI, (2/3)*Math.PI, true); ctx.stroke(); c...

1. 避免暴露内部数据逻辑(function(_this) { const COLOR = Symbol(); const RED = Symbol(); const GREEN = Symbol(); const BLUE = Symbol(); _this.COLOR_ENUM = { [COLOR]: { [RED]...

1. 数字中的小数点42.toFixed(3); // SyntaxError42..toFixed(3); // “42.000”42.toFixed(3)是无效语法，因为点号【.】被视为数字常量【42.】的一部分，所以没有【.】属性访问运算符来调用toFixed方法；2. + 可以字符强转数字var c = '3.14';var d = 5+ +c; // 8.14...

修改自身的操作有：pop、push、shift、unshift、reverse、sort、splice不修改自身的操作有：concat、join、slice

事件循环队列类似于一个游乐园游戏：玩过了一个游戏之后，你需要重新到队尾排队才能再玩一次。而任务队列（ES6）类似于玩过游戏之后，插队接着继续玩。...

// 用于超时一个Promise的工具function timeoutPromise(delay) { return new Promise( function(resolve, reject) { setTimeout(function(){ reject('Timeout'); }, delay); });}//...

Vuex使用store：this.$store.state更新store异步三步走：1. store.dispatch(actionFunStr) 2. actionFun({commit}) --> commit(mutationFunStr) 3.mutationFun(state) --> state同步：1. store.commit(m...