stick

stick 查看完整档案

杭州编辑杭州师范大学  |  计算机科学与技术 编辑  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

stick 发布了文章 · 2019-08-21

从Array到Null

Array

图片描述

问题1:isArray、from、of等方法前面不写prototype?

let a1 = [1, 2, 3]
console.dir(a1)
// 定义一个数组a1,并打印a1
// 确实没有isArray等方法

图片描述

问题2:a1既然是由构造函数Array()构造的实例,为什么没有继承Array的方法?

// 静态方法
// 只能通过 类/构造函数 本身调用
// 不能通过 实例 调用
class Array1 {
  static isArray() {  // ES6定义静态方法
    console.log('我是isArray方法')
  }
  map() {
    console.log('我是map方法')
  }
}
Array1.forEach = function() {  // ES6之前定义静态方法
  console.log('我是forEach方法')
}
let a1 = new Array1()
console.log('实例a1', a1)
// a1.isArray()
// 报错: a1.isArray is not a function

图片描述

再回头看 问题1

// 方法的调用方式
let a2 = [1, 2, 3]
a2.push(4)
Array.isArray(a2)

// 构造函数prototype 里的方法会被继承到实例里面
// Array的prototype 里的方法会被继承到实例a2里面
a2.__proto__ === Array.prototype
a2.__proto__.constructor === Array

// 1、构造函数为Array
// 2、原型对象为Array.prototype, 所有由Array生成的实例都会继承里面的方法
// 3、a2.__proto__ 指向原型对象
// 4、a2._proto__.constructor指向构造函数

Null

a2.__proto__.constructor // ƒ Array() { [native code] }
a2.__proto__.constructor === Array
// a2的构造函数为Array

Array.__proto__.constructor // ƒ Function() { [native code] }
Array.__proto__.constructor === Function
// Array的构造函数为Function

Function.__proto__.constructor // ƒ Function() { [native code] }
Function.__proto__.constructor === Function
// Function的构造函数为Function

Function.prototype.__proto__.constructor
Function.prototype.__proto__.constructor === Object
// ƒ Object() { [native code] }
// Function

Object.prototype.__proto__.constructor 
// Cannot read property 'constructor' of null
Object.prototype.__proto__ === null
查看原文

赞 1 收藏 0 评论 0

stick 关注了用户 · 2019-07-26

garrett @dpz5935

生命不在于你呼吸过多少次,而是那些令你怦然心动到无法呼吸的时刻

关注 1

stick 发布了文章 · 2019-01-02

css选择class中的第一个怎么选?使用first-of-type?

Dom结构

<div id="test">
    <span class="hha">我是span</span>
    <h1 class="hha">我是h1</h1>
    <h1>我是h1</h1>
    <h1 class="hha">我是h1</h1>
    <h1 class="hha">我是h1</h1>
    <h1>我是h1</h1>
</div>

1.指定标签

h1:first-of-type {
    color: red;
    // #test底下所有的h1找出来,其中第一个h1的字体颜色改为red;
}

2.指定class

.hha:first-of-type {
    color: blue;
    // 1.找到所有class为hha的标签,上面的Dom结构里有<h1>、<span>;
    // 2.找到Dom结构所有h1、span(为了方便理解记作list1,list2);
    // 3.如果list1、list2中第一个标签的class是hha,第一个class为hha的字体改为blue;
}

举一反三,下面的代码会把字体颜色改为orange?

.hha:last-of-type {
  color: orange;
}

以h1标签为例,所以第一步省略。
2.找到Dom结构里面的所有的h1标签(记作list3)

h1.png

3.如果list3最后一个元素的class为hha,把字体颜色改为orange

查看原文

赞 1 收藏 1 评论 0

stick 关注了专栏 · 2018-12-06

quanxi613

剑复春秋听夜雨,风华袖底始忘言。

关注 5

stick 收藏了文章 · 2018-07-26

如何发布一个npm包

如何发布一个npm包

演示:https://stardew516.github.io/...

一、准备工作

1.已经写好的小组件

vueui: https://github.com/stardew516...

2. npm包存放仓库

tinny-vue-ui: https://github.com/stardew516...

二、实现步骤

1. 准备一个写好的组件(vueui)

2. 新建一个github仓库(tinny-vue-ui),供npm使用。

新建时需要添加license:MIT,如下图所示

clipboard.png

3. git clone到本地,新建文件夹src,把写好的组件copy到src中,且src中添加index.es6,package.json放到根目录下,

配置.babelrc,.editorconfig,.eslintrc.js和.gitignore

clipboard.png

4. 配置package.json

  "scripts": {
    "build": "babel src -d lib"
  },

5. npm run build 打包

