构建前端第10篇之---Function.prototype.call()

张艳涛写于2020-01-25,参考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数语法 function.call(thisArg, arg1, arg2, ...) 参数 thisArg可选的.在 function 函数运行时使用的 this 值.请注意,this…

构建前端第13篇之---VUE的method:{}的括号未括到方法导致 _vm.linkProps is not a function

…

构建前端第12篇之---在Vue中对组件,变量,函数的全局引入

张燕涛写于2020-01-16 星期two 本篇还是源于import和export的使用,昨天看es6入门和MDN文档,大体上用法了解了,但今天看ElementUI源码的时候,看到 //src/index.js中export default { version: '2.15.0', locale: locale.use, i18n: locale.i18n, install, CollapseTransition, Loading, Pagination, Dialog, Autocomple…

构建前端第2篇之--ESLint 配置

张艳涛写于2021-1-19 报错: http://eslint.org/docs/rules/space-before-function-paren Missing space before function parentheses 如果开启用vue-li 构建项目的时候选择开启,则不符合eslint 在npm run dev 就会报错那么需要更改配置,使得npm run dev 能通过,网上说有两处,一处将其注解,一处将其改为false ,具体原理准备阅读node.js的书籍来了解上图…

构建前端第6篇之---内嵌css样式 <el-button style="width:100%"> 登录 </el-button>

张艳涛写于2021-1-20日 What: 如何让button的长度和input长度一致呢最先想到的是给这个button加一个class ="buttonclass",然后在vue最后的<style标签中>设置 .buttonclass { width : 100%; } 这个前两篇设置height为100%的方法是一致的. 还有一个更简单的方法就是内联式css <el-form-item><el-button > 登录 </el-butto…

构建前端第9篇之(下)---vue3.0将template转化为render的过程

vue3.0将template转化为render的过程这里是简单标记下,如何将.vue转换成js文件具体的,先不研究了,太深,能力有限,达不到呢…

构建前端第9篇之(上)---Vue组件引入,使用

张艳涛写于2020-1-25日一.想写下vue引入组件和插件的理解今天是星期一,周末也看俩两天,在这个几天了,比较迷,主要是从开始学习import指令开始的,import 是es6的语法, import 可以用来导入整个模块的内容,导入单个接口,导入多个接口,导入默认值,来个官方例子 import myDefault from '/modules/my-module.js'; 可以看到是从一个js文件中导入的,我的理解是: 如果你导入的是一个class,那么你可以new 这个class类似j…

构建前端第8篇之---Webstom搭建ES6运行环境

张艳涛写于2021-1-22 一.在有webstorm和node.js前提下,安装全局的babel npm install babel-cli babel-eslint -g 二.在terminal中,使用命令:npm init(或者是 npm init -y) 三.本地安装babel-preset-es2015 和 babel-cli(编译插件) 在终端执行:npm install --save-dev babel-preset-es2015 babel-cli 四.新建.babelrc及简…

构建前端第7篇之---elementUI设置主题,进而改变全局button底色

