当前分类 / JavaScript / 总共16篇

屏蔽网页鼠标右键或键盘F12并解除屏蔽的方法

很多时候我们的网站内容会被别人拿过去做伪原创,这样就比较难受了,自己辛辛苦苦写了大半天结果被别人直接复制黏贴了,为了避免这样的悲剧频繁发生,很多人给自己的网站添加了屏蔽鼠标右键和 F12 键的 js 代码,例如下面是用 jQuery 实现的一段屏蔽鼠标右键的代码:

$(document).ready(function(){  
    $(document).bind("contextmenu",function(e){   
          return false;   
    });
});

不使用 jQuery 可以修改如下等效的代码:

<script language="JavaScript">
     document.οncοntextmenu=new Function("event.returnValue=false;");
     document.onselectstart=new Function("event.returnValue=false;");
</script>

阅读更多

VueJs + Elements + Axios 我的书签页

概述

看了几天 Vue 文档了,今天应该实践一下了,做一个个人书签页面,记录自己的常用书签。

书签页构思草图

创建工程

vue install webpack "hellovue"

启动预览

npm run dev

值得注意的是 npm run dev 实际上执行的是 package.json 中的 script 脚本的如下命令:

webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

也许你已经猜到了, 这个 webpack.dev.conf.js 文件是配置开发过程中的webpack构建文件。

接下来我们就开始修改 HelloWorld.vue 来实现书签页。

阅读更多

VueJs学习随笔--插槽和异步组件

插槽

Vue 中提供插槽来让你替换组件中的部分内容, 例如你定义了一个组件 <navigation-link> :

<a v-bind:href="url" class="nav-link">
  <slot></slot>
</a>

这里的 <slot> 就是可以替换的内容部分,如果你这样使用:

<navigation-link url="/profile">
  Your Profile
</navigation-link>

阅读更多

VueJs学习随笔--组件化

组件基础

组件是可复用的 Vue 实例, 每个组件都有一个名字,我们可以直接使用名字来引入一个组件。

定义一个名为 button-counter 的新组件:

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

阅读更多

VueJs学习随笔--第一个Vue工程

安装

第一步: 安装 nodejs 环境。

第二步: 配置淘宝 npm 镜像。

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

这样就可以使用cnpm 命令来安装模块了。

安装 vue-cli

npm install vue-cli -g 

查看vue-cli是否成功,不能检查vue-cli, 需要检查vue:

vue -V 

阅读更多

VueJs源码学习[2]--源码构建

特别说明:本文是转载文章,但是可能会在原文基础上新增注释和修改或附加自己的理解。

本文转载自:https://ustbhuangyi.github.io/vue-analysis/

目录结构

Vue.js 的源码都在 src 目录下,其目录结构如下。

src
├── compiler        # 编译相关 
├── core            # 核心代码 
├── platforms       # 不同平台的支持
├── server          # 服务端渲染
├── sfc             # .vue 文件解析
├── shared          # 共享代码

compiler

compiler 目录包含 Vue.js 所有编译相关的代码。它包括把模板解析成 ast 语法树,ast 语法树优化,代码生成等功能。

编译的工作可以在构建时做(借助 webpack、vue-loader 等辅助插件);也可以在运行时做,使用包含构建功能的 Vue.js。显然,编译是一项耗性能的工作,所以更推荐前者——离线编译。

core

core 目录包含了 Vue.js 的核心代码,包括内置组件、全局 API 封装,Vue 实例化、观察者、虚拟 DOM、工具函数等等。

这里的代码可谓是 Vue.js 的灵魂,也是我们之后需要重点分析的地方。

阅读更多

VueJs源码学习[1]--Flow类型检测

特别说明:本问是转载文章,但是可能会在原文基础上新增注释和修改或附加自己的理解。

本文转载自:https://ustbhuangyi.github.io/vue-analysis/

Flow 是 facebook 出品的 JavaScript 静态类型检查工具。Vue.js 的源码利用了 Flow 做了静态类型检查,所以了解 Flow 有助于我们阅读源码。

为什么用 Flow

JavaScript 是动态类型语言,它的灵活性有目共睹,但是过于灵活的副作用是很容易就写出非常隐蔽的隐患代码,在编译期甚至看上去都不会报错,但在运行阶段就可能出现各种奇怪的 bug。类型检查是当前动态类型语言的发展趋势,所谓类型检查,就是在编译期尽早发现(由类型错误引起的)bug,又不影响代码运行(不需要运行时动态检查类型),使编写 JavaScript 具有和编写 Java 等强类型语言相近的体验。项目越复杂就越需要通过工具的手段来保证项目的维护性和增强代码的可读性。 Vue.js 在做 2.0 重构的时候,在 ES2015 的基础上,除了 ESLint 保证代码风格之外,也引入了 Flow 做静态类型检查。之所以选择 Flow,主要是因为 BabelESLint 都有对应的 Flow 插件以支持语法,可以完全沿用现有的构建配置,非常小成本的改动就可以拥有静态类型检查的能力。

阅读更多

立即执行函数和模块化

参考文档:《深入理解js立即执行函数》

概述

很多时候我们需要创建一个私有的命名空间,该命名空间的变量和方法,不会破坏污染全局的命名空间。此时若是想访问全局对象,将全局对象以参数形式传进去即可,如jQuery代码结构:

(function(window, undefined){ 
    //jquery code
})(window);

匿名函数和表达式

在了解立即执行函数之前先明确一下函数声明、函数表达式及匿名函数的形式:

//函数声明
function test(){  

}

//函数表达式
var test = function(){

}

//匿名函数
function(){

}

上面只有函数表达式是立即执行的。

阅读更多

Nodejs结构和创建

本文参考自《Node.js开发指南》和《Node.js实战》两本书。

异步I/0

Node.js最大的特点就是采用了异步I/0与事件驱动的架构设计。

$.post('/resource.json', function(data){
    console.log(data);
})

这一小段代码是jQuery中的Ajax请求,我们知道这个结果函数是异步的,等服务器响应结果后才会执行。

对于一些高并发的需求,传统的解决方法是多线程模型,每个业务提供一个线程系统,通过切换和调度线程来实现高并发中的等待开销。但是这样做无疑又增加了线程管理和调度的开销。

Nodejs采用的是单线程模型,对于所有的I/O操作(阻塞操作)都采用类似上面Ajax请求的异步的请求方式,避免了频繁切换线程。

nodejs的单线程模型

阅读更多

Ajax在jQuery中的使用

Ajax全称为“Asynchronous JavaScript and XML” (异步JavaScript和XML),它可以使浏览器不刷新而更新页面数据。Ajax的优势:

  1. 不需要插件支持。
  2. 优秀的用户体验。
  3. 提供Web程序的性能。
  4. 减轻服务器和宽带负担。

Ajax过程

var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象

request.onreadystatechange = function () { // 状态发生变化时,函数被回调
    if (request.readyState === 4) { // 成功完成
        // 判断响应结果:
        if (request.status === 200) {
            // 成功,通过responseText拿到响应的文本:
            console.log(request.responseText);
        } else {
            // 失败,根据响应码判断失败原因:
            console.log(request.status);
        }
    } else {
        // HTTP请求还在继续...
    }
}

request.open('GET', '/api/categories');
request.send();

阅读更多