Jest

jest 是facebook推出的一款测试框架，集成了 Mocha，chai，jsdom，sinon等功能。 安装与配置

1
2
npm install --save-dev jest
npm install -g jest

  运行命令 jest 后会自动运行项目下所有.test.js和.spec.js这种格式的文件。涉及到运用 ES 或 react 的，要与babel相结合，加上.babelrc文件即可。jest的配置默认只需要在package.json中配置即可，当然也可以用独立的配置文件。 我们这里直接将 jest 的运行范围限定在test文件夹下，而不是全部，所以在package.json中加入如下配置：

1
2
3
"jest": {
    "testRegex": "/test/.*.test.jsx?$"
}

  注意到这里的匹配规则是正则表达式 基本用法 和之前介绍的 mocha 和 chai 的功能很像，甚至可以兼容部分 mocha 和 chai 的语法。可以这么写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React from 'react'
import { shallow } from 'enzyme'
import CommentItem from './commentItem'
 
describe('测试评论列表项组件', () => {
  // 这是mocha的玩法，jest可以直接兼容
  it('测试评论内容小于等于200时不出现展开收起按钮', () => {
    const propsData = {
      name: 'hj',
      content: '测试标题'
    }
    const item = shallow(<CommentItem {...propsData} />)
    // 这里的断言实际上和chai的expect是很像的
    expect(item.find('.btn-expand').length).toBe(0);
  })
  // 这是jest的玩法，推荐用这种
  test('两数相加结果为两个数字的和', () => {
    expect(3).toBe(3);
  });
}

  jest与eslint检测 如果看了上面的代码会发现我没有引用任何类似于

1
import *  from 'jest'

  的代码，而那个expect是没有定义的。 这段代码直接运行jest命令没有任何问题，但是eslint会检测出错，对于这种情况，我们可以再eslint配置文件.eslintrc中加入以下代码：

1
2
3
"env": {
    "jest": true
  },

  jest的断言 jest有自己的断言玩法。除了前面的代码中已经写到的

1
expect(x).toBe(y)//判断相等，使用Object.is实现

  还有常用的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
expect({a:1}).toBe({a:1})//判断两个对象是否相等
expect(1).not.toBe(2)//判断不等
expect(n).toBeNull(); //判断是否为null
expect(n).toBeUndefined(); //判断是否为undefined
expect(n).toBeDefined(); //判断结果与toBeUndefined相反
expect(n).toBeTruthy(); //判断结果为true
expect(n).toBeFalsy(); //判断结果为false
expect(value).toBeGreaterThan(3); //大于3
expect(value).toBeGreaterThanOrEqual(3.5); //大于等于3.5
expect(value).toBeLessThan(5); //小于5
expect(value).toBeLessThanOrEqual(4.5); //小于等于4.5
expect(value).toBeCloseTo(0.3); // 浮点数判断相等
expect('Christoph').toMatch(/stop/); //正则表达式判断
expect(['one','two']).toContain('one'); //不解释
 
function compileAndroidCode() {
  throw new ConfigError('you are using the wrong JDK');
}
 
test('compiling android goes as expected', () => {
  expect(compileAndroidCode).toThrow();
  expect(compileAndroidCode).toThrow(ConfigError); //判断抛出异常
}）

  更多断言玩法 jest的 mock 介绍了jest替代mocha和chai的部分，那么接下来就看看如何替代sinon。 下面是官网的示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function forEach(items, callback) {
  for (let index = 0; index < items.length; index++) {
   callback(items[index]);
  }
}
 
const mockCallback = jest.fn();
forEach([0, 1], mockCallback);
 
// 判断是否被执行两次
expect(mockCallback.mock.calls.length).toBe(2);
 
// 判断函数被首次执行的第一个形参为0
expect(mockCallback.mock.calls[0][0]).toBe(0);
 
// 判断函数第二次被执行的第一个形参为1
expect(mockCallback.mock.calls[1][0]).toBe(1);

  从上面可以看到这种玩法很类似于sinon的 sinon.spy()。当然也有类似于stub返回值的那种玩法，更多的请参考 jest mock的更多玩法 mock文件和css module的问题 如果js文件中引用了css或者本地其他文件，那么就可能测试失败。为了解决这个问题，同时也为了提高测试效率：

1
2
3
4
5
"jest": {
    "moduleNameMapper": {
     "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/test/config/fileMock.js",
     "\\.(css|less)$": "identity-obj-proxy"
}

  而fileMock.js文件内容为：

1
module.exports = 'test-file-stub';

  然后安装identity-obj-proxy即可：

1
npm install --save-dev identity-obj-proxy

  jest与别名 在webpack中经常会用到别名，而jest测试时，如果文件中引用了别名会出现找不到文件的问题。毕竟jest测试时没有经过webpack处理。对于以下玩法

1
2
3
4
5
resolve: {  
    alias: {  
        common: path.resolve(__dirname, 'plugins/common/')  
    }  
}

  可以通过

1
2
3
4
5
6
"jest": {
    "testRegex": "./src/test/.*.test.js$",
    "moduleNameMapper": {
      "^common(.*)$": "<rootDir>/plugins/common$1",
    }
}

  这个和之前 mock文件和css module的问题 一样，都是使用了moduleNameMapper这个属性 生成测试覆盖率报告 只需要在jest命令后加入 --coverage即可

1
jest --coverage

  13人点赞 前端单元测试 作者：我向你奔 链接：https://www.jianshu.com/p/eaaf07c1b88f […]

龙生   11 Dec 2019
View Details

安装cnpm后运行报cnpm : 无法加载文件 C:\Users\yizon\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本

安装cnpm：

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

安装完成后报错：无法加载文件 C:\Users\yizon\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本 解决：管理员身份运行power shell，再输入：

1
set-ExecutionPolicy RemoteSigned

输入A，回车   from:https://www.cnblogs.com/yifamily/p/11853259.html

龙生   11 Dec 2019
View Details

Vue.js是什么

Vue.js 是一个用于创建用户界面的开源 JavaScript 框架，也是一个创建单页应用的 Web 应用框架。旨在更好地组织与简化 Web 开发。Vue 所关注的核心是 MVC 模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。 Vue.js 是一款流行的 JavaScript 前端框架，旨在更好地组织与简化 Web 开发。Vue 所关注的核心是 MVC 模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。 历史 在为 AngularJS 工作之后，Vue 的作者尤雨溪开发出了这一框架。他声称自己的思路是提取 Angular 中为自己所喜欢的部分，构建出一款相当轻量的框架。Vue 最早发布于 2014 年 2 月。作者在 Hacker News、Echo JS 与 Reddit 的/r/javascript 版块发布了最早的版本。一天之内，Vue 就登上了这三个网站的首页。Vue 是 Github 上最受欢迎的开源项目之一。同时，在 JavaScript 框架/函数库中，Vue 所获得的星标数已超过 React，并高于 Backbone.js、Angular 2、jQuery 等项目。 特性 组件 组件是 Vue 最为强大的特性之一。为了更好地管理一个大型的应用程序，往往需要将应用切割为小而独立、具有复用性的组件。在 Vue 中，组件是基础 HTML 元素的拓展，可方便地自定义其数据与行为。 模板 Vue 使用基于 HTML 的模板语法，允许开发者将 DOM 元素与底层 Vue 实例中的数据相绑定。所有 Vue 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应式系统，在应用状态改变时，Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 响应式设计 响应式是指 MVC 模型中的视图随着模型变化而变化。在 Vue 中，开发者只需将视图与对应的模型进行绑定，Vue 便能自动观测模型的变动，并重绘视图。这一特性使得 Vue 的状态管理变得相当简单直观。 过渡效果 […]

龙生   11 Dec 2019
View Details

比较详细的采访 Vue 作者尤雨溪

原文链接： medium.freecodecamp.com image 我采访了尤雨溪，著名渐进式 JavaScript 框架 vuejs.org 的创造者。尤雨溪现通过 Patreon 平台众筹全职开发 Vue 的资金。他还曾在 Google 和 Meteor 工作过。 这篇文章 最初 发布在 Between the Wires，这是一个采访系列，专门采访那些为程序员开发产品的人。 和我们讲讲你的童年和你的家乡吧 好的，我出生在中国，我的家乡叫无锡，一个中等规模的城市，离上海很近。然后我在上海念了三年高中，因此经常两地来回跑。高中毕业后我去了美国念大学。我感觉我接触电脑比较早，但是我当时并没有真正开始编程。我对游戏更感兴趣，我在高中时，就经常玩 Flash，因为我非常喜欢制作互动的效果来讲述故事。 1996 年尤雨溪和他的第一台电脑 谈一谈你的第一次编程经历？ 「JavaScript 很吸引我，因为它能够快速构建一些东西并分享给别人。把它放在网上，通过一个网址，任何有浏览器的人都可以看到。这就是吸引我开始 Web 开发和 JavaScript 编程的原因。」 当我在美国上大学的时候，老实说，我不知道我想要做什么，而且我的专业是室内艺术和艺术史。当我快毕业时，我感觉很难找到和专业相关的工作。 我盘算着或许我可以去一个适合我的硕士课程，学习更多的技能。我去了 Parsons，读了一个美术设计和技术的硕士。这是一个非常好的专业，因为每个人都是既学习设计也学习编程。他们会教一些比如 openFrameworks，处理，动画算法之类的课程，而且你也必须写应用程序和交互界面。 Parsons 没有真正涉及很多的 JavaScript，但是 JavaScript 很吸引我，因为它能够快速构建一些东西并分享给别人。把它放在网上，通过一个网址，任何有浏览器的人都可以看到。这就是吸引我开始 Web 开发和 JavaScript 编程的原因。 当时 Chrome experiments 这个网站刚刚发布，我深深的被震撼了。我立即开始学习 JavaScript，并开始开发类似 Chrome experiments 的项目。我把这些项目放在我的简历上，然后被 Google 创意实验室的招聘人员注意到了。我加入了Five program。每年创意实验室会招五名应届毕业生，组成一个小组，一个人写文案，一个人搞技术，一个人做平面设计，一个人统筹安排和一个打杂的。 好的，什么时候或者是什么驱使你开发 Vue.js 的？ 我在 Google 的工作需要在浏览器上进行大量原型设计，于是我想要尽快获得有形的东西。当时有些项目使用了 Angular。Angular 提供了一些用数据绑定和数据驱动来处理 DOM 的方法，所以你不必自己碰 DOM。它也有一些副作用，就是按照它规定的方式来构建代码。对于当时的场景而言实在是太重了。 我想，我可以只把我​​喜欢的部分从 Angular 中提出来，建立一个非常轻巧的库，不需要那些额外的逻辑。我也很好奇 Angular 的源码到底是怎么设计的。我最开始只是想着手提取 Angular 里面很小的功能，如声明式数据绑定。Vue 大概就是这么开始的。 用过一段时间之后，我感觉我做的东西还有点前途，因为我自己就很喜欢用。于是我花了更多的时间把它封装好，取了一个名字叫做 Vue.js，我记得那时还是 2013 年。后来我想『我花了这么多时间，不能只有我一个人用，我应该和别人分享，他们也会感觉到 Vue 的好处，他们也会喜欢上 Vue 的。』 2014 年 2 […]

龙生   11 Dec 2019
View Details

vue高级进阶

Vuex 1.state的使用 首先在src文件夹下面建一个store文件夹作为仓库 store里创建一些js文件作为相对应的存储空间 例如 store.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.store({
state: {                   //状态管理
  count: 1
},
getters: {                //获取状态值
  getCount: function(state){
    return state.count * 5
  }
},
mutations: {         //操作状态
  add: function(state){
    state.count += 1
  }
},
actions: {            //异步操作状态
  addFun: function(context){
    context.commit('add')
  }
}
})

  在vue组件中使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
在插值表达式里  {{$store.state.count}}
computed:{
count(){
return this.$store.state.count
}
}
更新state的值
methods: {
  change(){
    this.$store.commit('add',args)    //同步操作，可以有选择性的传参
  },
  asyncChange() {
    this.$store.dispatch('addFun')   //异步操作
  }
}

  2.mapState的使用 1.在.vue组件中引入,在js块中引入

1
import { mapState } from 'vuex'

  2.在.vue组件中使用，一般放在computed里可以监听到状态改变

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
computed：{
  ...mapState([        //mapState本是一个函数，在里面写一个数组，记得加...
    ‘num’ ， //存的数据
    ‘id’
  ])
}
或
computed: {
  ...mapState({
    num: (state)=>state.num,     //这种用法可以看作为起别名
    id: (state)=>state.id
  })
}
 
mapAction的使用
正常action的使用
this.$store.dispatch('function',args)
 
mapAction
import {mapActions} from 'vuex'
methods: {
...mapActions(['fun1','fun2','fun3'])
或
...mapActions({
  fun1: 'fun1',
  fun2: 'fun2'
  })
}
 
mapMutations的使用  //关于传参问题，直接在调用的地方传参
正常mutation的使用
this.$store.commit('function',args)
 
mapMutations的使用
import {mapMutations} from 'vuex'
methods:{
...mapMutations(['fun1','fun2'])
或
...mapMutations({
  fun1: 'fun1',
  fun2: 'fun2'
})
}

  混入 (mixin) 混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。 **组件的思想主要是用来解决重复码有相似功能的代码，并使其标准化，统一化，但在前端更多是体现在界面上的视觉效果，如果要实现功能大体相同，界面需要个性化，但又不想传入过多的props怎么办呢 这时mixin便有了其用武之地，可以使用相同的js逻辑，template和css自定义就好了** 具体使用： 先在src下建一个文件夹mixin 然后在该文件夹下创建你需要按功能取名的js文件 例如common.js

1
2
3
4
5
6
7
8
9
const toggle = {      //你需要引入哪些就加哪些
data(){
return {}
},
created(){},
methods:{}
...                        //还可以添加  
}
export toggle

  在.vue文件中使用

1
2
3
4
import { toggle } from '@/mixin/common.js'
export default {
mixins: [toggle]
}

  注意：如果混入里的东西和组件内的有冲突，会使用组件内的，欲安内必先攘外 全局混入 在main.js中定义

1
2
3
4
5
Vue.mixin({
  created: function () {
  }
  ...     //  省略
})

  from:https://segmentfault.com/a/1190000020617036

龙生   10 Dec 2019
View Details

vue进阶

1. vue脚手架

1
2
3
4
5
6
7
8
9
10
11
12
13
用来创建vue项目的工具包
创建项目:
    npm install -g vue-cli
    vue init webpack VueDemo
开发环境运行:
    cd VueDemo
    npm install
    npm run dev
生产环境打包发布
    npm run build
    npm install -g serve
    serve dist
    http://localhost:5000

2. eslint

1
2
3
用来做项目编码规范检查的工具
基本原理: 定义了很多规则, 检查项目的代码一旦发现违背了某个规则就输出相应的提示信息
有相应的配置, 可定制检查

  3. 组件化编程

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
vue文件包含3个部分
    <template>
      <div></div>
    </template>
    <script>
        export default {
  props: []/{}
          data(){},
  computed: {}
          methods: {},
  
  watch: {}
  filters: {}
  directives: {}
  components: {}
        }
    </script>
    <style>
    </style>
组件化编码的基本流程
1). 拆分界面, 抽取组件
2). 编写静态组件
3). 编写动态组件
     初始化数据, 动态显示初始化界面
     实现与用户交互功能