张艳涛写于2020-1-20 What:是elementUI主题? 是内置的格式,elementUI默认只有一个主题,如果想整体替换按钮的颜色等问题,那么就可以用主题设置步骤在路径src/styles/element-variables.scss新建文件内容为 /** * I think element-ui's default theme color is too light for long-term use. * So I modified the default color and…

构建前端第5篇之---修改css样式的思路

张艳涛写于2020-1-20 在页面元素布局的时候,在知道应该如何设置元素的属性的时候,可以依照如下思路,使用chrome浏览器,打开f12,找到对应的最近元素,看右侧对于的css样式窗口,调整修改数值,看到效果变化了,之后找就可以在全局样式scss中设置,自定义的值 .el-form-item { //全局设置上线间距为10px,默认为22px,框架自带 margin-bottom: 10px; } 如图片下…

构建前端第4篇之---使用css用法 height

张艳涛写于2021-1-20 height: 100%; What: html的元素标签,例如 <html>,<body>,<div>都有height的css属性,那么将div的heigh:属性设置成100%,意味什么答案是:基于父级元素的百分比 /在全局scss文件中定义了 html { height: 100%; box-sizing: border-box; } body { height: 100%; -moz-osx-font-smoothing: gr…

构建前端第3篇之---使用scss

张艳涛写于2021-1-20 主要解决俩个问题: 在单个vue文件中 <style rel="stylesheet/scss" lang="scss"> 不能解析如何在全局引入scss What: scss是什么? scss是带有语法,可编程的css,比如说scss有变量,scss有嵌套结构,这些都是css没有的,如果style标签中使用的是scss是需要解析成css才能被识别,就好像java需要编译成二进制语言才能被计算机识别和执行. 问题1,不能…

使用webpack+vue.js构建前端工程化

参考文章:https://blog.csdn.net/qq_40208605/article/details/80661572 使用webpack+vue.js构建前端工程化本篇主要介绍三块知识点: node.js vue.js webpack前端工程化本篇不是写给零基础的同学看的,读者应具备一些服务器开发.前端开发基础本篇目标使用webpack+vue.js构建前端工程化本篇目标node.js基本入门node.js介绍环境搭建npm介绍npm淘宝镜像使用cnpm安装包node.js模块化程…

NodeJs前端构建工具 ——————之Grunt篇

为何使用grunt? 如何搭建grunt? 开始第一个grunt项目基础()合并js文件开始第一个grunt项目基础()压缩js 开始第一个grunt项目基础()代码规范检测开始第一个grunt项目基础()开启自动检测开始第一个grunt项目提高()Js模块化之browserify 开始第一个grunt项目提高()单元测试开始第一个grunt项目提高()自动为代码生成API文档小技巧为何使用grunt? 一句话:自动化.对于需要反复重复的任务,例如压缩(minifica…

前端总结·基础篇·JS（一）五大数据类型之字符串（String）

前端总结系列前端总结·基础篇·CSS(一)布局前端总结·基础篇·CSS(二)视觉前端总结·基础篇·CSS(二)补充前端总结·基础篇·JS(一)五大数据类型之字符串(String) 目录这是<前端总结·基础篇·JS>系列的第一篇,主要总结一下JS的五大基本数据类型中的字符串. 一.属性(Attribute) 二.方法(Method) 2.1 转换 2.2 修改 2.3 匹配 2.4 文本 2.5 其他为方便阅读,有如下准则: 参数中的[]代表可选参数.如substr(start[,l…

前端总结·基础篇·JS（三）arguments、callee、call、apply、bind及函数封装和构造函数

前端总结系列前端总结·基础篇·CSS(一)布局前端总结·基础篇·CSS(二)视觉前端总结·基础篇·CSS(三)补充前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前端总结·基础篇·JS(二)数组深拷贝.去重以及字符串反序和数组(Array) 前端总结·基础篇·JS(三)arguments.callee.call.apply.bind及函数封装和构造函数目录一.函数使用 1.1 函数声明和函数表达式 1.2 函数封装(自调用函数.闭包) 1.3 函数属性(a…

前端性能优化：使用Array.prototype.join代替字符串连接

来源:GBin1.com 有一种非常简单的客户端优化方式,就是用Array.prototype.join代替原有的基本的字符连接的写法.在这个系列的第一篇中,我在代码中使用了基本字符连接: htmlStr += '<li>' + item.text + '</li>'; 但是下面这段代码中,我用了优化: var items = []; ajaxResult.items.forEach(function(item) { // 构建字符串 items.push('<li>'…

前端总结·基础篇·JS（一）原型、原型链、构造函数和字符串（String）

前端总结系列前端总结·基础篇·CSS(一)布局前端总结·基础篇·CSS(二)视觉前端总结·基础篇·CSS(三)补充前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前端总结·基础篇·JS(二)数组深拷贝.去重以及字符串反序和数组(Array) 前端总结·基础篇·JS(三)arguments.callee.call.apply.bind及函数封装和构造函数前端总结·基础篇·JS(四)异步请求及跨域方案前端总结·工具篇·管理(一)常用模块化方案目录这是<前端…

前端第三篇---前端基础之JavaScript

前端第三篇---前端基础之JavaScript 一.JavaScript概述二.JavaScript的基础三.词法分析四.JavaScript的内置对象和方法五.BOM对象六.DOM对象七.事件八.拓展一.JavaScript概述 1.JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言) Netscape(网景)接收Nombas的理念,(Br…

前端总结·基础篇·JS（二）数组深拷贝、去重以及字符串反序和数组（Array）

目录这是<前端总结·基础篇·JS>系列的第二篇,主要总结一下JS数组的使用.技巧以及常用方法. 一.数组使用 1.1 定义数组 1.2 使用数组 1.3 类型检测二.常用技巧 2.1 数组去重 2.2 数组深拷贝 2.3 字符串反序三.方法列表 3.1 存取 3.2 字符串 3.3 修改 3.4 ES5 3.5 ES2015(ES6) 3.6 ES2016 一.数组使用数组不是基本数据类型,但是非常常用,所以提前总结. 基本数据类型是String,Number,Boolean,null…

Gulp构建前端自动化工作流之：常用插件介绍及使用

在对Gulp有了一个初步的了解之后,我们开始构建一个较为完整的Gulp开发环境. 本文主要分为6个段落: 1. 构建项目目录结构(Directory Structure Build) 2. 插件介绍及使用方法(Tasks and dependencies) 3. 扩展优化(Extend & Optimize Task) 4. 其他插件介绍(Other plug-ins) 5. 匹配规则(Match Files) 6. 注意事项(Attention) 关于Gulp的入门介绍及安装方法,可先去 <…

Gulp安装及配合组件构建前端开发一体化(转)

Gulp安装及配合组件构建前端开发一体化所有功能前提需要安装nodejs(本人安装版本v0.10.26)和ruby(本人安装版本1.9.3p484). Gulp 是一款基于任务的设计模式的自动化工具,通过插件的配合解决全套前端解决方案,如静态页面压缩.图片压缩.JS合并.SASS同步编译并压缩CSS.服务器控制客户端同步刷新. Gulp安装全局安装Gulpjs npm install -g gulp #全局安装局部安装Gulpjs npm install gulp --save-dev…

JSON工具类的构建(前端版本)

前言在前后端交互的选择上,之前一直采用的是模板引擎(因为我只负责后端). 而这次的一个算是作业吧,前后端都是我,所以就研究了一下JSON交互在java web的应用(主要是前端). 优缺点因为我是先写后端版本的,所以优缺点部分请跳转至JSON工具类的构建(后端版本)查看. 对比因为我对js也是几天速成系列,所以框架型的jq以及ajax也是处于概念上的理解以及皮毛型的应用. 我所认识的主流的前端处理的ajax,所以就选用了ajax进行发送/接收解析json的处理. 需求拆分因为没有打算深入…

前端第四篇---前端基础之jQuery

前端第四篇---前端基础之jQuery 一.jQuery介绍二.jQuery对象三.jQuery基础语法四.事件五.动画效果六.补充each 一.jQuery简介 1.jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交互,能够极大地简化JavaScript编程.它的宗旨就是:“Write less, do more.‘’ 2.jQuery的优…

Function.prototype.toString 的使用技巧

Function.prototype.toString这个原型方法可以帮助你获得函数的源代码, 比如: function hello ( msg ){ console.log("hello") } console.log( hello.toString() ); 输出: 'function hello( msg ){ \ console.log("hello") \ }' 这个方法真是碉堡了-, 通过合适的正则, 我们可以从中提取出丰富的信息. 函数名函数形参列表…

JS魔法堂：再次认识Function.prototype.call

一.前言大家先预计一下以下四个函数调用的结果吧! var test = function(){ console.log('hello world') return 'fsjohnhuang' }test.call() // ① Function.prototype.call(test) // ② Function.prototype.call.call(test) // ③ Function.prototype.call.call(…

一起Polyfill系列：Function.prototype.bind的四个阶段

昨天边参考es5-shim边自己实现Function.prototype.bind,发现有不少以前忽视了的地方,这里就作为一个小总结吧. 一.Function.prototype.bind的作用其实它就是用来静态绑定函数执行上下文的this属性,并且不随函数的调用方式而变化. 示例: test('Function.prototype.bind', function(){ function orig(){ return this.x; }; var bound = orig.bind({x: '…

构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（2）-easyui构建前端页面框架[附源码]

原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(2)-easyui构建前端页面框架[附源码] 开始,我们有了一系列的解决方案,我们将动手搭建新系统吧. 用户的体验已经需要越来越注重,这次我们是左右分栏,左边是系统菜单,右边是一个以tabs页组成的页面集合,每一个tab都可以单独刷新和关闭,因为他们会是一个iframe 工欲善其事必先利其器.需要用到以下工具. Visual Studio 2012 您可以安装MVC4 for vs2010用VS2010…

Function.prototype.bind

解析Function.prototype.bind 简介对于一个给定的函数,创造一个绑定对象的新函数,这个函数和之前的函数功能一样,this值是它的第一个参数,其它参数,作为新的函数的给定参数. bind的作用 bind最直接的作用就是改变this的指向 // 定义函数 var checkNumericRange = function (value) { if (typeof value !== 'number') return false; else return value >= this…

解析Function.prototype.bind

简介对于一个给定的函数,创造一个绑定对象的新函数,这个函数和之前的函数功能一样,this值是它的第一个参数,其它参数,作为新的函数的给定参数. bind的作用 bind最直接的作用就是改变this的指向 // 定义函数 var checkNumericRange = function (value) { if (typeof value !== 'number') return false; else return value >= this.minimum && value &l…

【构建前端第10篇之---Function.prototype.call()】的更多相关文章