JavaScript语法详解:JS简介&变量
以下是正文。JavaScript简介Web前端有三层:HTML:从语义的角度,描述页面结构CSS:从审美的角度,描述样式(美化页面)JavaScript:从交互的角度,描述行为(提升用户体验)JavaScript历史背景介绍布兰登•艾奇(BrendanEich,1961年~),1995年在网景公司,发明的JavaScript。一开始JavaScript叫做LiveScript,但是由于当时Java这个语言特别火,所以为了傍大牌,就改名为JavaScript。如同“北大”和“北大青鸟”的关系。“北大青鸟”就是傍“北大”大牌。同时期还有其他的网页语言,比如VBScript、JScript等等,但是后来都被JavaScript打败了,所以现在的浏览器中,只运行一种脚本语言就是JavaScript。JavaScript和ECMAScript的关系ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是EuropeanComputerManufacturersAssociation)制定的
深入理解 Koa2 中间件机制
本文通过分析源码,深入学习Koa的中间机制。我们知道,Koa中间件是以级联代码(Cascading)的方式来执行的。类似于回形针的方式,可参照下面这张图:今天这篇文章就来分析Koa的中间件是如何实现级联执行的。在koa中,要应用一个中间件,我们使用app.use():app.use(logger()).use(bodyParser()).use(helmet())先来看看use()是什么,它的源码如下use(fn){if(typeoffn!=='function')thrownewTypeError('middlewaremustbeafunction!');if(isGeneratorFunction(fn)){deprecate('Supportforgeneratorswillberemovedinv3.'+'Seethedocumentationforexamplesofhowtoconvertoldmiddleware'
父子组件间传值
App.vue中写入我是App父组件
访问自己的数据:{{msg}},{{name}},{{user.id}}
我是hel
JavaScript
1900-01-01 发布
CORS 跨域资源访问
在介绍常见的针对web应用的攻击手法之前,我们先复习一下下面这些与web安全息息相关的知识点。理解掌握这些知识点,是进一步学习web安全的基础。跨域当一个资源请求一个其它域名或者另外一个端口的资源时会产生一个跨域HTTP请求(cross-originHTTPrequest)。比如说,http://domaina.example的某HTML页面通过的src请求http://domainb.foo/image.jpg。在当今的Web开发中,许多页面都会从另外一个站点加载各类资源(包括CSS、图片、JavaScript脚本以及其它类资源)。针对不同的来源的各类资源的交互,各大浏览器往往遵循同源策略,对交互进行处理。同源策略
vuex 基本入门和使用(三)-关于 mutation
vuex基本入门和使用(三)-关于mutationvuex版本为^2.3.1,按照我自己的理解来整理vuex。关于mutation这里应该很好理解。更改Vuex的store中的状态的唯一方法是提交mutation。Vuex中的mutation非常类似于事件:每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受state作为第一个参数:conststore=newVuex.Store({state:{//类似vue的datacount:1},mutations:{//类似vue的methodsincrement(state){//这是一个回调函数//变更状态state.count++}}})你不能直接调用一个mutationhandler。这个选项更像是事件注册:“当触发一个类型为increment的mutation时,调
Nodejs 之 exports, require, module, __filename, __dirname
Nodejs代码中常见的引入模块函数“require”。其实很少人了解为什么能使用“require”,以及Nodejs基本的运行机制。是否还记得“arguments”,arguments可以直接拿到调用函数传入的参数。(function(){console.log(arguments)}//[1,2,3])(1,2,3)其实Nodejs可以直接打印arguments。用Node运行文件://index.js//nodeindex.js运行console.log(arguments)//输出//{'0':{},//'1':{[Function:require]//'2'://Module{//id:'.',//exports:{},//parent:null,//filename:'D:\\Personal\\Desktop\\a//loaded:false,//children:[],//paths://
由变量提升谈谈 JavaScript Execution Context
JavaScript不同于其他语言,存在变量提升,如下面代码例子:console.log(x)varx='helloworld';这段代码不会报错,会输出undefined。这就是所谓的变量提升,但具体细节JS引擎是怎么处理的,还需要理解JS的ExecutionContext执行上下文。1.ExecutionContextExecutionContext是JS执行代码时候的一个上下文环境。如执行到一个调用函数,就会进入这个函数的执行上下文,执行上下文中会确定这个函数执行期间用到的诸如this,变量,对象以及定义的方法等。当浏览器加载script的时候,默认直接进入GlobalExecutionContext(全局上下文),将全局上下文入栈。如果在代码中调用了函数,则会创建FunctionExecutionContext(函数上下文)并压入调用栈内,变成当前的执行环境上下文。当执行完该函数,该函数的执行上下文便从调用栈弹出返回到上一个执行上下文。2.执行上下文分类Globalexecutionc
使用vue-axios和vue-resource解决vue中调用网易云接口跨域的问题
项目名称,项目描述,作者,Runtime+Compiler回车即可注意这里要安装vue-router和ESLint然后SetupunittestswithKarma+Mocha?和Setupe2etestswithNightwatch?都选择n即可1.2安装项目依赖cnpminstall1.3安装axios模块cnpminstallaxios--save1.4安装resource模块cnpminstallvue-resource--save1.5运行项目cnpmrundev效果图如下1.6修改页面内容我们先修改一下页面内容src\components\Hello.vue{{msg}}
{{author}}
webpack模块化实现探究
我们都知道,浏览器是无法识别commonjs规范的模块和es6module的。将这些规范的模块转化为浏览器认识的语句就是webpack做的最基本事情,webpack本身维护了一套模块系统,这套模块系统兼容了所有前端历史进程下的模块规范,包括amdcommonjses6等。当然babel也具有将es6模块转化的能力(parcel我不想提你),但是由于webpack具有tree-shaking的功能,比起babel来更加具有优势。所以一般babel配置里都会禁止掉babel的module功能。(["es2015",{"modules":false}])。commonjs规范项目结构:app.js(entry):varc=require('./c')console.log(c)c.js(entry):letc1='c1'letc2='c2'module.exports={c1,c2,}打包结果:(functionwebpackUniversalModuleDefinition(root,factory)
非父子组件间通信
非父子组件之间的通信,可以通过一个空的Vue实例作为中央事件总线(事件中心),用他来触发事件和监听事件。在这里,如果是工作中的新手看了官网的例子直接上手写,会有些发懵。这个作为事件总线空的Vue实例我该写哪里去?因为工作中我们的组件都是互相独立的,不可能写一起的,作用域是不同的,所以需要稍作调整一、在main.js中初始化根Vue之前,添加一个data对象,内写入一个名为Event的空Vue对象,也就是中央事件总线newVue({el:'#app',data:{Event:newVue()},render:h=>h(App)})二、在各组件中使用Vue的实例属性$root来访问我们当前组件树的根Vue实例,这样就可以使用vm.$root.Event来访问我们定义的事件发射器Event比如我在Hello.vue组件中想发送数据到Vue.vue组件中我是{{name}}组件
nodejs 最新版安装 と npm 的使用
#安装nodejs以下介绍的是命令行安装方法,读者也可以到nodejs官网上下载安装最新版。sudoapt-getinstallnodejs-legacysudoapt-getinstatllnpm升级npm为最新版本sudonpminstallnpm@latest-g往往用命令行安装的nodejs不是最新版本,而且升级nodejs并不是件非常简单的事情;这时我们需要用非常好用的nodejs版本管理模块nsudonpminstall-gn通过模块n安装指定版本的nodejssudonlatestsudonstablesudonlts我们可以通过查看版本号来检查是否安装成功和是否安装到想要的版本node-vnpm-v#说说npmnpm(nodepackagemanage)是nodejs的包管理器,用于node插件的管理包括安装、卸载、管理依赖等使用npm安装插件,语法为;npminstall
Ext JS 6:Visual Studio Code、创建包和权限管理
在《ExtJS6.2实战》一书中,创建了几个常用的工具类,如果要将这些工具类应用到别的项目,使用书中的方法只能将类复制到新项目,然后修改类名来实现。那么,是否有更好的方式呢?在查看了官方文档《CreatingSenchaCmdPackages[http://docs.sencha.com/cmd/guides/cmd_packages/cmd_creating_packages.html]》之后,有了新方法,就是创建一个公共包,本文将演示如何来创建这个公共包。由于实战一书的权限比较简单,没有考虑到大家对权限需求,因而在本文一并处理,来实现复杂一点的权限。在开始之前,先创建一个名为PackageTest的文件夹,然后用VisualStudioCode(以下简称code)打开该文件夹。在code中按CTRL+`打开集成终端,在终端中输入以下命令创建一个使用经典工具包的应用程序:PSD:\Workspace\PackageTest>sencha-sdkD:\Workspace\ext6\genapp--
HOWTO: 解决 远程桌面连接已停止工作 的故障问题
HOWTO:解决远程桌面连接已停止工作的故障问题故障现象是用户打开“远程桌面连接”程序去登录一台计算机,连接过程中该程序发生错误,提示“远程桌面连接已停止工作”,如下图所示。对于此类应用程序发生崩溃的故障问题,通常可展开详细信息查看故障程序中具体的出错模块进行排查。也可以在事件查看器中的应用事件日志中查找具体错误信息。但是本案例中,导致mstsc.exe(远程桌面连接)的错误模块是ntdll.dll,由于是系统核心文件,且系统未出现其他异常,故怀疑是ntdll.dll加载和处理其他驱动动态链接库文件时发生了错误。但是该如何查看mstsc.exe加载的动态链接库呢?!好在WindowsErrorReporting(WER)为我们记录了相对详细的信息,可用于进一步的排错。首先通过事件查看器找到“WindowsErrorReporting”日志,打开日志查看WER存储的具体位置,通常位于当前用户配置文件目录下:“\AppData\Local\Microsoft\Windows\WER\Re
【ASP.NET Core分布式项目实战】(二)oauth2 + oidc 实现 server部分
本博客根据http://video.jessetalk.cn/my/course/5视频整理(内容可能会有部分,推荐看源视频学习)资料我们基于之前的MvcCookieAuthSample来做开发MvcCookieAuthSample下载地址:https://files.cnblogs.com/files/wyt007/ASPNETCore%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8.rarMvcCookieAuthSample教程地址:http://www.cnblogs.com/wyt007/p/8204731.html正文给网站设置默认地址http://localhost:5000首先,我们将之前写的系统的Identity注释掉,在Startup.cs中第一步:添加Nuget包:IdentityServer4我们可以在vscode中使用ctrl+P键来打开命令面板。然后输入nuget按回车,输入identityserver4后按回车来选择版本进行安装第二步:添加C
迁移数据库数据到SQL Server 2017
以上的列表就是我的迁移计划中的主要步骤,仅供参考。当然根据不同的环境和使用者的情况,可以调整出一套更适合自己的文档来满足需求,比如升级时的顺序,手把手教你使用DMA经过上面,我们直奔主题,讨论如何使用DMA帮助我们初始评估迁移,在正式迁移之前需要一个预估。首先,请到微软的下载中心(https://www.microsoft.com/en-us/download/details.aspx?id=53595),下载最新版本的DMA。然后安装,无论是服务器还是客户机,当你运行DMA后画面如下,当你是第一次打开这个向导时,需要创建一个项目。点击左侧的“+”号开始屏幕下一个屏幕中将会有两个选项:1)Assessment2)Migration这里我们选择assessment,因为这时我们是评估并不是真的要迁移。在开始实际迁移之前,我们要评估所有的事实并分析报告。发现潜在的问题。在选择后,你需要制定一个项目名称,比如我这边是从2014升级到2017,SQL2K14toSQL2K17。在剩下的部分,你需要
基于 HTML5 的电力接线图 SCADA 应用
基于HTML5的电力接线图SCADA应用在电力、油田燃气、供水管网等工业自动化领域WebSCADA的概念已经提出了多年,早些年的WebSCADA前端技术大部分还是基于Flex、Silverlight甚至Applet这样的重客户端方案,在HTML5流行前VML和SVG算是真正纯种Web方案也是有不少应用,近些年随着HTML5的流行,加上移动终端以及浏览器对HTML5支持的普及,越来越多新项目开始采用真正纯HTML5的方案,更具体的应该说是大数据量应用性能高于SVG的Canvas方案,已经逐渐成为当今WebSCADA前端技术的首选标配方案。例子代码下载:http://download.csdn.net/download/u013161495/10206301示例图片(图中“发光”的部分是会闪烁的):这个例子我依旧是用HTforWeb进行开发的,其中重复的部分我都封装为一个“图标”了,这边说的“图标”指的就是矢量图标。矢量在HTforWeb中是矢量图形的
iOS WebView 加载的时候定位
项目中要添加外卖,H5做的,要获取定位权限。当我们使用H5与Native进行混合开发时候,如果需要web界面在加载时候获取手机定位权限,之前的项目用的是加载web之前把所需坐标拼接到网址内,但是这次的页面是vue写的动态web,所以就不是很合适了,那就直接把这个动作交给H5去处理得了。项目配置iOS8.0之后,app内需要定位权限的话,则需要在info.plist中添加一行配置,如下:或者右键info.plist->openassourcecode,添加如下代码
深入理解Promise运行原理
本文大多数内容翻译自该篇文章Promise可以认为是一种用来解决异步处理的代码规范。常见的异步处理是使用回调函数,回调函数有两种模式,同步的回调和异步的回调。一般回调函数指的是异步的回调。同步回调functionadd(a,b,callback){callback(a+b)}console.log('before');add(1,2,result=>console.log('Result:'+result);console.log('after');输出结果为:beforeResult:3after异步回调functionaddAsync(a,b,callback){setTimeout(()=>callback(a+b),1000);}console.log('before');addAsync(1,2,result=>console.log('Result:'+result));console.log('after');输出结果:beforeafter
权限管理模块中动态加载Vue组件
当前后端分离时,权限问题的处理也和我们传统的处理方式有一点差异。笔者前几天刚好在负责一个项目的权限管理模块,现在权限管理模块已经做完了,我想通过5-6篇文章,来介绍一下项目中遇到的问题以及我的解决方案,希望这个系列能够给小伙伴一些帮助。本系列文章并不是手把手的教程,主要介绍了核心思路并讲解了核心代码,完整的代码小伙伴们可以在GitHub上star并clone下来研究。另外,原本计划把项目跑起来放到网上供小伙伴们查看,但是之前买服务器为了省钱,内存只有512M,两个应用跑不起来(已经有一个V部落开源项目在运行),因此小伙伴们只能将就看一下下面的截图了,GitHub上有部署教程,部署到本地也可以查看完整效果。项目地址:https://github.com/lenve/vhr前面几篇文章,我们已经基本解决了服务端的问题,并封装了前端请求,本文我们主要来聊聊登录以及组件的动态加载。本文是本系列的第五篇,建议先阅读前面的文章有助于更好的理解本文:1.SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限