组件通信的5种方式
props
vue的自定义事件
pubsub第三方库
slot
vuex(后面单独讲)
props:
    父子组件间通信的基本方式
    属性值的2大类型:
        一般: 父组件-->子组件
        函数: 子组件-->父组件
隔层组件间传递: 必须逐层传递(麻烦)
兄弟组件间: 必须借助父组件(麻烦)
vue自定义事件
    子组件与父组件的通信方式
    用来取代function props
    不适合隔层组件和兄弟组件间的通信
pubsub第三方库(消息订阅与发布)
    适合于任何关系的组件间通信
slot
    通信是带数据的标签
    注意: 标签是在父组件中解析
vuex
    多组件共享状态(数据的管理)
    组件间的关系也没有限制
    功能比pubsub强大, 更适用于vue项目

4. ajax

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
相关库:
    vue-resource: vue插件, 多用于vue1.x
    axios: 第三方库, 多用于vue2.x
vue-resource使用
    // 引入模块
    import VueResource from 'vue-resource'
    // 使用插件
    Vue.use(VueResource)
    
    // 通过vue/组件对象发送ajax请求
    this.$http.get('/someUrl').then((response) => {
      // success callback
      console.log(response.data) //返回结果数据
    }, (response) => {
      // error callback
      console.log(response.statusText) //错误信息
    })