6. 注册npm(https://www.npmjs.com/signup

7. 进入tinny-vue-ui终端,输入npm adduser,依次输入注册信息,然后npm publish

8. https://www.npmjs.com/settings/username/packages 可以看到自己发布的包

三、使用

1. 使用npm install tinny-vue-ui --save 引入包文件

2. 页面中使用 import 组件 from 'tinny-vue-ui/src/组件' 引入

3. 使用发布的npm包做个小demo

tinnyVueUiDemo: https://github.com/stardew516...

四、可能遇到的问题

1.This package has been marked as private

解决:去掉package.json里的private: true

2. no_perms Private mode enable, only admin can publish this module:

解决:npm config set registry http://registry.npmjs.org

3. need auth auth required for publishing

npm ERR! need auth You need to authorize this machine using npm adduser

解决:
npm adduser
输入npm中注册的用户名 密码 邮箱
Username:
Password:
Email: (this IS public)
Logged in as ** on http://registry.npmjs.org/.

4. You do not have permission to publish "vueui". Are you logged in as the correct user? : vueui

解决:包名被占用,package.json改一个。
"name": “tinny-vue-ui”,重新build,发布。

npm notice name: tinny-vue-ui
npm notice version: 1.0.0
npm notice package size: 464.4 kB
npm notice unpacked size: 1.9 MB
npm notice shasum: 8495d12bd427fee1d4aa2f7b901a1dec8e71913e
npm notice integrity: sha512-JXBSxAEqr1Tk4[...]9q+H1iQUoHqNw==
npm notice total files: 181
npm notice
+ tinny-vue-ui@1.0.0

成功

5. publish Failed PUT 403

npm ERR! code E403

npm ERR! You cannot publish over the previously published #### versions: 1.0.8. : tinny-vue-ui

解决:版本号已经存在,package.json中换一个版本号。versions: 1.0.9

查看原文

stick 关注了用户 · 2018-07-25

ssshooter @ssshooter

关注 325

stick 发布了文章 · 2018-07-17

webpack代理--proxy

//webpack.config.js
proxy: {
            '/drink': {
                target: "http://xxx.26.xx.75:8010/channelFreeDrink/",
                changeOrigin:true,
                pathRewrite: {
                    '^/drink': ''
                }
            }
      }
//api.js
const sourcelist = ()=>{
    return new Promise((resolve,reject)=>{
        // fetch(window.YY_API + '/channelFreeDrink/activity').then(res => {
        fetch('/drink/activity').then(res => {
            if(res.status==200) return res.json()
        }).then(data=>{
            resolve(data)
        })
    })
}

图片描述
图中黄框跟黄框所对应(/drink),白框(/activity)在代理请求的时候会加在target所指的链接后面

查看原文

赞 5 收藏 3 评论 0

stick 发布了文章 · 2018-04-17

parcel打包vue

新建文件夹parcel-vue

yarn init -y //初始化package.json

安装依赖

yarn add vue parcel-bundler vue-template-compiler

新建index.html

//index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script data-original="./src/index.js"></script>
</body>
</html>

新建文件夹src,src下新建index.js、app.vue

//index.js

import Vue from 'vue'
import App from './app.vue'

new Vue({
    el: '#root',
    render: h => h(App)
})
//app.vue
<template>
    <div class="vuedemo">{{demo}}</div>
</template>

<script>
export default {
    data () {
        return {
            demo:"you win"
        }
    }
}
</script>

<style>
.vuedemo{
    color: #333;
    font-size: 36px;
}
</style>

使用parcel打包

parcel index.html
查看原文

赞 0 收藏 1 评论 0

stick 发布了文章 · 2018-04-09

从零开始的 webpack4 + vue2.x

新建文件夹 webpack-vue

安装依赖

yarn init  //初始化package.json
yarn add webpack webpack-cli   //添加webpack、webpack-cli

//ps:不知那个版本开始就需要安装webpack-cli了

新建index.html

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webpack v4</title>
</head>
<body>
    <div id="root"></div>
    <script data-original="dist/main.js"></script>
</body>
</html>

新建文件夹src,在src下新建index.js

// src/index.js
console.log('hello webpack v4');

第一次打包

//终端
webpack

你会发现目录底下多了dist文件夹里面有main.js,打开index.html 可以看到console里已经打印出了hello webpack v4,
在终端会有一个警告提示,大致意思是 没有设置mode将会使用生产模式,需要指定开发环境或者生产环境,打开dist/main.js,发现js确实是被压缩过的

//console
hello webpack v4

package.json

//package.json
...
"scripts":{
    "start":"--mode development",
    "build": "--mode production"
 }
...

第二次打包

yarn start   //开发环境
yarn build   //生产环境(压缩)

webpack-dev-server

手动打开浏览器太麻烦

//终端
yarn add webpack-dev-server   //添加webpack-dev-server
//修改index.html
<script data-original="main.js"></script>
//修改package.json
...
"scripts": {
    "start": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production"
  }
...

第三次打包

yarn start
自动打开浏览器了,
修改index.js试试

加入Vue

我们将一个一个解决问题,不会一次安装所有依赖

yarn add vue  //添加依赖

在src下面新建文件夹pages,在pages里面新建app.vue文件

//app.vue
<template>
    <section class="main">
        <p>我来了{{name}}</p>
    </section>
</template>

<script>
export default {
    data () {
        return {
            name:"vue + webpack"
        }
    }
}
</script>

<style>
.main>p{
    color: #000;
}
</style>

修改index.js

import Vue from 'vue'
import App from './pages/app.vue'

new Vue({
    el:"#root",
    render:h=>h(App)
})
//终端
yarn start

这时候可预见的报错来了,

Uncaught Error: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
//翻译:模块解析失败,您可能需要一个适当的加载程序来处理这个文件类型

看报错,我们一个个解决
搜索关键词,很容易发现是没有安装vue-loader,新建webpack.config.js

//webpack.config.js
module.exports = {
    module:{
        rules:[
            {test:/\.vue$/,use:'vue-loader'}
        ]
    }
}

vue-loader在15之后需要在webpack.config.js中当插件引入

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  // ...
  plugins: [
    new VueLoaderPlugin()
  ]
}
//终端
yarn start

