Vue之外的杂谈笔记
1、老项目的构建输出为什么臃肿?
引用:(引自http://www.cnblogs.com/linfangshuhellowored/p/5657285.html)
答:因为使用的是require的rjs进行构建打包的,了解rjs的都知道,它会把项目所有依赖都打包在一个文件里,如果项目中有很多页面依赖这个模块,那么rjs并不会把这个模块提取出来作为公共模块,所以就会有很多复制性的内容,所以项目自然臃肿。
解决方案:使用webpack配合相应的loader,来完成模块加载和构建的工作。
为什么呢?
。。。。
学习:
a.浏览器阻塞问题
现象:
页面在加载的时候从上往下开始加载和渲染的,当页面有很多分散的JS文件的时候,页面会先加载和解析头部的js文件(同步加载),此时页面渲染就被堵塞了
resolution:
我们可以放在底部去加载,把所有JS放在</body>之前去,这样就会解决了游览器堵塞的问题
b.js依赖问题
现象:
如果js文件之间是有相互依赖关系的,那么我们的js文件引入的顺序需要我们一定要注意,依赖性大的文件一定在最后引入,但是当依赖关系非常复杂的时候,代码的编写和维 护就非常复杂了。
resolution:
我们可以把所有的JS文件打包成一个JS文件【If,项目小,直接用 grunt 或者 glup 之类的工具,把所有的js代码合并为一个js,每次需要添加新文件的时候,在相关的配置中添加即可;Else,项目大那可以用AMD的方式加载:http://requirejs.org/,也可以用CMD的方式加载:http://seajs.org/docs/
】,但是依赖性(也就是顺序)我们还是没有办法。[怎么就没办法???在js中async=true/false(异步/同步)不就行了吗???]
未完待看:https://blog.csdn.net/hao134838/article/details/51834609 http://www.cnblogs.com/linfangshuhellowored/p/5657285.html
2. Intellij IDEA 与 Webstorm 的区别是什么,哪个更好?
答:首先,它们都是一个公司的,
Intellij IDEA : java + 前端(html,css,js)
Webstorm : 前端(html,css,js)
phpstorm : php +前端(html,css,js)
其次,Intellij idea虽然功能最强,其他软件的功能都可以靠装插件在Intellij idea上实现,但是写前端的页面体验是没有webstrom好的,如果想做到和webstorm类似的手感,需要手动配置很多选项。
3.AngularJS父子cntroller之间如何通信?
引用(引自转载自:https://github.com/tiw/angularjs-tutorial/blob/master/event.markdown)
事件是解耦良器,angularjs提供了很方便的事件机构。 发送事件可以用
$scope.$emit('name', 'args');
或者是
$scope.$broadcast('name', 'args');
要了解两者的差别, 首先要了解angularjs controller的scope的定义。 这里就不叙述了, 简单来说 angularjs controller的scope就是一个像是js的基于prototye的对象继承。
看看下面这个例子.
首先我们定义几个嵌套的controller。 (木有嵌套, 基本上也不会用事件, 当然事件也可 有$rootscope发出, 但这个首先慎用, 其次也是下面的一个特例)
<div ng-controller="ParentCtrl"> <div ng-controller="SelfCtrl"> <a class="btn" ng-click="click()">click me</a>
<div ng-controller="ChildCtrl"></div> </div> <div ng-controller="BroCtrl"></div>
</div>
这里我们有四个controller, 层级关系如下:
ParentCtrl
-> SelfCtrl (*)
-> ChildCtrl
-> BroCtrl
所有的事件都是由 SelfCtrl 发出去的.
broadcast
事件发送的方法:
$scope.$broadcast
值得注意的是发送的主语是 $scope, 因为所有的事件其实都是作用在scope上的。
broadcast 是从发送者向他的子scope发送时间的一个方法。 这里就是SelfCtrl发送, SelfCtrl 和 ChildCtrl 会接受到, 而ParentCtrl是不会收到的
事件的接受只有一个方法
$scope.$on
例子如下:
angular.module('TestApp', ['ng'])
.controller('ParentCtrl', function($scope) {
$scope.$on('to-child', function(e, d) {
console.log('关我毛事');
});
})
.controller('SelfCtrl', function($scope) {
$scope.click = function () {
$scope.$broadcast('to-child', 'haha');
$scope.$emit('to-parent', 'hehe');
}
})
.controller('ChildCtrl', function($scope){
$scope.$on('to-child', function(e, d) {
console.log('I\' the child, I got it', d);
});
})
.controller('BroCtrl', function($scope){
$scope.$on('to-child', function(e, d) {
console.log('关我毛事');
});
});
点击clickme后, 在console里是看不到“关我毛事“的, 原因嘛就是 “管他毛事啊”
Emit
了解了broadcast之后, emit可以用以此类推解释了。
angular.module('TestApp', ['ng'])
.controller('ParentCtrl', function($scope) {
$scope.$on('to-parent', function(e, d) {
console.log('we are the parent, I got it', d);
});
})
.controller('SelfCtrl', function($scope) {
$scope.click = function () {
$scope.$broadcast('to-child', 'haha');
$scope.$emit('to-parent', 'hehe');
}
})
.controller('ChildCtrl', function($scope){
$scope.$on('to-parent', function(e, d) {
console.log('关我毛事');
});
})
.controller('BroCtrl', function($scope){
$scope.$on('to-parent', function(e, d) {
console.log('关我毛事');
});
});
Notes
上面的例子可以看到, 事件和事件发生者的兄弟是没有关系的, 怎样都收不到。
验证
1.$scope.$broadcast('to-child', 'haha'); 的作用
<div ng-app="myApp" ng-controller="ParentCtrl">
<div ng-controller="SelfCtrl">
<a class="btn" ng-click="click()">{{self_click}}</a>
<div ng-controller="ChildCtrl">
<div ng-controller="GrandChildCtrl"></div>
</div>
</div>
<div ng-controller="BroCtrl"></div>
</div>
<script>
angular.module('myApp', ['ng'])
.controller('ParentCtrl', function($scope) {
$scope.$on('to-child', function(e, d) {
console.log('关我毛事');
});
$scope.$on('to-parent',function(e,d){
console.log('I am the parent',d);
})
})
.controller('SelfCtrl', function($scope) {
$scope.self_click="selfClick";
$scope.click = function () {
$scope.$broadcast('to-child', 'haha');
//$scope.$emit('to-parent', 'hehe');
}
})
.controller('GrandChildCtrl', function($scope){
$scope.$on('to-child', function(e, d) {
console.log('I\' the grandChild, I got it', d);
});
})
.controller('ChildCtrl', function($scope){
$scope.$on('to-child', function(e, d) {
console.log('I\' the child, I got it', d);
});
})
.controller('BroCtrl', function($scope){
$scope.$on('to-child', function(e, d) {
console.log('关我毛事');
});
});
</script>
效果:
说明:selfChild控制器,使用$scope.$broadcast只能将信息向下传递给其孩子控制器和孙子控制器,不能向上传给父控制器,也不能传给兄弟控制器;
2.$scope.$emit('to-child', 'haha'); 的作用
<div ng-app="myApp" ng-controller="ParentCtrl">
<div ng-controller="SelfCtrl">
<a class="btn" ng-click="click()">{{self_click}}</a>
<div ng-controller="ChildCtrl">
<div ng-controller="GrandChildCtrl"></div>
</div>
</div>
<div ng-controller="BroCtrl"></div>
</div>
<script>
angular.module('myApp', ['ng'])
.controller('ParentCtrl', function($scope) {
$scope.$on('to-child', function(e, d) {
console.log('关我毛事');
});
$scope.$on('to-parent',function(e,d){
console.log('I am the parent',d);
})
})
.controller('SelfCtrl', function($scope) {
$scope.self_click="selfClick";
$scope.click = function () {
//$scope.$broadcast('to-child', 'haha');
$scope.$emit('to-parent', 'hehe');
}
})
.controller('ChildCtrl', function($scope){
$scope.$on('to-child', function(e, d) {
console.log('I\' the child, I got it', d);
});
})
.controller('GrandChildCtrl', function($scope){
$scope.$on('to-child', function(e, d) {
console.log('I\' the grandChild, I got it', d);
});
})
.controller('BroCtrl', function($scope){
$scope.$on('to-child', function(e, d) {
console.log('关我毛事');
});
});
</script>
效果:
说明:SelfCtrl控制器,使用$emit()只能将信息向上传递给父控制器,不能传递给子孙控制器,也不能传给兄弟控制器。
实际应用
1.需求:页面加载后,显示SelfCtrl和ParentCtrl的内容,点击SelfCtrl后,使用上述通信原理,将ParentCtrl的默认内容修改为SelfCtrl的。
2.实现:
<div ng-app="myApp" ng-controller="ParentCtrl">
<p>父控制器:{{parent_p}}</p>
<div ng-controller="SelfCtrl">
<a class="btn" ng-click="click()">我:{{self_click}}</a>
<div ng-controller="ChildCtrl">
<div ng-controller="GrandChildCtrl"></div>
</div>
</div>
<div ng-controller="BroCtrl"></div>
</div>
<script>
angular.module('myApp', ['ng'])
.controller('ParentCtrl', function($scope) {
$scope.parent_p="parentP";
$scope.$on('to-child', function(e, d) {
console.log('关我毛事');
});
$scope.$on('to-parent',function(e,d){
console.log(e);
$scope.parent_p=e.targetScope.self_click;
console.log('I am the parent',d);
})
})
.controller('SelfCtrl', function($scope) {
$scope.self_click="selfClick";
$scope.click = function () {
//$scope.$broadcast('to-child', 'haha');
$scope.$emit('to-parent', 'hehe');
}
})
.controller('ChildCtrl', function($scope){
$scope.$on('to-child', function(e, d) {
console.log('I\' the child, I got it', d);
});
})
.controller('GrandChildCtrl', function($scope){
$scope.$on('to-child', function(e, d) {
console.log('I\' the grandChild, I got it', d);
});
})
.controller('BroCtrl', function($scope){
$scope.$on('to-child', function(e, d) {
console.log('关我毛事');
});
});
</script>
效果:
Vue之外的杂谈笔记的更多相关文章
- 最新 Vue 源码学习笔记
最新 Vue 源码学习笔记 v2.x.x & v3.x.x 框架架构 核心算法 设计模式 编码风格 项目结构 为什么出现 解决了什么问题 有哪些应用场景 v2.x.x & v3.x.x ...
- vue.js初学,笔记1,安装
最近学习vue.js,下面是笔记: 说明:因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,如果npm的服务器在中国就好了,所以我们乐于分享的淘宝团队干了这事.来自官网:"这 ...
- vue.js初始学习笔记&vue-cli
笔记一下: vue.js 安装,参考: http://www.cnblogs.com/wisewrong/p/6255817.html (vue-cli) http://www.cnblogs.com ...
- vue 2.0使用笔记
assets被排除在热重载监听目录之外,一些公共样式文件最好不要放在这个目录 webpack默认没有装less-loader,要.vue文件中使用less,需要npm install less les ...
- Vue官方文档笔记(二)
23.$refs是什么东东? 通过在标签上设置ref属性,然后在Vue实例方法中可以通过$refs拿到这些标签,如: <input ref="input"> metho ...
- 两万字Vue.js基础学习笔记
Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...
- 两万字Vue.js基础学习笔记(二)
Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了 首先,我们需要在HTM ...
- c#(asp.net)杂谈笔记
1.js解析json格式的时间 //转换json格式时间的方法 如Date(1340239979000)转换为正常 function ConvertJSONDateToJSDateObject(JSO ...
- 从零开始学习Vue.js,学习笔记
一.为什么学习vue.js methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn ...
随机推荐
- 编译原理之LL(1)文法的判断,递归下降分析程序
1. 文法 G(S): (1)S -> AB (2)A ->Da|ε (3)B -> cC (4)C -> aADC |ε (5)D -> b|ε 验证文法 G(S)是不 ...
- 关于jQuery MiniUI
jQuery MiniUI v3.0 jQuery MiniUI - 专业WebUI控件库.它能缩短开发时间,减少代码量,使开发者更专注于业务和服务端,轻松实现界面开发,带来绝佳的用户体验. http ...
- selenium-server-standalone下载网站
http://selenium-release.storage.googleapis.com/index.html
- opencv在VS2017上的环境搭建
最近开始做一个图像识别的小项目,需要安装opencv,VS里报的错迷的一批,网上教程好多,找了好长时间,终于找的两个解决了问题,在这儿记录一下. 安装很简单,在opencv官网(https://ope ...
- 解决RubyMine中puts中文显示乱码的问题
一个简单的ruby代码,puts一个中文,显示乱码 # -*- coding: utf-8 -*- puts "你好" require_relative 'calc.rb' # r ...
- 这几个 Chrome 的 Tab 增强插件你都用上了吗?
1.OneTab:将无数 Tab 合并在一个页面 很多时候我们在一个窗口打开太多的tab,每一个tab太小不容易管理,这时候使用OneTab能够把所有tab收起放在一个页面,点击就可打开该tab,非常 ...
- node http 模块 常用知识点记录
关于 node,总是断断续续的学一点,也只能在本地自己模拟实战,相信总会有实战的一天~~ http 作为服务端,开启服务,处理路由,响应等 http 作为客户端,发送请求 http.https.htt ...
- python-schedule模块(定时任务)基于官方文档总结
一.模块安装 pip3 install schedule 官方文档 二.常用的使用案例 #基本格式 #创建方法 def func(): print("方法") #创建定时 sche ...
- 资深架构师教你String 常量池、 String.itern()
什么是常量 用final修饰的成员变量表示常量,值一旦给定就无法改变! final修饰的变量有三种:静态变量.实例变量和局部变量,分别表示三种类型的常量. Class文件中的常量池 在Class文件结 ...
- 网络协议 3 - 物理层 和 MAC 层
在上一篇博文中,我们见证了 IP 地址的诞生,机器一旦有了 IP,就可以在网络的环境里和其他的机器展开沟通了. 今天,我们来认识下 物理层 和 MAC 层. 日常生活中,身为 90 后 ...