axios使用
    // 引入模块
    import axios from 'axios'
    
    // 发送ajax请求
    axios.get(url)
      .then(response => {
        console.log(response.data) // 得到返回结果数据
      })
      .catch(error => {
     console.log(error.message)
      })

5. vue-router

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
vue用来实现SPA的插件
使用vue-router
    1. 创建路由器: router/index.js
      new VueRouter({
        routes: [
          { // 一般路由
            path: '/about',
            component: about
          },
          { // 自动跳转路由
            path: '/',
            redirect: '/about'
          }
        ]
      })
    2. 注册路由器: main.js
       import router from './router'
       new Vue({
       router
       })
    3. 使用路由组件标签:
       <router-link to="/xxx">Go to XXX</router-link>
       <router-view></router-view>
编写路由的3步
    1. 定义路由组件    
    2. 映射路由
    3. 编写路由2个标签
嵌套路由
    children: [
        {
          path: '/home/news',
          component: news
        },
        {
          path: 'message',
          component: message
        }
     ]
向路由组件传递数据
    params: <router-link to="/home/news/abc/123">
    props: <router-view msg='abc'>
缓存路由组件
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
路由的编程式导航
this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
this.$router.back(): 请求(返回)上一个记录路由

  from:https://blog.csdn.net/w789g4/article/details/91046416