再次报错

Uncaught Error: Module build failed: Error: Cannot find module 'vue-template-compiler'
...

很明显,要你安装vue-template-compiler

yarn add vue-template-compiler
//终端
yarn start

继续报错

Module not found: Error: Can't resolve 'css-loader'

提示安装css-loader

yarn add css-loader

bingo! webpack4+vue2第一个项目成功运行

从js中分离css

这时候细心的你发现css被塞到head里面,我们来把css分离出来。使用webpack的插件extract-text-webpack-plugin@next

yarn add extract-text-webpack-plugin@next

在webpack.config.js中添加插件

//webpack.config.js
const ExtractTextWebapckPlugin = require('extract-text-webpack-plugin');  //引入插件

module.exports = {
    module:{
        rules:[
            { 
                test: /\.vue$/, 
                loader: 'vue-loader',
                options: { 
                    loaders: { 
                        css: ExtractTextWebapckPlugin.extract({ use: 'css-loader' }) 
                    }
                }
            }
        ]
    },
    plugins:[
        new ExtractTextWebapckPlugin('style.css')
    ]
}

index.html引入css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webpack v4</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="root"></div>
    <script data-original="main.js"></script>
</body>
</html>
//终端
yarn build

打包完成后dist目录里面出现了main.js和style.css

处理图片

新建文件夹img,用来放图片

//app.vue
<template>
    <section class="main">
        <p>我来了{{name}}</p>
        <img data-original="../img/1.jpg" alt="">
    </section>
</template>

<script>
export default {
    data () {
        return {
            name:"vue + webpack"
        }
    }
}
</script>

<style>
.main>p{
    color: #000;
}
</style>
//终端
yarn start
//报错
./src/img/1.jpg
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.

基本可以看出来是图片有问题,没有loader处理图片

file-loader与url-loader

yarn add file-loader url-loader

修改webpack.config.js

//webpack.config.js
...
rule:[
    ...
    { 
        test: /\.(png|jpg|gif)$/, 
        use: [{ loader: 'url-loader',options: { limit: 8192 } }] 
    }
    ...
]
...
yarn start

打包成功...

webpack其余一些配置

resolve,watchOptions,devServer

//webpack.config.js
    resolve: {  //导入的时候不用写拓展名
        extensions: [' ', '.js', '.json', '.vue', '.scss', '.css']
    },
    watchOptions: {
        ignored: /node_modules/,
        aggregateTimeout: 300,//防止重复保存频繁重新编译,300ms内重复保存不打包
        poll: 1000  //每秒询问的文件变更的次数
    },
    devServer:{
        inline: true,
        compress: true,
        host: '127.0.0.1',
        port: 2500,
        historyApiFallback: true
    }
查看原文

赞 12 收藏 11 评论 5

stick 关注了用户 · 2018-03-26

司徒正美 @situzhengmei

穿梭于二次元与二进制间的魔法师( ̄(工) ̄) 凸ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้

关注 2128

认证与成就

  • 获得 23 次点赞
  • 获得 7 枚徽章 获得 0 枚金徽章, 获得 1 枚银徽章, 获得 6 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2017-01-06
个人主页被 407 人浏览