龙生   10 Dec 2019
View Details

ES6中常用的10个新特性讲解

ECMAScript 6(ES6) 目前基本成为业界标准，它的普及速度比 ES5 要快很多，主要原因是现代浏览器对 ES6 的支持相当迅速，尤其是 Chrome 和 Firefox 浏览器，已经支持 ES6 中绝大多数的特性。 ES6 下面逐一为大家详解常用的ES6新特性： 1.不一样的变量声明：const和let ES6推荐使用let声明局部变量，相比之前的var（无论声明在何处，都会被视为声明在函数的最顶部） let和var声明的区别：

1
2
3
4
5
6
var x = '全局变量';
{
  let x = '局部变量';
  console.log(x); // 局部变量
}
console.log(x); // 全局变量

  let表示声明变量，而const表示声明常量，两者都为块级作用域；const 声明的变量都会被认为是常量，意思就是它的值被设置完成后就不能再修改了：

1
2
const a = 1
a = 0 //报错

  如果const的是一个对象，对象所包含的值是可以被修改的。抽象一点儿说，就是对象所指向的地址没有变就行：

1
2
3
4
const student = { name: 'cc' }
 
student.name = 'yy';// 不报错
student  = { name: 'yy' };// 报错

  有几个点需要注意： let 关键词声明的变量不具备变量提升（hoisting）特性 let 和 const 声明只在最靠近的一个块中（花括号内）有效 当使用常量 const 声明时，请使用大写变量，如：CAPITAL_CASING const 在声明时必须被赋值 2.模板字符串 在ES6之前，我们往往这么处理模板字符串： 通过“\”和“+”来构建模板

1
2
3
$("body").html("This demonstrates the output of HTML \
content to the page, including student's\
" + name + ", " + seatNumber + ", " + sex + " and so on.");

  而对ES6来说 基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定； ES6反引号()直接搞定；

1
2
$("body").html(`This demonstrates the output of HTML content to the page,
including student's ${name}, ${seatNumber}, ${sex} and so on.`);

  3.箭头函数（Arrow Functions） ES6 中，箭头函数就是函数的一种简写形式，使用括号包裹参数，跟随一个 =>，紧接着是函数体； 箭头函数最直观的三个特点。 不需要 function 关键字来创建函数 省略 return 关键字 继承当前上下文的 this 关键字

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// ES5
var add = function (a, b) {
    return a + b;
};
// 使用箭头函数
var add = (a, b) => a + b;
 
// ES5
[1,2,3].map((function(x){
    return x + 1;
}).bind(this));
    
// 使用箭头函数
[1,2,3].map(x => x + 1);

  细节：当你的函数有且仅有一个参数的时候，是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{} 和 return； 4. 函数的参数默认值 在ES6之前，我们往往这样定义参数的默认值：

1
2
3
4
5
6
7
8
9
10
11
12
13
// ES6之前，当未传入参数时，text = 'default'；
function printText(text) {
    text = text || 'default';
    console.log(text);
}
 
// ES6；
function printText(text = 'default') {
    console.log(text);
}
 
printText('hello'); // hello
printText();// default

  5.Spread / Rest 操作符 Spread / Rest 操作符指的是 …，具体是 Spread 还是 Rest 需要看上下文语境。 当被用于迭代器中时，它是一个 […]

龙生   10 Dec 2019
View Details

mixins和组件的区别和优缺点

今天呢，就说一说mixins和组件，经常使用vue框架的朋友对这两个应该是不陌生的，他们两个的用法功能好像在项目中的所扮演的角色差不多。我们就带着这个疑问进行扒一扒吧 我们先从api文档中看一看官方是如何定义他们的。 mixins：混入，是一种分发Vue组件中可复用功能的非常灵活的方式，混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。 组件：是vue最强大的功能之一，组件可以扩展HTML元素，封装可重用的代码，在较高层面上，组件是自定义的元素，vue的编译器为它添加特殊功能，在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展 在我的眼中呢，他们的区别是什么呢？ 组件在引用之后，相当于在副组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，但本质上两者还是泾渭分明的，相对独立 而mixins则是在引入组件之后，将组件内部如data等方法，method等属性与父组件相应内容进行合并，相当于在引入后，副组件的各种属性方法被扩充了 组件之间是可以有通信的，而mixins比组件多了一个data的merge。两者使用的场景不同，具体的还要在不同的项目中进行决定使用mixins好还是组件合适 未完待续哦。。。 作者：都市尘埃i 链接：https://www.jianshu.com/p/f2a897cd3d7b 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

龙生   10 Dec 2019
View Details

在Windows平台下安装与配置Memcached的方法分享

Memcached 是一个高性能的分布式内存对象缓存系统，用于动态Web应用以减轻数据库负载。它通过在内存中缓存数据和对象来减少读取数据库的次数，从而提供动态、数据库驱动网站的速度。Memcached基于一个存储键/值对的hashmap。其守护进程（daemon ）是用C写的，但是客户端可以用任何语言来编写，并通过memcached协议与守护进程通信。但是它并不提供冗余（例如，复制其hashmap条目）；当某个服务器S停止运行或崩溃了，所有存放在S上的键/值对都将丢失。 Memcached由Danga Interactive开发，其最新版本发布于2010年，作者为Anatoly Vorobey和Brad Fitzpatrick。用于提升LiveJournal . com访问速度的。LJ每秒动态页面访问量几千次，用户700万。Memcached将数据库负载大幅度降低，更好的分配资源，更快速访问。 一、下载Memercached For Windows 下载地址：//www.jb51.net/softs/44843.html 二、安装步骤 1、解压到指定目录，如：C:\Memcached\memcached-win32-1.4.4-14。 2、用cmd打开命令窗口，转到解压的目录，输入 “memcached.exe -d install”。 3、打开控制面板，打开服务，可以看到memcached已经在上面可，如果没有启动，则手动启动一下。 4、    使用telnet命令 验证缓存服务器是否可用。 开始什么都不显示，回车后输入命令  stats  查看统计信息，如下图，说明服务器运作正常。 三、参数介绍 1、 以上的安装和启动都是在默认环境下进行的，在安装时可设置如下参数： -p 监听的端口 -l 连接的IP地址, 默认是本机 -d start 启动memcached服务 -d restart 重起memcached服务 -d stop|shutdown 关闭正在运行的memcached服务 -d install 安装memcached服务 -d uninstall 卸载memcached服务 -u 以的身份运行 (仅在以root运行的时候有效) -m 最大内存使用，单位MB。默认64MB -M 内存耗尽时返回错误，而不是删除项 -c 最大同时连接数，默认是1024 -f 块大小增长因子，默认是1.25 -n 最小分配空间，key+value+flags默认是48 -h 显示帮助 如：“memcached -d install -l 127.0.0.1 -m 1024 -c2048”。 2、 如果在安装时没有添加参数，可通过修改注册表信息进行设置，打开注册表，找 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\memcached 在其中有一个“ImagePath”项，值为： "C:\Memcached\memcached-win32-1.4.4-14\memcached.exe" -d runservice 在后面加上“-m 1024 -c2048”。如下图： 3、输入stats命令后，页面出现的参数介绍。 STAT pid 4356 服务器进程IDSTAT uptime […]

龙生   09 Dec 2019
View Details

查看电脑内存的型号

cmd > wmic > memorychip

龙生   06 Dec 2019
View Details
1 … 143 144 145 … 414

Copyright © 2025 Longsheng All rights reserved